From f24235be29fff6db05ee2d73b66ed6687a9795c3 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 10 May 2025 14:46:31 +0000
Subject: [PATCH 1/3] password input fixes

---
 src/components/DeleteUserModal.vue | 18 ++++++++++--------
 src/composables/useAxiosForm.js    |  2 ++
 src/views/auth/Login.vue           |  1 +
 src/views/auth/Register.vue        |  5 +++--
 src/views/auth/ResetPassword.vue   |  5 +++--
 src/views/settings/Password.vue    | 26 ++++++++++++++++++--------
 6 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/DeleteUserModal.vue b/src/components/DeleteUserModal.vue
index 9d19b56..02e0453 100644
--- a/src/components/DeleteUserModal.vue
+++ b/src/components/DeleteUserModal.vue
@@ -34,14 +34,16 @@ const deleteAccount = () => {
                 setFlashMessage('success', 'Your account has been deleted.');
             });
         },
-        onError: () => passwordInput.value.$el.focus(),
+        onError: () => {
+            console.error('error')
+            const passwordInputElement = passwordInput.value.$el.querySelector('input');
+            if (passwordInputElement) {
+                passwordInputElement.focus();
+            }
+        },
         onFinish: () => resetFormFields(),
     });
 };
-
-function focusPasswordInput() {
-    passwordInput.value.$el.focus();
-}
 </script>
 
 <template>
