adata-ui 2.0.28 → 2.0.30

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,14 +26,17 @@ 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">
+  <a-modal v-model="confirmSuccessfulModal" prevent-close>
     <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
   </a-modal>
 

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/{two-factor/otp-input.vue → id/IdOtpInput.vue}

@@ -1,10 +1,20 @@
 <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
@@ -16,6 +26,7 @@ function onInput(event, index) {
   }
 
   otp.value[index] = value
+  checkCompletion()
 
   // Перемещаем фокус на следующий элемент, если введен символ
   if (value && index < length - 1) {
@@ -59,6 +70,7 @@ function onPaste(event) {
       otp.value[index] = char
     }
   })
+  checkCompletion()
 
   // Ставим фокус на следующий незаполненный элемент
   const firstEmptyIndex = otp.value.findIndex(val => val === '')
@@ -113,8 +125,8 @@ function moveFocus(index: number, to: string) {
         v-model="otp[index]"
         type="text"
         maxlength="1"
-        class="bg-deepblue-900/5 dark:bg-[#E3E5E80D] size-10 rounded text-center text-lg focus:border-blue-500 focus:outline-none focus:border caret-transparent"
-        :class="{ 'border border-[#E74135] dark:border-[#F47E75] dark:bg-[#F47E751A] bg-[#E741351A]': showError }"
+        class="size-10 rounded bg-deepblue-900/5 text-center text-lg caret-transparent focus:border focus:border-blue-500 focus:outline-none dark:bg-[#E3E5E80D]"
+        :class="{ 'border border-[#E74135] bg-[#E741351A] dark:border-[#F47E75] dark:bg-[#F47E751A]': showError }"
         @input="onInput($event, index)"
         @keydown.backspace="onBackspace(index, $event)"
         @keydown.enter.prevent

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'],
   },
 )
@@ -84,9 +84,10 @@ async function onSubmit() {
     })
     if (success) {
       intermediateState.value.email = form.email
+      intermediateState.value.password = form.password
+
       registrationModal.value = false
       confirmAccountOtpModal.value = true
-      $toast.success(message)
     }
   }
   catch (error) {
@@ -117,7 +118,7 @@ function getUrl() {
 }
 
 function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter' && !confirmAccountOtpModal.value) {
+  if (event.key === 'Enter') {
     onSubmit()
   }
 }
@@ -152,31 +153,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 +186,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 +201,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 IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -44,13 +44,22 @@ async function onConfirm() {
   }
   catch (error) {
     showError.value = true
-    $toast.error(error.data.message)
   }
   finally {
     isLoading.value = false
   }
 }
 
+function resetOtp() {
+  otp.value = ['', '', '', '', '', '']
+  showError.value = false
+}
+
+function onClose() {
+  resetOtp()
+  resetPasswordOtpModal.value = false
+}
+
 async function onResend() {
   try {
     await $fetch(`${authApiURL}/password/email-otp`, {
@@ -63,6 +72,7 @@ async function onResend() {
         email: intermediateState.value.email,
       },
     })
+    resetOtp()
     runTimer()
   }
   catch (error) {
@@ -70,12 +80,6 @@ async function onResend() {
   }
 }
 
-function onClose() {
-  otp.value = ['', '', '', '', '', '']
-  showError.value = false
-  resetPasswordOtpModal.value = false
-}
-
 function handleEnter(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     onConfirm()
@@ -85,6 +89,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 +121,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,25 +132,19 @@ onBeforeUnmount(() => {
       </button>
     </div>
 
-    <otp-input v-model="otp" v-model:error="showError" />
-
-    <div class="flex w-full gap-2">
-      <a-button
-        block
-        view="outline"
-        @click="onClose"
-      >
-        {{ t('actions.close') }}
-      </a-button>
-      <a-button
-        block
-        :loading="isLoading"
-        :disabled="otpFormatted.length < 6"
-        @click="onConfirm"
-      >
-        {{ t('actions.confirm') }}
-      </a-button>
-    </div>
+    <id-otp-input
+      v-model="otp"
+      v-model:error="showError"
+      @on-completed="onConfirm"
+    />
+
+    <a-button
+      block
+      view="outline"
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button>
   </div>
 </template>