@sowell/quasar-app-extension-auth 1.8.2 → 1.8.4

package/src/components/pages/WebFirstLogin.vue

@@ -0,0 +1,930 @@
+<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
+                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="#FFEFCF" />
+                <path
+                  d="M63.1242 56.9728L44.1383 21.3586C42.7926 18.8336 39.2078 18.8336 37.861 21.3586L18.8762 56.9728C18.584 57.5209 18.4375 58.1363 18.4511 58.7587C18.4646 59.3811 18.6376 59.9894 18.9533 60.5241C19.269 61.0588 19.7165 61.5017 20.2522 61.8095C20.788 62.1174 21.3935 62.2797 22.0099 62.2806H59.9849C60.6017 62.2807 61.208 62.1191 61.7445 61.8116C62.281 61.5042 62.7293 61.0614 63.0457 60.5265C63.362 59.9916 63.5355 59.383 63.5493 58.7601C63.5631 58.1372 63.4166 57.5214 63.1242 56.9728V56.9728ZM41.0002 56.7669C40.5595 56.7669 40.1288 56.6349 39.7624 56.3876C39.396 56.1403 39.1104 55.7888 38.9418 55.3776C38.7732 54.9664 38.729 54.5139 38.815 54.0773C38.901 53.6408 39.1132 53.2397 39.4248 52.925C39.7364 52.6103 40.1333 52.3959 40.5655 52.3091C40.9977 52.2223 41.4457 52.2668 41.8528 52.4372C42.2599 52.6075 42.6079 52.896 42.8527 53.266C43.0975 53.6361 43.2282 54.0712 43.2282 54.5164C43.2282 54.8119 43.1706 55.1045 43.0586 55.3776C42.9466 55.6506 42.7825 55.8987 42.5756 56.1077C42.3687 56.3167 42.1231 56.4824 41.8528 56.5955C41.5825 56.7086 41.2928 56.7669 41.0002 56.7669ZM43.4198 34.1325L42.7804 47.8605C42.7804 48.338 42.5926 48.7959 42.2583 49.1336C41.924 49.4712 41.4707 49.6609 40.998 49.6609C40.5252 49.6609 40.0719 49.4712 39.7376 49.1336C39.4034 48.7959 39.2156 48.338 39.2156 47.8605L38.5761 34.1381C38.5618 33.8102 38.6129 33.4827 38.7265 33.1752C38.8401 32.8677 39.0138 32.5864 39.2373 32.3481C39.4608 32.1099 39.7295 31.9195 40.0274 31.7884C40.3253 31.6573 40.6463 31.5881 40.9712 31.5849H40.9946C41.3218 31.5847 41.6456 31.6515 41.9465 31.7812C42.2474 31.9109 42.5191 32.1009 42.7453 32.3396C42.9716 32.5783 43.1476 32.8608 43.2627 33.1701C43.3779 33.4794 43.4298 33.8091 43.4153 34.1392L43.4198 34.1325Z"
+                  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 class="forbidden-sso-section">
+              <p class="forbidden-sso-label">{{ $t("auth.connectWith") }}</p>
+              <q-btn
+                data-testid="forbidden-sso-btn"
+                data-cy="submit-sso-login"
+                unelevated
+                no-caps
+                dense
+                :loading="msalLoading"
+                :disable="msalLoading"
+                class="forbidden-sso-button"
+                @click="msalAuth">
+                <img
+                  src="../../assets/logo-microsoft.svg"
+                  class="forbidden-sso-icon" />
+                {{ $t("auth.microsoft") }}
+              </q-btn>
+            </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: 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"
+import { useAuth } from "composables/auth"
+
+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,
+      isActivateContext,
+      maskedEmail,
+      requestChannels,
+      sendMagicLink,
+      resend,
+      selectChannel,
+      goBackToLogin
+    } = useMagicLink()
+
+    const { msalLoading, msalAuth } = useAuth()
+
+    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 = 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,
+      msalLoading,
+      msalAuth,
+      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: 82px;
+  height: 82px;
+  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;
+}
+
+.forbidden-sso-section {
+  width: 100%;
+  margin-top: 8px;
+  text-align: left;
+}
+
+.forbidden-sso-label {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.5em;
+  color: #001d3d;
+  margin: 0 0 12px 0;
+}
+
+.forbidden-sso-button {
+  display: flex;
+  width: 260px;
+  max-width: 100%;
+  height: 36px;
+  margin: 0 auto;
+  border-radius: 8.85px;
+  background: #ebeeef;
+  font-size: 15px;
+  font-weight: 600;
+  color: #112240;
+}
+
+.forbidden-sso-button:hover {
+  background: #e0e5e7;
+}
+
+.forbidden-sso-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+@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>