summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/UserCreateForm.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-25 07:52:15 +0100
committerJannik Schönartz2019-02-25 07:52:15 +0100
commitf42e850ad0778c147bead82a91d3805c81b66150 (patch)
tree2b5189a7f8a96ca4a15777a06a71581cd1b93ce3 /webapp/src/components/UserCreateForm.vue
parent[webapp/datatable] small design fixes (diff)
downloadbas-f42e850ad0778c147bead82a91d3805c81b66150.tar.gz
bas-f42e850ad0778c147bead82a91d3805c81b66150.tar.xz
bas-f42e850ad0778c147bead82a91d3805c81b66150.zip
[webapp/user] Add user management module for creating / deleting user accounts
Diffstat (limited to 'webapp/src/components/UserCreateForm.vue')
-rw-r--r--webapp/src/components/UserCreateForm.vue188
1 files changed, 188 insertions, 0 deletions
diff --git a/webapp/src/components/UserCreateForm.vue b/webapp/src/components/UserCreateForm.vue
new file mode 100644
index 0000000..616ca3c
--- /dev/null
+++ b/webapp/src/components/UserCreateForm.vue
@@ -0,0 +1,188 @@
+<i18n>
+{
+ "en": {
+ "confirmPassword": "Confirm Password",
+ "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.",
+ "username": "Username",
+ "usernameEmptyError": "Username can not be empty.",
+ "usernameExistsError": "Username already taken.",
+ "usernameHasWhitespaces": "No whitespaces allowed in the username."
+ },
+ "de": {
+ "confirmPassword": "Passwort bestätigen",
+ "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.",
+ "username": "Benutzername",
+ "usernameEmptyError": "Benutzername kann nicht leer sein.",
+ "usernameExistsError": "Benutzername existiert bereits.",
+ "usernameHasWhitespaces": "Leerzeichen sind im Benutzername nicht erlaubt."
+ }
+}
+</i18n>
+
+<template>
+ <v-form class="signup-form" ref="form" v-model="valid">
+ <v-text-field
+ validate-on-blur
+ :label="$t('username')"
+ v-model="user.username"
+ :rules="usernameRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ :label="$t('password')"
+ v-model="user.password"
+ :rules="passwordRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ type="password"
+ :label="$t('confirmPassword')"
+ v-model="user.confirmPassword"
+ :rules="confirmPasswordRules"
+ autocomplete="off"
+ ></v-text-field>
+ <v-text-field
+ :label="$t('name')"
+ autocomplete="off"
+ v-model="user.name"
+ ></v-text-field>
+ <v-text-field
+ validate-on-blur
+ :label="$t('email')"
+ :rules="emailRules"
+ autocomplete="off"
+ v-model="user.email"
+ ></v-text-field>
+ </v-form>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'UserCreateForm',
+ props: ['id', 'value'],
+ data () {
+ return {
+ valid: true,
+ usernameError: false,
+ usernameExistsError: false,
+ usernameRules: [
+ v => !!v || this.$t('usernameEmptyError'),
+ v => !this.usernameError || this.$t('usernameError'),
+ v => !/\s/.test(v) || this.$t('usernameHasWhitespaces'),
+ v => this.usernameTakenValidation(v) || this.$t('usernameExistsError')
+ ],
+ passwordRules: [
+ v => this.pwRequired(v) || this.$t('passwordEmptyError'),
+ v => this.pwLength(v) || this.$t('passwordLengthError')
+ ],
+ confirmPasswordRules: [
+ v => this.pwRequired(v) || this.$t('passwordEmptyError'),
+ v => v === this.user.password || this.$t('passwordMatchError')
+ ],
+ confirmPasswordError: false,
+ emailRules: [
+ v => this.$validateEmail(v) || this.$t('emailError')
+ ],
+ user: {
+ username: '',
+ password: '',
+ confirmPassword: '',
+ name: '',
+ email: ''
+ }
+ }
+ },
+ computed: {
+ ...mapState('users', ['dialog']),
+ show () { return this.dialog.show }
+ },
+ watch: {
+ show (value) {
+ if (value) {
+ this.$refs.form.resetValidation()
+ this.loadForm()
+ }
+ },
+ value: {
+ deep: true,
+ handler () {
+ this.user = this.value
+ }
+ },
+ user: {
+ deep: true,
+ handler () {
+ this.$emit('input', this.user)
+ }
+ }
+ },
+ methods: {
+ validate () {
+ return this.$refs.form.validate()
+ },
+ setUsernameTakenError () {
+ this.usernameExistsError = true
+ this.$refs.form.validate()
+ },
+ usernameTakenValidation (v) {
+ if (this.id) return true
+ else return !this.usernameExistsError
+ },
+ pwRequired (v) {
+ if (!!v || this.id) return true
+ else return false
+ },
+ pwLength (v) {
+ if (this.id && !v) return true
+ else return v.length >= 8
+ },
+ loadForm () {
+ if (this.id) this.loadUser(this.id)
+ else this.clearForm()
+ },
+ loadUser (id) {
+ this.$http('/api/users/' + id).then(response => {
+ let user = response.data
+ this.user.username = user.username
+ this.user.email = user.email
+ this.user.name = user.name
+ this.user.password = ''
+ this.user.confirmPassword = ''
+ })
+ },
+ clearForm () {
+ this.user.username = ''
+ this.user.email = ''
+ this.user.name = ''
+ this.user.password = ''
+ this.user.confirmPassword = ''
+ }
+ },
+ created () {
+ this.loadForm()
+ }
+}
+</script>
+
+<style scoped>
+.signup-form {
+ width: 300px;
+}
+</style>