adata-ui 2.1.0 → 2.1.2

package/components/modals/id/IdLoginModal.vue

@@ -0,0 +1,316 @@
+<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 regex = /^\/counterparty\/main\/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 = {
+    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() {
+  useCookie('username').value = null
+  useCookie('password').value = null
+}
+
+const loading = ref(false)
+const form: ILoginForm = reactive({
+  username: useCookie('username').value || '',
+  password: useCookie('password').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: `.${hostname[1]}.${hostname[0]}`,
+            path: '/',
+            secure: true,
+          }).value = access_token
+        }
+        $toast.success(t('reuse.successfully'))
+
+        loginModal.value = false
+        const path = window.location.pathname;
+        const redirectUrl = route.query.redirect
+
+        if (regex.test(path)) {
+          navigateTo(`${pk}/company/${path.split("/")[4]}`, { 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 mode = (useNuxtApp().$config.public.authApiURL as string).includes('adata')
+    ? 'adata'
+    : 'adtdev'
+  document.location.replace(`https://auth.${mode}.kz/api/login/social?source=${social}`)
+}
+
+function onRegister() {
+  loginModal.value = false
+  registrationModal.value = true
+}
+
+function toTariffs() {
+  return navigateToLocalizedPage({
+    locale,
+    projectUrl: landing,
+    path: '/tariffs',
+    target: '_self',
+  })
+}
+
+onMounted(() => {
+  rememberMe.value = !!useCookie('username').value && !!useCookie('password').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">
+      {{ t('modals.id.login.title') }}
+    </h1>
+    <p class="body-400 text-center">
+      {{ t('modals.id.login.subtitle') }}
+    </p>
+    <div class="flex flex-col gap-4">
+      <a-input-standard
+        v-model="form.username"
+        type="email"
+        :label="t('modals.id.login.labels.email')"
+        :error="getError('username')"
+      />
+      <a-input-password
+        v-model="form.password"
+        :label="t('modals.id.login.labels.password')"
+        :error="getError('password')"
+      />
+      <div class="flex items-center justify-between">
+        <div class="body-400 flex gap-2">
+          <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"
+          @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"
+          @click="authWithSocial('google')"
+        >
+          <a-icon-google />
+        </span>
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('yandex')"
+        >
+          <a-icon-yandex />
+        </span>
+        <span
+          class="cursor-pointer"
+          @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"
+      @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"
+      @click="onRegister"
+    >
+      {{ t('actions.register') }}
+    </a-button>
+
+    <a-button
+      type="button"
+      view="transparent"
+      class="w-full"
+      @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>

package/components/modals/id/IdModals.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
+import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
+import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
+import IdNewPasswordModal from '#adata-ui/components/modals/id/IdNewPasswordModal.vue'
+import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'
+import IdRecoveryModal from '#adata-ui/components/modals/id/IdRecoveryModal.vue'
+import IdRegistrationModal from '#adata-ui/components/modals/id/IdRegistrationModal.vue'
+import IdResetPasswordOtpModal from '#adata-ui/components/modals/id/IdResetPasswordOtpModal.vue'
+import IdTwoFactorModal from '#adata-ui/components/modals/id/IdTwoFactorModal.vue'
+import IdAutoLogoutModal from '#adata-ui/components/modals/id/IdAutoLogoutModal.vue'
+
+const emit = defineEmits<{
+  (e: 'closed', value: boolean): void
+}>()
+
+const {
+  loginModal,
+  registrationModal,
+  confirmAccountOtpModal,
+  recoveryModal,
+  resetPasswordOtpModal,
+  newPasswordModal,
+  passwordSuccessfulModal,
+  confirmSuccessfulModal,
+  twoFactorModal,
+  autoLogoutModal
+} = useIdModals()
+
+const { locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const authApiURL = commonAuth.authApiURL
+
+const accessToken = useCookie('accessToken')
+const isAuthenticated = computed(() => !!accessToken.value)
+
+onMounted(async () => {
+  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      lang: locale.value,
+    },
+  })
+  const { data: cookiesData } = await response.json()
+  if (cookiesData?.access_token && !accessToken.value) {
+    const { access_token, expire_in } = cookiesData
+    const hostname = location.hostname.split('.').reverse()
+    useCookie('autoLogout').value = true
+
+    useCookie('accessToken', {
+      maxAge: expire_in,
+      domain: `.${hostname[1]}.${hostname[0]}`,
+      path: '/',
+      secure: true,
+    }).value = access_token
+
+    window.location.reload()
+  }
+})
+
+watch(isAuthenticated, (val) => {
+  const autoLogout = useCookie('autoLogout')
+
+  if (!val && autoLogout.value) {
+    autoLogoutModal.value = true
+    autoLogout.value = null
+  }
+})
+
+const autoLoginClose = () => {
+  emit('closed', true)
+  autoLogoutModal.value = false
+}
+</script>
+
+<template>
+  <a-modal v-model="loginModal">
+    <id-login-modal v-if="loginModal" />
+  </a-modal>
+  <a-modal v-model="twoFactorModal">
+    <id-two-factor-modal v-if="twoFactorModal" />
+  </a-modal>
+
+  <a-modal v-model="registrationModal">
+    <id-registration-modal v-if="registrationModal" />
+  </a-modal>
+  <a-modal v-model="confirmAccountOtpModal" prevent-close>
+    <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
+  </a-modal>
+  <a-modal v-model="confirmSuccessfulModal" prevent-close>
+    <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
+  </a-modal>
+
+  <a-modal v-model="recoveryModal">
+    <id-recovery-modal v-if="recoveryModal" />
+  </a-modal>
+  <a-modal v-model="resetPasswordOtpModal" prevent-close>
+    <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
+  </a-modal>
+  <a-modal v-model="newPasswordModal" prevent-close>
+    <id-new-password-modal v-if="newPasswordModal" />
+  </a-modal>
+  <a-modal v-model="passwordSuccessfulModal" prevent-close>
+    <id-password-successful-modal v-if="passwordSuccessfulModal" />
+  </a-modal>
+
+  <a-modal v-model="autoLogoutModal" prevent-close>
+    <id-auto-logout-modal v-if="autoLogoutModal" @closed="autoLoginClose" />
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/id/IdNewPasswordModal.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+
+const authApiURL = commonAuth.authApiURL
+const { newPasswordModal, passwordSuccessfulModal, intermediateState } = useIdModals()
+
+const form = reactive({
+  password: '',
+  password_confirmation: '',
+})
+const loading = ref(false)
+
+const resetSchema = z.object({
+  password: z
+    .string()
+    .nonempty(t('error.required'))
+    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+  password_confirmation: z
+    .string()
+    .nonempty(t('error.required'))
+    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+}).refine(
+  data => data.password === data.password_confirmation,
+  {
+    message: t('modals.id.register.errors.sameAs'),
+    path: ['password_confirmation'],
+  },
+)
+
+const submitted = ref(false)
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = resetSchema.safeParse(form)
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues?.find(issue => issue.path[0] === path)?.message
+}
+
+async function onSubmit() {
+  try {
+    submitted.value = true
+    if (validation.value) return
+    loading.value = true
+
+    const response = await $fetch(`${removeTrailingSlash(authApiURL)}/password/reset-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        token: intermediateState.value.token,
+        email: intermediateState.value.email,
+        ...form,
+      },
+    })
+    if (response?.success) {
+      newPasswordModal.value = false
+      passwordSuccessfulModal.value = true
+      $toast.success(response.message)
+    }
+  }
+  catch (error) {
+    $toast.error(error?.data.message.password as string)
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <form
+    class="flex flex-col items-stretch gap-5"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('modals.id.newPassword.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('modals.id.newPassword.content') }}
+    </p>
+
+    <a-input-password
+      v-model="form.password"
+      :label="t('modals.id.newPassword.placeholder.1')"
+      :error="getError('password')"
+    />
+
+    <a-alert color="blue">
+      {{ t('modals.id.newPassword.alert') }}
+    </a-alert>
+
+    <a-input-password
+      v-model="form.password_confirmation"
+      :label="t('modals.id.newPassword.placeholder.2')"
+      :error="getError('password_confirmation')"
+    />
+
+    <a-button
+      :loading="loading"
+    >
+      {{ t('actions.set') }}
+    </a-button>
+
+    <p class="text-center text-sm">
+      {{ t('reuse.or') }}
+    </p>
+
+    <a-button
+      type="button"
+      view="outline"
+      @click="newPasswordModal = false"
+    >
+      {{ t('actions.cancel') }}
+    </a-button>
+  </form>
+</template>

package/components/modals/id/IdOtpInput.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  (e: 'onCompleted', value: string): void
+}>()
+
+const length = 6 // Длина OTP
+const showError = defineModel('error')
+const otp = defineModel()
+const otpRefs = ref([])
+const { t } = useI18n()
+
+function checkCompletion() {
+  if (otp.value.every(val => val !== '')) {
+    emit('onCompleted', otp.value.join(''))
+  }
+}
+
+function onInput(event, index) {
+  const value = event.target.value
+  showError.value = false
+
+  // Разрешить только цифры
+  if (/\D/.test(value)) {
+    otp.value[index] = ''
+    return
+  }
+
+  otp.value[index] = value
+  checkCompletion()
+
+  // Перемещаем фокус на следующий элемент, если введен символ
+  if (value && index < length - 1) {
+    // setTimeout(() => otpRefs.value[index + 1]?.focus(), 0)
+    otpRefs.value[index + 1]?.focus()
+  }
+}
+
+function onBackspace(index, event) {
+  showError.value = false
+  if (otp.value[index] || index > 0) {
+    if (otp.value[index] !== '') {
+      otp.value[index] = ''
+      return
+    }
+    otp.value[index] = ''
+    if (index > 0) {
+      otp.value[index - 1] = ''
+      setTimeout(() => {
+        const prevInput = otpRefs.value[index - 1]
+        prevInput?.focus()
+        prevInput?.setSelectionRange(0, 1)
+      }, 0)
+    }
+    event.preventDefault()
+  }
+}
+
+function onPaste(event) {
+  showError.value = false
+  const pastedData = event.clipboardData.getData('text').slice(0, length)
+
+  if (/\D/.test(pastedData)) {
+    event.preventDefault()
+    return
+  }
+
+  // Заполняем ячейки значениями из буфера обмена
+  pastedData.split('').forEach((char, index) => {
+    if (index < length) {
+      otp.value[index] = char
+    }
+  })
+  checkCompletion()
+
+  // Ставим фокус на следующий незаполненный элемент
+  const firstEmptyIndex = otp.value.findIndex(val => val === '')
+  if (firstEmptyIndex !== -1) {
+    otpRefs.value[firstEmptyIndex]?.focus()
+  }
+  else {
+    otpRefs.value[length - 1]?.focus()
+  }
+
+  event.preventDefault()
+}
+
+// Фокус на первый пустой инпут при фокусе если все пустые
+function autoTarget() {
+  for (let i = 0; i < length; i++) {
+    if (otp.value[i].length) {
+      return
+    }
+  }
+  otpRefs.value[0]?.focus()
+}
+
+// макс сайз = 1 и если в ячейке есть цифра, она перезаписывается
+function inputValid(index: number, event: InputEvent) {
+  if (otp.value[index]) {
+    event.target.value = ''
+  }
+}
+
+function moveFocus(index: number, to: string) {
+  if (to === 'left') {
+    if (index > 0) {
+      otpRefs.value[index - 1]?.focus()
+    }
+  }
+  else if (to === 'right') {
+    if (index < length - 1) {
+      otpRefs.value[index + 1]?.focus()
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex gap-2">
+      <input
+        v-for="(digit, index) in otp"
+        :key="index"
+        :ref="el => otpRefs[index] = el"
+        v-model="otp[index]"
+        type="text"
+        maxlength="1"
+        class="size-10 rounded bg-deepblue-900/5 text-center text-lg caret-transparent focus:outline-none dark:bg-[#E3E5E80D]"
+        :class="{
+          'border border-[#E74135] bg-[#E741351A] dark:border-[#F47E75] dark:bg-[#F47E751A]': showError,
+          'focus:border focus:border-blue-700  dark:focus:border-blue-500': !showError,
+        }"
+        @input="onInput($event, index)"
+        @keydown.backspace="onBackspace(index, $event)"
+        @keydown.enter.prevent
+        @paste="onPaste"
+        @keydown.left="moveFocus(index, 'left')"
+        @keydown.right="moveFocus(index, 'right')"
+        @focus="autoTarget"
+        @beforeinput="inputValid(index, $event)"
+      >
+    </div>
+    <a-alert
+      v-show="showError"
+      color="red"
+      size="sm"
+      icon-type="triangle"
+    >
+      {{ t('error.otp') }}
+    </a-alert>
+  </div>
+</template>
+
+<style scoped>
+</style>