From f36f17b57d22161e51781bd2aec1f74603908130 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 5 Feb 2023 12:56:47 -0900
Subject: [PATCH] feat: toggle view of password field (#263)

---
 frontend/components/Form/Password.vue | 34 +++++++++++++++++++++++++++
 frontend/pages/index.vue              |  4 ++--
 frontend/pages/profile.vue            |  4 ++--
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 frontend/components/Form/Password.vue

diff --git a/frontend/components/Form/Password.vue b/frontend/components/Form/Password.vue
new file mode 100644
index 0000000..1769d2c
--- /dev/null
+++ b/frontend/components/Form/Password.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex">
+    <FormTextField v-model="value" placeholder="Password" label="Password" :type="inputType"> </FormTextField>
+    <button
+      type="button"
+      class="inline-flex p-1 ml-1 justify-center mt-auto mb-3 tooltip"
+      data-tip="Toggle Password Show"
+      @click="toggle()"
+    >
+      <Icon name="mdi-eye" class="h-5 w-5" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  type Props = {
+    modelValue: string;
+    placeholder: string;
+    label: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: "Password",
+    label: "Password",
+  });
+
+  const [hide, toggle] = useToggle(true);
+
+  const inputType = computed(() => {
+    return hide.value ? "password" : "text";
+  });
+
+  const value = useVModel(props, "modelValue");
+</script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 070fa05..423ec7d 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -174,7 +174,7 @@
                       Don't Want To Join a Group?
                     </button>
                   </div>
-                  <FormTextField v-model="password" label="Set your password" type="password" />
+                  <FormPassword v-model="password" label="Set your password" />
                   <PasswordScore v-model:valid="canRegister" :password="password" />
                   <div class="card-actions justify-end">
                     <button
@@ -202,7 +202,7 @@
                     <p class="text-xs text-center"><b>Password</b> demo</p>
                   </template>
                   <FormTextField v-model="email" label="Email" />
-                  <FormTextField v-model="loginPassword" label="Password" type="password" />
+                  <FormPassword v-model="loginPassword" label="Password" />
                   <div class="card-actions justify-end mt-2">
                     <button type="submit" class="btn btn-primary" :class="loading ? 'loading' : ''" :disabled="loading">
                       Login
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 5fe9331..10e84a4 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -187,8 +187,8 @@
     <BaseModal v-model="passwordChange.dialog">
       <template #title> Change Password </template>
 
-      <FormTextField v-model="passwordChange.current" label="Current Password" type="password" />
-      <FormTextField v-model="passwordChange.new" label="New Password" type="password" />
+      <FormPassword v-model="passwordChange.current" label="Current Password" />
+      <FormPassword v-model="passwordChange.new" label="New Password" />
       <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
 
       <div class="flex">