src/components/common/VnChangePassword.vue

@@ -19,6 +19,8 @@ const changePassDialog = ref();
 const passwords = ref({ newPassword: null, repeatPassword: null });
 const requirements = ref([]);
 const isLoading = ref(false);
+const showPwd = true;
+const showRpPwd = true;
 
 const validate = async () => {
     const { newPassword, repeatPassword, oldPassword } = passwords.value;
@@ -79,27 +81,35 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         autofocus
                     />
                     <VnInput
-                        :label="t('New password')"
-                        v-model="passwords.newPassword"
-                        type="password"
                         :required="true"
-                        :info="
-                            t('passwordRequirements', {
-                                length: requirements.length,
-                                nAlpha: requirements.nAlpha,
-                                nUpper: requirements.nUpper,
-                                nDigits: requirements.nDigits,
-                                nPunct: requirements.nPunct,
-                            })
-                        "
                         autofocus
-                    />
+                        v-model="passwords.newPassword"
-
+                        :label="$t('New password')"
+                        :type="showPwd ? 'password' : 'text'"
+                        hint=""
+                        filled
+                    >
+                        <template #append>
+                            <QIcon
+                                :name="showPwd ? 'visibility_off' : 'visibility'"
+                                class="cursor-pointer"
+                                @click="showPwd = !showPwd"
+                            />
+                        </template>
+                    </VnInput>
                     <VnInput
                         :label="t('Repeat password')"
                         v-model="passwords.repeatPassword"
-                        type="password"
+                        :type="showRpPwd ? 'password' : 'text'"
+                        hint=""
                     />
+                    <template #append>
+                        <QIcon
+                            :name="showRpPwd ? 'visibility_off' : 'visibility'"
+                            class="cursor-pointer"
+                            @click="showRpPwd = !showRpPwd"
+                        />
+                    </template>
                 </QCardSection>
             </QForm>
             <QCardActions>