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

package/src/components/pages/WebSetPassword.vue

@@ -0,0 +1,580 @@
+<template>
+  <div class="reset-container">
+    <div class="reset-card">
+      <div class="logo-container">
+        <img
+          src="../../assets/Sowell-plus-logo.svg"
+          alt="SoWell+"
+          class="logo" />
+      </div>
+
+      <!-- Expired / already used link (401) -->
+      <template v-if="linkExpired">
+        <div class="success-content" data-testid="magic-link-expired">
+          <div class="error-icon-outer">
+            <q-icon
+              :name="icons.ionCloseCircleOutline"
+              size="40px"
+              style="color: #ef476f" />
+          </div>
+          <div class="success-subtitle" data-testid="message-dialog">
+            {{ $t("auth.error.magicLinkExpired") }}
+          </div>
+        </div>
+
+        <div class="back-section">
+          <q-btn
+            flat
+            no-caps
+            class="back-button"
+            :icon="icons.ionArrowBackOutline"
+            data-testid="back-to-first-login-link"
+            @click="goToFirstLogin">
+            <span class="back-text">{{ $t("auth.backToFirstLogin") }}</span>
+          </q-btn>
+        </div>
+      </template>
+
+      <!-- Password saved -->
+      <template v-else-if="passwordUpdated">
+        <div class="success-content" data-testid="feedback-dialog">
+          <div class="success-icon-outer">
+            <div class="success-icon-inner">
+              <q-icon :name="icons.ionCheckmark" size="24px" color="white" />
+            </div>
+          </div>
+          <div class="success-title" data-testid="header-dialog">
+            {{ $t("auth.passwordSavedTitle") }}
+          </div>
+          <div class="success-subtitle" data-testid="message-dialog">
+            {{ $t("auth.magicLinkPasswordChangedSubtitle") }}
+          </div>
+          <q-btn
+            unelevated
+            no-caps
+            class="connect-button"
+            :label="$t('auth.goToLogin')"
+            data-testid="close-btn"
+            @click="goToLoginPage" />
+        </div>
+      </template>
+
+      <!-- Set password form -->
+      <template v-else>
+        <q-form
+          class="password-reset-form"
+          data-testid="set-password-form"
+          @submit.prevent="onSubmit"
+          @validation-error="handleInvalidSubmit">
+          <div class="reset-body">
+            <div class="reset-heading">
+              <h1 class="reset-title">{{ $t("auth.setPasswordTitle") }}</h1>
+              <p class="reset-subtitle">
+                {{ $t("auth.setPasswordDescription") }}
+              </p>
+            </div>
+
+            <div class="reset-inputs">
+              <q-input
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                :placeholder="$t('auth.webNewPasswordPlaceholder')"
+                :rules="validations.passwordRules"
+                hide-bottom-space
+                lazy-rules
+                data-testid="password-input"
+                data-cy="new-password"
+                outlined
+                no-shadow
+                class="form-input">
+                <template #append>
+                  <q-icon
+                    :name="
+                      showPassword ? icons.ionEyeOffOutline : icons.ionEyeOutline
+                    "
+                    class="password-toggle"
+                    @click="showPassword = !showPassword" />
+                </template>
+              </q-input>
+
+              <q-input
+                ref="confirmPasswordInput"
+                v-model="confirmPassword"
+                :type="showConfirmPassword ? 'text' : 'password'"
+                :placeholder="$t('auth.confirmPassword')"
+                :rules="validations.passwordConfirmationRules"
+                lazy-rules
+                data-testid="password-confirmation-input"
+                data-cy="confirm-password"
+                outlined
+                no-shadow
+                class="form-input">
+                <template #append>
+                  <q-icon
+                    :name="
+                      showConfirmPassword
+                        ? icons.ionEyeOffOutline
+                        : icons.ionEyeOutline
+                    "
+                    class="password-toggle"
+                    @click="showConfirmPassword = !showConfirmPassword" />
+                </template>
+              </q-input>
+            </div>
+
+            <div class="requirements-checklist" data-testid="password-requirements">
+              <div
+                v-for="requirement in passwordRequirements"
+                :key="requirement.label"
+                class="requirement-item"
+                :class="{
+                  'requirement-item--valid': requirement.valid,
+                  'requirement-item--invalid': requirement.invalid
+                }">
+                <q-icon
+                  :name="
+                    requirement.valid
+                      ? icons.ionCheckmarkCircle
+                      : icons.ionEllipseOutline
+                  "
+                  size="16px"
+                  class="requirement-icon" />
+                <span class="requirement-label">{{ requirement.label }}</span>
+              </div>
+            </div>
+
+            <!-- Deliberately NOT `disable`: the button stays clickable so an
+                 invalid submit can turn the unmet rules red instead of leaving
+                 the user with a dead button and no explanation. -->
+            <q-btn
+              :label="$t('common.saveNewPassword')"
+              :icon="icons.ionLockClosedOutline"
+              no-caps
+              unelevated
+              type="submit"
+              :loading="loading"
+              data-testid="submit-btn"
+              data-cy="submit-new-password"
+              class="reset-button"
+              :class="{ 'reset-button--inactive': !canSubmit }" />
+
+            <p v-if="serverError" class="server-error" data-testid="server-error">
+              {{ serverError }}
+            </p>
+          </div>
+
+          <div class="back-section">
+            <q-btn
+              flat
+              no-caps
+              class="back-button"
+              :icon="icons.ionArrowBackOutline"
+              data-testid="back-to-login-link"
+              @click="goToLoginPage">
+              <span class="back-text">{{ $t("auth.backToLoginFull") }}</span>
+            </q-btn>
+          </div>
+        </q-form>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, onMounted } from "vue"
+import {
+  ionArrowBackOutline,
+  ionCheckmark,
+  ionCheckmarkCircle,
+  ionCloseCircleOutline,
+  ionEllipseOutline
+} from "@quasar/extras/ionicons-v5"
+
+import { useValidateMagicLink } from "composables/useValidateMagicLink"
+import { $prompts, $router } from "../../injects"
+
+export default defineComponent({
+  name: "WebSetPassword",
+  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)
+      }
+    })
+
+    const {
+      password,
+      confirmPassword,
+      loading,
+      passwordUpdated,
+      linkExpired,
+      serverError,
+      showPassword,
+      confirmPasswordInput,
+      validations,
+      passwordRequirements,
+      canSubmit,
+      onSubmit,
+      handleInvalidSubmit,
+      goToLoginPage,
+      goToFirstLogin,
+      icons: composableIcons
+    } = useValidateMagicLink(magicToken)
+
+    // The composable exposes a single visibility flag (mobile UI shows one field
+    // at a time); the web form shows both fields, so the confirmation gets its own.
+    const showConfirmPassword = ref(false)
+
+    const icons = {
+      ...composableIcons,
+      ionArrowBackOutline,
+      ionCheckmark,
+      ionCheckmarkCircle,
+      ionCloseCircleOutline,
+      ionEllipseOutline
+    }
+
+    return {
+      password,
+      confirmPassword,
+      loading,
+      passwordUpdated,
+      linkExpired,
+      serverError,
+      showPassword,
+      showConfirmPassword,
+      confirmPasswordInput,
+      validations,
+      passwordRequirements,
+      canSubmit,
+      icons,
+      onSubmit,
+      handleInvalidSubmit,
+      goToLoginPage,
+      goToFirstLogin
+    }
+  }
+})
+</script>
+
+<style scoped>
+.reset-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.reset-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 52px;
+  width: 100%;
+  max-width: 634px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.logo {
+  height: 53px;
+  width: auto;
+}
+
+.password-reset-form {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.reset-body {
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+}
+
+.reset-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.reset-title {
+  font-size: 27px;
+  font-weight: 600;
+  line-height: 40px;
+  letter-spacing: 0.1px;
+  color: #152f3b;
+  margin: 0;
+}
+
+.reset-subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+  color: #152f3b;
+  margin: 0;
+}
+
+.reset-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.form-input :deep(.q-field__control) {
+  height: 44px;
+  border-radius: 10px !important;
+}
+
+.form-input :deep(.q-field__native),
+.form-input :deep(.q-field__input) {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5em;
+  letter-spacing: -0.5px;
+  color: #103140;
+  padding: 0 16px;
+}
+
+.form-input :deep(.q-field__marginal) {
+  height: 44px;
+}
+
+.form-input :deep(input::placeholder) {
+  color: #8f9da3;
+  opacity: 1;
+}
+
+.form-input :deep(.q-field__bottom) {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5em;
+  letter-spacing: -0.5px;
+  color: #ef476f;
+  padding-top: 6px;
+  padding-left: 0;
+  min-height: 20px;
+}
+
+.password-toggle {
+  cursor: pointer;
+  color: #103140;
+  font-size: 24px;
+  padding-right: 6px;
+}
+
+.requirements-checklist {
+  background: #f2f4f6;
+  border-radius: 8px;
+  padding: 17px 16px 16px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 16px;
+}
+
+.requirement-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #3e484f;
+}
+
+.requirement-icon {
+  color: #bbcbd2;
+  flex-shrink: 0;
+}
+
+.requirement-item--valid {
+  color: #06d6a0;
+}
+
+.requirement-item--valid .requirement-icon {
+  color: #06d6a0;
+}
+
+.requirement-item--invalid {
+  color: #ef476f;
+}
+
+.requirement-item--invalid .requirement-icon {
+  color: #ef476f;
+}
+
+.requirement-label {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14.4px;
+}
+
+.reset-button {
+  width: 100%;
+  height: 54px;
+  background: #40c4ff;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  border-radius: 15px;
+  text-transform: none;
+}
+
+.reset-button:hover {
+  background: #35b0e6;
+}
+
+.reset-button--inactive {
+  opacity: 0.5;
+}
+
+.reset-button :deep(.q-icon) {
+  font-size: 16px;
+}
+
+.server-error {
+  font-size: 14px;
+  font-weight: 400;
+  color: #ef476f;
+  margin: 12px 0 0 0;
+  text-align: center;
+}
+
+.back-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.back-button {
+  color: #103140;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5em;
+  padding: 10px;
+}
+
+.back-button :deep(.q-btn__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.back-button :deep(.q-icon) {
+  margin-right: 0;
+}
+
+.success-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  text-align: center;
+}
+
+.success-icon-outer {
+  width: 96px;
+  height: 96px;
+  border-radius: 9999px;
+  background: rgba(6, 214, 160, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.success-icon-inner {
+  width: 40px;
+  height: 40px;
+  border-radius: 9999px;
+  background: #06d6a0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-icon-outer {
+  width: 96px;
+  height: 96px;
+  border-radius: 9999px;
+  background: rgba(239, 71, 111, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.success-title {
+  font-size: 27px;
+  font-weight: 600;
+  line-height: 40px;
+  letter-spacing: 0.1px;
+  color: #152f3b;
+  margin: 0;
+}
+
+.success-subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.1px;
+  color: #152f3b;
+  margin: 0;
+}
+
+.connect-button {
+  width: 100%;
+  height: 56px;
+  background: #40c4ff;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  border-radius: 15px;
+  text-transform: none;
+}
+
+.connect-button:hover {
+  background: #35b0e6;
+}
+
+@media screen and (max-width: 768px) {
+  .reset-card {
+    padding: 32px 24px;
+    max-width: 100%;
+  }
+
+  .logo {
+    width: 160px;
+    height: auto;
+  }
+
+  .reset-title,
+  .success-title {
+    font-size: 22px;
+    line-height: 1.3em;
+  }
+
+  .requirements-checklist {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/composables/useMagicLink.ts

@@ -52,9 +52,19 @@ export function useMagicLink() {
     AUTH_SERVER_REQUEST_MAGICLINK_ROUTE,
     LOCAL_SET_PASSWORD_ROUTE,
     LOCAL_LOGIN_ROUTE,
-    APP_SERVER_BASE_URL
+    APP_SERVER_BASE_URL,
+    MAGICLINK_CHANNELS
   } = $prompts()
 
+  // Some backends advertise SMS for users who happen to have a phone number on
+  // file even when the product doesn't send SMS at all (the V1 API is in that
+  // case). MAGICLINK_CHANNELS lets an app restrict what it offers; left empty,
+  // whatever the API returns is shown.
+  const allowedChannels = (MAGICLINK_CHANNELS || "")
+    .split(",")
+    .map((channel: string) => channel.trim().toLowerCase())
+    .filter((channel: string): channel is Channel => isChannel(channel))
+
   const email = ref("")
   const emailError = ref("")
   const apiErrorMessage = ref("")
@@ -122,7 +132,10 @@ export function useMagicLink() {
         auth: { email: email.value.trim() }
       })
       const { channels: available, targets } = parseChannels(data?.channels)
-      channels.value = available.length ? available : ["email"]
+      const offered = allowedChannels.length
+        ? available.filter((channel) => allowedChannels.includes(channel))
+        : available
+      channels.value = offered.length ? offered : ["email"]
       channelTargets.value = targets
       selectedChannel.value = "email"
       step.value = "channel"

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/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:

package/src/injects/prompts.ts

@@ -24,6 +24,7 @@ export interface PromptsInterface {
   LOCAL_SET_PASSWORD_ROUTE: string
   AUTH_SERVER_REQUEST_MAGICLINK_ROUTE: string
   AUTH_SERVER_VALIDATE_MAGICLINK_ROUTE: string
+  MAGICLINK_CHANNELS?: string
 }
 export const $prompts = (): PromptsInterface => {
   const $prompts = inject<Record<"@sowell/auth", PromptsInterface>>("$prompts")

package/src/prompts.js

@@ -168,5 +168,13 @@ module.exports = function () {
       message: "API endpoint to validate a magic link and set the password (without host)",
       default: "/validate-magiclink",
     },
+    {
+      name: "MAGICLINK_CHANNELS",
+      type: "input",
+      required: false,
+      message:
+        "Magic-link channels offered to the user, comma separated (empty = whatever the API returns)",
+      default: "",
+    },
   ];
 };