adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/components/modals/id/IdLoginModal.vue

@@ -1,336 +1,341 @@
-<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="heading-02 text-center" data-test-id="login-form-title">
-      {{ t('modals.id.login.title') }}
-    </h1>
-    <p class="body-400 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="body-400 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="link-s-400"
-          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-deepblue-500/30" />
-      <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-deepblue-500/30" />
-    </div>
-    <a-button
-      :loading="loading"
-      type="submit"
-      data-test-id="login-form-login-button"
-      @click="submit"
-    >
-      {{ t('actions.login') }}
-    </a-button>
-    <p class="body-400 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-[10px]"
-      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 { 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) {
+          const { access_token, expire_in } = cookiesData
+          const hostname = location.hostname.split('.').reverse()
+          useCookie('autoLogout').value = true
+
+          useCookie('accessToken', {
+            maxAge: expire_in,
+            domain: COOKIE_DOMAIN,
+            path: '/',
+            secure: true,
+          }).value = access_token
+        }
+        $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="heading-02 text-center" data-test-id="login-form-title">
+      {{ t('modals.id.login.title') }}
+    </h1>
+    <p class="body-400 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="body-400 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="link-s-400"
+          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-deepblue-500/30" />
+      <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-deepblue-500/30" />
+    </div>
+    <a-button
+      :loading="loading"
+      type="submit"
+      data-test-id="login-form-login-button"
+      @click="submit"
+    >
+      {{ t('actions.login') }}
+    </a-button>
+    <p class="body-400 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-[10px]"
+      size="xs"
+    >
+      {{ t('info.userAgreement') }}
+    </a-alert>
+  </div>
+</template>
+
+<style scoped></style>