reflect changes made to AdressInputSelect to views

app/src/components/AdressInputSelect.vue

@@ -29,7 +29,7 @@ export default {
     id: { type: String, default: null },
     state: { type: null, default: null },
     feedbackId: { type: String, default: null },
-    defaultOption: { type: String, default: null }
+    defaultOption: { type: Number, default: 0 }
   },
 
   data () {
@@ -49,12 +49,16 @@ export default {
         return this.value.split(this.separator)[0]
       },
       set (value) {
+        // FIXME, ugly hack since the `reactiveOption` v-model isn't set when `value` change
+        if (this.reactiveOption !== this.option) {
+          this.option = this.reactiveOption
+        }
         this.input = value
       }
     },
     reactiveOption: {
       get () {
-        return this.value.split(this.separator)[1] || this.options[0]
+        return this.value.split(this.separator)[1] || this.options[this.defaultOption]
       },
       set (value) {
         // FIXME, ugly hack since the `reactiveInput` v-model isn't set when `value` change

app/src/views/user/UserCreate.vue

@@ -52,9 +52,9 @@
 
     <!-- USER EMAIL -->
     <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
-      <splitted-mail-input
+      <adress-input-select
-        id="input-email" feedback="email-feedback"
+        id="input-email" feedback-id="email-feedback"
-        v-model="form.mail" :domains="domains"
+        v-model="form.mail" :options="domains"
         :state="isValid.mail" @input="validateEmail"
       />
 
@@ -113,7 +113,7 @@
 
 <script>
 import BasicForm from '@/components/BasicForm'
-import SplittedMailInput from '@/components/SplittedMailInput'
+import AdressInputSelect from '@/components/AdressInputSelect'
 
 export default {
   name: 'UserCreate',
@@ -209,7 +209,7 @@ export default {
     this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
   },
   components: {
-    SplittedMailInput,
+    AdressInputSelect,
     BasicForm
   }
 }

app/src/views/user/UserEdit.vue

@@ -42,10 +42,11 @@
 
     <!-- USER EMAIL -->
     <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
-      <splitted-mail-input
+      <adress-input-select
-        id="input-email" feedback="email-feedback"
+        id="input-email" feedback-id="email-feedback"
-        v-model="form.mail" :domains="domains"
+        v-model="form.mail" :options="domains"
         :state="isValid.mail" @input="validateEmail"
+        :placeholder="$t('placeholder.username')"
       />
 
       <b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
@@ -70,10 +71,10 @@
     <!-- MAIL ALIASES -->
     <hr>
     <b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
-      <splitted-mail-input
+      <adress-input-select
         v-for="(alias, index) in form['mail-aliases']" :key="index"
-        feedback="mail-aliases-feedback"
+        v-model="form['mail-aliases'][index]" :options="domains"
-        v-model="form['mail-aliases'][index]" :domains="domains"
+        :placeholder="$t('placeholder.username')"
       />
     </b-form-group>
 
@@ -125,7 +126,7 @@
 
 <script>
 import BasicForm from '@/components/BasicForm'
-import SplittedMailInput from '@/components/SplittedMailInput'
+import AdressInputSelect from '@/components/AdressInputSelect'
 
 export default {
   name: 'UserEdit',
@@ -170,6 +171,7 @@ export default {
 
   methods: {
     onSubmit () {
+      console.log(this.form['mail-aliases'])
       for (const key in this.isValid) {
         if (this.isValid[key] === false) return
       }
@@ -211,9 +213,10 @@ export default {
       })
     },
 
-    validateEmail () {
+    validateEmail (mail) {
       // FIXME check allowed characters
-      const isValid = this.form.mail.split('@')[0].match('^[A-Za-z0-9-_]+$')
+      console.log('validate', mail)
+      const isValid = mail.split('@')[0].match('^[A-Za-z0-9-_]+$')
       this.error.mail = isValid ? '' : this.$i18n.t('form_errors.email_syntax')
       this.isValid.mail = isValid ? null : false
     },
@@ -233,6 +236,7 @@ export default {
       this.form.firstname = userData.firstname
       this.form.lastname = userData.lastname
       this.form.mail = userData.mail
+      console.log('fetch', this.form.mail)
       this.form['mail-aliases'] = userData['mail-aliases'] ? [...userData['mail-aliases'], ''] : ['']
       this.form['mail-forward'] = userData['mail-forward'] ? [...userData['mail-forward'], ''] : ['']
       if (userData['mailbox-quota'].limit !== 'No quota') {
@@ -241,7 +245,7 @@ export default {
     })
   },
   components: {
-    SplittedMailInput,
+    AdressInputSelect,
     BasicForm
   }
 }