@@ -53,7 +55,6 @@ function focusPasswordInput() {
         :draggable="false"
         dismissableMask
         modal
-        @show="focusPasswordInput"
     >
         <div class="mb-6">
             <p class="m-0 text-muted-color">
@@ -64,14 +65,15 @@ function focusPasswordInput() {
         </div>
 
         <div class="flex flex-col gap-2">
-            <InputText
+            <Password
                 id="password"
                 ref="password-input"
                 v-model="formData.password"
                 :invalid="Boolean(validationErrors?.password)"
-                type="password"
                 placeholder="Password"
                 autocomplete="current-password"
+                :feedback="false"
+                toggleMask
                 autofocus
                 required
                 fluid
diff --git a/src/composables/useAxiosForm.js b/src/composables/useAxiosForm.js
index 052c230..8a75f1e 100644
--- a/src/composables/useAxiosForm.js
+++ b/src/composables/useAxiosForm.js
@@ -25,6 +25,7 @@ export function useAxiosForm(initialData = {}) {
             showProgress = false,
             onBefore = () => {},
             onSuccess = () => {},
+            onError = () => {},
             onFinish = () => {},
             ...restOptions
         } = options;
@@ -47,6 +48,7 @@ export function useAxiosForm(initialData = {}) {
 
             return response;
         } catch (error) {
+            onError(error);
             handleAxiosError(error);
         } finally {
             onFinish();
diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index 5b5999a..634a984 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -90,6 +90,7 @@ onMounted(() => {
                     id="password"
                     v-model="formData.password"
                     :invalid="Boolean(validationErrors?.password)"
+                    :feedback="false"
                     autocomplete="current-password"
                     toggleMask
                     required
diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index 376833b..646c7a3 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -92,12 +92,13 @@ onMounted(() => {
 
             <div class="flex flex-col gap-2">
                 <label for="password_confirmation">Confirm Password</label>
-                <InputText
+                <Password
                     id="password_confirmation"
                     v-model="formData.password_confirmation"
                     :invalid="Boolean(validationErrors?.password_confirmation)"
-                    type="password"
+                    :feedback="false"
                     autocomplete="new-password"
+                    toggleMask
                     required
                     fluid
                 />
diff --git a/src/views/auth/ResetPassword.vue b/src/views/auth/ResetPassword.vue
index 0eaf1db..a26f17a 100644
--- a/src/views/auth/ResetPassword.vue
+++ b/src/views/auth/ResetPassword.vue
@@ -90,12 +90,13 @@ onMounted(() => {
 
             <div class="flex flex-col gap-2">
                 <label for="password_confirmation">Confirm New Password</label>
-                <InputText
+                <Password
                     id="password_confirmation"
                     v-model="formData.password_confirmation"
                     :invalid="Boolean(validationErrors?.password_confirmation)"
-                    type="password"
+                    :feedback="false"
                     autocomplete="new-password"
+                    toggleMask
                     required
                     fluid
                 />
diff --git a/src/views/settings/Password.vue b/src/views/settings/Password.vue
index 6bd7ce0..00209c5 100644
--- a/src/views/settings/Password.vue
+++ b/src/views/settings/Password.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useTemplateRef } from 'vue';
+import { useTemplateRef, nextTick } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useAuthStore } from '@/stores/auth';
 import { useAxiosForm } from '@/composables/useAxiosForm';
@@ -38,14 +38,22 @@ const submit = () => {
             resetFormFields();
             authStore.fetchUser();
         },
-        onError: () => {
+        onError: async () => {
+            await nextTick();
             if (validationErrors.value?.password) {
                 resetFormFields('password', 'password_confirmation');
-                newPasswordInput.value.$el.focus();
+                const newPasswordInputElement = newPasswordInput.value.$el.querySelector('input');
+                if (newPasswordInputElement) {
+                    newPasswordInputElement.focus();
+                }
             }
             if (validationErrors.value?.current_password) {
                 resetFormFields('current_password');
-                currentPasswordInput.value.$el.focus();
+                const currentPasswordInputElement = currentPasswordInput.value.$el.querySelector('input');
+                console.log(currentPasswordInput.value.$el);
+                if (currentPasswordInputElement) {
+                    currentPasswordInputElement.focus();
+                }
             }
         },
     });
@@ -72,13 +80,14 @@ const submit = () => {
                     >
                         <div class="flex flex-col gap-2">
                             <label for="current_password">Current Password</label>
-                            <InputText
+                            <Password
                                 id="current_password"
                                 ref="current-password-input"
                                 v-model="formData.current_password"
                                 :invalid="Boolean(validationErrors?.current_password)"
-                                type="password"
+                                :feedback="false"
                                 autocomplete="current-password"
+                                toggleMask
                                 required
                                 fluid
                             />
@@ -102,12 +111,13 @@ const submit = () => {
 
                         <div class="flex flex-col gap-2">
                             <label for="password_confirmation">Confirm Password</label>
-                            <InputText
+                            <Password
                                 id="password_confirmation"
                                 v-model="formData.password_confirmation"
                                 :invalid="Boolean(validationErrors?.password_confirmation)"
-                                type="password"
+                                :feedback="false"
                                 autocomplete="confirm-password"
+                                toggleMask
                                 required
                                 fluid
                             />

From 721d43815170fdb4f7d2afac83449dbed8c2137f Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 10 May 2025 14:50:51 +0000
Subject: [PATCH 2/3] linting pipeline fix

---
 .github/workflows/eslint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 2365a24..0ac1d20 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -22,4 +22,4 @@ jobs:
         run: npm ci
       
       - name: Run ESLint
-        run: npm run lint
\ No newline at end of file
+        run: npx eslint .
\ No newline at end of file

From 3cc1ad503b4ac25ae591259e3f3ad1e5edc0ff08 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 10 May 2025 14:51:29 +0000
Subject: [PATCH 3/3] eslint fix

---
 src/components/DeleteUserModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DeleteUserModal.vue b/src/components/DeleteUserModal.vue
index 02e0453..d930454 100644
--- a/src/components/DeleteUserModal.vue
+++ b/src/components/DeleteUserModal.vue
@@ -35,7 +35,7 @@ const deleteAccount = () => {
             });
         },
         onError: () => {
-            console.error('error')
+            console.error('error');
             const passwordInputElement = passwordInput.value.$el.querySelector('input');
             if (passwordInputElement) {
                 passwordInputElement.focus();