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

package/package.json

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

@@ -128,7 +128,9 @@
             </div>
             <div class="channel-text">
               <div class="channel-label">{{ $t("auth.channelEmailLabel") }}</div>
-              <div class="channel-description">{{ maskedEmail }}</div>
+              <div class="channel-description" data-testid="channel-email-hint">
+                {{ channelHint("email") }}
+              </div>
             </div>
             <div
               class="channel-radio"
@@ -149,7 +151,9 @@
             </div>
             <div class="channel-text">
               <div class="channel-label">{{ $t("auth.channelSmsLabel") }}</div>
-              <div class="channel-description">{{ $t("auth.channelSmsDescription") }}</div>
+              <div class="channel-description" data-testid="channel-sms-hint">
+                {{ channelHint("sms") }}
+              </div>
             </div>
             <div
               class="channel-radio"
@@ -197,12 +201,15 @@
           <div class="subtitle text-center q-mt-sm">
             {{ $t("auth.magicLinkSentDescription") }}
           </div>
-          <div class="subtitle-secondary text-center q-mt-md">
-            {{ $t("auth.magicLinkCheckInboxMessage") }}
+          <div
+            class="subtitle-secondary text-center q-mt-md"
+            data-testid="magic-link-check-message">
+            {{ checkChannelMessage }}
           </div>
         </div>
 
         <q-btn
+          v-if="!isSmsChannel"
           data-testid="open-mailbox-btn"
           data-cy="open-mailbox"
           color="primary"
@@ -236,7 +243,9 @@
           <div class="banner-icon-badge">
             <q-icon :name="icons.ionInformationCircleOutline" size="12px" color="white" />
           </div>
-          <span class="q-ml-sm">{{ $t("auth.magicLinkWarning") }}</span>
+          <span class="q-ml-sm" data-testid="magic-link-warning">{{
+            magicLinkWarningMessage
+          }}</span>
         </div>
       </template>
     </div>
