adata-ui 2.0.28 → 2.0.29

package/components/modals/id/IdLoginModal.vue

@@ -1,34 +1,30 @@
 <script setup lang="ts">
-import TwoFactor from '#adata-ui/components/modals/two-factor/two-factor.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import { useToggle } from '@vueuse/shared'
 import * as z from 'zod'
 
+const { $toast } = useNuxtApp()
 const { myLayer, commonAuth } = useAppConfig()
-const authApiURL = commonAuth.authApiURL
-const [isResendModal, toggleResendModal] = useToggle()
-const isConfirmationEmailModal = ref(false)
-const isTwoFactorOpen = ref(false)
-const isLoadingOtp = ref(false)
-const { $api, $toast } = useNuxtApp()
-const showOtpError = ref(false)
 const { t, locale } = useI18n()
-const submitted = ref(false)
-const accessToken = ref(null)
-const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal } = useIdModals()
 
 const authStore = useAuthStore()
 const { intermediateState } = storeToRefs(authStore)
 
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal } = 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('register.form.errors.required')).email(t('register.form.errors.email')),
-  password: z.string().nonempty(t('register.form.errors.required')),
+  username: z.string().nonempty(t('error.required')).email(t('error.email')),
+  password: z.string().nonempty(t('error.required')),
 })
 
 const validation = computed(() => {
@@ -78,34 +74,38 @@ async function submit() {
       }),
     })
     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'))
       }
