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

package/package.json

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

@@ -1,4 +1,4 @@
-import { computed, ref, Ref } from "vue"
+import { computed, ref, watch, Ref } from "vue"
 import { useI18n } from "vue-i18n"
 import { AxiosError } from "axios"
 import {
@@ -91,9 +91,10 @@ export function useValidateMagicLink(magicToken: Ref<string>) {
       confirmPassword.value !== ""
   )
 
-  // NOTE: rules return a boolean, never a string - the requirements checklist below
-  // the fields already explains exactly what's missing (green/gray/red), so the
-  // field itself only needs to turn red, not repeat the message underneath.
+  // NOTE: rules return a boolean rather than a string - the requirements checklist
+  // below the fields already explains exactly what's missing (green/gray/red), so
+  // the field itself only needs to turn red. The only exception is the "passwords
+  // don't match" case: no checklist item covers it, so that one needs its message.
   const validations = {
     passwordRules: [
       (val: string) => !!val || false,
@@ -101,10 +102,18 @@ export function useValidateMagicLink(magicToken: Ref<string>) {
     ],
     passwordConfirmationRules: [
       (val: string) => !!val || false,
-      (val: string) => val === password.value || false
+      (val: string) =>
+        val === password.value || t("auth.newPasswordConfirmationFailed")
     ]
   }
 
+  // Quasar's lazy-rules only re-validates the confirmation field on blur/submit,
+  // never while typing. Without this, the "passwords don't match" message stays
+  // on screen while the user is already fixing the field.
+  watch([password, confirmPassword], () => {
+    confirmPasswordInput.value?.resetValidation()
+  })
+
   const readApiError = (error: unknown): string | undefined => {
     const axiosError = error as AxiosError<ApiErrorPayload>
     const apiError = axiosError.response?.data?.errors?.[0]

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

@@ -49,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

@@ -27,7 +27,7 @@ export default {
     confirmPassword: "Confirmer le mot de passe",
     confirmPasswordPlaceholder: "Répéter le mot de passe",
     newPasswordConfirmationFailed:
-      "Les mot de passes que vous avez saisi ne correspondent pas",
+      "Les mots de passe que vous avez saisi ne correspondent pas",
     passwordRequirementsError:
       "Le mot de passe ne respecte pas les critères requis",
     passwordSequenceError:
@@ -52,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",