Merge branch '249-edit-profileName-validation' into 'dev'

Edit profile name and set password improvements

See merge request keanuapp/keanuapp-weblite!118

src/assets/translations/bo.json

@@ -3,6 +3,11 @@
         "name": "འདུ་འཛོམས།",
         "tag_line": "འབྲེལ་མཐུད་བྱོས།"
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "fallbacks": {
         "download_name": "ཕབ་ལེན།",
         "original_text": "<མ་ཡིག>",
@@ -106,7 +111,8 @@
         "set_language": "སྐད་ཡིག་བརྗེ་སྒྱུར།",
         "language_description": "འདུ་འཛོམས་སྐད་ཡིག་མང་པོའི་ནང་དུ་ཡོད།",
         "dont_see_yours": "ཁྱེད་ཀྱི་མིང་མཐོང་གི་མི་འདུག་གམ།",
-        "tell_us": "ང་ཚོར་ཤོོད།"
+        "tell_us": "ང་ཚོར་ཤོོད།",
+        "display_name_required": ""
     },
     "device_list": {
         "not_verified": "ར་སྤྲོད་བྱས་མི་འདུག",

src/assets/translations/de.json

@@ -1,5 +1,10 @@
 {
     "language_display_name": "Deutsch",
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "menu": {
         "start_private_chat": "Private Diskussion mit diesem Benutzer",
         "reply": "Antworten",
@@ -126,7 +131,8 @@
         "password_old": "Altes Passwort",
         "password_new": "Neues Kennwort",
         "password_repeat": "Wiederhole das neue Passwort",
-        "display_name": "Anzeigename"
+        "display_name": "Anzeigename",
+        "display_name_required": ""
     },
     "profile_info_popup": {
         "you_are": "Du bist",

src/assets/translations/en.json

@@ -4,6 +4,11 @@
     "name": "Convene",
     "tag_line": "Simply connect"
   },
+  "global": {
+    "save": "Save",
+    "password_didnot_match": "Password didn't match",
+    "password_hint": "Minimum 12 character containing atleast one numeric, one uppercase and one lowercase letter"
+  },
   "menu": {
     "start_private_chat": "Private chat with this user",
     "reply": "Reply",
@@ -140,7 +145,8 @@
     "password_old": "Old password",
     "password_new": "New password",
     "password_repeat": "Repeat new password",
-    "display_name": "Display name"
+    "display_name": "Display name",
+    "display_name_required": "Display name is required"
   },
   "profile_info_popup": {
     "you_are": "You are",

src/assets/translations/es.json

@@ -4,6 +4,11 @@
         "name": "Convene",
         "tag_line": "Simplemente conectar"
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "room_info": {
         "identity": "Has iniciado sesión como {displayName}.",
         "my_profile": "Mi perfil",
@@ -83,7 +88,8 @@
         "set_language": "Establece tu Idioma",
         "language_description": "Convine esta disponible en varios Idiomas.",
         "dont_see_yours": "¿No ves el tuyo?",
-        "tell_us": "Dinos."
+        "tell_us": "Dinos.",
+        "display_name_required": ""
     },
     "login": {
         "login": "Iniciar sesión",

src/assets/translations/fi.json

@@ -1,4 +1,9 @@
 {
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "menu": {
         "back": "TAKAISIN",
         "start_private_chat": "Yksityinen keskustelu tämän käyttäjän kanssa",
@@ -125,7 +130,8 @@
         "set_password": "Aseta salasana",
         "select_language": "Kieli",
         "password_old": "Vanha salasana",
-        "display_name": "Näyttönimi"
+        "display_name": "Näyttönimi",
+        "display_name_required": ""
     },
     "profile_info_popup": {
         "want_more": "Haluatko lisää?",

src/assets/translations/fr.json

@@ -1,4 +1,9 @@
 {
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "menu": {
         "edit": "Modifier",
         "start_private_chat": "Discussion privée avec cet utilisateur",
@@ -126,7 +131,8 @@
         "display_name": "Nom d’affichage",
         "title": "Mon profil",
         "set_password": "Définir un mot de passe",
-        "password_new": "Nouveau mot de passe"
+        "password_new": "Nouveau mot de passe",
+        "display_name_required": ""
     },
     "profile_info_popup": {
         "you_are": "Vous êtes",

src/assets/translations/it.json

@@ -1,4 +1,9 @@
 {
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "message": {
         "file_prefix": "File: ",
         "unread_messages": "Messaggi non letti",
@@ -125,7 +130,8 @@
         "display_name": "Nome visualizzato",
         "change_name": "Cambia il nome",
         "change_password": "Cambia la password",
-        "password_new": "Nuova password"
+        "password_new": "Nuova password",
+        "display_name_required": ""
     },
     "profile_info_popup": {
         "you_are": "Sei",

src/assets/translations/nb_NO.json

@@ -3,6 +3,11 @@
         "name": "Convene",
         "tag_line": ""
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "message": {
         "user_changed_guest_access_open": "{user} tillot gjester å ta del i rommet",
         "user_powerlevel_change_from_to": "{user} fra {powerOld} til {powerNew}",
@@ -98,7 +103,8 @@
         "set_password": "Sett passord",
         "title": "Min profil",
         "display_name": "Visningsnavn",
-        "password_repeat": "Gjenta nytt passord"
+        "password_repeat": "Gjenta nytt passord",
+        "display_name_required": ""
     },
     "login": {
         "password_required": "Passord kreves",

src/assets/translations/pt_BR.json

@@ -3,6 +3,11 @@
         "name": "Convocar",
         "tag_line": "Basta conectar"
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "invite": {
         "title": "Adiciona amigos",
         "done": "Feito",
@@ -153,7 +158,8 @@
         "password_old": "Senha antiga",
         "password_new": "Nova senha",
         "password_repeat": "Repita a nova senha",
-        "display_name": "Nome de exibição"
+        "display_name": "Nome de exibição",
+        "display_name_required": ""
     },
     "profile_info_popup": {
         "you_are": "Você é",

src/assets/translations/ro.json

@@ -3,6 +3,11 @@
         "name": "Convene",
         "tag_line": "Conectați pur și simplu"
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "menu": {
         "ok": "OK",
         "done": "Realizat",
@@ -129,7 +134,8 @@
         "change_name": "Schimbă numele",
         "set_password": "Setați parola",
         "temporary_identity": "Această identitate este temporară. Setați o parolă pentru a o utiliza din nou",
-        "title": "Profilul meu"
+        "title": "Profilul meu",
+        "display_name_required": ""
     },
     "login": {
         "login": "Autentificare",

src/assets/translations/ug.json

@@ -3,6 +3,11 @@
         "name": "Convene",
         "tag_line": ""
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "language_is_rtl": true,
     "menu": {
         "ok": "تامام",
@@ -221,7 +226,8 @@
         "change_name": "ئىسىم ئۆزگەرتىش",
         "set_password": "پارول بەلگىلەڭ",
         "temporary_identity": "بۇ كىملىك ۋاقىتلىق. قايتا ئىشلىتىش ئۈچۈن پارول بەلگىلەڭ",
-        "title": "مېنىڭ ئارخىپىم"
+        "title": "مېنىڭ ئارخىپىم",
+        "display_name_required": ""
     },
     "login": {
         "login": "‎كىرىش",

src/assets/translations/zh_Hans.json

@@ -3,6 +3,11 @@
         "name": "Convene",
         "tag_line": "只需连接"
     },
+    "global": {
+        "save": "",
+        "password_didnot_match": "",
+        "password_hint": ""
+    },
     "fallbacks": {
         "download_name": "下载",
         "original_text": "<原文>",
@@ -195,7 +200,8 @@
         "set_language": "设置您的语言",
         "language_description": "Convene 提供多种语言.",
         "dont_see_yours": "看不到你的？",
-        "tell_us": "告诉我们。"
+        "tell_us": "告诉我们。",
+        "display_name_required": ""
     },
     "new_room": {
         "status_avatar": "正在上传头像：{count}",

src/components/Profile.vue

@@ -103,13 +103,25 @@
           />
           <v-text-field
             v-model="newPassword1"
+            :append-icon="showPassword1 ? 'visibility' : 'visibility_off'"
+            :hint="$t('global.password_hint')"
+            :rules="[(v) => v ? !!v.match(passwordValidation) || $t('global.password_hint'):true]"
             :label="$t('profile.password_new')"
-            type="password"
+            counter="20"
+            maxlength="20"
+            :type="showPassword1 ? 'text' : 'password'"
+            @click:append="showPassword1 = !showPassword1"
+            @update:error="updateErrorState"
           />
           <v-text-field
             v-model="newPassword2"
+            :append-icon="showPassword2 ? 'visibility' : 'visibility_off'"
+            :rules="[(v) => v===newPassword1 || $t('global.password_didnot_match')]"
             :label="$t('profile.password_repeat')"
-            type="password"
+            counter="20"
+            maxlength="20"
+            :type="showPassword2 ? 'text' : 'password'"
+            @click:append="showPassword2 = !showPassword2"
           />
           <div class="red--text" v-if="passwordErrorMessage">
             {{ passwordErrorMessage }}
@@ -134,7 +146,7 @@
                 newPassword1
               )
             "
-            >{{ $t("menu.ok") }}</v-btn
+            >{{ $t("global.save") }}</v-btn
           >
         </v-card-actions>
       </v-card>
@@ -149,7 +161,11 @@
       <v-card>
         <v-card-title>{{ $t("profile.display_name") }}</v-card-title>
         <v-card-text>
-          <v-text-field v-model="editValue" />
+          <v-text-field
+            v-model="editValue"
+            :rules="[(v) => !!v || $t('profile.display_name_required')]"
+            required
+          />
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
@@ -165,7 +181,8 @@
               updateDisplayName(editValue);
               showEditDisplaynameDialog = false;
             "
-            >{{ $t("menu.ok") }}</v-btn
+            :disabled="!editValue"
+            >{{ $t("global.save") }}</v-btn
           >
         </v-card-actions>
       </v-card>
@@ -205,12 +222,16 @@ export default {
       showLogoutPopup: false,
       editValue: null,
       password: null,
+      showPassword1: false,
+      showPassword2: false,
+      passwordValidation: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{12,20}$/,
       newPassword1: null,
       newPassword2: null,
       settingPassword: false,
       passwordErrorMessage: null,
       isAvatarLoaded: true,
-      loadValue: 0
+      loadValue: 0,
+      newPasswordHasError: false
     };
   },
 
@@ -253,6 +274,7 @@ export default {
 
     passwordsMatch() {
       return (
+        !this.newPasswordHasError &&
         this.newPassword1 &&
         this.newPassword2 &&
         this.newPassword1 == this.newPassword2
@@ -261,6 +283,9 @@ export default {
   },
 
   methods: {
+    updateErrorState(errorState) {
+      this.newPasswordHasError = errorState
+    },
     setPassword(oldPassword, newPassword) {
       this.settingPassword = true;
       this.passwordErrorMessage = null;