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

package/src/components/pages/ResetPassword.vue

@@ -20,23 +20,48 @@
     </div>
     <div
       class="full-width reset-password-card q-mt-lg"
-      :class="{ 'reset-password-card--centered': passwordUpdated }">
-      <template v-if="!passwordUpdated">
+      :class="{ 'reset-password-card--centered': passwordUpdated || linkExpired }">
+      <template v-if="linkExpired">
+        <div
+          class="column items-center header-section"
+          data-testid="magic-link-expired"
+          role="status"
+          aria-live="polite">
+          <div class="error-badge">
+            <q-icon name="error_outline" size="48px" color="negative" />
+          </div>
+          <div class="title text-center q-mt-md">
+            {{ $t("auth.error.magicLinkExpired") }}
+          </div>
+        </div>
+        <q-btn
+          data-testid="back-to-first-login-btn"
+          color="primary"
+          unelevated
+          no-caps
+          text-color="white"
+          class="full-width q-mt-lg submit-button"
+          @click="goToFirstLogin">
+          {{ $t("auth.backToFirstLogin") }}
+        </q-btn>
+      </template>
+      <template v-else-if="!passwordUpdated">
         <div class="column items-center header-section">
           <div class="icon-badge">
             <q-icon name="verified_user" size="28px" color="primary" />
           </div>
           <div class="title text-center q-mt-md">
-            {{ $t("auth.passwordRecovery") }}
+            {{ title || $t("auth.passwordRecovery") }}
           </div>
           <div class="subtitle text-center q-mt-sm">
-            {{ $t("auth.recommendPassword") }}
+            {{ description || $t("auth.recommendPassword") }}
           </div>
         </div>
         <q-form
           class="column q-mt-lg"
           data-testid="reset-password-form"
-          @submit="onSubmit">
+          @submit="onSubmit"
+          @validation-error="handleInvalidSubmit">
           <div class="input-container">
             <div class="input-label">
               {{ $t("auth.newPassword") }}
@@ -49,6 +74,7 @@
               :type="showPassword ? 'text' : 'password'"
               :rules="validations['passwordRules']"
               lazy-rules
+              :hide-bottom-space="mode === 'magiclink'"
               borderless
               :placeholder="$t('auth.newPasswordPlaceholder')"
               class="q-mt-sm"
@@ -77,6 +103,7 @@
               :type="showConfirmPassword ? 'text' : 'password'"
               :rules="validations['passwordConfirmationRules']"
               lazy-rules
+              :hide-bottom-space="mode === 'magiclink'"
               borderless
               :placeholder="$t('auth.confirmPasswordPlaceholder')"
               class="q-mt-sm"
@@ -99,7 +126,10 @@
               v-for="requirement in passwordRequirements"
               :key="requirement.label"
               class="requirement-item"
-              :class="{ 'requirement-valid': requirement.valid }">
+              :class="{
+                'requirement-valid': requirement.valid,
+                'requirement-invalid': requirement.invalid
+              }">
               <q-icon
                 :name="requirement.valid ? 'check_circle' : 'radio_button_unchecked'"
                 size="16px" />
@@ -107,6 +137,10 @@
             </div>
           </div>
 
+          <div v-if="serverError" class="server-error q-mt-md" data-testid="server-error">
+            {{ serverError }}
+          </div>
+
           <q-btn
             data-testid="submit-btn"
             data-cy="send-new-password"
@@ -117,7 +151,7 @@
             :loading="loading"
             type="submit"
             class="full-width q-mt-lg submit-button"
-            :disable="!canSubmit">
+            :class="{ 'submit-button--soft': !canSubmit }">
             <q-icon name="lock_open" size="16px" class="q-mr-sm" />
             {{ $t("common.saveNewPassword") }}
           </q-btn>
@@ -130,7 +164,11 @@
           role="status"
           aria-live="polite">
           <div class="success-badge">
