Merge pull request #474 from YunoHost/merge-firstname-and-lastname

Merge firstname and lastname info

app/src/i18n/locales/en.json

@@ -356,9 +356,10 @@
     "path": "Path",
     "perform": "Perform",
     "placeholder": {
-        "username": "johndoe",
-        "firstname": "John",
-        "lastname": "Doe",
+        "username": "samsmith",
+        "fullname": "Sam Smith",
+        "firstname": "Sam",
+        "lastname": "Smith",
         "groupname": "My group name",
         "domain": "my-domain.com",
         "file": "Browse a file or drag and drop it"

app/src/i18n/locales/fr.json

@@ -335,8 +335,9 @@
         "domain": "mon-domaine.fr",
         "groupname": "Le nom de mon groupe",
         "lastname": "Dupont",
-        "firstname": "Jean",
-        "username": "jeandupont",
+        "firstname": "Camille",
+        "fullname": "Camille Dupont",
+        "username": "camilledupont",
         "file": "Parcourir un fichier ou le faire glisser et déposer"
     },
     "perform": "Exécuter",

app/src/store/data.js

@@ -79,12 +79,11 @@ export default {
       Vue.set(state.users_details, username, userData)
       if (!state.users) return
       const user = state.users[username]
-      for (const key of ['firstname', 'lastname', 'mail']) {
+      for (const key of ['fullname', 'mail']) {
         if (user[key] !== userData[key]) {
           Vue.set(user, key, userData[key])
         }
       }
-      Vue.set(user, 'fullname', `${userData.firstname} ${userData.lastname}`)
     },
 
     'UPDATE_USERS_DETAILS' (state, payload) {

app/src/views/user/UserCreate.vue

@@ -9,26 +9,7 @@
       <form-field v-bind="fields.username" v-model="form.username" :validation="$v.form.username" />
 
       <!-- USER FULLNAME -->
-      <form-field
-        v-bind="fields.fullname" :validation="$v.form.fullname"
-      >
-        <template #default="{ self }">
-          <b-input-group>
-            <template v-for="fname in ['firstname', 'lastname']">
-              <b-input-group-prepend :key="fname + 'prepend'">
-                <b-input-group-text :id="fname + '-label'" tag="label">
-                  {{ self[fname].label }}
-                </b-input-group-text>
-              </b-input-group-prepend>
-
-              <input-item
-                v-bind="self[fname]" v-model="form.fullname[fname]" :key="fname + 'input'"
-                :name="self[fname].id" :aria-labelledby="fname + '-label'"
-              />
-            </template>
-          </b-input-group>
-        </template>
-      </form-field>
+      <form-field v-bind="fields.fullname" :validation="$v.form.fullname" v-model="form.fullname" />
       <hr>
 
       <!-- USER MAIL DOMAIN -->
@@ -82,10 +63,7 @@ export default {
 
       form: {
         username: '',
-        fullname: {
-          firstname: '',
-          lastname: ''
-        },
+        fullname: '',
         domain: '',
         password: '',
         confirmation: ''
@@ -104,18 +82,9 @@ export default {
 
         fullname: {
           label: this.$i18n.t('user_fullname'),
-          id: 'fullname',
           props: {
-            firstname: {
-              id: 'firstname',
-              label: this.$i18n.t('common.firstname'),
-              placeholder: this.$i18n.t('placeholder.firstname')
-            },
-            lastname: {
-              id: 'lastname',
-              label: this.$i18n.t('common.lastname'),
-              placeholder: this.$i18n.t('placeholder.lastname')
-            }
+            id: 'fullname',
+            placeholder: this.$i18n.t('placeholder.fullname')
           }
         },
 
@@ -156,10 +125,7 @@ export default {
     return {
       form: {
         username: { required, alphalownum_, notInUsers: unique(this.userNames) },
-        fullname: {
-          firstname: { required, name },
-          lastname: { required, name }
-        },
+        fullname: { required, name },
         domain: { required },
         password: { required, passwordLenght: minLength(8) },
         confirmation: { required, passwordMatch: sameAs('password') }
@@ -189,10 +155,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#lastname-label {
-  border-left: 0;
-}
-
 .custom-select {
   flex-basis: 40%;
 }

app/src/views/user/UserEdit.vue

@@ -8,26 +8,9 @@
       <!-- USERNAME (disabled) -->
       <form-field v-bind="fields.username" />
 
-      <!-- USER FULLNAME (FIXME quite a mess, but will be removed)-->
-      <form-field v-bind="fields.fullname" :validation="$v.form.fullname">
-        <template #default="{ self }">
-          <b-input-group>
-            <template v-for="name_ in ['firstname', 'lastname']">
-              <b-input-group-prepend :key="name_ + 'prepend'">
-                <b-input-group-text :id="name_ + '-label'" tag="label">
-                  {{ self[name_].label }}
-                </b-input-group-text>
-              </b-input-group-prepend>
+      <!-- USER FULLNAME -->
+      <form-field v-bind="fields.fullname" v-model="form.fullname" :validation="$v.form.fullname" />
 
-              <input-item
-                v-bind="self[name_]" v-model.trim="form.fullname[name_]" :key="name_ + 'input'"
-                :name="self[name_].id" :aria-labelledby="name_ + '-label'"
-                :state="$v.form.fullname[name_].$invalid && $v.form.fullname.$anyDirty ? false : null"
-              />
-            </template>
-          </b-input-group>
-        </template>
-      </form-field>
       <hr>
 
       <!-- USER EMAIL -->
@@ -137,7 +120,7 @@ export default {
       ],
 
       form: {
-        fullname: { firstname: '', lastname: '' },
+        fullname: '',
         mail: { localPart: '', separator: '@', domain: '' },
         mailbox_quota: '',
         mail_aliases: [],
@@ -157,18 +140,9 @@ export default {
 
         fullname: {
           label: this.$i18n.t('user_fullname'),
-          id: 'fullname',
           props: {
-            firstname: {
-              id: 'firstname',
-              label: this.$i18n.t('common.firstname'),
-              placeholder: this.$i18n.t('placeholder.firstname')
-            },
-            lastname: {
-              id: 'lastname',
-              label: this.$i18n.t('common.lastname'),
-              placeholder: this.$i18n.t('placeholder.lastname')
-            }
+            id: 'fullname',
+            placeholder: this.$i18n.t('placeholder.fullname')
           }
         },
 
@@ -220,10 +194,7 @@ export default {
 
   validations: {
     form: {
-      fullname: {
-        firstname: { required, name },
-        lastname: { required, name }
-      },
+      fullname: { required, name },
       mail: {
         localPart: { required, email: emailLocalPart }
       },
@@ -246,11 +217,7 @@ export default {
       this.fields.mail.props.choices = this.domainsAsChoices
       this.fields.mail_aliases.props.choices = this.domainsAsChoices
 
-      this.form.fullname = {
-        // Copy value to avoid refering to the stored user data
-        firstname: user.firstname.valueOf(),
-        lastname: user.lastname.valueOf()
-      }
+      this.form.fullname = user.fullname
       this.form.mail = adressToFormValue(user.mail)
       if (user['mail-aliases']) {
         this.form.mail_aliases = user['mail-aliases'].map(mail => adressToFormValue(mail))
@@ -334,10 +301,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#lastname-label {
-  border-left: 0;
-}
-
 .mail-list {
   display: flex;
   justify-items: stretch;