From 8b05825681613db2e24b1a0db18b09e1ae711506 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 7 Nov 2025 17:40:48 +0530
Subject: [PATCH] chore: Update the edit password screen input

---
 .../dashboard/components-next/input/Input.vue | 88 ++++++++++---------
 .../v3/views/auth/password/Edit.vue           | 22 +++--
 2 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index 95ad7297f..55b3a4d54 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -133,48 +133,52 @@ onMounted(() => {
     </label>
     <!-- Added prefix slot to allow adding icons to the input -->
     <slot name="prefix" />
-    <input
-      :id="uniqueId"
-      v-bind="$attrs"
-      ref="inputRef"
-      :value="modelValue"
-      :class="[
-        customInputClass,
-        inputOutlineClass,
-        sizeClass,
-        {
-          error: messageType === 'error',
-          focus: isFocused,
-          'ltr:!pr-10 rtl:!pl-10': isPasswordField,
-        },
-      ]"
-      :type="currentInputType"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      :max="
-        ['date', 'datetime-local', 'time', 'number'].includes(type)
-          ? max
-          : undefined
-      "
-      class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keyup.enter="handleEnter"
-    />
-    <Button
-      v-if="isPasswordField"
-      type="button"
-      slate
-      sm
-      link
-      class="absolute inset-y-0 ltr:right-3.5 rtl:left-3.5"
-      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
-      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
-      :aria-pressed="isPasswordVisible"
-      @click="togglePasswordVisibility()"
-    />
+    <div class="relative">
+      <input
+        :id="uniqueId"
+        v-bind="$attrs"
+        ref="inputRef"
+        :value="modelValue"
+        :class="[
+          customInputClass,
+          inputOutlineClass,
+          sizeClass,
+          {
+            error: messageType === 'error',
+            focus: isFocused,
+            'ltr:!pr-10 rtl:!pl-10': isPasswordField,
+          },
+        ]"
+        :type="currentInputType"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="
+          ['date', 'datetime-local', 'time'].includes(type) ? min : undefined
+        "
+        :max="
+          ['date', 'datetime-local', 'time', 'number'].includes(type)
+            ? max
+            : undefined
+        "
+        class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keyup.enter="handleEnter"
+      />
+      <Button
+        v-if="isPasswordField"
+        type="button"
+        slate
+        sm
+        link
+        class="absolute inset-y-0 ltr:right-3.5 rtl:left-3.5"
+        :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+        :aria-pressed="isPasswordVisible"
+        @click="togglePasswordVisibility()"
+      />
+    </div>
     <p
       v-if="message"
       class="min-w-0 mt-0.5 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index 93ae3b0ac..4d8963b2e 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -2,7 +2,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
-import FormInput from '../../../components/Form/Input.vue';
+import FormInput from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
@@ -99,24 +99,30 @@ export default {
         {{ $t('SET_NEW_PASSWORD.TITLE') }}
       </h1>
 
-      <div class="space-y-5">
+      <div class="space-y-6 mt-5">
         <FormInput
           v-model="credentials.password"
-          class="mt-3"
           name="password"
           type="password"
-          :has-error="v$.credentials.password.$error"
-          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          :message-type="v$.credentials.password.$error ? 'error' : ''"
+          :message="
+            v$.credentials.password.$error
+              ? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
+              : ''
+          "
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.password.$touch"
         />
         <FormInput
           v-model="credentials.confirmPassword"
-          class="mt-3"
           name="confirm_password"
           type="password"
-          :has-error="v$.credentials.confirmPassword.$error"
-          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          :message-type="v$.credentials.confirmPassword.$error ? 'error' : ''"
+          :message="
+            v$.credentials.confirmPassword.$error
+              ? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
+              : ''
+          "
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.confirmPassword.$touch"
         />