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

package/package.json

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, inject } from "vue"
+import { ref, computed, onMounted, onUnmounted, inject } from "vue"
 import isEmail from "validator/es/lib/isEmail"
 import { useI18n } from "vue-i18n"
 import {
@@ -27,6 +27,11 @@ interface HeadersInterface {
   }
 }
 
+// Duree de verrouillage si l'API ne renvoie pas d'en-tete Retry-After exploitable
+const LOCKOUT_FALLBACK_SECONDS = 60
+// Persiste l'echeance : un rechargement de page ne doit pas degriser le bouton
+const LOCKOUT_STORAGE_KEY = "loginLockoutUntil"
+
 export function useAuth() {
   const authState = useAuthState()
   const msalState = useMsalState()
@@ -61,10 +66,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("")
@@ -78,10 +79,45 @@ export function useAuth() {
   const errorEmailMessage = ref("")
   const errorPasswordMessage = ref("")
   const apiErrorMessage = ref("")
+
+  // Verrouillage du bouton de connexion apres trop de tentatives (HTTP 429).
+  // L'echeance est persistee : ni le changement d'email, ni un rechargement de
+  // page ne degrisent le bouton, seule l'expiration du delai le fait.
+  const lockedUntil = ref(0)
+  const isLockedOut = computed(() => lockedUntil.value > 0)
+  let unlockTimer: ReturnType<typeof setTimeout> | undefined
+
+  const releaseLock = () => {
+    lockedUntil.value = 0
+    localStorage.remove(LOCKOUT_STORAGE_KEY)
+    if (apiErrorMessage.value === t("auth.tooManyAttempts")) {
+      apiErrorMessage.value = ""
+    }
+  }
+
+  const lockUntil = (until: number) => {
+    clearTimeout(unlockTimer)
+    lockedUntil.value = until
+    localStorage.set(LOCKOUT_STORAGE_KEY, until)
+    unlockTimer = setTimeout(releaseLock, Math.max(until - Date.now(), 0))
+  }
+
+  // L'API indique le delai d'attente en secondes via Retry-After
+  const retryAfterSeconds = (err: { response?: { headers?: Record<string, string> } }) => {
+    const parsed = Number(err.response?.headers?.["retry-after"])
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : LOCKOUT_FALLBACK_SECONDS
+  }
+
+  // Pendant le verrouillage le message doit rester affiche : sinon la saisie
+  // d'un autre identifiant laisse un bouton grise sans aucune explication
+  const clearApiError = () => {
+    if (!isLockedOut.value) apiErrorMessage.value = ""
+  }
+
   const validations = ref({
     email: [
       (val: string) => {
-        apiErrorMessage.value = ""
+        clearApiError()
         errorEmailMessage.value = !!val ? "" : t("auth.emailPresenceError")
         return !!val || t("auth.emailPresenceError")
       },
@@ -94,7 +130,7 @@ export function useAuth() {
     ],
     password: [
       (val: string) => {
-        apiErrorMessage.value = ""
+        clearApiError()
         errorPasswordMessage.value = !!val
           ? ""
           : t("auth.passwordPresenceError")
@@ -126,8 +162,13 @@ export function useAuth() {
   }
 
   const onSubmit = async (provider = "SoWell") => {
+    // Le bouton est grise, mais la touche Entree et l'auto-login le contournent
+    if (isLockedOut.value) {
+      apiErrorMessage.value = t("auth.tooManyAttempts")
+      return
+    }
     apiErrorMessage.value = ""
-    
+
     if (provider === "SoWell") {
       loading.value = true
     }
@@ -185,7 +226,10 @@ export function useAuth() {
       
       if (err && typeof err === "object" && "response" in err) {
         const axiosError = err as any
-        if (axiosError.response?.status === 401) {
+        if (axiosError.response?.status === 429) {
+          lockUntil(Date.now() + retryAfterSeconds(axiosError) * 1000)
+          apiErrorMessage.value = t("auth.tooManyAttempts")
+        } else if (axiosError.response?.status === 401) {
           apiErrorMessage.value = t("auth.loginFailed")
         } else if (axiosError.response?.status === 403) {
           apiErrorMessage.value = t("auth.403")
@@ -201,11 +245,14 @@ export function useAuth() {
   }
 
   const isSubmitBtnDisabled = () => {
-    return !(
-      email.value &&
-      isEmail(email.value) &&
-      password.value &&
-      password.value.length > 5
+    return (
+      isLockedOut.value ||
+      !(
+        email.value &&
+        isEmail(email.value) &&
+        password.value &&
+        password.value.length > 5
+      )
     )
   }
 
@@ -248,6 +295,15 @@ export function useAuth() {
   }
 
   onMounted(async () => {
+    // Reprise d'un verrou en cours apres rechargement
+    const storedUntil = Number(localStorage.getItem(LOCKOUT_STORAGE_KEY))
+    if (Number.isFinite(storedUntil) && storedUntil > Date.now()) {
+      lockUntil(storedUntil)
+      apiErrorMessage.value = t("auth.tooManyAttempts")
+    } else {
+      localStorage.remove(LOCKOUT_STORAGE_KEY)
+    }
+
     await deviceInfo()
     if (authState.raw) {
       replace(LOCAL_SUCCESS_REDIRECTION_ROUTE)
@@ -258,11 +314,14 @@ export function useAuth() {
     tryAutoLogin()
   })
 
+  onUnmounted(() => clearTimeout(unlockTimer))
+
   return {
     email,
     password,
     loading,
     msalLoading,
+    isLockedOut,
     showPassword,
     validations,
     errorEmailMessage,
@@ -285,7 +344,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 => {

package/src/i18n/en-US/index.ts

@@ -12,6 +12,8 @@ export default {
     passwordPresenceError: "The password must be provided",
     passwordLengthError: "The password length be at least 6",
     loginFailed: "Incorrect credentials",
+    tooManyAttempts:
+      "Too many incorrect login attempts. Please wait 1 minute before trying again.",
     emailNotRecognize: "Login failed, please check your credentials",
     emailSent: "Email sent, check your inbox",
     tapEmail: "Please enter your email",

package/src/i18n/fr-FR/index.ts

@@ -12,6 +12,8 @@ export default {
     passwordPresenceError: "Le mot de passe doit être fourni",
     passwordLengthError: "La longueur du mot de passe doit être au minimum 6",
     loginFailed: "Identifiants incorrectes",
+    tooManyAttempts:
+      "Plusieurs tentatives de connexion incorrectes. Veuillez attendre 1 minute avant de réessayer.",
     emailNotRecognize: "L'adresse email fournie n'est pas reconnue",
     emailSent: "Email envoyé, vérifier votre boite email",
     tapEmail: "Entrer votre email",