adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/modals/id/IdLoginModal.vue

@@ -1,336 +1,370 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
-import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import * as z from 'zod'
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const { $toast } = useNuxtApp()
-const { commonAuth } = useAppConfig()
-const { t, locale } = useI18n()
-const { pk, landing } = useUrls()
-const route = useRoute()
-
-const { myLayer } = useAppConfig()
-const mode = myLayer.mode
-
-const COOKIE_DOMAIN = `.${mode}.kz`
-
-const regex = /\/company\/(\d+)\/basic-info/
-
-const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal, intermediateState } = useIdModals()
-
-const authApiURL = commonAuth.authApiURL
-
-const submitted = ref(false)
-const accessToken = ref(null)
-
-export interface ILoginForm {
-  username: string
-  password: string
-}
-
-const loginSchema = z.object({
-  username: z.string().nonempty(t('error.required')).email(t('error.email')),
-  password: z.string().nonempty(t('error.required')),
-})
-
-const validation = computed(() => {
-  if (!submitted.value) return null
-  const result = loginSchema.safeParse(form)
-  return result.success ? null : result.error
-})
-
-function getError(path: string) {
-  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
-}
-
-function savePassAndLogin(form: { username: string, password: string }) {
-  const { username, password } = form
-  const cookieOptions = {
-    domain: COOKIE_DOMAIN,
-    expires: rememberMe.value ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1000) : undefined, // Срок действия 14 дней
-  }
-  useCookie('username', cookieOptions).value = username
-  useCookie('password', cookieOptions).value = password
-}
-function clearAuthCookie() {
-  const options = { domain: COOKIE_DOMAIN }
-
-  useCookie('username', options).value = null
-  useCookie('password', options).value = null
-}
-
-const loading = ref(false)
-const form: ILoginForm = reactive({
-  username: useCookie('username', { domain: COOKIE_DOMAIN }).value || '',
-  password: useCookie('password', { domain: COOKIE_DOMAIN }).value || '',
-})
-const rememberMe = ref(false)
-
-async function submit() {
-  submitted.value = true
-  if (!validation.value) {
-    loading.value = true
-    const login = await fetch(`${removeTrailingSlash(authApiURL)}/login`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        'lang': locale.value,
-      },
-      body: JSON.stringify({
-        username: form.username.trim().toLowerCase(),
-        password: form.password.toString(),
-      }),
-    })
-    const { data, message } = await login.json().catch(() => ({}))
-
-    intermediateState.value.email = form.username
-    intermediateState.value.password = form.password
-
-    if (data) accessToken.value = data?.access_token
-    if (login.status > 202) {
-      if (login.status === 422) {
-        $toast.error(t('error.validation'))
-      }
-      if (login.status === 206) {
-        confirmAccountOtpModal.value = true
-
-        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
-          method: 'GET',
-          credentials: 'include',
-          headers: {
-            lang: locale.value,
-          },
-          params: {
-            email: intermediateState.value.email,
-          },
-        }).catch(() => {})
-      }
-      else {
-        $toast.error(message)
-      }
-    }
-    else {
-      rememberMe.value ? savePassAndLogin(form) : clearAuthCookie()
-      if (data.is_2fa_enabled) {
-        loginModal.value = false
-        twoFactorModal.value = true
-      }
-      else if (data.email_is_verified) {
-        const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
-          method: 'GET',
-          credentials: 'include',
-          headers: {
-            Authorization: `Bearer ${accessToken.value}`,
-            lang: locale.value,
-          },
-        })
-        const { data: cookiesData } = await response.json()
-        if (cookiesData?.access_token) {
-          const { access_token, expire_in } = cookiesData
-          useCookie('autoLogout').value = true
-
-          await writeAccessTokenCookie(access_token, expire_in)
-        }
-        $toast.success(t('reuse.successfully'))
-
-        loginModal.value = false
-        const path = window.location.pathname
-        const redirectUrl = route.query.redirect
-
-        const match = path.match(regex)
-
-        if (match) {
-          const companyId = match[1]
-
-          navigateTo(`${pk}/company/${companyId}`, { external: true })
-        }else if (redirectUrl) {
-          navigateTo(redirectUrl as string, { external: true })
-        }
-        else {
-          window.location.reload()
-        }
-      }
-      else {
-        confirmAccountOtpModal.value = true
-
-        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
-          method: 'GET',
-          credentials: 'include',
-          headers: {
-            lang: locale.value,
-          },
-          params: {
-            email: intermediateState.value.email,
-          },
-        }).catch(() => {})
-      }
-    }
-    loading.value = false
-  }
-}
-
-function authWithSocial(social: string) {
-  const url = new URL(`https://auth.${mode}.kz/api/login/social`)
-
-  url.searchParams.set('source', social)
-  url.searchParams.set('redirect_url', window.location.origin)
-
-  document.location.replace(url.toString())
-}
-
-function onRegister() {
-  loginModal.value = false
-  registrationModal.value = true
-}
-
-function toTariffs() {
-  return navigateToLocalizedPage({
-    locale,
-    projectUrl: landing,
-    path: '/tariffs',
-    target: '_self',
-  })
-}
-
-onMounted(() => {
-  const options = { domain: COOKIE_DOMAIN }
-
-  rememberMe.value = !!useCookie('username', options).value && !!useCookie('password', options).value
-})
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    submit()
-  }
-}
-
-function onForgotPassword() {
-  loginModal.value = false
-  recoveryModal.value = true
-}
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
-</script>
-
-<template>
-  <div class="flex flex-col gap-5">
-    <h1 class="text-h2 text-center" data-test-id="login-form-title">
-      {{ t('modals.id.login.title') }}
-    </h1>
-    <p class="text-body-md text-center" data-test-id="login-form-subtitle">
-      {{ t('modals.id.login.subtitle') }}
-    </p>
-    <div class="flex flex-col gap-4">
-      <a-input-standard
-        v-model="form.username"
-        type="email"
-        :data-test-id="'login-form-email-input'"
-        :label="t('modals.id.login.labels.email')"
-        :error="getError('username')"
-      />
-      <a-input-password
-        v-model="form.password"
-        :data-test-id="'login-form-password-input'"
-        :label="t('modals.id.login.labels.password')"
-        :error="getError('password')"
-      />
-      <div class="flex items-center justify-between">
-        <div class="text-body-md flex gap-2" data-test-id="login-form-remember-me-checkbox">
-          <a-checkbox
-            v-model="rememberMe"
-            name="remember_me"
-          />
-          <label
-            for="remember_me"
-            class="cursor-pointer"
-          >{{
-            t('modals.id.login.remember_me')
-          }}</label>
-        </div>
-        <button
-          class="text-body-md text-link"
-          data-test-id="login-form-forgot-password-button"
-          @click="onForgotPassword"
-        >
-          {{ t('modals.id.login.forget_password') }}
-        </button>
-      </div>
-    </div>
-    <div class="flex items-center gap-4">
-      <div class="h-px w-full bg-(--border-color-default)" />
-      <div class="flex shrink-0 gap-4">
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-google-button"
-          @click="authWithSocial('google')"
-        >
-          <a-icon-google />
-        </span>
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-yandex-button"
-          @click="authWithSocial('yandex')"
-        >
-          <a-icon-yandex />
-        </span>
-        <span
-          class="cursor-pointer"
-          data-test-id="login-form-mailru-button"
-          @click="authWithSocial('mailru')"
-        >
-          <a-icon-mailru />
-        </span>
-      </div>
-      <div class="h-px w-full bg-(--border-color-default)" />
-    </div>
-    <a-button
-      :loading="loading"
-      type="submit"
-      data-test-id="login-form-login-button"
-      @click="submit"
-    >
-      {{ t('actions.login') }}
-    </a-button>
-    <p class="text-body-md text-center">
-      {{ t('modals.id.login.first_time') }}
-    </p>
-
-    <a-button
-      type="button"
-      view="outline"
-      class="w-full"
-      data-test-id="login-form-register-button"
-      @click="onRegister"
-    >
-      {{ t('actions.register') }}
-    </a-button>
-
-    <a-button
-      type="button"
-      view="transparent"
-      class="w-full"
-      data-test-id="login-form-tariffs-button"
-      @click="toTariffs"
-    >
-      {{ t('actions.toTariffs') }}
-    </a-button>
-
-    <a-alert
-      class="max-w-screen-sm !text-body-sm"
-      size="xs"
-    >
-      {{ t('info.userAgreement') }}
-    </a-alert>
-  </div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AIconArrowUpRight from '#adata-ui/icons/arrow/arrow-up-right.vue'
+import AIconGoogle from '#adata-ui/icons/google.vue'
+import AIconLock from '#adata-ui/icons/lock.vue'
+import AIconMail from '#adata-ui/icons/mail.vue'
+import AIconMailru from '#adata-ui/icons/mailru.vue'
+import AIconYandex from '#adata-ui/icons/yandex.vue'
+import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+const { pk, landing } = useUrls()
+const route = useRoute()
+
+const { myLayer } = useAppConfig()
+const mode = myLayer.mode
+
+const COOKIE_DOMAIN = `.${mode}.kz`
+
+const regex = /\/company\/(\d+)\/basic-info/
+
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal, intermediateState } = useIdModals()
+
+const authApiURL = commonAuth.authApiURL
+
+const submitted = ref(false)
+const accessToken = ref(null)
+
+const uid = useId()
+const emailFieldId = `login-email-${uid}`
+const passwordFieldId = `login-password-${uid}`
+
+const socials = [
+  { id: 'google', label: 'Google', icon: AIconGoogle },
+  { id: 'yandex', label: 'Yandex', icon: AIconYandex },
+  { id: 'mailru', label: 'Mail.ru', icon: AIconMailru },
+]
+
+export interface ILoginForm {
+  username: string
+  password: string
+}
+
+const loading = ref(false)
+const form: ILoginForm = reactive({
+  username: useCookie('username', { domain: COOKIE_DOMAIN }).value || '',
+  password: useCookie('password', { domain: COOKIE_DOMAIN }).value || '',
+})
+const rememberMe = ref(false)
+
+const loginSchema = z.object({
+  username: z.string().nonempty(t('error.required')).email(t('error.email')),
+  password: z.string().nonempty(t('error.required')),
+})
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = loginSchema.safeParse(form)
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
+}
+
+function savePassAndLogin(form: { username: string, password: string }) {
+  const { username, password } = form
+  const cookieOptions = {
+    domain: COOKIE_DOMAIN,
+    expires: rememberMe.value ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1000) : undefined, // Срок действия 14 дней
+  }
+  useCookie('username', cookieOptions).value = username
+  useCookie('password', cookieOptions).value = password
+}
+function clearAuthCookie() {
+  const options = { domain: COOKIE_DOMAIN }
+
+  useCookie('username', options).value = null
+  useCookie('password', options).value = null
+}
+
+async function submit() {
+  submitted.value = true
+  if (!validation.value) {
+    loading.value = true
+    const login = await fetch(`${removeTrailingSlash(authApiURL)}/login`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        'lang': locale.value,
+      },
+      body: JSON.stringify({
+        username: form.username.trim().toLowerCase(),
+        password: form.password.toString(),
+      }),
+    })
+    const { data, message } = await login.json().catch(() => ({}))
+
+    intermediateState.value.email = form.username
+    intermediateState.value.password = form.password
+
+    if (data) accessToken.value = data?.access_token
+    if (login.status > 202) {
+      if (login.status === 422) {
+        $toast.error(t('error.validation'))
+      }
+      if (login.status === 206) {
+        confirmAccountOtpModal.value = true
+
+        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            lang: locale.value,
+          },
+          params: {
+            email: intermediateState.value.email,
+          },
+        }).catch(() => {})
+      }
+      else {
+        $toast.error(message)
+      }
+    }
+    else {
+      rememberMe.value ? savePassAndLogin(form) : clearAuthCookie()
+      if (data.is_2fa_enabled) {
+        loginModal.value = false
+        twoFactorModal.value = true
+      }
+      else if (data.email_is_verified) {
+        const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            Authorization: `Bearer ${accessToken.value}`,
+            lang: locale.value,
+          },
+        })
+        const { data: cookiesData } = await response.json()
+        if (cookiesData?.access_token) {
+          const { access_token, expire_in } = cookiesData
+          useCookie('autoLogout').value = true
+
+          await writeAccessTokenCookie(access_token, expire_in)
+        }
+        $toast.success(t('reuse.successfully'))
+
+        loginModal.value = false
+        const path = window.location.pathname
+        const redirectUrl = route.query.redirect
+
+        const match = path.match(regex)
+
+        if (match) {
+          const companyId = match[1]
+
+          navigateTo(`${pk}/company/${companyId}`, { external: true })
+        }
+        else if (redirectUrl) {
+          navigateTo(redirectUrl as string, { external: true })
+        }
+        else {
+          window.location.reload()
+        }
+      }
+      else {
+        confirmAccountOtpModal.value = true
+
+        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            lang: locale.value,
+          },
+          params: {
+            email: intermediateState.value.email,
+          },
+        }).catch(() => {})
+      }
+    }
+    loading.value = false
+  }
+}
+
+function authWithSocial(social: string) {
+  const url = new URL(`${removeTrailingSlash(authApiURL)}/login/social`)
+
+  url.searchParams.set('source', social)
+  url.searchParams.set('redirect_url', window.location.origin)
+
+  document.location.replace(url.toString())
+}
+
+function onRegister() {
+  loginModal.value = false
+  registrationModal.value = true
+}
+
+function toTariffs() {
+  return navigateToLocalizedPage({
+    locale,
+    projectUrl: landing,
+    path: '/tariffs',
+    target: '_self',
+  })
+}
+
+onMounted(() => {
+  const options = { domain: COOKIE_DOMAIN }
+
+  rememberMe.value = !!useCookie('username', options).value && !!useCookie('password', options).value
+})
+
+function onForgotPassword() {
+  loginModal.value = false
+  recoveryModal.value = true
+}
+</script>
+
+<template>
+  <!-- Enter отправляет форму нативно: документного keyup-слушателя здесь быть не должно,
+       иначе один Enter даёт два запроса -->
+  <form
+    class="flex flex-col gap-6 p-6"
+    novalidate
+    @submit.prevent="submit"
+  >
+    <div class="flex flex-col gap-1">
+      <h1 class="text-center text-h2 text-primary" data-test-id="login-form-title">
+        {{ t('modals.id.login.title') }}
+      </h1>
+      <p class="text-center text-body-md text-secondary" data-test-id="login-form-subtitle">
+        {{ t('modals.id.login.subtitle') }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1.5">
+        <label :for="emailFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.login.labels.email') }}
+        </label>
+        <a-input-v2
+          v-model="form.username"
+          :input-id="emailFieldId"
+          type="email"
+          size="lg"
+          autocomplete="email"
+          :start-icon="AIconMail"
+          start-icon-class="size-4 text-icon-secondary"
+          :placeholder="t('modals.id.login.placeholders.email')"
+          :error="getError('username')"
+          data-test-id="login-form-email-input"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label :for="passwordFieldId" class="text-body-md-strong text-primary">
+          {{ t('modals.id.login.labels.password') }}
+        </label>
+        <a-input-password-v2
+          v-model="form.password"
+          :input-id="passwordFieldId"
+          size="lg"
+          :start-icon="AIconLock"
+          start-icon-class="size-4 text-icon-secondary"
+          :placeholder="t('modals.id.login.placeholders.password')"
+          :error="getError('password')"
+          data-test-id="login-form-password-input"
+          icon-eye-test-id="login-form-password-eye"
+        />
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <a-checkbox-v2
+          v-model="rememberMe"
+          side="right"
+          name="remember_me"
+          :label="t('modals.id.login.remember_me')"
+          data-test-id="login-form-remember-me-checkbox"
+        />
+        <button
+          type="button"
+          class="text-body-md text-link transition-colors hover:text-link-hover"
+          data-test-id="login-form-forgot-password-button"
+          @click="onForgotPassword"
+        >
+          {{ t('modals.id.login.forget_password') }}
+        </button>
+      </div>
+    </div>
+
+    <a-button-v2
+      type="submit"
+      size="lg"
+      block
+      :loading="loading"
+      data-test-id="login-form-login-button"
+    >
+      {{ t('actions.login') }}
+    </a-button-v2>
+
+    <div class="flex items-center gap-3">
+      <span class="h-px flex-1 bg-(--border-color-default)" />
+      <span class="shrink-0 text-body-sm text-secondary">
+        {{ t('modals.id.login.social_divider') }}
+      </span>
+      <span class="h-px flex-1 bg-(--border-color-default)" />
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+      <a-button-v2
+        v-for="social in socials"
+        :key="social.id"
+        view="outline"
+        color="gray"
+        block
+        :icon="social.icon"
+        :data-test-id="`login-form-${social.id}-button`"
+        class="max-sm:gap-0"
+        @click="authWithSocial(social.id)"
+      >
+        <span class="hidden sm:inline">{{ social.label }}</span>
+      </a-button-v2>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <span class="h-px w-full bg-(--border-color-default)" />
+      <p class="text-center text-body-md text-secondary">
+        {{ t('modals.id.login.first_time') }}
+      </p>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        data-test-id="login-form-register-button"
+        @click="onRegister"
+      >
+        {{ t('actions.register') }}
+      </a-button-v2>
+      <a-button-v2
+        view="ghost"
+        color="blue"
+        block
+        icon-right
+        :icon="AIconArrowUpRight"
+        data-test-id="login-form-tariffs-button"
+        @click="toTariffs"
+      >
+        {{ t('actions.toTariffs') }}
+      </a-button-v2>
+    </div>
+
+    <div class="flex items-start gap-3 rounded-lg border-l-4 border-brand bg-brand-subtle px-4 py-3">
+      <a-icon-shield-check class="mt-0.5 size-5 shrink-0 text-icon-brand" />
+      <p class="text-body-sm text-primary">
+        {{ t('info.userAgreement') }}
+      </p>
+    </div>
+  </form>
+</template>
+
+<style scoped></style>