-            <q-icon name="check_circle" size="48px" color="primary" />
+            <svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82" fill="none">
+              <path d="M20.467 13.2638C20.467 13.2638 32.783 22.7041 51.5063 5.05236C68.1346 -10.6241 81.7117 14.1097 81.8067 25.9544C81.9298 41.298 65.1784 53.5748 73.3078 63.6526C81.4372 73.7304 57.1861 90.3722 44.116 75.9698C27.8572 58.0538 23.4525 72.6106 14.185 72.6106C7.53374 72.6106 -6.12216 55.9168 3.09953 43.4971C10.8594 33.0461 6.6273 29.5776 4.57785 25.9544C1.62159 20.7288 8.64242 6.54534 20.467 13.2638Z" fill="#E7F8FF"/>
+              <path d="M41.0002 63.6615C53.4542 63.6615 63.5502 53.4896 63.5502 40.9419C63.5502 28.3942 53.4542 18.2223 41.0002 18.2223C28.5462 18.2223 18.4502 28.3942 18.4502 40.9419C18.4502 53.4896 28.5462 63.6615 41.0002 63.6615Z" fill="#40C4FF"/>
+              <path d="M37.9271 52.7776C37.5379 52.7781 37.1541 52.6868 36.8062 52.511C36.4584 52.3353 36.1562 52.08 35.9238 51.7655L29.7663 43.4957C29.5555 43.2317 29.3996 42.9277 29.3076 42.6018C29.2157 42.276 29.1896 41.9348 29.231 41.5986C29.2724 41.2624 29.3803 40.938 29.5485 40.6446C29.7166 40.3512 29.9415 40.0948 30.2099 39.8906C30.4782 39.6865 30.7845 39.5387 31.1106 39.456C31.4367 39.3734 31.776 39.3575 32.1082 39.4095C32.4405 39.4614 32.7591 39.58 33.045 39.7583C33.3309 39.9366 33.5784 40.1709 33.7728 40.4473L37.8266 45.8712L48.162 30.2426C48.5412 29.7088 49.1114 29.3443 49.7523 29.2261C50.3932 29.108 51.0545 29.2454 51.5968 29.6093C52.139 29.9733 52.5196 30.5353 52.6583 31.1767C52.7969 31.818 52.6828 32.4886 52.3399 33.0468L40.0131 51.6464C39.7907 51.9823 39.4917 52.2598 39.1411 52.4556C38.7906 52.6513 38.3986 52.7597 37.998 52.7717L37.9271 52.7776Z" fill="white"/>
+            </svg>
           </div>
           <div
             ref="successTitleRef"
@@ -140,7 +178,7 @@
             {{ $t("auth.passwordSavedTitle") }}
           </div>
           <div class="subtitle text-center q-mt-sm" data-testid="password-updated-message">
-            {{ $t("auth.passwordSavedMessage") }}
+            {{ successSubtitle || $t("auth.passwordSavedMessage") }}
           </div>
         </div>
         <q-btn
@@ -160,27 +198,60 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, ref, watch } from "vue"
+import { defineComponent, nextTick, ref, watch, computed, PropType } from "vue"
 import { useResetPassword } from "composables/resetPassword"
