From b00261d7c26de5dd365e900f3580d6718a8d9cc7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 25 Sep 2025 20:14:36 +0530
Subject: [PATCH] feat: Add password visibility toggle to form input (#12524)

# Pull Request Template

## Description

This PR adds a password visibility toggle to the auth form input
component.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Screencast


https://github.com/user-attachments/assets/17652e86-e823-46e6-a3ba-80af37c78906




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 app/javascript/v3/components/Form/Input.vue | 38 +++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 4a0b0dc63..8e719808f 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,8 +1,11 @@
 <script setup>
-import { defineProps, defineModel } from 'vue';
+import { defineProps, defineModel, computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import WithLabel from './WithLabel.vue';
 
-defineProps({
+const props = defineProps({
   label: {
     type: String,
     required: true,
@@ -31,6 +34,11 @@ defineProps({
   },
 });
 
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -39,6 +47,17 @@ const model = defineModel({
   type: [String, Number],
   required: true,
 });
+
+const [isPasswordVisible, togglePasswordVisibility] = useToggle();
+
+const isPasswordField = computed(() => props.type === FIELDS.PASSWORD);
+
+const currentInputType = computed(() => {
+  if (isPasswordField.value) {
+    return isPasswordVisible.value ? FIELDS.TEXT : FIELDS.PASSWORD;
+  }
+  return props.type;
+});
 </script>
 
 <template>
@@ -56,7 +75,7 @@ const model = defineModel({
       v-bind="$attrs"
       v-model="model"
       :name="name"
-      :type="type"
+      :type="currentInputType"
       class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
       :class="{
         'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
@@ -66,7 +85,20 @@ const model = defineModel({
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
+        'pr-10': isPasswordField,
       }"
     />
+    <Button
+      v-if="isPasswordField"
+      type="button"
+      slate
+      sm
+      link
+      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+      class="absolute inset-y-0 right-0 pr-3"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      :aria-pressed="isPasswordVisible"
+      @click="togglePasswordVisibility()"
+    />
   </WithLabel>
 </template>