Merge pull request #39 from connorabbas/develop

Password input fixes

Author: connorabbas

.github/workflows/eslint.yml

@@ -22,4 +22,4 @@ jobs:
         run: npm ci
 
       - name: Run ESLint
-        run: npm run lint
+        run: npx eslint .

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

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();

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

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
                 />

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
                 />

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
                             />