From f251b16afe1ba11d329e20c909dc3f64e1220aa6 Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Wed, 8 Mar 2023 10:37:00 +0800
Subject: [PATCH] Add the 'clearable' attribute to the input on the signin
 page. Add the 'type' attribute to the password input and add a button to
 show/hide the password.

---
 pages/account/signin.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pages/account/signin.vue b/pages/account/signin.vue
index 1eb2368..40c9ae6 100644
--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -22,6 +22,7 @@
                     :rules="formRules.username"
                     label="User name"
                     variant="underlined"
+                    clearable
                 ></v-text-field>
                 <v-text-field
                     v-model="formData.password"
@@ -29,6 +30,10 @@
                     label="Password"
                     variant="underlined"
                     @keyup.enter="submit"
+                    clearable
+                    :type="passwordInputType"
+                    :append-inner-icon="passwordInputType === 'password' ? 'visibility' : 'visibility_off'"
+                    @click:append-inner="passwordInputType = passwordInputType === 'password' ? 'text' : 'password'"
                 ></v-text-field>
 
               </v-form>
@@ -83,6 +88,7 @@ const signInForm = ref(null)
 const valid = ref(true)
 const submitting = ref(false)
 const route = useRoute()
+const passwordInputType = ref('password')
 
 const submit = async () => {
   errorMsg.value = null