show password icon in custom input

src/assets/main.css

@@ -180,6 +180,7 @@ td {
     border: none;
     padding: 10px 12px;
     font-size: 1rem;
+    width: 100%;
 }
 
 .custom-input-light {

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,13 +83,14 @@
                 </div>
             </div>
         </div>
+        <div class="input-container"> 
             <input 
                 class="custom-input"
                 :class="[
                     !filled ? 'custom-input-light' : '',
                     // label.includes('*') ? 'border-required' : ''
                 ]"
-            :type="type" 
+                :type="computedType" 
                 :id="name"
                 :name="name" 
                 :min="0"
@@ -84,13 +99,32 @@
                 :disabled="readonly"
                 :readonly="readonly"
                 :required="required"
-            @input="$event => $emit('update:field', $event.target.value)">
+                :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;
     }