@sowell/quasar-app-extension-auth 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",

package/src/components/pages/ResetPassword.vue

@@ -70,6 +70,7 @@
             </div>
             <q-input
               id="confirmPassword"
+              ref="confirmPasswordInput"
               v-model="confirmPassword"
               data-testid="confirm-password-input"
               data-cy="reset-confirm-password"
@@ -175,6 +176,7 @@ export default defineComponent({
       passwordRequirements,
       LOCAL_LOGIN_ROUTE,
       canSubmit,
+      confirmPasswordInput,
       onSubmit,
       goToLoginPage,
       icons
@@ -201,6 +203,7 @@ export default defineComponent({
       LOCAL_LOGIN_ROUTE,
       validations,
       passwordRequirements,
+      confirmPasswordInput,
       icons,
       onSubmit,
       goToLoginPage

package/src/components/pages/WebResetPassword.vue

@@ -44,6 +44,7 @@
 
                 <q-input
                   id="confirmPassword"
+                  ref="confirmPasswordInput"
                   v-model="confirmPassword"
                   data-testid="confirm-password-input"
                   data-cy="reset-confirm-password"
@@ -164,6 +165,7 @@ export default defineComponent({
       passwordRequirements,
       LOCAL_LOGIN_ROUTE,
       canSubmit,
+      confirmPasswordInput,
       onSubmit,
       goToLoginPage,
       icons
@@ -190,6 +192,7 @@ export default defineComponent({
       showConfirmPassword,
       successTitleRef,
       LOCAL_LOGIN_ROUTE,
+      confirmPasswordInput,
       icons,
       goToLoginPage,
       onSubmit

package/src/composables/resetPassword.ts

@@ -1,7 +1,7 @@
 import { useQuasar, LocalStorage } from "quasar"
 import { useI18n } from "vue-i18n"
 import jwt from "jwt-decode"
-import { computed, ref, Ref, onMounted } from "vue"
+import { computed, ref, Ref, onMounted, watch } from "vue"
 import {
   ionCloseOutline,
   ionEyeOutline,
@@ -32,6 +32,8 @@ export function useResetPassword() {
     uid: string
     token: string
   }
+  type ValidatableInput = { resetValidation: () => void }
+  const confirmPasswordInput = ref<ValidatableInput | null>(null)
 
   const { patch, post } = $api()
   const router = $router()
@@ -101,9 +103,17 @@ export function useResetPassword() {
     ]
   }
 
+  // Quasar's lazy-rules only re-validates the confirmation field on blur/submit,
+  // never while typing. Without this, correcting the field after an error was
+  // shown (e.g. clearing it, then retyping) leaves the previous, now-stale
+  // error message on screen until the field is blurred again.
+  watch([password, confirmPassword], () => {
+    confirmPasswordInput.value?.resetValidation()
+  })
+
   const KNOWN_API_PASSWORD_ERRORS: Array<{ pattern: RegExp; key: string }> = [
     {
-      pattern: /simple sequence of \d+ characters/i,
+      pattern: /simple sequence of \d\+ characters/i,
       key: "auth.passwordSequenceError"
     },
     {
@@ -295,6 +305,7 @@ export function useResetPassword() {
     passwordRequirements,
     canSubmit,
     LOCAL_LOGIN_ROUTE,
+    confirmPasswordInput,
     onSubmit,
     goToLoginPage,
     icons: {