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

package/src/components/pages/WebFirstLogin.vue

@@ -0,0 +1,864 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <div class="logo-container">
+        <img
+          src="../../assets/Sowell-plus-logo.svg"
+          alt="SoWell+"
+          class="logo" />
+      </div>
+
+      <div class="login-content">
+        <!-- Step: forbidden (403) - takes precedence over `step`, the backend can
+             reject on either magiclink call (with or without channel). -->
+        <template v-if="restricted">
+          <div class="forbidden-content" data-testid="magic-link-forbidden">
+            <div class="warning-icon-outer">
+              <svg width="32" height="30" viewBox="0 0 32 30" fill="none">
+                <path
+                  d="M31.33 26.0414L18.0152 1.31484C17.0714 -0.438281 14.5574 -0.438281 13.6128 1.31484L0.298773 26.0414C0.0938612 26.422 -0.00887221 26.8492 0.000600544 27.2814C0.0100733 27.7135 0.131429 28.1358 0.352821 28.507C0.574214 28.8783 0.888079 29.1858 1.26378 29.3995C1.63948 29.6133 2.06418 29.7259 2.49643 29.7266H29.1285C29.561 29.7266 29.9862 29.6144 30.3625 29.401C30.7387 29.1875 31.0531 28.8801 31.275 28.5087C31.4968 28.1374 31.6185 27.7148 31.6282 27.2823C31.6378 26.8499 31.5351 26.4223 31.33 26.0414V26.0414ZM15.8144 25.8984C15.5054 25.8984 15.2033 25.8068 14.9463 25.6351C14.6894 25.4634 14.4891 25.2194 14.3708 24.9339C14.2526 24.6484 14.2216 24.3342 14.2819 24.0311C14.3422 23.728 14.491 23.4496 14.7095 23.2311C14.9281 23.0126 15.2065 22.8638 15.5096 22.8035C15.8127 22.7432 16.1268 22.7741 16.4123 22.8924C16.6978 23.0106 16.9419 23.2109 17.1136 23.4679C17.2853 23.7248 17.3769 24.0269 17.3769 24.3359C17.3769 24.5411 17.3365 24.7443 17.258 24.9339C17.1794 25.1235 17.0643 25.2957 16.9193 25.4408C16.7742 25.5859 16.6019 25.701 16.4123 25.7795C16.2228 25.858 16.0196 25.8984 15.8144 25.8984ZM17.5113 10.1836L17.0628 19.7148C17.0628 20.0464 16.9311 20.3643 16.6967 20.5987C16.4623 20.8331 16.1444 20.9648 15.8128 20.9648C15.4813 20.9648 15.1634 20.8331 14.929 20.5987C14.6945 20.3643 14.5628 20.0464 14.5628 19.7148L14.1144 10.1875C14.1043 9.95983 14.1402 9.73247 14.2198 9.51896C14.2995 9.30545 14.4213 9.11017 14.5781 8.94475C14.7348 8.77933 14.9233 8.64716 15.1322 8.55612C15.3411 8.46508 15.5662 8.41703 15.7941 8.41484H15.8105C16.0399 8.41473 16.267 8.46109 16.478 8.55114C16.689 8.6412 16.8796 8.77307 17.0383 8.9388C17.1969 9.10454 17.3204 9.3007 17.4011 9.51545C17.4819 9.73019 17.5183 9.95908 17.5081 10.1883L17.5113 10.1836Z"
+                  fill="#FFBD3D" />
+              </svg>
+            </div>
+            <h1 class="forbidden-title" data-testid="forbidden-title">
+              {{ $t("auth.restrictedTitle") }}
+            </h1>
+            <p class="forbidden-message" data-testid="forbidden-message">
+              {{ forbiddenMessageParts.before
+              }}<strong>{{ forbiddenMessageParts.bold }}</strong
+              >{{ forbiddenMessageParts.after }}
+            </p>
+          </div>
+
+          <a
+            href="#"
+            class="back-link back-link--center back-link--lg"
+            data-testid="back-to-login-link"
+            @click.prevent="goBackToLogin">
+            <q-icon :name="icons.ionArrowBackOutline" size="24px" />
+            {{ $t("auth.backToLoginFull") }}
+          </a>
+        </template>
+
+        <!-- Step: email -->
+        <template v-else-if="step === 'email'">
+          <div class="step-header" data-testid="first-login-email-step">
+            <h1 class="step-title" data-testid="first-login-title">
+              {{ stepTitle }}
+            </h1>
+            <p class="step-subtitle" data-testid="first-login-description">
+              {{ stepDescription }}
+            </p>
+          </div>
+
+          <q-form
+            class="login-form"
+            data-testid="first-login-email-form"
+            @submit.prevent="requestChannels">
+            <div class="form-group">
+              <q-input
+                v-model.trim="email"
+                type="email"
+                :placeholder="$t('auth.emailPlaceholder')"
+                :error="!!emailError"
+                :error-message="emailError"
+                data-testid="first-login-email-input"
+                data-cy="first-login-email"
+                outlined
+                no-shadow
+                class="form-input" />
+            </div>
+
+            <q-btn
+              :label="$t('auth.continueButton')"
+              no-caps
+              unelevated
+              type="submit"
+              :loading="isLoading"
+              :disable="!isEmailValid || isLoading"
+              data-testid="first-login-continue-btn"
+              data-cy="first-login-continue"
+              class="primary-button" />
+          </q-form>
+
+          <div
+            v-if="apiErrorMessage"
+            class="api-error"
+            data-testid="first-login-api-error">
+            {{ apiErrorMessage }}
+          </div>
+
+          <div class="or-divider">
+            <div class="or-divider-line"></div>
+            <span class="or-divider-text">{{ $t("common.or") }}</span>
+            <div class="or-divider-line"></div>
+          </div>
+
+          <a
+            href="#"
+            class="back-link back-link--center back-link--lg"
+            data-testid="back-to-login-link"
+            @click.prevent="goBackToLogin">
+            <q-icon :name="icons.ionArrowBackOutline" size="24px" />
+            {{ $t("auth.backToLoginFull") }}
+          </a>
+        </template>
+
+        <!-- Step: channel -->
+        <template v-else-if="step === 'channel'">
+          <div class="step-header" data-testid="first-login-channel-step">
+            <h1 class="step-title" data-testid="channel-title">
+              {{ $t("auth.channelTitle") }}
+            </h1>
+            <p class="step-subtitle" data-testid="channel-subtitle">
+              {{ $t("auth.channelSubtitle") }}
+            </p>
+          </div>
+
+          <div class="channel-list" data-testid="channel-list">
+            <div
+              v-for="option in channelOptions"
+              :key="option.value"
+              class="channel-option"
+              :class="{
+                'channel-option--selected': selectedChannel === option.value
+              }"
+              :data-testid="`channel-option-${option.value}`"
+              @click="selectChannel(option.value)">
+              <div class="channel-icon-box">
+                <svg
+                  v-if="option.value === 'email'"
+                  width="20"
+                  height="16"
+                  viewBox="0 0 20 16"
+                  fill="none">
+                  <path
+                    d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2V16M10 9L2 4V14V14V14H18V14V14V4L10 9V9M10 7L18 2H2L10 7V7M2 4V2V2V4V14V14V14V14V14V14V4V4"
+                    fill="#40C4FF" />
+                </svg>
+                <svg
+                  v-else
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none">
+                  <path
+                    d="M6 9C6.28333 9 6.52083 8.90417 6.7125 8.7125C6.90417 8.52083 7 8.28333 7 8C7 7.71667 6.90417 7.47917 6.7125 7.2875C6.52083 7.09583 6.28333 7 6 7C5.71667 7 5.47917 7.09583 5.2875 7.2875C5.09583 7.47917 5 7.71667 5 8C5 8.28333 5.09583 8.52083 5.2875 8.7125C5.47917 8.90417 5.71667 9 6 9V9M10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9V9M14 9C14.2833 9 14.5208 8.90417 14.7125 8.7125C14.9042 8.52083 15 8.28333 15 8C15 7.71667 14.9042 7.47917 14.7125 7.2875C14.5208 7.09583 14.2833 7 14 7C13.7167 7 13.4792 7.09583 13.2875 7.2875C13.0958 7.47917 13 7.71667 13 8C13 8.28333 13.0958 8.52083 13.2875 8.7125C13.4792 8.90417 13.7167 9 14 9V9M0 20V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H4L0 20V20M3.15 14H18V14V14V2V2V2H2V2V2V15.125L3.15 14V14M2 14V14V2V2V2V2V2V2V14V14V14V14V14"
+                    fill="#00668A" />
+                </svg>
+              </div>
+              <div class="channel-texts">
+                <div class="channel-label" data-testid="channel-option-label">
+                  {{ option.label }}
+                </div>
+                <div
+                  class="channel-description"
+                  data-testid="channel-option-description">
+                  {{ option.description }}
+                </div>
+              </div>
+              <div
+                class="channel-radio"
+                :class="{
+                  'channel-radio--selected': selectedChannel === option.value
+                }">
+                <div
+                  v-if="selectedChannel === option.value"
+                  class="channel-radio-dot" />
+              </div>
+            </div>
+          </div>
+
+          <q-btn
+            :label="$t('auth.sendMagicLink')"
+            no-caps
+            unelevated
+            :loading="isLoading"
+            :disable="isLoading"
+            data-testid="send-magic-link-btn"
+            data-cy="send-magic-link"
+            class="primary-button"
+            @click="sendMagicLink(selectedChannel)" />
+
+          <div
+            v-if="apiErrorMessage"
+            class="api-error"
+            data-testid="first-login-api-error">
+            {{ apiErrorMessage }}
+          </div>
+
+          <a
+            href="#"
+            class="back-link back-link--center back-link--lg"
+            data-testid="back-to-login-link"
+            @click.prevent="goBackToLogin">
+            <q-icon :name="icons.ionArrowBackOutline" size="24px" />
+            {{ $t("auth.backToLoginFull") }}
+          </a>
+        </template>
+
+        <!-- Step: sent -->
+        <template v-else>
+          <div class="sent-content" data-testid="magic-link-sent">
+            <div class="success-icon-outer">
+              <q-icon
+                :name="icons.ionCheckmarkCircle"
+                size="40px"
+                style="color: #06d6a0" />
+            </div>
+            <h1 class="sent-title" data-testid="sent-title">
+              {{ $t("auth.magicLinkSentTitle") }}
+            </h1>
+            <p class="sent-description" data-testid="sent-description">
+              {{ $t("auth.magicLinkSentDescription") }}
+            </p>
+
+            <div
+              class="info-banner"
+              :data-testid="
+                isSmsChannel ? 'check-sms-banner' : 'check-inbox-banner'
+              ">
+              <q-icon
+                v-if="isSmsChannel"
+                :name="icons.ionChatbubbleEllipsesOutline"
+                size="13px"
+                color="primary" />
+              <svg v-else width="13" height="11" viewBox="0 0 13 11" fill="none">
+                <path
+                  d="M8.1375 10.5L5.65833 8.02083L6.475 7.20417L8.1375 8.86667L11.4333 5.57083L12.25 6.3875L8.1375 10.5ZM5.83333 4.08333L10.5 1.16667H1.16667L5.83333 4.08333ZM5.83333 5.25L1.16667 2.33333V8.16667H4.17083L5.3375 9.33333H1.16667C0.845833 9.33333 0.571181 9.2191 0.342708 8.99063C0.114236 8.76215 0 8.4875 0 8.16667V1.16667C0 0.845833 0.114236 0.571181 0.342708 0.342708C0.571181 0.114236 0.845833 0 1.16667 0H10.5C10.8208 0 11.0955 0.114236 11.324 0.342708C11.5524 0.571181 11.6667 0.845833 11.6667 1.16667V3.70417L10.5 4.87083V2.33333L5.83333 5.25Z"
+                  fill="#00668A" />
+              </svg>
+              <span data-testid="magic-link-check-message">{{
+                checkChannelMessage
+              }}</span>
+            </div>
+
+            <q-btn
+              no-caps
+              unelevated
+              class="resend-button"
+              :disable="resendCountdown > 0 || isLoading"
+              data-testid="resend-magic-link-btn"
+              data-cy="resend-magic-link"
+              @click="resend">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path
+                  d="M6.75 13.5C5.025 13.5 3.52187 12.9281 2.24062 11.7844C0.959375 10.6406 0.225 9.2125 0.0375 7.5H1.575C1.75 8.8 2.32812 9.875 3.30938 10.725C4.29063 11.575 5.4375 12 6.75 12C8.2125 12 9.45312 11.4906 10.4719 10.4719C11.4906 9.45312 12 8.2125 12 6.75C12 5.2875 11.4906 4.04688 10.4719 3.02813C9.45312 2.00938 8.2125 1.5 6.75 1.5C5.8875 1.5 5.08125 1.7 4.33125 2.1C3.58125 2.5 2.95 3.05 2.4375 3.75H4.5V5.25H0V0.75H1.5V2.5125C2.1375 1.7125 2.91562 1.09375 3.83437 0.65625C4.75312 0.21875 5.725 0 6.75 0C7.6875 0 8.56562 0.178125 9.38437 0.534375C10.2031 0.890625 10.9156 1.37188 11.5219 1.97812C12.1281 2.58437 12.6094 3.29688 12.9656 4.11562C13.3219 4.93437 13.5 5.8125 13.5 6.75C13.5 7.6875 13.3219 8.56562 12.9656 9.38437C12.6094 10.2031 12.1281 10.9156 11.5219 11.5219C10.9156 12.1281 10.2031 12.6094 9.38437 12.9656C8.56562 13.3219 7.6875 13.5 6.75 13.5ZM8.85 9.9L6 7.05V3H7.5V6.45L9.9 8.85L8.85 9.9Z"
+                  fill="white" />
+              </svg>
+              <span>{{ resendLabel }}</span>
+            </q-btn>
+
+            <div class="warning-banner" data-testid="magic-link-warning">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path
+                  d="M9 15H11V9H9V15V15M10 7C10.2833 7 10.5208 6.90417 10.7125 6.7125C10.9042 6.52083 11 6.28333 11 6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6C9 6.28333 9.09583 6.52083 9.2875 6.7125C9.47917 6.90417 9.71667 7 10 7V7M10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20V20M10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18V18M10 10V10V10V10V10V10V10V10V10V10"
+                  fill="#FFCE6E" />
+              </svg>
+              <span data-testid="magic-link-warning-label">{{
+                magicLinkWarningMessage
+              }}</span>
+            </div>
+
+            <div
+              v-if="apiErrorMessage"
+              class="api-error"
+              data-testid="first-login-api-error">
+              {{ apiErrorMessage }}
+            </div>
+          </div>
+
+          <a
+            href="#"
+            class="back-link back-link--center"
+            data-testid="back-to-login-link"
+            @click.prevent="goBackToLogin">
+            <q-icon :name="icons.ionArrowBackOutline" size="20px" />
+            {{ $t("auth.backToLoginFull") }}
+          </a>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue"
+import { useI18n } from "vue-i18n"
+import isEmail from "validator/es/lib/isEmail"
+import {
+  ionArrowBackOutline,
+  ionCheckmarkCircle,
+  ionChatbubbleEllipsesOutline
+} from "@quasar/extras/ionicons-v5"
+
+import { useMagicLink } from "composables/useMagicLink"
+
+type Channel = "email" | "sms"
+
+interface ChannelOption {
+  value: Channel
+  label: string
+  description: string
+}
+
+interface ForbiddenMessageParts {
+  before: string
+  bold: string
+  after: string
+}
+
+// The 403 copy names Microsoft explicitly; the word is bolded wherever it lands
+// in the sentence, so the message stays a single i18n string (or the API detail).
+const FORBIDDEN_MESSAGE_BOLD_KEYWORD = "Microsoft"
+
+export default defineComponent({
+  name: "WebFirstLogin",
+  setup() {
+    const { t, te } = useI18n()
+
+    const {
+      email,
+      emailError,
+      apiErrorMessage,
+      channels,
+      channelTargets,
+      selectedChannel,
+      step,
+      isLoading,
+      resendCountdown,
+      restricted,
+      restrictedMessage,
+      isActivateContext,
+      maskedEmail,
+      requestChannels,
+      sendMagicLink,
+      resend,
+      selectChannel,
+      goBackToLogin
+    } = useMagicLink()
+
+    const icons = {
+      ionArrowBackOutline,
+      ionCheckmarkCircle,
+      ionChatbubbleEllipsesOutline
+    }
+
+    const translateOrFallback = (key: string, fallbackKey: string): string =>
+      te(key) ? t(key) : t(fallbackKey)
+
+    const stepTitle = computed(() =>
+      isActivateContext
+        ? t("auth.firstConnectionTitle")
+        : t("auth.forgotPasswordTitle")
+    )
+
+    const stepDescription = computed(() =>
+      isActivateContext
+        ? t("auth.firstConnectionDescription")
+        : t("auth.forgotPasswordDescription")
+    )
+
+    // The composable only fills emailError on submit; the Continue button needs
+    // to know about validity while typing, hence this local check.
+    const isEmailValid = computed(() => isEmail(email.value.trim()))
+
+    const channelDescription = (channel: Channel): string => {
+      const target = channelTargets.value[channel]
+      if (target) return target
+
+      return channel === "email"
+        ? maskedEmail.value
+        : t("auth.channelSmsDescription")
+    }
+
+    const channelOptions = computed<ChannelOption[]>(() =>
+      channels.value.map((channel) => ({
+        value: channel,
+        label:
+          channel === "email"
+            ? t("auth.channelEmailLabel")
+            : t("auth.channelSmsLabel"),
+        description: channelDescription(channel)
+      }))
+    )
+
+    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")
+    )
+
+    const resendLabel = computed(() =>
+      resendCountdown.value > 0
+        ? t("auth.resendMagicLinkCountdown", { seconds: resendCountdown.value })
+        : t("auth.resendMagicLink")
+    )
+
+    const forbiddenMessageParts = computed<ForbiddenMessageParts>(() => {
+      const message = restrictedMessage.value || t("auth.restrictedDescription")
+      const keywordIndex = message.indexOf(FORBIDDEN_MESSAGE_BOLD_KEYWORD)
+      if (keywordIndex === -1) {
+        return { before: message, bold: "", after: "" }
+      }
+      return {
+        before: message.slice(0, keywordIndex),
+        bold: FORBIDDEN_MESSAGE_BOLD_KEYWORD,
+        after: message.slice(
+          keywordIndex + FORBIDDEN_MESSAGE_BOLD_KEYWORD.length
+        )
+      }
+    })
+
+    return {
+      email,
+      emailError,
+      apiErrorMessage,
+      selectedChannel,
+      step,
+      isLoading,
+      resendCountdown,
+      restricted,
+      icons,
+      stepTitle,
+      stepDescription,
+      isEmailValid,
+      channelOptions,
+      isSmsChannel,
+      checkChannelMessage,
+      magicLinkWarningMessage,
+      resendLabel,
+      forbiddenMessageParts,
+      requestChannels,
+      sendMagicLink,
+      resend,
+      selectChannel,
+      goBackToLogin
+    }
+  }
+})
+</script>
+
+<style scoped>
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 49px 108px;
+  width: 100%;
+  max-width: 668px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.login-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 49px;
+}
+
+.logo {
+  height: 53px;
+  width: auto;
+}
+
+.step-header {
+  margin-bottom: 29px;
+  text-align: left;
+}
+
+.step-title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.18em;
+  letter-spacing: -0.5px;
+  color: #152f3b;
+  margin: 0 0 18px 0;
+}
+
+.step-subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: #152f3b;
+  margin: 0;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.form-input :deep(.q-field__control) {
+  height: 65px;
+  border-radius: 15px !important;
+}
+
+.form-input :deep(.q-field__native) {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5em;
+  letter-spacing: -0.5px;
+  color: #103140;
+  padding: 0 16px;
+}
+
+.form-input :deep(.q-field__bottom) {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: #ef476f;
+  padding-top: 9px;
+  padding-left: 0;
+  min-height: 24px;
+}
+
+.primary-button {
+  width: 100%;
+  height: 65px;
+  background: #40c4ff;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.33em;
+  letter-spacing: -0.5px;
+  border-radius: 15px;
+  text-transform: none;
+  margin-top: 8px;
+}
+
+.primary-button:hover {
+  background: #35b0e6;
+}
+
+.api-error {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 1.5em;
+  color: #ef476f;
+  text-align: center;
+}
+
+.channel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 22px;
+}
+
+.channel-option {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  border: 1px solid #bdc8d1;
+  border-radius: 15px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.channel-option--selected {
+  border-color: #40c4ff;
+  background: #f3fcff;
+}
+
+.channel-icon-box {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  background: #cff0ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.channel-texts {
+  flex: 1;
+  min-width: 0;
+}
+
+.channel-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #103140;
+}
+
+.channel-description {
+  font-size: 14px;
+  font-weight: 400;
+  color: #607680;
+  margin-top: 2px;
+}
+
+.channel-radio {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  border: 1.5px solid #bdc8d1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.channel-radio--selected {
+  border-color: #40c4ff;
+  background: #40c4ff;
+}
+
+.channel-radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background: #ffffff;
+}
+
+.back-link {
+  color: #001d3d;
+  text-decoration: none;
+  font-size: 15px;
+  line-height: 1.5em;
+  cursor: pointer;
+  transition: color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+}
+
+.back-link:hover {
+  color: #35b0e6;
+}
+
+.back-link--center {
+  justify-content: center;
+}
+
+.back-link--lg {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+
+.or-divider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: 29px;
+}
+
+.or-divider-line {
+  flex: 1;
+  height: 1px;
+  background: #bdc8d1;
+}
+
+.or-divider-text {
+  padding: 0 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #6e7980;
+}
+
+.sent-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  flex: 1;
+}
+
+.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;
+  margin-bottom: 8px;
+}
+
+.sent-title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.18em;
+  letter-spacing: -0.5px;
+  color: #152f3b;
+  margin: 0;
+}
+
+.sent-description {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: #152f3b;
+  margin: 0;
+}
+
+.info-banner {
+  width: 100%;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  background: #f2f4f6;
+  border: 1px solid rgba(189, 200, 209, 0.3);
+  border-radius: 15px;
+  padding: 0 41px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e484f;
+}
+
+.resend-button {
+  width: 100%;
+  height: 56px;
+  background: #40c4ff;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 15px;
+  text-transform: none;
+}
+
+/* q-btn wraps the default slot in .q-btn__content: a gap set on the button
+   itself would never reach the icon/label pair inside it. */
+.resend-button :deep(.q-btn__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.resend-button:hover {
+  background: #35b0e6;
+}
+
+.warning-banner {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: rgba(255, 189, 61, 0.15);
+  border-left: 4px solid #ffce6e;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 14px 16px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: #607680;
+  text-align: left;
+}
+
+.warning-banner svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.forbidden-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  flex: 1;
+}
+
+.warning-icon-outer {
+  width: 96px;
+  height: 96px;
+  border-radius: 9999px;
+  background: rgba(255, 189, 61, 0.27);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.forbidden-title {
+  font-size: 27px;
+  font-weight: 600;
+  line-height: 1.18em;
+  letter-spacing: -0.5px;
+  color: #152f3b;
+  margin: 0;
+}
+
+.forbidden-message {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: #152f3b;
+  margin: 0;
+  text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+  .login-card {
+    padding: 32px 24px;
+    max-width: 100%;
+    min-height: auto;
+  }
+
+  .logo {
+    width: 200px;
+    height: auto;
+  }
+
+  .step-title {
+    font-size: 20px;
+  }
+
+  .form-input :deep(.q-field__control) {
+    height: 56px;
+  }
+
+  .primary-button {
+    height: 56px;
+  }
+}
+</style>