testing some form validation

app/src/locales/en.json

@@ -119,6 +119,11 @@
     "experimental_warning": "Warning: this feature is experimental and not consider stable, you shouldn't be using it except if you know what you are doing.",
     "firewall": "Firewall",
     "footer_version": "Powered by {ynh} {version} ({repo}).",
+    "form_errors": {
+        "username_syntax": "Invalid username: Must be lower-case alphanumeric and underscore characters only",
+        "username_exists": "The user '{user}' already exists",
+        "email_syntax": "Invalid email: Must be alphanumeric, underscore and dash characters only (e.g. someone@example.com, s0me-1@example.com)"
+    },
     "form_input_example": "Example: %s",
     "from_to": "from %s to %s",
     "good_practices_about_admin_password": "You are now about to define a new admin password. The password should be at least 8 characters - though it is good practice to use longer password (i.e. a passphrase) and/or to use various kind of characters (uppercase, lowercase, digits and special characters).",

app/src/scss/main.scss

@@ -30,6 +30,12 @@ body {
   color: #333;
 }
 
+.input-group.is-invalid {
+  ~ .invalid-feedback {
+    display: block;
+  }
+}
+
 
 // Fork-awesome overrides
 .fa-fw {

app/src/views/Login.vue

@@ -58,9 +58,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.input-group.is-invalid {
-  ~ .invalid-feedback {
-    display: block;
-  }
-}
 </style>

app/src/views/user/UserCreate.vue

@@ -8,9 +8,15 @@
           label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
           :label="$t('user_username')" label-for="input-username" label-class="test"
         >
-          <b-input id="input-username" :placeholder="$t('placeholder.username')"
-                   v-model="form.username" required
+          <b-input
+            id="input-username" :placeholder="$t('placeholder.username')"
+            aria-describedby="username-feedback" required
+            v-model="form.username" :state="isValid.username"
+            @input="validateUsername" @blur="populateEmail"
           />
+          <b-form-invalid-feedback id="username-feedback" :state="isValid.username">
+            {{ this.error.username }}
+          </b-form-invalid-feedback>
         </b-form-group>
 
         <b-form-group label-cols-sm="5" label-cols-lg="4" label-cols-xl="3">
@@ -51,12 +57,14 @@
 
         <b-form-group
           label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
-          :label="$t('user_email')" label-for="input-mail"
+          :label="$t('user_email')" label-for="input-email"
         >
           <b-input-group>
             <b-input
-              id="input-mail" :placeholder="$t('placeholder.username')"
+              id="input-email" :placeholder="$t('placeholder.username')"
+              aria-describedby="email-feedback"
               v-model="form.email" required
+              :state="isValid.email" @input="validateEmail"
             />
 
             <b-input-group-append>
@@ -67,6 +75,10 @@
               <b-select v-model="form.domain" :options="domains" required />
             </b-input-group-append>
           </b-input-group>
+
+          <b-form-invalid-feedback id="email-feedback" :state="isValid.email">
+            {{ this.error.email }}
+          </b-form-invalid-feedback>
         </b-form-group>
 
         <b-form-group
@@ -88,10 +100,11 @@
         >
           <b-input
             id="input-password" placeholder="••••••••"
-            v-model="form.password" type="password" required
-            :state="validation.password" @input="validatePassword"
+            aria-describedby="password-feedback" required
+            v-model="form.password" type="password"
+            :state="isValid.password" @input="validatePassword"
           />
-          <b-form-invalid-feedback :state="validation.password">
+          <b-form-invalid-feedback id="password-feedback" :state="isValid.password">
             {{ $t('passwords_too_short') }}
           </b-form-invalid-feedback>
         </b-form-group>
@@ -103,13 +116,18 @@
         >
           <b-input
             id="input-confirmation" placeholder="••••••••"
-            v-model="form.confirmation" type="password" required
-            :state="validation.confirmation" @input="validatePassword"
+            aria-describedby="confirmation-feedback" required
+            v-model="form.confirmation" type="password"
+            :state="isValid.confirmation" @input="validatePassword"
           />
-          <b-form-invalid-feedback :state="validation.confirmation">
+          <b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
             {{ $t('passwords_dont_match') }}
           </b-form-invalid-feedback>
         </b-form-group>
+
+        <b-form-invalid-feedback id="global-feedback" :state="server.isValid">
+          {{ this.server.error }}
+        </b-form-invalid-feedback>
       </b-form>
 
       <template v-slot:footer>
@@ -137,43 +155,86 @@ export default {
         password: '',
         confirmation: ''
       },
-      validation: {
+      isValid: {
+        username: null,
+        email: null,
         password: null,
         confirmation: null
+      },
+      error: {
+        username: '',
+        email: ''
+      },
+      server: {
+        isValid: null,
+        error: ''
       }
     }
   },
+
   computed: {
     domains () {
       return this.$store.state.data.domains
     }
   },
-  watch: {
-    domains (domains) {
-      this.form.domain = domains[0]
-    }
-  },
+
   methods: {
     onSubmit () {
-      const data = this.form
-      for (const key in this.validation) {
-        if (this.validation[key] === false) return
+      for (const key in this.isValid) {
+        if (this.isValid[key] === false) return
       }
+
+      const data = JSON.parse(JSON.stringify(this.form))
       const quota = data.mailbox_quota
       data.mailbox_quota = parseInt(quota) ? quota + 'M' : 0
       data.mail = `${data.email}@${data.domain}`
-      // TODO post data
+
+      this.$store.dispatch('POST',
+        { uri: 'users', data, param: data.username, storeKey: '' }
+      ).catch(error => {
+        this.server.error = error.message
+        this.server.isValid = false
+      })
     },
+
+    populateEmail () {
+      if (this.form.email === '') {
+        this.form.email = this.form.username
+      }
+    },
+
+    validateUsername () {
+      const username = this.form.username
+      let error = ''
+      if (!username.match('^[a-z0-9_]+$')) {
+        // FIXME check allowed characters
+        error = this.$i18n.t('form_errors.username_syntax')
+      } else if (Object.keys(this.$store.state.data.users).includes(username)) {
+        error = this.$i18n.t('form_errors.username_exists', { user: username })
+      }
+      this.error.username = error
+      this.isValid.username = error === '' ? null : false
+    },
+
+    validateEmail () {
+      // FIXME check allowed characters
+      const isValid = this.form.email.match('^[A-Za-z0-9-_]+$')
+      this.error.email = isValid ? '' : this.$i18n.t('form_errors.email_syntax')
+      this.isValid.email = isValid ? null : false
+    },
+
     validatePassword () {
       const { password, confirmation } = this.form
-      this.validation.password = password.length >= 8 ? null : false
-      this.validation.confirmation = password === confirmation ? null : false
+      this.isValid.password = password.length >= 8 ? null : false
+      this.isValid.confirmation = password === confirmation ? null : false
     }
   },
+
   created () {
     this.$store.dispatch('FETCH', { uri: 'domains' }).then(domains => {
       this.form.domain = domains[0]
     })
+    this.$store.dispatch('FETCH', { uri: 'users' })
   }
 }
 </script>