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

package/src/composables/useValidateMagicLink.ts

@@ -0,0 +1,183 @@
+import { computed, ref, Ref } from "vue"
+import { useI18n } from "vue-i18n"
+import { AxiosError } from "axios"
+import {
+  ionEyeOutline,
+  ionEyeOffOutline,
+  ionLockClosedOutline
+} from "@quasar/extras/ionicons-v5"
+
+import { $api, $prompts, $router } from "../injects"
+
+interface ApiErrorPayload {
+  errors?: Array<{ detail?: string; title?: string }>
+}
+
+export function useValidateMagicLink(magicToken: Ref<string>) {
+  const { t } = useI18n()
+  const api = $api()
+  const router = $router()
+  const {
+    AUTH_SERVER_VALIDATE_MAGICLINK_ROUTE,
+    LOCAL_LOGIN_ROUTE,
+    LOCAL_FIRST_LOGIN_ROUTE
+  } = $prompts()
+
+  const password = ref("")
+  const confirmPassword = ref("")
+  const loading = ref(false)
+  const passwordUpdated = ref(false)
+  const linkExpired = ref(false)
+  const serverError = ref("")
+  const showPassword = ref(false)
+  const highlightInvalidRequirements = ref(false)
+  type ValidatableInput = { resetValidation: () => void }
+  const confirmPasswordInput = ref<ValidatableInput | null>(null)
+
+  const hasMinLength = computed(() => password.value.length >= 8)
+  const hasUppercase = computed(() => /[A-Z]/.test(password.value))
+  const hasLowercase = computed(() => /[a-z]/.test(password.value))
+  const hasNumber = computed(() => /[0-9]/.test(password.value))
+  const hasLetter = computed(() => /[a-zA-Z]/.test(password.value))
+  const hasSpecialChar = computed(() => /[^a-zA-Z0-9\s]/.test(password.value))
+
+  const isPasswordValid = computed(
+    () =>
+      hasMinLength.value &&
+      hasUppercase.value &&
+      hasLowercase.value &&
+      hasNumber.value &&
+      hasLetter.value &&
+      hasSpecialChar.value
+  )
+
+  const passwordRequirements = computed(() => [
+    {
+      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: highlightInvalidRequirements.value && !hasSpecialChar.value
+    }
+  ])
+
+  const canSubmit = computed(
+    () =>
+      isPasswordValid.value &&
+      confirmPassword.value === password.value &&
+      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.
+  const validations = {
+    passwordRules: [
+      (val: string) => !!val || false,
+      () => isPasswordValid.value || false
+    ],
+    passwordConfirmationRules: [
+      (val: string) => !!val || false,
+      (val: string) => val === password.value || false
+    ]
+  }
+
+  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
+  }
+
+  // Called via QForm's @validation-error - fires when a q-input's own :rules
+  // rejects the submit BEFORE @submit (and therefore onSubmit) ever runs, e.g. an
+  // empty password field. Without this the checklist below stays grey forever.
+  const handleInvalidSubmit = () => {
+    highlightInvalidRequirements.value = true
+  }
+
+  const onSubmit = async () => {
+    if (!canSubmit.value) {
+      highlightInvalidRequirements.value = true
+      return
+    }
+    serverError.value = ""
+    loading.value = true
+    try {
+      await api.post(AUTH_SERVER_VALIDATE_MAGICLINK_ROUTE, {
+        magic: magicToken.value,
+        password: password.value
+      })
+      passwordUpdated.value = true
+    } catch (error) {
+      const axiosError = error as AxiosError
+      if (axiosError.response?.status === 401) {
+        linkExpired.value = true
+      } else {
+        serverError.value = readApiError(error) || t("auth.error.unprocessableRequest")
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const goToLoginPage = () => {
+    router.push(LOCAL_LOGIN_ROUTE)
+  }
+
+  const goToFirstLogin = () => {
+    router.push(LOCAL_FIRST_LOGIN_ROUTE || "/first-login")
+  }
+
+  return {
+    password,
+    confirmPassword,
+    loading,
+    passwordUpdated,
+    linkExpired,
+    serverError,
+    showPassword,
+    highlightInvalidRequirements,
+    confirmPasswordInput,
+    validations,
+    passwordRequirements,
+    canSubmit,
+    LOCAL_LOGIN_ROUTE,
+    onSubmit,
+    handleInvalidSubmit,
+    goToLoginPage,
+    goToFirstLogin,
+    icons: {
+      ionEyeOutline,
+      ionEyeOffOutline,
+      ionLockClosedOutline
+    }
+  }
+}

package/src/injects/prompts.ts

@@ -19,6 +19,11 @@ export interface PromptsInterface {
   UI_PAGE: string
   APP_VERSION: string
   USE_SSO: boolean
+  ENABLE_MAGIC_LINK: string
+  LOCAL_FIRST_LOGIN_ROUTE: string
+  LOCAL_SET_PASSWORD_ROUTE: string
+  AUTH_SERVER_REQUEST_MAGICLINK_ROUTE: string
+  AUTH_SERVER_VALIDATE_MAGICLINK_ROUTE: string
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts")

package/src/prompts.js

@@ -133,5 +133,40 @@ module.exports = function () {
       message: "Version de l'application",
       default: "",
     },
+    {
+      name: "ENABLE_MAGIC_LINK",
+      type: "input",
+      required: false,
+      message: "Show the 'first login / activate account' magic-link CTA on the login page (Y/N)",
+      default: "N",
+    },
+    {
+      name: "LOCAL_FIRST_LOGIN_ROUTE",
+      type: "input",
+      required: false,
+      message: "Route for the first-login / magic-link request flow (page)",
+      default: "/first-login",
+    },
+    {
+      name: "LOCAL_SET_PASSWORD_ROUTE",
+      type: "input",
+      required: false,
+      message: "Route for the magic-link set-password flow (page)",
+      default: "/set-password",
+    },
+    {
+      name: "AUTH_SERVER_REQUEST_MAGICLINK_ROUTE",
+      type: "input",
+      required: false,
+      message: "API endpoint to request a magic link (without host)",
+      default: "/request-magiclink",
+    },
+    {
+      name: "AUTH_SERVER_VALIDATE_MAGICLINK_ROUTE",
+      type: "input",
+      required: false,
+      message: "API endpoint to validate a magic link and set the password (without host)",
+      default: "/validate-magiclink",
+    },
   ];
 };

package/src/routes/index.ts

@@ -7,10 +7,15 @@ const {
     LOCAL_UPDATE_PASSWORD_ROUTE,
     X_REQUESTED_ROLES,
     UI_PAGE,
-    LOCAL_OTP_ROUTE
+    LOCAL_OTP_ROUTE,
+    ENABLE_MAGIC_LINK,
+    LOCAL_FIRST_LOGIN_ROUTE,
+    LOCAL_SET_PASSWORD_ROUTE
   }
 } = prompts
 
+const isMagicLinkEnabled = (ENABLE_MAGIC_LINK || "").toLowerCase() === "y"
+
 // FIXME: Utiliser le UI_PAGE pour choisir les page a utiliser pour la version web ou mobile (auth et reset password)
 const webAuthRoles = ["superadmin", "clean_manager", "incivility_manager", "manager"]
 const AdminAuthRoles = ["admin"]
@@ -73,4 +78,25 @@ const routes: RouteRecordRaw[] = [
   },
 ]
 
+if (isMagicLinkEnabled) {
+  routes.push(
+    {
+      path: LOCAL_FIRST_LOGIN_ROUTE || "/first-login",
+      name: "first_login",
+      component: () =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        import("@sowell/auth/pages/FirstLogin.vue"),
+    },
+    {
+      path: LOCAL_SET_PASSWORD_ROUTE || "/set-password",
+      name: "set_password",
+      component: () =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        import("@sowell/auth/pages/SetPassword.vue"),
+    }
+  )
+}
+
 export default routes