+import { useValidateMagicLink } from "composables/useValidateMagicLink"
 
 export default defineComponent({
   name: "ResetPassword",
-  setup() {
+  props: {
+    mode: {
+      type: String as PropType<"otp" | "magiclink">,
+      default: "otp"
+    },
+    magicToken: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    successSubtitle: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const magicToken = computed(() => props.magicToken)
+
     const {
       password,
       confirmPassword,
       loading,
       passwordUpdated,
+      linkExpired,
+      serverError,
       showPassword,
+      highlightInvalidRequirements,
       validations,
       passwordRequirements,
       LOCAL_LOGIN_ROUTE,
       canSubmit,
       confirmPasswordInput,
       onSubmit,
+      handleInvalidSubmit,
       goToLoginPage,
+      goToFirstLogin,
       icons
-    } = useResetPassword()
+    } =
+      props.mode === "magiclink"
+        ? useValidateMagicLink(magicToken)
+        : useResetPassword()
 
     const showConfirmPassword = ref(false)
     const successTitleRef = ref<HTMLElement | null>(null)
@@ -197,6 +268,9 @@ export default defineComponent({
       loading,
       canSubmit,
       passwordUpdated,
+      linkExpired,
+      serverError,
+      highlightInvalidRequirements,
       showPassword,
       showConfirmPassword,
       successTitleRef,
@@ -206,7 +280,9 @@ export default defineComponent({
       confirmPasswordInput,
       icons,
       onSubmit,
-      goToLoginPage
+      handleInvalidSubmit,
+      goToLoginPage,
+      goToFirstLogin
     }
   }
 })
@@ -278,10 +354,18 @@ export default defineComponent({
 }
 
 .success-badge {
+  width: 82px;
+  height: 82px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-badge {
   width: 84px;
   height: 84px;
   border-radius: 9999px;
-  background: rgba(56, 189, 248, 0.1);
+  background: rgba(239, 71, 111, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -335,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;
 }
@@ -359,6 +448,20 @@ export default defineComponent({
   color: #06d6a0;
 }
 
+.requirement-item.requirement-invalid {
+  color: #ef476f;
+}
+
+.requirement-item.requirement-invalid .q-icon {
+  color: #ef476f;
+}
+
+.server-error {
+  font-size: 13px;
+  font-weight: 500;
+  color: #ef476f;
+}
+
 .submit-button {
   border-radius: 15px;
   height: 50px;
@@ -366,6 +469,10 @@ export default defineComponent({
   font-weight: 500;
 }
 
+.submit-button--soft {
+  opacity: 0.5;
+}
+
 @media (max-width: 389px) {
   .reset-password-card {
     padding: 24px 16px;

package/src/components/pages/SetPassword.vue

@@ -0,0 +1,35 @@
+<template>
+  <ResetPassword
+    v-if="magicToken"
+    mode="magiclink"
+    :magic-token="magicToken"
+    :title="$t('auth.setPasswordTitle')"
+    :description="$t('auth.setPasswordDescription')"
+    :success-subtitle="$t('auth.magicLinkPasswordChangedSubtitle')" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted } from "vue"
+import ResetPassword from "./ResetPassword.vue"
+import { $prompts, $router } from "../../injects"
+
+export default defineComponent({
+  name: "SetPassword",
+  components: { ResetPassword },
+  setup() {
+    const router = $router()
+    const { LOCAL_LOGIN_ROUTE } = $prompts()
+    const $route = router.currentRoute.value
+
+    const magicToken = computed(() => (($route.query.magic as string) || "").trim())
+
+    onMounted(() => {
+      if (!magicToken.value) {
+        router.replace(LOCAL_LOGIN_ROUTE)
+      }
+    })
+
+    return { magicToken }
+  }
+})
+</script>

package/src/composables/auth.ts

@@ -49,10 +49,18 @@ export function useAuth() {
     IS_OTP,
     LOCAL_OTP_ROUTE,
     APP_VERSION,
-    USE_SSO
+    USE_SSO,
+    ENABLE_MAGIC_LINK,
+    LOCAL_FIRST_LOGIN_ROUTE
   } = $prompts()
   const { push, replace } = $router()
 
+  const isMagicLinkEnabled = (ENABLE_MAGIC_LINK || "").toLowerCase() === "y"
+
+  const goToFirstLogin = () => {
+    push(`${LOCAL_FIRST_LOGIN_ROUTE || "/first-login"}?context=activate`)
+  }
+
   const email = ref("")
   const password = ref("")
   const msalToken = ref("")
@@ -268,9 +276,11 @@ export function useAuth() {
     IS_OTP,
     LOCAL_OTP_ROUTE,
     USE_SSO,
+    isMagicLinkEnabled,
     msalState,
     msalAuth,
     goToOtpValidation,
+    goToFirstLogin,
     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()
@@ -72,14 +73,35 @@ export function useResetPassword() {
   )
 
   const passwordRequirements = computed(() => [
-    { label: t("auth.passwordRequirement.minLength"), valid: hasMinLength.value },
-    { label: t("auth.passwordRequirement.uppercase"), valid: hasUppercase.value },
-    { label: t("auth.passwordRequirement.lowercase"), valid: hasLowercase.value },
-    { label: t("auth.passwordRequirement.number"), valid: hasNumber.value },
-    { label: t("auth.passwordRequirement.letter"), valid: hasLetter.value },
+    {
+      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
+      valid: hasSpecialChar.value,
+      invalid: highlightInvalidRequirements.value && !hasSpecialChar.value
     }
   ])
 
@@ -158,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
@@ -229,6 +256,17 @@ export function useResetPassword() {
     router.push(LOCAL_LOGIN_ROUTE)
   }
 
+  // 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 goToFirstLogin = goToLoginPage
+
+  const handleInvalidSubmit = () => {
+    highlightInvalidRequirements.value = true
+  }
+
   onMounted(() => {
     if (!isOtp.value) {
       const key = $route.query.key as string
@@ -306,8 +344,13 @@ export function useResetPassword() {
     canSubmit,
     LOCAL_LOGIN_ROUTE,
     confirmPasswordInput,
+    linkExpired,
+    serverError,
+    highlightInvalidRequirements,
     onSubmit,
+    handleInvalidSubmit,
     goToLoginPage,
+    goToFirstLogin,
     icons: {
       ionEyeOutline,
       ionEyeOffOutline,

package/src/composables/useMagicLink.ts

@@ -0,0 +1,208 @@
+import { ref, computed } from "vue"
+import isEmail from "validator/es/lib/isEmail"
+import { useI18n } from "vue-i18n"
+import { AxiosError } from "axios"
+
+import { $api, $prompts, $router } from "../injects"
+
+type Channel = "email" | "sms"
+type Step = "email" | "channel" | "sent"
+
+interface ApiErrorPayload {
+  errors?: Array<{ detail?: string; title?: string }>
+}
+
+const RESEND_COUNTDOWN_SECONDS = 58
+
+export function useMagicLink() {
+  const { t } = useI18n()
+  const api = $api()
+  const router = $router()
+  const {
+    AUTH_SERVER_REQUEST_MAGICLINK_ROUTE,
+    LOCAL_SET_PASSWORD_ROUTE,
+    LOCAL_LOGIN_ROUTE,
+    APP_SERVER_BASE_URL
+  } = $prompts()
+
+  const email = ref("")
+  const emailError = ref("")
+  const apiErrorMessage = ref("")
+  const channels = ref<Channel[]>([])
+  const selectedChannel = ref<Channel>("email")
+  const step = ref<Step>("email")
+  const isLoading = ref(false)
+  const resendCountdown = ref(0)
+  const restricted = ref(false)
+  const restrictedMessage = ref("")
+  let countdownTimer: ReturnType<typeof setInterval> | undefined
+
+  // "activate" (from the login page's "Activer mon compte" button) vs. bare (from
+  // "Mot de passe oublié ?") - same page/composable, only the email step copy differs.
+  const isActivateContext = router.currentRoute.value.query.context === "activate"
+
+  const maskEmail = (value: string): string => {
+    const [local, domain] = value.split("@")
+    if (!local || !domain) return value
+    return `${local.charAt(0)}***@${domain}`
+  }
+
+  const maskedEmail = computed(() => maskEmail(email.value))
+
+  const validateEmail = (): boolean => {
+    if (!email.value) {
+      emailError.value = t("auth.emailPresenceError")
+      return false
+    }
+    if (!isEmail(email.value.trim())) {
+      emailError.value = t("auth.emailValidationError")
+      return false
+    }
+    emailError.value = ""
+    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 => {
+    return `${APP_SERVER_BASE_URL}${LOCAL_SET_PASSWORD_ROUTE || "/set-password"}`
+  }
+
+  const readApiError = (error: unknown): string | undefined => {
+    const axiosError = error as AxiosError<ApiErrorPayload>
+    const apiError = axiosError.response?.data?.errors?.[0]
+    if (!apiError) return undefined
+    if (apiError.detail) return apiError.detail
+    if (apiError.title && apiError.title.toLowerCase() !== "unprocessable content") {
+      return apiError.title
+    }
+    return undefined
+  }
+
+  const requestChannels = async () => {
+    apiErrorMessage.value = ""
+    if (!validateEmail()) return
+    isLoading.value = true
+    try {
+      const { data } = await api.post(AUTH_SERVER_REQUEST_MAGICLINK_ROUTE, {
+        auth: { email: email.value.trim() }
+      })
+      channels.value = data?.channels?.length ? data.channels : ["email"]
+      selectedChannel.value = "email"
+      step.value = "channel"
+    } catch (error) {
+      const axiosError = error as AxiosError
+      if (axiosError.response?.status === 403) {
+        // Backend check: ENV["COMPANY_RESET_PASSWORD_FORBIDDEN"] vs user.company_id,
+        // rescued as Rescueable::Forbidden with i18n key errors.magiclink.forbidden.
+        // No pre-flight signal exists (no Company.config field, nothing on /me) - the
+        // front can only ever find out by attempting the call, hence no button hiding.
+        restricted.value = true
+        restrictedMessage.value = readApiError(error) || ""
+      } else if (axiosError.response?.status === 404) {
+        apiErrorMessage.value = t("auth.error.magicLinkAccountNotFound")
+      } else {
+        apiErrorMessage.value = readApiError(error) || t("auth.error.unprocessableRequest")
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const startCountdown = () => {
+    resendCountdown.value = RESEND_COUNTDOWN_SECONDS
+    if (countdownTimer) clearInterval(countdownTimer)
+    countdownTimer = setInterval(() => {
+      if (resendCountdown.value > 0) {
+        resendCountdown.value -= 1
+      } else if (countdownTimer) {
+        clearInterval(countdownTimer)
+      }
+    }, 1000)
+  }
+
+  const sendMagicLink = async (channel?: Channel) => {
+    if (channel) selectedChannel.value = channel
+    apiErrorMessage.value = ""
+    isLoading.value = true
+    try {
+      await api.post(AUTH_SERVER_REQUEST_MAGICLINK_ROUTE, {
+        auth: {
+          email: email.value.trim(),
+          channel: selectedChannel.value,
+          base_url: buildBaseUrl()
+        }
+      })
+      step.value = "sent"
+      startCountdown()
+    } catch (error) {
+      const axiosError = error as AxiosError
+      if (axiosError.response?.status === 403) {
+        restricted.value = true
+        restrictedMessage.value = readApiError(error) || ""
+      } else {
+        apiErrorMessage.value = readApiError(error) || t("auth.error.unprocessableRequest")
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const resend = () => {
+    if (resendCountdown.value > 0 || isLoading.value) return
+    sendMagicLink()
+  }
+
+  const selectChannel = (channel: Channel) => {
+    selectedChannel.value = channel
+  }
+
+  const goBackToLogin = () => {
+    router.push(LOCAL_LOGIN_ROUTE)
+  }
+
+  const WEBMAIL_INBOX_BY_DOMAIN: Record<string, string> = {
+    "gmail.com": "https://mail.google.com/mail/u/0/#inbox",
+    "outlook.com": "https://outlook.live.com/mail/0/inbox",
+    "hotmail.com": "https://outlook.live.com/mail/0/inbox",
+    "live.com": "https://outlook.live.com/mail/0/inbox",
+    "yahoo.com": "https://mail.yahoo.com",
+    "icloud.com": "https://www.icloud.com/mail"
+  }
+
+  const openMailbox = () => {
+    if (typeof window === "undefined") return
+    const domain = email.value.split("@")[1]?.toLowerCase() || ""
+    const inboxUrl = WEBMAIL_INBOX_BY_DOMAIN[domain]
+    if (inboxUrl) {
+      window.open(inboxUrl, "_blank")
+    } else {
+      window.location.href = `mailto:${email.value}`
+    }
+  }
+
+  return {
+    email,
+    emailError,
+    apiErrorMessage,
+    channels,
+    selectedChannel,
+    step,
+    isLoading,
+    resendCountdown,
+    restricted,
+    restrictedMessage,
+    isActivateContext,
+    maskedEmail,
+    maskEmail,
+    requestChannels,
+    sendMagicLink,
+    resend,
+    selectChannel,
+    goBackToLogin,
+    openMailbox
+  }
+}