From 04fa1ecf01ebd080efc38ab6b6f88af76aa70a97 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Thu, 16 Jul 2020 19:18:43 +0200
Subject: [PATCH] add validation on UserCreate view

---
 app/src/views/user/UserCreate.vue | 30 +++++++++++++++++++++++++-----
 app/src/views/user/UserList.vue   |  2 +-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index ccc6e1d3..930b0639 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -3,7 +3,7 @@
     <breadcrumb />
 
     <b-card :header="$t('users_new')" header-tag="h2">
-      <b-form id="user-create" @submit="onSubmit">
+      <b-form id="user-create" @submit.prevent="onSubmit">
         <b-form-group
           label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
           :label="$t('user_username')" label-for="input-username" label-class="test"
@@ -89,7 +89,11 @@
           <b-input
             id="input-password" placeholder="••••••••"
             v-model="form.password" type="password" required
+            :state="validation.password" @input="validatePassword"
           />
+          <b-form-invalid-feedback :state="validation.password">
+            {{ $t('passwords_too_short') }}
+          </b-form-invalid-feedback>
         </b-form-group>
 
         <b-form-group
@@ -100,7 +104,11 @@
           <b-input
             id="input-confirmation" placeholder="••••••••"
             v-model="form.confirmation" type="password" required
+            :state="validation.confirmation" @input="validatePassword"
           />
+          <b-form-invalid-feedback :state="validation.confirmation">
+            {{ $t('passwords_dont_match') }}
+          </b-form-invalid-feedback>
         </b-form-group>
       </b-form>
 
@@ -128,6 +136,10 @@ export default {
         mailbox_quota: '',
         password: '',
         confirmation: ''
+      },
+      validation: {
+        password: null,
+        confirmation: null
       }
     }
   },
@@ -137,18 +149,26 @@ export default {
     }
   },
   methods: {
-    onSubmit (e) {
-      console.log('submit', this.form)
-      e.preventDefault()
+    onSubmit () {
       const data = this.form
+      for (const key in this.validation) {
+        console.log(this.validation[key] === false, this.validation[key])
+        if (this.validation[key] === false) return
+      }
       const quota = data.mailbox_quota
       data.mailbox_quota = parseInt(quota) ? quota + 'M' : 0
       data.mail = `${data.email}@${data.domain}`
+      console.log('go')
       // TODO post data
+    },
+    validatePassword () {
+      const { password, confirmation } = this.form
+      this.validation.password = password.length >= 8 ? null : false
+      this.validation.confirmation = password === confirmation ? null : false
     }
   },
   created () {
-    this.$store.dispatch('FETCH', 'domains')
+    this.$store.dispatch('FETCH', { uri: 'domains' })
   }
 }
 </script>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index efb12fce..ec146efe 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -73,7 +73,7 @@ export default {
     }
   },
   async created () {
-    this.$store.dispatch('FETCH', 'users')
+    this.$store.dispatch('FETCH', { uri: 'users' })
   }
 }
 </script>