Edit profile name and set password improvements

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;