summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/StartPageSetup.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-22 02:59:26 +0100
committerJannik Schönartz2019-02-22 02:59:26 +0100
commit892a048d072d05886951bcb92e6b61c2094a6463 (patch)
tree2ff89b4d69c829304f55d529203eed985aaac413 /webapp/src/components/StartPageSetup.vue
parentrework user api to rest (diff)
downloadbas-892a048d072d05886951bcb92e6b61c2094a6463.tar.gz
bas-892a048d072d05886951bcb92e6b61c2094a6463.tar.xz
bas-892a048d072d05886951bcb92e6b61c2094a6463.zip
[authentication] Implement initial root account setup
[backend] Reworked authentication library to the api structure Add authentication api to remove the login routes from the router.js [webapp] Split login Page in StartPage + Login/Setup Add Setup Page for the initial root creation
Diffstat (limited to 'webapp/src/components/StartPageSetup.vue')
-rw-r--r--webapp/src/components/StartPageSetup.vue156
1 files changed, 156 insertions, 0 deletions
diff --git a/webapp/src/components/StartPageSetup.vue b/webapp/src/components/StartPageSetup.vue
new file mode 100644
index 0000000..71ead8f
--- /dev/null
+++ b/webapp/src/components/StartPageSetup.vue
@@ -0,0 +1,156 @@
+<i18n>
+{
+ "en": {
+ "confirmPassword": "Confirm Password",
+ "createRoot": "There are no users yet, create the root account.",
+ "email": "E-Mail",
+ "emailError": "E-mail must be valid.",
+ "name": "Name",
+ "password": "Password",
+ "passwordEmptyError": "Password can not be empty.",
+ "passwordLengthError": "Minimum 8 characters required.",
+ "passwordMatchError": "Passwords do not match.",
+ "rootCreated": "Root account successfully created.",
+ "username": "Username",
+ "usernameEmptyError": "Username can not be empty."
+ },
+ "de": {
+ "confirmPassword": "Passwort bestätigen",
+ "createRoot": "Es gibt noch keine Benutzer, erstelle den Root-Account.",
+ "email": "E-Mail",
+ "emailError": "Keine gültige E-Mail.",
+ "name": "Name",
+ "password": "Passwort",
+ "passwordEmptyError": "Passwort kann nicht leer sein.",
+ "passwordLengthError": "Es sind mindestens 8 Zeichen erforderlich.",
+ "passwordMatchError": "Passwörter stimmen nicht überein.",
+ "rootCreated": "Der Root Account wurde erfolgreich erstellt.",
+ "username": "Benutzername",
+ "usernameEmptyError": "Benutzername kann nicht leer sein."
+ }
+}
+</i18n>
+
+<template>
+ <div class="setup-page">
+ <label style="color: red; font-size: large">{{ $t('createRoot') }}</label>
+ <v-form class="setup-form" ref="form" v-model="valid" lazy-validation @submit.prevent="setup">
+ <v-text-field
+ validate-on-blur
+ :label="$t('username')"
+ v-model="username"
+ :rules="usernameRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ :label="$t('password')"
+ v-model="password"
+ :rules="passwordRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ :label="$t('confirmPassword')"
+ v-model="confirmPassword"
+ :rules="confirmPasswordRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ :label="$t('name')"
+ autocomplete="off"
+ v-model="name"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ :label="$t('email')"
+ :rules="emailRules"
+ autocomplete="off"
+ v-model="email"
+ ></v-text-field>
+ <v-btn type="submit" class="setup-button primary" raised>{{ $t('signup') }}</v-btn>
+ </v-form>
+ </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+ name: 'StartPageSetup',
+ data () {
+ return {
+ valid: true,
+ username: '',
+ usernameError: false,
+ usernameRules: [
+ v => !!v || this.$t('usernameEmptyError'),
+ v => !this.usernameError || this.$t('usernameError')
+ ],
+ password: '',
+ passwordError: false,
+ passwordRules: [
+ v => !!v || this.$t('passwordEmptyError'),
+ v => v.length >= 8 || this.$t('passwordLengthError'),
+ v => !this.passwordError || this.$t('passwordError')
+ ],
+ confirmPassword: '',
+ confirmPasswordRules: [
+ v => !!v || this.$t('passwordEmptyError'),
+ v => v === this.password || this.$t('passwordMatchError')
+ ],
+ confirmPasswordError: false,
+ email: '',
+ emailRules: [
+ v => this.validateEmail(v) || this.$t('emailError')
+ ],
+ name: ''
+ }
+ },
+ methods: {
+ // Function for validating the e-mail.
+ validateEmail (email) {
+ // Removed escape before [ because eslint told me so.
+ var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+ return re.test(String(email).toLowerCase())
+ },
+ setup () {
+ if (this.$refs.form.validate()) {
+ this.$http.post('/api/authentication/setup', { username: this.username, password: this.password, name: this.name, email: this.email }).then(response => {
+ this.$snackbar({ color: 'success', text: this.$t('rootCreated'), timeout: 15000 })
+ this.$router.replace({ name: 'login' })
+ })
+ }
+ }
+ },
+ beforeRouteEnter (to, from, next) {
+ // If there are already users in the db, redirect to the login page.
+ Vue.prototype.$http.post('/api/authentication/setup').then(result => {
+ if (result.data.status !== 'SUCCESS') {
+ next({ name: 'login' })
+ } else {
+ next()
+ }
+ })
+ }
+}
+</script>
+
+<style scoped>
+.setup-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.setup-form {
+ width: 300px;
+}
+
+.setup-button {
+ margin-top: 20px;
+ float: right;
+}
+</style>