feat: toggle view of password field (#263)

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>

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

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">