@sowell/quasar-app-extension-auth 1.8.2 → 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/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: "",
+    },
   ];
 };

package/src/routes/index.ts

@@ -52,6 +52,19 @@ const isInRoles = (X_REQUESTED_ROLES: string): string => {
     : "ResetPassword.vue"
 }
 
+// Magiclink has two distinct UIs: the desktop one (ported from manager.sowell.app)
+// for the web consoles, the mobile one for mobile-clean / mobile-incivility /
+// reporter. Same rule as the login and reset-password pages above.
+const isWebRole = (X_REQUESTED_ROLES: string): boolean =>
+  webAuthRoles.includes(X_REQUESTED_ROLES) ||
+  AdminAuthRoles.includes(X_REQUESTED_ROLES)
+
+const firstLoginPage = (X_REQUESTED_ROLES: string): string =>
+  isWebRole(X_REQUESTED_ROLES) ? "WebFirstLogin.vue" : "FirstLogin.vue"
+
+const setPasswordPage = (X_REQUESTED_ROLES: string): string =>
+  isWebRole(X_REQUESTED_ROLES) ? "WebSetPassword.vue" : "SetPassword.vue"
+
 const routes: RouteRecordRaw[] = [
   {
     path: LOCAL_LOGIN_ROUTE,
@@ -86,7 +99,7 @@ if (isMagicLinkEnabled) {
       component: () =>
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        import("@sowell/auth/pages/FirstLogin.vue"),
+        import(`@sowell/auth/pages/${firstLoginPage(X_REQUESTED_ROLES)}`),
     },
     {
       path: LOCAL_SET_PASSWORD_ROUTE || "/set-password",
@@ -94,7 +107,7 @@ if (isMagicLinkEnabled) {
       component: () =>
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        import("@sowell/auth/pages/SetPassword.vue"),
+        import(`@sowell/auth/pages/${setPasswordPage(X_REQUESTED_ROLES)}`),
     }
   )
 }