From e891aeef9782b1f63c11f3ab29cf914cc129802e Mon Sep 17 00:00:00 2001
From: Piyush Thapa <yesiampiyushthapa@gmail.com>
Date: Sat, 9 Mar 2024 17:17:56 +0530
Subject: [PATCH] added toggleButton in login form

---
 src/components/LoginForm.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 2a30444..db7d351 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -14,10 +14,23 @@ const userStore = useUserStore()
 const email = ref('')
 const password = ref('')
 const showError = ref(false)
+const passwordFieldType = ref("password")
+const toggleText = ref("Show")
 
 // router
 const router = useRouter()
 
+function togglePasswordVisibility(){
+  if (passwordFieldType.value==="password") {
+    passwordFieldType.value = "text";
+    toggleText.value = "Hide";
+  }
+  else {
+    passwordFieldType.value = "password";
+    toggleText.value = "Show";
+  }
+}
+
 async function submitLogin() {
   loadingStore.contentLoading()
   showError.value = false
@@ -75,16 +88,17 @@ onMounted(() => {
 
         <div>
           <label for="password">Password</label>
-          <div class="mt-2">
+          <div class="mt-2 relative">
             <input
               id="password"
               v-model="password"
               name="password"
-              type="password"
+              :type="passwordFieldType"
               autocomplete="current-password"
               required="true"
               class="block w-full"
             />
+            <p class="text-xs cursor-pointer mt-2.5 absolute inset-y-0 right-0 pr-3" @click="togglePasswordVisibility">{{toggleText}}</p>
           </div>
         </div>
 
@@ -92,7 +106,7 @@ onMounted(() => {
           <StandardButton
             :type="'submit'"
             :text="'Login'"
-            class="btn-primary mt-6 w-full justify-center"
+            class="btn-primary mt-4 w-full justify-center"
           />
         </div>