-      else {
-        intermediateState.value.email = form.username
-        intermediateState.value.password = form.password
+      if (login.status === 206) {
+        confirmAccountOtpModal.value = true
 
-        await fetch(`${authApiURL}/email/resend-otp`, {
+        $fetch(`${authApiURL}/email/resend-otp`, {
           method: 'GET',
           credentials: 'include',
           headers: {
-            'Content-Type': 'application/json',
-            'lang': locale.value,
+            lang: locale.value,
           },
-          body: JSON.stringify({
+          params: {
             email: intermediateState.value.email,
-          }),
+          },
         }).catch(() => {})
-
-        confirmAccountOtpModal.value = true
+      }
+      else {
+        $toast.error(message)
       }
     }
     else {
       rememberMe.value ? savePassAndLogin(form) : clearAuthCookie()
       if (data.is_2fa_enabled) {
-        isTwoFactorOpen.value = true
+        loginModal.value = false
+        twoFactorModal.value = true
       }
       else if (data.email_is_verified) {
         const response = await fetch(`${authApiURL}/access/cookie`, {
@@ -120,15 +120,19 @@ async function submit() {
         if (cookiesData) {
           const { access_token, expire_in } = cookiesData
           const hostname = location.hostname.split('.').reverse()
-          document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
+
+          useCookie('accessToken', {
+            maxAge: expire_in,
+            domain: `.${hostname[1]}.${hostname[0]}`,
+            path: '/',
+            secure: true,
+          }).value = access_token
         }
         $toast.success(t('login.successfully'))
         loginModal.value = false
         window.location.reload()
       }
       else {
-        intermediateState.value.email = form.username
-        intermediateState.value.password = form.password
         confirmAccountOtpModal.value = true
 
         $fetch(`${authApiURL}/email/resend-otp`, {
@@ -137,7 +141,7 @@ async function submit() {
           headers: {
             lang: locale.value,
           },
-          body: {
+          params: {
             email: intermediateState.value.email,
           },
         }).catch(() => {})
@@ -154,13 +158,6 @@ function authWithSocial(social: string) {
   document.location.replace(`https://auth.${mode}.kz/api/login/social?source=${social}`)
 }
 
-async function onResend() {
-  const { data, success, message } = await $api.auth.emailResend()
-  if (success) {
-    $toast.success(message)
-  }
-}
-
 function onRegister() {
   loginModal.value = false
   registrationModal.value = true
@@ -179,64 +176,8 @@ onMounted(() => {
   rememberMe.value = !!useCookie('username').value && !!useCookie('password').value
 })
 
-function confirmationEmailResend() {
-  isConfirmationEmailModal.value = false
-  toggleResendModal()
-}
-async function handleConfirmOtp(otpCode: string) {
-  isLoadingOtp.value = true
-  const login = await fetch(`${authApiURL}/login`, {
-    method: 'POST',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-      'lang': locale.value,
-    },
-    body: JSON.stringify({
-      'username': intermediateState.value.email.trim(),
-      'password': intermediateState.value.password.toString(),
-      '2fa_code': otpCode,
-    }),
-  })
-  const { data, message } = await login.json().catch(() => ({}))
-
-  if (login.status > 202) {
-    if (login.status === 403) {
-      showOtpError.value = true
-      isLoadingOtp.value = false
-    }
-  }
-  else {
-    const response = await fetch(`${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
-      const hostname = location.hostname.split('.').reverse()
-      document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
-    }
-    $toast.success(t('login.successfully'))
-    loginModal.value = false
-    window.location.reload()
-
-    isTwoFactorOpen.value = false
-  }
-  isLoadingOtp.value = false
-}
-
 function handleEnter(e: KeyboardEvent) {
-  if (
-    e.key === 'Enter'
-    && !isTwoFactorOpen.value
-    && !isConfirmationEmailModal.value
-    && !isResendModal.value
-  ) {
+  if (e.key === 'Enter') {
     submit()
   }
 }
@@ -258,21 +199,21 @@ onBeforeUnmount(() => {
 <template>
   <div class="flex flex-col gap-5">
     <h1 class="heading-02 text-center">
-      {{ $t('login.form.title') }}
+      {{ t('modals.id.login.title') }}
     </h1>
     <p class="body-400 text-center">
-      {{ $t('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"
-        :label="$t('login.form.labels.email')"
+        :label="t('modals.id.login.labels.email')"
         :error="getError('username')"
       />
       <a-input-password
         v-model="form.password"
-        :label="$t('login.form.labels.password')"
+        :label="t('modals.id.login.labels.password')"
         :error="getError('password')"
       />
       <div class="flex items-center justify-between">
@@ -285,14 +226,14 @@ onBeforeUnmount(() => {
             for="remember_me"
             class="cursor-pointer"
           >{{
-            $t('login.form.remember_me')
+            t('modals.id.login.remember_me')
           }}</label>
         </div>
         <button
           class="link-s-400"
           @click="onForgotPassword"
         >
-          {{ $t('login.form.forget_password') }}
+          {{ t('modals.id.login.forget_password') }}
         </button>
       </div>
     </div>
@@ -325,10 +266,10 @@ onBeforeUnmount(() => {
       type="submit"
       @click="submit"
     >
-      {{ $t('actions.login') }}
+      {{ t('actions.login') }}
     </a-button>
     <p class="body-400 text-center">
-      {{ $t('login.form.first_time') }}
+      {{ t('modals.id.login.first_time') }}
     </p>
 
     <a-button
@@ -337,7 +278,7 @@ onBeforeUnmount(() => {
       class="w-full"
       @click="onRegister"
     >
-      {{ $t('actions.register') }}
+      {{ t('actions.register') }}
     </a-button>
 
     <a-button
@@ -346,40 +287,16 @@ onBeforeUnmount(() => {
       class="w-full"
       @click="toTariffs"
     >
-      {{ $t('actions.toTariffs') }}
+      {{ t('actions.toTariffs') }}
     </a-button>
 
     <a-alert
       class="max-w-screen-sm !text-[10px]"
       size="xs"
     >
-      {{ $t('info.userAgreement') }}
+      {{ t('info.userAgreement') }}
     </a-alert>
   </div>
-
-  <!--  <a-modal v-model="isResendModal"> -->
-  <!--    <resend -->
-  <!--      v-if="isResendModal" -->
-  <!--      @close="isResendModal = false" -->
-  <!--      @resend="onResend" -->
-  <!--    /> -->
-  <!--  </a-modal> -->
-
-  <!--  <a-modal v-model="isConfirmationEmailModal"> -->
-  <!--    <a-confirmation-email -->
-  <!--      v-if="isConfirmationEmailModal" -->
-  <!--      @close="isConfirmationEmailModal = false" -->
-  <!--      @resend="confirmationEmailResend" -->
-  <!--    /> -->
-  <!--  </a-modal> -->
-
-  <two-factor
-    v-model="isTwoFactorOpen"
-    v-model:error="showOtpError"
-    :loading="isLoadingOtp"
-    @confirm="handleConfirmOtp"
-    @close="isTwoFactorOpen = false"
-  />
 </template>
 
 <style scoped></style>

package/components/modals/id/IdModals.vue

@@ -7,6 +7,7 @@ import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPassword
 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'
 
 const {
   loginModal,
@@ -25,11 +26,14 @@ const {
   <a-modal v-model="loginModal">
     <id-login-modal />
   </a-modal>
+  <a-modal v-model="twoFactorModal">
+    <id-two-factor-modal />
+  </a-modal>
 
   <a-modal v-model="registrationModal">
     <id-registration-modal v-if="registrationModal" />
   </a-modal>
-  <a-modal v-model="confirmAccountOtpModal">
+  <a-modal v-model="confirmAccountOtpModal" prevent-close>
     <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
   </a-modal>
   <a-modal v-model="confirmSuccessfulModal">

package/components/modals/id/IdNewPasswordModal.vue

@@ -21,16 +21,18 @@ const loading = ref(false)
 const resetSchema = z.object({
   password: z
     .string()
-    .min(8, t('register.form.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+    .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()
-    .min(8, t('register.form.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+    .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('register.form.errors.sameAs'),
+    message: t('modals.id.register.errors.sameAs'),
     path: ['password_confirmation'],
   },
 )

package/components/modals/id/IdRegistrationModal.vue

@@ -34,21 +34,21 @@ const agreement = ref(false)
 const loading = ref(false)
 
 const registerSchema = z.object({
-  email: z.string().nonempty(t('register.form.errors.required')).email(t('register.form.errors.email')),
+  email: z.string().nonempty(t('error.required')).email(t('error.email')),
   password: z
     .string()
-    .nonempty(t('register.form.errors.required'))
-    .min(8, t('register.form.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+    .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('register.form.errors.required'))
-    .min(8, t('register.form.errors.low_security', { length: 8 }))
-    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+    .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('register.form.errors.sameAs'),
+    message: t('modals.id.register.errors.sameAs'),
     path: ['password_confirmation'],
   },
 )
@@ -152,31 +152,31 @@ onBeforeUnmount(() => {
     @submit.prevent="onSubmit"
   >
     <h2 class="text-center text-2xl font-bold">
-      {{ t('register.form.title') }}
+      {{ t('modals.id.register.title') }}
     </h2>
     <p class="text-center text-sm">
-      {{ t('register.form.subtitle') }}
+      {{ t('modals.id.register.subtitle') }}
     </p>
     <a-input-standard
       v-model="form.email"
-      :label="t('register.form.labels.email')"
+      :label="t('modals.id.register.labels.email')"
       :error="getError('email')"
       type="email"
     />
 
     <a-input-password
       v-model="form.password"
-      :label="t('register.form.labels.password')"
+      :label="t('modals.id.register.labels.password')"
       :error="getError('password')"
     />
 
     <a-input-password
       v-model="form.password_confirmation"
-      :label="t('register.form.labels.password_confirmation')"
+      :label="t('modals.id.register.labels.password_confirmation')"
       :error="getError('password_confirmation')"
     />
     <a-alert color="blue">
-      {{ t('register.form.alert') }}
+      {{ t('modals.id.register.alert') }}
       <template #icon>
         <a-icon-info-circle />
       </template>
@@ -185,13 +185,13 @@ onBeforeUnmount(() => {
       v-model="agreement"
       side="right"
     >
-      <i18n-t keypath="register.form.agreement.text">
+      <i18n-t keypath="modals.id.register.agreement.text">
         <template #link>
           <nuxt-link-locale
             class="text-blue-700"
             @click="getUrl"
           >
-            {{ t('register.form.agreement.link') }}
+            {{ t('modals.id.register.agreement.link') }}
           </nuxt-link-locale>
         </template>
       </i18n-t>
@@ -200,17 +200,17 @@ onBeforeUnmount(() => {
       :disabled="!agreement"
       :loading="loading"
     >
-      {{ t('register.form.continue') }}
+      {{ t('modals.id.register.continue') }}
     </a-button>
     <p class="text-center text-sm">
-      {{ t('register.form.haveAcc') }}
+      {{ t('modals.id.register.haveAcc') }}
     </p>
     <a-button
       type="button"
       view="outline"
       @click="onLogin"
     >
-      {{ t('register.form.enter') }}
+      {{ t('modals.id.register.enter') }}
     </a-button>
   </form>
 </template>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OtpInput from '#adata-ui/components/modals/two-factor/otp-input.vue'
+import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -17,6 +17,7 @@ const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
   return otp.value.join('')
 })
+const attempts = ref(5)
 const showError = ref(false)
 const isLoading = ref(false)
 
@@ -43,6 +44,12 @@ async function onConfirm() {
     newPasswordModal.value = true
   }
   catch (error) {
+    if (error.data?.retry_after) {
+      attempts.value = 0
+    }
+    else {
+      attempts.value--
+    }
     showError.value = true
     $toast.error(error.data.message)
   }
@@ -72,6 +79,7 @@ async function onResend() {
 
 function onClose() {
   otp.value = ['', '', '', '', '', '']
+  attempts.value = 5
   showError.value = false
   resetPasswordOtpModal.value = false
 }
@@ -85,6 +93,7 @@ function handleEnter(e: KeyboardEvent) {
 const timer = ref(60)
 
 function runTimer() {
+  timer.value = 60
   const intervalId = setInterval(() => {
     if (!timer.value) clearInterval(intervalId)
     return timer.value--
@@ -116,7 +125,7 @@ onBeforeUnmount(() => {
       </p>
 
       <div v-if="timer > 0" class="text-2xl font-bold">
-        {{ timer }} {{ t('register.modal.seconds') }}
+        {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
@@ -127,7 +136,11 @@ onBeforeUnmount(() => {
       </button>
     </div>
 
-    <otp-input v-model="otp" v-model:error="showError" />
+    <otp-input
+      v-model="otp"
+      v-model:error="showError"
+      :attempts="attempts"
+    />
 
     <div class="flex w-full gap-2">
       <a-button
@@ -140,7 +153,7 @@ onBeforeUnmount(() => {
       <a-button
         block
         :loading="isLoading"
-        :disabled="otpFormatted.length < 6"
+        :disabled="otpFormatted.length < 6 || attempts === 0"
         @click="onConfirm"
       >
         {{ t('actions.confirm') }}

package/components/modals/id/IdTwoFactorModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
+import { useAuthStore } from '#adata-ui/stores/auth.store'
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
+
+const { twoFactorModal } = useIdModals()
+
+const authApiURL = commonAuth.authApiURL
+
+const otp = ref(['', '', '', '', '', ''])
+const otpFormatted = computed(() => {
+  return otp.value.join('')
+})
+const showError = ref(false)
+const isLoading = ref(false)
+
+async function onConfirm() {
+  isLoading.value = true
+  const login = await fetch(`${authApiURL}/login`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'lang': locale.value,
+    },
+    body: JSON.stringify({
+      'username': intermediateState.value.email,
+      'password': intermediateState.value.password,
+      '2fa_code': otpFormatted.value,
+    }),
+  })
+  const { data, message } = await login.json().catch(() => ({}))
+
+  if (login.status > 202) {
+    if (login.status === 403) {
+      showError.value = true
+      isLoading.value = false
+    }
+  }
+  else {
+    const response = await fetch(`${authApiURL}/access/cookie`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+    })
+    const { data: cookiesData } = await response.json()
+    if (cookiesData?.access_token) {
+      const { access_token, expire_in } = cookiesData
+      const hostname = location.hostname.split('.').reverse()
+
+      useCookie('accessToken', {
+        maxAge: expire_in,
+        domain: `.${hostname[1]}.${hostname[0]}`,
+        path: '/',
+        secure: true,
+      }).value = access_token
+    }
+    $toast.success(t('login.successfully'))
+    twoFactorModal.value = false
+    window.location.reload()
+  }
+  isLoading.value = false
+}
+
+function onClose() {
+  otp.value = ['', '', '', '', '', '']
+  showError.value = false
+  twoFactorModal.value = false
+}
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    onConfirm()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <p class="heading-02 text-center">
+      {{ t('modals.id.twoFactor.title') }}
+    </p>
+    <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
+    <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
+    <otp-input v-model="otp" v-model:error="showError" />
+    <p class="body-400 text-center">
+      {{ t('modals.id.twoFactor.code') }}
+    </p>
+    <div class="flex w-full gap-2">
+      <a-button
+        class="w-full"
+        view="outline"
+        @click="onClose"
+      >
+        {{ t('actions.close') }}
+      </a-button>
+      <a-button
+        :loading="isLoading"
+        :disabled="otpFormatted.length < 6"
+        class="w-full"
+        @click="onConfirm"
+      >
+        {{ t('actions.confirm') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/{two-factor → id}/otp-input.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+defineProps<{
+  attempts?: number
+}>()
+
 const length = 6 // Длина OTP
 const showError = defineModel('error')
 const otp = defineModel()
@@ -133,6 +137,10 @@ function moveFocus(index: number, to: string) {
     >
       {{ t('error.otp') }}
     </a-alert>
+
+    <p v-show="showError" class="mt-1 text-xs text-red-500 dark:text-red-400">
+      {{ t('modals.id.resetPasswordOtp.attempts', { n: attempts }) }}
+    </p>
   </div>
 </template>
 

package/components/navigation/README.md

@@ -1 +1 @@
-# breadcrumb, tabs
+# breadcrumb, tabs