feat(User Id): UserId forced to be on lower case

src/components/UserNew.vue

@@ -8,7 +8,7 @@
         <div class="field-body">
           <div class="field">
             <p class="control">
-              <input :readonly="isMainUser" class="input" type="text" v-model="newUser.userId" />
+              <input :readonly="isMainUser" class="input" type="text" v-model="userId" />
             </p>
           </div>
         </div>
@@ -59,6 +59,7 @@ export default class UserNew extends Vue {
   public user!: IUser | null
   @Model('input', { type: Object, required: true })
   public newUser!: IUser
+  private localeUserId = (this.newUser.userId || '').toLowerCase()
 
   public maxChar(user: IUser): number {
     return 20 - (user.alias ? user.alias.length : 0)
@@ -70,6 +71,20 @@ export default class UserNew extends Vue {
     }
     return !!this.user && this.user.userId === this.newUser.userId
   }
+
+  public set userId(newUserId: string) {
+    this.localeUserId = (newUserId || '').toLowerCase()
+  }
+  public get userId(): string {
+    return this.localeUserId
+  }
+
+  @Watch('localeUserId', { immediate: true })
+  public onLocaleUserIdChange(userId: string) {
+    if (this.newUser.userId !== userId) {
+      this.newUser.userId = userId
+    }
+  }
 }
 </script>
 

src/views/User.vue

@@ -100,24 +100,6 @@
                   </div>
                 </div>
               </div>
-              <!-- <div class="field is-horizontal">
-                <div class="field-label is-normal">
-                  <label class="label">email</label>
-                </div>
-                <div class="field-body">
-                  <div class="field">
-                    <p class="control">
-                      <input
-                        required
-                        class="input"
-                        type="email"
-                        @keyup.enter="register"
-                        v-model.trim="email"
-                      >
-                    </p>
-                  </div>
-                </div>
-              </div>-->
               <div class="field is-horizontal">
                 <div class="field-label is-normal">
                   <label class="label" v-t="'user.password'"></label>
@@ -250,7 +232,6 @@ export default class User extends Vue {
   @Action
   public remove!: any
   public activeTab: string = 'login'
-  public userId: string = ''
   public email: string = ''
   public password: string = ''
   public confirmPassword: string = ''
@@ -260,6 +241,7 @@ export default class User extends Vue {
   public show: boolean = false
   public replicate: boolean = false
   public confirmed: boolean = false
+  private localeUserId: string = ''
 
   public mounted(): void {
     if (this.premail) {
@@ -349,6 +331,14 @@ export default class User extends Vue {
   public get slugEmail(): string {
     return slug(this.email)
   }
+
+  public set userId(newUserId: string) {
+    this.localeUserId = (newUserId || '').toLowerCase()
+  }
+
+  public get userId() {
+    return this.localeUserId
+  }
 }
 </script>