From c0f688479f4978c647f8e6b4ab921ac220e579b3 Mon Sep 17 00:00:00 2001
From: zaelgohary <zainabelgohary19@gmail.com>
Date: Thu, 1 Feb 2024 12:28:27 +0200
Subject: [PATCH] Add confirm password

---
 client/src/views/SettingsView.vue | 41 ++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/client/src/views/SettingsView.vue b/client/src/views/SettingsView.vue
index 0445acff..62211b75 100644
--- a/client/src/views/SettingsView.vue
+++ b/client/src/views/SettingsView.vue
@@ -9,18 +9,35 @@
         <v-col cols="12">
           <v-text-field
             v-model="old_password"
+            :append-inner-icon="show_old ? 'mdi-eye' : 'mdi-eye-off'"
             :rules="passwordRules"
-            type="text"
+            :type="show_old ? 'text' : 'password'"
             label="Old Password"
+            @click:append-inner="show_old = !show_old"
           ></v-text-field>
         </v-col>
 
         <v-col cols="12">
           <v-text-field
             v-model="new_password"
-            :rules="passwordRules"
-            type="text"
+            :append-inner-icon="show_new ? 'mdi-eye' : 'mdi-eye-off'"
+            :rules="[...passwordRules, confirmPassword]"
+            :type="show_new ? 'text' : 'password'"
             label="New Password"
+            @click:append-inner="show_new = !show_new"
+            @input="validateForm"
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12">
+          <v-text-field
+            v-model="confirm_password"
+            :append-inner-icon="show_confirm ? 'mdi-eye' : 'mdi-eye-off'"
+            :rules="[...passwordRules, confirmPassword]"
+            :type="show_confirm ? 'text' : 'password'"
+            label="Confirm Password"
+            @click:append-inner="show_confirm = !show_confirm"
+            @input="validateForm"
           ></v-text-field>
         </v-col>
 
@@ -49,8 +66,12 @@ import { useAsyncState } from '@vueuse/core'
 export default defineComponent({
   setup() {
     const form = ref()
+    const show_old = ref<boolean>(false)
+    const show_new = ref<boolean>(false)
+    const show_confirm = ref<boolean>(false)
     const old_password = ref<string>('')
     const new_password = ref<string>('')
+    const confirm_password = ref<string>('')
 
     const { execute, isLoading } = useAsyncState(
       async () => {
@@ -63,13 +84,25 @@ export default defineComponent({
       { immediate: false }
     )
 
+    const confirmPassword = () => new_password.value == confirm_password.value || "Passwords should match."
+
+    const validateForm = () => {
+      form.value?.validate()
+    }
+
     return {
       form,
+      show_old,
+      show_new,
       old_password,
       new_password,
+      show_confirm,
+      confirm_password,
       passwordRules,
       isLoading,
-      execute
+      execute,
+      confirmPassword,
+      validateForm
     }
   }
 })