feat(Account Setting): Change user info display

src/views/accounts/AccountSetting.vue

@@ -19,21 +19,7 @@
     <div>
       <h3 class="subtitle is-3" v-t="'account.users'"></h3>
       <div class="columns is-multiline is-centered">
-        <div v-for="(user, k) in account.users" :key="k" class="column is-one-third">
-          <div class="card">
-            <div class="card-content">
-              <div class="content">
-                <span class="user-id">{{ user.userId }}</span>
-                (
-                {{ user.alias }}
-                <span
-                  v-if="user.email"
-                >- {{ user.email }}</span>
-                )
-              </div>
-            </div>
-          </div>
-        </div>
+        <div class="column">{{ account.users.map(u => getUserInfo(u)).join(', ')}}</div>
       </div>
       <h3 class="subtitle is-3">Ajouter des amis</h3>
       <div class="columns is-centered">
@@ -164,15 +150,25 @@ export default class AccountSetting extends BaseAccount {
       return
     }
     this.account.users = [...this.account.users, ...this.newUsers]
-    const ok: boolean = await accountService.update(this.account._id, this.account)
+    const ok: boolean = await accountService.update(
+      this.account._id,
+      this.account
+    )
     if (!ok) {
       notif.error(`Une erreur s'est produite.`)
       return
     }
-    notif.success(this.$tc('account.newUserAdded', this.newUsers.length).toString())
+    notif.success(
+      this.$tc('account.newUserAdded', this.newUsers.length).toString()
+    )
     this.newUsers = []
   }
 
+  public getUserInfo(user: IUser): string {
+    const email = (user.email && ` - ${user.email}`) || ''
+    return `${user.alias} (${user.userId}${email})`
+  }
+
   public validate(): boolean {
     if (!this.account) {
       return false