@sowell/quasar-app-extension-auth 1.7.0 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "1.7.0",
+  "version": "1.7.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/AuthReporter.vue

@@ -93,7 +93,7 @@
                   margin: 12px 0;
                   text-decoration: underline;
                 "
-                @click="isMagicLinkEnabled ? goToForgotPassword() : (forgottenPassword = true)"
+                @click="forgottenPassword = true"
                 data-testid="ask-password-change-btn"
                 data-cy="forgot-password">
                 {{ $t("auth.forgottenPassword") }}
@@ -247,8 +247,7 @@ export default defineComponent({
       retypeEmail,
       isSubmitBtnDisabled,
       goToOtpValidation,
-      goToFirstLogin,
-      goToForgotPassword
+      goToFirstLogin
     } = useAuth()
 
     const { localStorage } = useQuasar()
@@ -336,8 +335,7 @@ export default defineComponent({
       handleSubmit,
       resetPassword,
       goToPrivacyPolicy,
-      goToFirstLogin,
-      goToForgotPassword
+      goToFirstLogin
     }
   }
 })

package/src/components/pages/ResetPassword.vue

@@ -151,8 +151,7 @@
             :loading="loading"
             type="submit"
             class="full-width q-mt-lg submit-button"
-            :class="{ 'submit-button--soft': mode !== 'otp' && !canSubmit }"
-            :disable="mode === 'otp' ? !canSubmit : false">
+            :class="{ 'submit-button--soft': !canSubmit }">
             <q-icon name="lock_open" size="16px" class="q-mr-sm" />
             {{ $t("common.saveNewPassword") }}
           </q-btn>
