@sowell/quasar-app-extension-auth 1.6.1 → 1.7.1

package/src/components/pages/FirstLogin.vue

@@ -0,0 +1,604 @@
+<template>
+  <q-layout
+    class="column justify-start items-center q-pb-lg bg-white first-login-page"
+    style="max-width: 100vw; overflow-x: hidden">
+    <div class="background-logo-container">
+      <img
+        src="../../assets/Background-logo.svg"
+        class="background-logo"
+        alt="Background logo" />
+    </div>
+    <div class="row justify-between items-center full-width q-px-lg q-pt-lg top-bar">
+      <div
+        class="row items-center back-link"
+        data-testid="back-btn"
+        @click="goBackToLogin">
+        <q-icon name="arrow_back" size="16px" />
+        <span class="q-ml-xs">{{ $t("auth.back") }}</span>
+      </div>
+      <img src="../../assets/sowell-min.svg" style="width: auto; height: 33px" />
+    </div>
+
+    <div class="full-width first-login-card q-mt-lg">
+      <template v-if="restricted">
+        <div class="column items-center header-section">
+          <div class="restricted-badge">
+            <svg xmlns="http://www.w3.org/2000/svg" width="82" height="82" viewBox="0 0 82 82" fill="none" class="restricted-blob">
+              <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"/>
+            </svg>
+            <div class="restricted-circle">
+              <q-icon name="lock" size="24px" color="white" />
+            </div>
+          </div>
+          <div class="title text-center q-mt-md">{{ $t("auth.restrictedTitle") }}</div>
+          <div class="subtitle text-center q-mt-sm">
+            {{ restrictedMessage || $t("auth.restrictedDescription") }}
+          </div>
+        </div>
+        <q-btn
+          data-testid="restricted-back-btn"
+          color="primary"
+          unelevated
+          no-caps
+          text-color="white"
+          class="full-width q-mt-lg submit-button"
+          @click="goBackToLogin">
+          {{ $t("auth.backToLoginFull") }}
+        </q-btn>
+      </template>
+
+      <template v-else-if="step === 'email'">
+        <template v-if="isActivateContext">
+          <div class="eyebrow-title">{{ $t("auth.firstConnectionTitle") }}</div>
+          <div class="description q-mt-sm">{{ $t("auth.firstConnectionDescription") }}</div>
+        </template>
+        <template v-else>
+          <div class="column items-center header-section">
+            <div class="icon-badge">
+              <q-icon name="verified_user" size="28px" color="primary" />
+            </div>
+            <div class="forgot-password-title text-center q-mt-md">
+              {{ $t("auth.forgotPasswordTitle") }}
+            </div>
+            <div class="subtitle text-center q-mt-sm">
+              {{ $t("auth.forgotPasswordDescription") }}
+            </div>
+          </div>
+        </template>
+        <q-form
+          class="column q-mt-lg"
+          data-testid="first-login-email-form"
+          @submit="requestChannels">
+          <div class="input-container">
+            <div class="input-label">{{ $t("auth.email") }}</div>
+            <q-input
+              v-model.trim="email"
+              data-testid="first-login-email-input"
+              data-cy="first-login-email"
+              type="email"
+              borderless
+              :error="!!emailError"
+              :error-message="emailError"
+              :placeholder="$t('auth.emailPlaceholder')"
+              class="q-mt-sm"
+              :input-style="{ fontSize: '13px', fontWeight: '500' }">
+              <template #prepend>
+                <q-icon name="mail_outline" color="#7E868E" />
+              </template>
+            </q-input>
+          </div>
+
+          <div v-if="apiErrorMessage" class="server-error q-mt-md" data-testid="server-error">
+            {{ apiErrorMessage }}
+          </div>
+
+          <q-btn
+            data-testid="first-login-continue-btn"
+            data-cy="first-login-continue"
+            color="primary"
+            unelevated
+            no-caps
+            text-color="white"
+            :loading="isLoading"
+            type="submit"
+            class="full-width q-mt-lg submit-button">
+            {{ $t("auth.continueButton") }}
+          </q-btn>
+        </q-form>
+      </template>
+
+      <template v-else-if="step === 'channel'">
+        <div class="column items-center header-section">
+          <div class="icon-badge">
+            <q-icon name="lock_outline" size="28px" color="primary" />
+          </div>
+          <div class="title text-center q-mt-md">{{ $t("auth.channelTitle") }}</div>
+          <div class="subtitle text-center q-mt-sm">{{ $t("auth.channelSubtitle") }}</div>
+        </div>
+
+        <div class="channel-options q-mt-lg">
+          <div
+            class="channel-option"
+            :class="{ 'channel-option--selected': selectedChannel === 'email' }"
+            data-testid="channel-email-option"
+            data-cy="channel-email"
+            @click="selectChannel('email')">
+            <div class="channel-icon-box">
+              <svg 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>
+            </div>
+            <div class="channel-text">
+              <div class="channel-label">{{ $t("auth.channelEmailLabel") }}</div>
+              <div class="channel-description">{{ maskedEmail }}</div>
+            </div>
+            <div
+              class="channel-radio"
+              :class="{ 'channel-radio--selected': selectedChannel === 'email' }">
+              <div v-if="selectedChannel === 'email'" class="channel-radio-dot" />
+            </div>
+          </div>
+
+          <div
+            v-if="channels.includes('sms')"
+            class="channel-option q-mt-sm"
+            :class="{ 'channel-option--selected': selectedChannel === 'sms' }"
+            data-testid="channel-sms-option"
+            data-cy="channel-sms"
+            @click="selectChannel('sms')">
+            <div class="channel-icon-box">
+              <svg 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-text">
+              <div class="channel-label">{{ $t("auth.channelSmsLabel") }}</div>
+              <div class="channel-description">{{ $t("auth.channelSmsDescription") }}</div>
+            </div>
+            <div
+              class="channel-radio"
+              :class="{ 'channel-radio--selected': selectedChannel === 'sms' }">
+              <div v-if="selectedChannel === 'sms'" class="channel-radio-dot" />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="apiErrorMessage" class="server-error q-mt-md" data-testid="server-error">
+          {{ apiErrorMessage }}
+        </div>
+
+        <q-btn
+          data-testid="send-magic-link-btn"
+          data-cy="send-magic-link"
+          color="primary"
+          unelevated
+          no-caps
+          text-color="white"
+          :loading="isLoading"
+          class="full-width q-mt-lg submit-button"
+          @click="sendMagicLink()">
+          {{ $t("auth.sendMagicLink") }}
+        </q-btn>
+
+        <div class="expiry-banner">
+          <div class="banner-icon-badge">
+            <q-icon :name="icons.ionWarningOutline" size="12px" color="white" />
+          </div>
+          <span class="q-ml-sm">{{ $t("auth.channelExpiryWarning") }}</span>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="column items-center header-section">
+          <div class="success-badge">
+            <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="#E7F8FF"/>
+              <path d="M41.0002 63.6615C53.4542 63.6615 63.5502 53.4896 63.5502 40.9419C63.5502 28.3942 53.4542 18.2223 41.0002 18.2223C28.5462 18.2223 18.4502 28.3942 18.4502 40.9419C18.4502 53.4896 28.5462 63.6615 41.0002 63.6615Z" fill="#40C4FF"/>
+              <path d="M37.9271 52.7776C37.5379 52.7781 37.1541 52.6868 36.8062 52.511C36.4584 52.3353 36.1562 52.08 35.9238 51.7655L29.7663 43.4957C29.5555 43.2317 29.3996 42.9277 29.3076 42.6018C29.2157 42.276 29.1896 41.9348 29.231 41.5986C29.2724 41.2624 29.3803 40.938 29.5485 40.6446C29.7166 40.3512 29.9415 40.0948 30.2099 39.8906C30.4782 39.6865 30.7845 39.5387 31.1106 39.456C31.4367 39.3734 31.776 39.3575 32.1082 39.4095C32.4405 39.4614 32.7591 39.58 33.045 39.7583C33.3309 39.9366 33.5784 40.1709 33.7728 40.4473L37.8266 45.8712L48.162 30.2426C48.5412 29.7088 49.1114 29.3443 49.7523 29.2261C50.3932 29.108 51.0545 29.2454 51.5968 29.6093C52.139 29.9733 52.5196 30.5353 52.6583 31.1767C52.7969 31.818 52.6828 32.4886 52.3399 33.0468L40.0131 51.6464C39.7907 51.9823 39.4917 52.2598 39.1411 52.4556C38.7906 52.6513 38.3986 52.7597 37.998 52.7717L37.9271 52.7776Z" fill="white"/>
+            </svg>
+          </div>
+          <div class="title text-center q-mt-md">{{ $t("auth.magicLinkSentTitle") }}</div>
+          <div class="subtitle text-center q-mt-sm">
+            {{ $t("auth.magicLinkSentDescription") }}
+          </div>
+          <div class="subtitle-secondary text-center q-mt-md">
+            {{ $t("auth.magicLinkCheckInboxMessage") }}
+          </div>
+        </div>
+
+        <q-btn
+          data-testid="open-mailbox-btn"
+          data-cy="open-mailbox"
+          color="primary"
+          unelevated
+          no-caps
+          text-color="white"
+          class="full-width q-mt-lg submit-button"
+          @click="openMailbox">
+          <q-icon name="mail_outline" size="18px" class="q-mr-sm" />
+          {{ $t("auth.openMailbox") }}
+        </q-btn>
+
+        <q-btn
+          data-testid="resend-magic-link-btn"
+          data-cy="resend-magic-link"
+          outline
+          no-caps
+          class="full-width q-mt-sm resend-button"
+          :disable="resendCountdown > 0 || isLoading"
+          :loading="isLoading"
+          @click="resend">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="q-mr-sm"><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="#40C4FF"/></svg>
+          {{
+            resendCountdown > 0
+              ? $t("auth.resendMagicLinkCountdown", { seconds: resendCountdown })
+              : $t("auth.resendMagicLink")
+          }}
+        </q-btn>
+
+        <div class="warning-banner">
+          <div class="banner-icon-badge">
+            <q-icon :name="icons.ionInformationCircleOutline" size="12px" color="white" />
+          </div>
+          <span class="q-ml-sm">{{ $t("auth.magicLinkWarning") }}</span>
+        </div>
+      </template>
+    </div>
+  </q-layout>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import {
+  ionWarningOutline,
+  ionInformationCircleOutline
+} from "@quasar/extras/ionicons-v5"
+import { useMagicLink } from "composables/useMagicLink"
+
+export default defineComponent({
+  name: "FirstLogin",
+  setup() {
+    const {
+      email,
+      emailError,
+      apiErrorMessage,
+      channels,
+      selectedChannel,
+      step,
+      isLoading,
+      resendCountdown,
+      restricted,
+      restrictedMessage,
+      isActivateContext,
+      maskedEmail,
+      requestChannels,
+      sendMagicLink,
+      resend,
+      selectChannel,
+      goBackToLogin,
+      openMailbox
+    } = useMagicLink()
+
+    const icons = {
+      ionWarningOutline,
+      ionInformationCircleOutline
+    }
+
+    return {
+      email,
+      emailError,
+      apiErrorMessage,
+      channels,
+      selectedChannel,
+      step,
+      isLoading,
+      resendCountdown,
+      restricted,
+      restrictedMessage,
+      isActivateContext,
+      maskedEmail,
+      icons,
+      requestChannels,
+      sendMagicLink,
+      resend,
+      selectChannel,
+      goBackToLogin,
+      openMailbox
+    }
+  }
+})
+</script>
+
+<style scoped>
+.first-login-page {
+  min-height: 100vh;
+}
+
+.background-logo-container {
+  position: fixed;
+  top: -53px;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.25;
+  overflow: hidden;
+}
+
+.background-logo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  max-width: 100%;
+  max-height: 100vh;
+}
+
+.top-bar {
+  z-index: 1;
+  max-width: 430px;
+}
+
+.back-link {
+  cursor: pointer;
+  color: #00668a;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.first-login-card {
+  z-index: 1;
+  max-width: 398px;
+  padding: 32px 24px;
+  margin-top: 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.eyebrow-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #41c4ff;
+  text-transform: uppercase;
+}
+
+.description {
+  font-size: 16px;
+  font-weight: 400;
+  color: #152f3b;
+}
+
+.forgot-password-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #20627f;
+}
+
+.header-section {
+  width: 100%;
+}
+
+.icon-badge {
+  width: 64px;
+  height: 64px;
+  border-radius: 9999px;
+  background: rgba(56, 189, 248, 0.1);
+  border: 1px solid rgba(56, 189, 248, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.success-badge {
+  width: 82px;
+  height: 82px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.restricted-badge {
+  position: relative;
+  width: 82px;
+  height: 82px;
+}
+
+.restricted-blob {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.restricted-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 45px;
+  height: 45px;
+  border-radius: 9999px;
+  background: #ffce6e;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #20627f;
+  line-height: 1.4;
+}
+
+.subtitle {
+  font-size: 14px;
+  font-weight: 400;
+  color: #3e484f;
+}
+
+.subtitle-secondary {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(62, 72, 79, 0.8);
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #112240;
+}
+
+.first-login-page :deep(.q-field__control-container) {
+  padding: 4px;
+}
+
+.first-login-page :deep(div.q-field__control) {
+  border: 1px solid #bdc8d1;
+  border-radius: 8px;
+  height: 55px;
+  padding: 0 12px;
+}
+
+.first-login-page :deep(.q-field--error .q-field__control) {
+  border-color: #ff8b87;
+}
+
+.first-login-page :deep(.q-field--error .q-field__bottom) {
+  color: #ef476f;
+}
+
+.first-login-page :deep(.q-field__bottom) {
+  padding: 4px 0px;
+}
+
+.server-error {
+  font-size: 13px;
+  font-weight: 500;
+  color: #ef476f;
+}
+
+.submit-button {
+  border-radius: 15px;
+  height: 54px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.resend-button {
+  border-radius: 15px;
+  height: 56px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #414651;
+  border-color: #d5d7da;
+}
+
+.channel-options {
+  width: 100%;
+}
+
+.channel-option {
+  display: flex;
+  align-items: center;
+  padding: 17px;
+  border-radius: 8px;
+  border: 1px solid #bdc8d1;
+  cursor: pointer;
+}
+
+.channel-option--selected {
+  border-color: #40c4ff;
+  background: #f3fcff;
+}
+
+.channel-icon-box {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  border-radius: 8px;
+  background: #cff0ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+.channel-text {
+  flex: 1;
+}
+
+.channel-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
+  letter-spacing: 0.7px;
+}
+
+.channel-description {
+  font-size: 14px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.channel-radio {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border-radius: 9999px;
+  border: 1px solid #bdc8d1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.channel-radio--selected {
+  background: #40c4ff;
+  border-color: #40c4ff;
+}
+
+.channel-radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background: white;
+}
+
+.expiry-banner {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 189, 61, 0.15);
+  border: 1px solid rgba(255, 206, 110, 0.5);
+  border-radius: 8px;
+  padding: 12px 16px;
+  font-size: 13px;
+  color: #607680;
+  margin-top: auto;
+}
+
+.banner-icon-badge {
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  border-radius: 9999px;
+  background: #f09e00;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.warning-banner {
+  display: flex;
+  align-items: flex-start;
+  background: rgba(255, 189, 61, 0.15);
+  border-left: 4px solid #ffce6e;
+  border-radius: 0 8px 8px 0;
+  padding: 16px 20px 16px 16px;
+  font-size: 14px;
+  color: #607680;
+  margin-top: auto;
+}
+
+@media (max-width: 389px) {
+  .first-login-card {
+    padding: 24px 16px;
+  }
+}
+</style>