From 4eac6919076a22ebcd55370cff361efe4e74920a Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Tue, 6 May 2025 20:03:08 -0600
Subject: [PATCH] show password icon in custom input

---
 src/assets/main.css               |  1 +
 src/components/ui/CustomInput.vue | 76 ++++++++++++++++++++++++-------
 2 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 634ea55..80fcfcc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -180,6 +180,7 @@ td {
     border: none;
     padding: 10px 12px;
     font-size: 1rem;
+    width: 100%;
 }
 
 .custom-input-light {
diff --git a/src/components/ui/CustomInput.vue b/src/components/ui/CustomInput.vue
index 0a92223..f32fb5b 100644
--- a/src/components/ui/CustomInput.vue
+++ b/src/components/ui/CustomInput.vue
@@ -1,4 +1,7 @@
 <script setup>
+    
+    import { computed, ref } from 'vue'
+
     const props = defineProps({
         field: {
             type: [String, Number, Date]
@@ -47,6 +50,17 @@
 
     defineEmits(['update:field'])
 
+    const showPassword = ref(false)
+
+    const computedType = computed(() => {
+        return props.type === 'password' && showPassword.value ? 'text' : props.type
+    })
+
+    const toggleVisibility = () => {
+        showPassword.value = !showPassword.value
+    }
+    
+
 </script>
 
 <template>
@@ -69,28 +83,48 @@
                 </div>
             </div>
         </div>
-        <input 
-            class="custom-input"
-            :class="[
-                !filled ? 'custom-input-light' : '',
-                // label.includes('*') ? 'border-required' : ''
-            ]"
-            :type="type" 
-            :id="name"
-            :name="name" 
-            :min="0"
-            :step="step"
-            :value="field"
-            :disabled="readonly"
-            :readonly="readonly"
-            :required="required"
-            @input="$event => $emit('update:field', $event.target.value)">
+        <div class="input-container"> 
+            <input 
+                class="custom-input"
+                :class="[
+                    !filled ? 'custom-input-light' : '',
+                    // label.includes('*') ? 'border-required' : ''
+                ]"
+                :type="computedType" 
+                :id="name"
+                :name="name" 
+                :min="0"
+                :step="step"
+                :value="field"
+                :disabled="readonly"
+                :readonly="readonly"
+                :required="required"
+                :autocomplete="type === 'password' ? 'off' : 'on'"
+                @input="$event => $emit('update:field', $event.target.value)"/>
+                <span 
+                    v-if="props.type === 'password'" 
+                    class="toggle-icon" 
+                    @click="toggleVisibility">
+                    <i 
+                        class="fa-solid fa-eye"
+                        v-if="!showPassword"
+                    ></i>
+                    <i 
+                        class="fa-solid fa-eye-slash"
+                        v-else
+                    ></i>
+                </span>
+        </div>
         <span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
         <span class="error-msg" v-if="error">{{ error }}</span>
     </div>
 </template>
 
 <style scoped>
+    .input-container {
+        position: relative;
+        width: 100%;
+    }
     .help {
         font-size: 12px;
         font-weight: 300;
@@ -110,6 +144,16 @@
         align-items: center;
     }   
 
+    .toggle-icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        user-select: none;
+        font-size: 18px;
+    }
+
     .label-text {
         flex: 1;
     }