@@ -420,18 +419,23 @@ export default defineComponent({
   border-radius: 8px;
   padding: 16px;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 16px;
 }
 
 .requirement-item {
   display: flex;
   align-items: center;
+  min-width: 0;
   font-size: 12px;
   font-weight: 500;
   color: #3e484f;
 }
 
+.requirement-item span {
+  overflow-wrap: anywhere;
+}
+
 .requirement-item .q-icon {
   color: #bdc8d1;
 }

package/src/composables/auth.ts

@@ -61,10 +61,6 @@ export function useAuth() {
     push(`${LOCAL_FIRST_LOGIN_ROUTE || "/first-login"}?context=activate`)
   }
 
-  const goToForgotPassword = () => {
-    push(LOCAL_FIRST_LOGIN_ROUTE || "/first-login")
-  }
-
   const email = ref("")
   const password = ref("")
   const msalToken = ref("")
@@ -285,7 +281,6 @@ export function useAuth() {
     msalAuth,
     goToOtpValidation,
     goToFirstLogin,
-    goToForgotPassword,
     onSubmit,
     retypeEmail,
     isSubmitBtnDisabled,

package/src/composables/resetPassword.ts

@@ -34,6 +34,7 @@ export function useResetPassword() {
   }
   type ValidatableInput = { resetValidation: () => void }
   const confirmPasswordInput = ref<ValidatableInput | null>(null)
+  const highlightInvalidRequirements = ref(false)
 
   const { patch, post } = $api()
   const router = $router()
@@ -71,19 +72,36 @@ export function useResetPassword() {
       hasSpecialChar.value
   )
 
-  // NOTE: `invalid` always false here (highlight-on-invalid-submit is a magiclink-only
-  // affordance, see useValidateMagicLink) - kept on every item so ResetPassword.vue can
-  // bind the same class regardless of which composable (OTP vs magiclink) it's using.
   const passwordRequirements = computed(() => [
-    { label: t("auth.passwordRequirement.minLength"), valid: hasMinLength.value, invalid: false },
-    { label: t("auth.passwordRequirement.uppercase"), valid: hasUppercase.value, invalid: false },
-    { label: t("auth.passwordRequirement.lowercase"), valid: hasLowercase.value, invalid: false },
-    { label: t("auth.passwordRequirement.number"), valid: hasNumber.value, invalid: false },
-    { label: t("auth.passwordRequirement.letter"), valid: hasLetter.value, invalid: false },
+    {
+      label: t("auth.passwordRequirement.minLength"),
+      valid: hasMinLength.value,
+      invalid: highlightInvalidRequirements.value && !hasMinLength.value
+    },
+    {
+      label: t("auth.passwordRequirement.uppercase"),
+      valid: hasUppercase.value,
+      invalid: highlightInvalidRequirements.value && !hasUppercase.value
+    },
+    {
+      label: t("auth.passwordRequirement.lowercase"),
+      valid: hasLowercase.value,
+      invalid: highlightInvalidRequirements.value && !hasLowercase.value
+    },
+    {
+      label: t("auth.passwordRequirement.number"),
+      valid: hasNumber.value,
+      invalid: highlightInvalidRequirements.value && !hasNumber.value
+    },
+    {
+      label: t("auth.passwordRequirement.letter"),
+      valid: hasLetter.value,
+      invalid: highlightInvalidRequirements.value && !hasLetter.value
+    },
     {
       label: t("auth.passwordRequirement.specialChar"),
       valid: hasSpecialChar.value,
-      invalid: false
+      invalid: highlightInvalidRequirements.value && !hasSpecialChar.value
     }
   ])
 
@@ -162,6 +180,11 @@ export function useResetPassword() {
   }
 
   const onSubmit = () => {
+    if (!canSubmit.value) {
+      highlightInvalidRequirements.value = true
+      return
+    }
+
     let idUser = decodedToken?.value?.sub
     if (isOtp.value && userInfos?.uid) {
       idUser = userInfos?.uid
@@ -233,14 +256,16 @@ export function useResetPassword() {
     router.push(LOCAL_LOGIN_ROUTE)
   }
 
-  // NOTE: OTP flow never expires this way / never blocks submit / has nowhere to send
-  // the user back to "first login" - these are inert magiclink-only affordances, kept
-  // here only so ResetPassword.vue has a uniform shape regardless of composable used.
+  // NOTE: OTP flow never expires this way / has nowhere to send the user back to
+  // "first login" - these are inert magiclink-only affordances, kept here only so
+  // ResetPassword.vue has a uniform shape regardless of composable used.
   const linkExpired = ref(false)
   const serverError = ref("")
-  const highlightInvalidRequirements = ref(false)
   const goToFirstLogin = goToLoginPage
-  const handleInvalidSubmit = () => {}
+
+  const handleInvalidSubmit = () => {
+    highlightInvalidRequirements.value = true
+  }
 
   onMounted(() => {
     if (!isOtp.value) {

package/src/composables/useMagicLink.ts

@@ -21,7 +21,8 @@ export function useMagicLink() {
   const {
     AUTH_SERVER_REQUEST_MAGICLINK_ROUTE,
     LOCAL_SET_PASSWORD_ROUTE,
-    LOCAL_LOGIN_ROUTE
+    LOCAL_LOGIN_ROUTE,
+    APP_SERVER_BASE_URL
   } = $prompts()
 
   const email = ref("")
@@ -61,16 +62,13 @@ export function useMagicLink() {
     return true
   }
 
+  // Built from the configured APP_SERVER_BASE_URL (fixed per app in
+  // quasar.extensions.json), never from window.location: in a Capacitor build
+  // (APK/IPA) the WebView origin is something like capacitor://localhost, not the
+  // app's real public domain, so the magic link would otherwise be unusable once
+  // installed as a native app.
   const buildBaseUrl = (): string => {
-    if (typeof window === "undefined") return ""
-    // DEV-ONLY BYPASS: MAGICLINK_ALLOWED_HOSTS rejects a bare "localhost" base_url
-    // (422). Substitute localhost.sowell.app (port kept) so the link is accepted -
-    // requires the local DNS to resolve localhost.sowell.app -> 127.0.0.1.
-    // Never let this reach production (see playbook piège #2).
-    const { protocol, hostname, port } = window.location
-    const effectiveHostname = hostname === "localhost" ? "localhost.sowell.app" : hostname
-    const origin = `${protocol}//${effectiveHostname}${port ? `:${port}` : ""}`
-    return `${origin}${LOCAL_SET_PASSWORD_ROUTE || "/set-password"}`
+    return `${APP_SERVER_BASE_URL}${LOCAL_SET_PASSWORD_ROUTE || "/set-password"}`
   }
 
   const readApiError = (error: unknown): string | undefined => {