@@ -244,7 +253,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { computed, defineComponent } from "vue"
+import { useI18n } from "vue-i18n"
 import {
   ionWarningOutline,
   ionInformationCircleOutline
@@ -254,11 +264,14 @@ import { useMagicLink } from "composables/useMagicLink"
 export default defineComponent({
   name: "FirstLogin",
   setup() {
+    const { t, te } = useI18n()
+
     const {
       email,
       emailError,
       apiErrorMessage,
       channels,
+      channelTargets,
       selectedChannel,
       step,
       isLoading,
@@ -280,11 +293,41 @@ export default defineComponent({
       ionInformationCircleOutline
     }
 
+    const translateOrFallback = (key: string, fallbackKey: string): string =>
+      te(key) ? t(key) : t(fallbackKey)
+
+    const channelHint = (channel: "email" | "sms"): string => {
+      const target = channelTargets.value[channel]
+      if (target) return target
+
+      return channel === "email"
+        ? maskedEmail.value
+        : t("auth.channelSmsDescription")
+    }
+
+    const isSmsChannel = computed(() => selectedChannel.value === "sms")
+
+    const checkChannelMessage = computed(() =>
+      isSmsChannel.value
+        ? translateOrFallback(
+            "auth.magicLinkCheckSmsMessage",
+            "auth.magicLinkCheckInboxMessage"
+          )
+        : t("auth.magicLinkCheckInboxMessage")
+    )
+
+    const magicLinkWarningMessage = computed(() =>
+      isSmsChannel.value
+        ? translateOrFallback("auth.magicLinkWarningSms", "auth.magicLinkWarning")
+        : t("auth.magicLinkWarning")
+    )
+
     return {
       email,
       emailError,
       apiErrorMessage,
       channels,
+      channelTargets,
       selectedChannel,
       step,
       isLoading,
@@ -294,6 +337,10 @@ export default defineComponent({
       isActivateContext,
       maskedEmail,
       icons,
+      channelHint,
+      isSmsChannel,
+      checkChannelMessage,
+      magicLinkWarningMessage,
       requestChannels,
       sendMagicLink,
       resend,

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()
@@ -74,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")
       },
@@ -90,7 +130,7 @@ export function useAuth() {
     ],
     password: [
       (val: string) => {
-        apiErrorMessage.value = ""
+        clearApiError()
         errorPasswordMessage.value = !!val
           ? ""
           : t("auth.passwordPresenceError")
@@ -122,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
     }
@@ -181,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")
@@ -197,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
+      )
     )
   }
 
@@ -244,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)
@@ -254,11 +314,14 @@ export function useAuth() {
     tryAutoLogin()
   })
 
+  onUnmounted(() => clearTimeout(unlockTimer))
+
   return {
     email,
     password,
     loading,
     msalLoading,
+    isLockedOut,
     showPassword,
     validations,
     errorEmailMessage,

package/src/composables/useMagicLink.ts

@@ -8,6 +8,36 @@ import { $api, $prompts, $router } from "../injects"
 type Channel = "email" | "sms"
 type Step = "email" | "channel" | "sent"
 
+interface ChannelEntry {
+  channel: string
+  target?: string
+}
+
+export type ChannelTargets = Partial<Record<Channel, string>>
+
+const AVAILABLE_CHANNELS: Channel[] = ["email", "sms"]
+
+const isChannel = (value: string): value is Channel =>
+  (AVAILABLE_CHANNELS as string[]).includes(value)
+
+const parseChannels = (
+  entries: Array<string | ChannelEntry> | undefined
+): { channels: Channel[]; targets: ChannelTargets } => {
+  const channels: Channel[] = []
+  const targets: ChannelTargets = {}
+
+  for (const entry of entries || []) {
+    const name = typeof entry === "string" ? entry : entry?.channel
+    if (!name || !isChannel(name)) continue
+
+    channels.push(name)
+    const target = typeof entry === "string" ? undefined : entry?.target
+    if (target) targets[name] = target
+  }
+
+  return { channels, targets }
+}
+
 interface ApiErrorPayload {
   errors?: Array<{ detail?: string; title?: string }>
 }
@@ -29,6 +59,7 @@ export function useMagicLink() {
   const emailError = ref("")
   const apiErrorMessage = ref("")
   const channels = ref<Channel[]>([])
+  const channelTargets = ref<ChannelTargets>({})
   const selectedChannel = ref<Channel>("email")
   const step = ref<Step>("email")
   const isLoading = ref(false)
@@ -90,7 +121,9 @@ export function useMagicLink() {
       const { data } = await api.post(AUTH_SERVER_REQUEST_MAGICLINK_ROUTE, {
         auth: { email: email.value.trim() }
       })
-      channels.value = data?.channels?.length ? data.channels : ["email"]
+      const { channels: available, targets } = parseChannels(data?.channels)
+      channels.value = available.length ? available : ["email"]
+      channelTargets.value = targets
       selectedChannel.value = "email"
       step.value = "channel"
     } catch (error) {
@@ -189,6 +222,7 @@ export function useMagicLink() {
     emailError,
     apiErrorMessage,
     channels,
+    channelTargets,
     selectedChannel,
     step,
     isLoading,

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",
@@ -47,7 +49,10 @@ export default {
     back: "Back",
     backToLoginFull: "Back to login",
     continueWith: "Or continue with",
-    emailOrPasswordIncorrect: "Email or password incorrect"
+    emailOrPasswordIncorrect: "Email or password incorrect",
+    magicLinkCheckSmsMessage: "Check your text messages",
+    magicLinkWarningSms:
+      "If you do not receive anything within 2 minutes, check your mobile network or contact support."
   },
   common: {
     register: "Save",

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",
@@ -50,7 +52,10 @@ export default {
     back: "Retour",
     backToLoginFull: "Retour à la connexion",
     continueWith: "Ou continuer avec",
-    emailOrPasswordIncorrect: "Email ou mot de passe incorrect"
+    emailOrPasswordIncorrect: "Email ou mot de passe incorrect",
+    magicLinkCheckSmsMessage: "Vérifiez vos messages",
+    magicLinkWarningSms:
+      "Si vous ne recevez rien d'ici 2 minutes, vérifiez votre réseau mobile ou contactez le support."
   },
   common: {
     register: "Enregistrer",