adata-ui 2.0.29 → 2.0.30

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -17,26 +17,42 @@ const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
   return otp.value.join('')
 })
-const attempts = ref(5)
 const showError = ref(false)
 const isLoading = ref(false)
 
-async function onResend() {
-  try {
-    await $fetch(`${authApiURL}/email/resend-otp`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      params: {
-        email: intermediateState.value.email,
-      },
-    })
-    runTimer()
-  }
-  catch (error) {
-    $toast.error(error.data)
+async function loginUser() {
+  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,
+    }),
+  })
+  await login.json().catch(() => ({}))
+
+  const response = await fetch(`${authApiURL}/access/cookie`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      lang: locale.value,
+    },
+  })
+  const { data: cookiesData } = await response.json()
+  if (cookiesData) {
+    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
   }
 }
 
@@ -56,31 +72,49 @@ async function onConfirm() {
       },
     })
 
+    await loginUser()
+
     confirmAccountOtpModal.value = false
     confirmSuccessfulModal.value = true
   }
   catch (error) {
-    if (error.data?.retry_after) {
-      attempts.value = 0
-    }
-    else {
-      attempts.value--
-    }
     showError.value = true
-    $toast.error(error.data.message)
   }
   finally {
     isLoading.value = false
   }
 }
 
-function onClose() {
+function resetOtp() {
   otp.value = ['', '', '', '', '', '']
   showError.value = false
-  attempts.value = 5
+}
+
+function onClose() {
+  resetOtp()
   confirmAccountOtpModal.value = false
 }
 
+async function onResend() {
+  try {
+    await $fetch(`${authApiURL}/email/resend-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      params: {
+        email: intermediateState.value.email,
+      },
+    })
+    resetOtp()
+    runTimer()
+  }
+  catch (error) {
+    $toast.error(error.data)
+  }
+}
+
 const timer = ref(60)
 
 function runTimer() {
@@ -133,28 +167,18 @@ onBeforeUnmount(() => {
       </button>
     </div>
 
-    <otp-input
+    <id-otp-input
       v-model="otp"
       v-model:error="showError"
-      :attempts="attempts"
+      @on-completed="onConfirm"
     />
 
-    <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 || attempts === 0"
-        @click="onConfirm"
-      >
-        {{ t('actions.confirm') }}
-      </a-button>
-    </div>
+    <a-button
+      block
+      view="outline"
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button>
   </div>
 </template>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-const { confirmSuccessfulModal } = useIdModals()
 const { t } = useI18n()
+const { confirmSuccessfulModal } = useIdModals()
+
+function onClose() {
+  confirmSuccessfulModal.value = false
+  window.location.reload()
+}
 </script>
 
 <template>
@@ -14,7 +19,7 @@ const { t } = useI18n()
     <p class="text-sm">
       {{ t('modals.id.confirmSuccessful.content') }}
     </p>
-    <a-button view="outline" @click="confirmSuccessfulModal = false">
+    <a-button view="outline" @click="onClose">
       {{ t('actions.close') }}
     </a-button>
   </div>

package/components/modals/id/IdModals.vue

@@ -36,7 +36,7 @@ const {
   <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/{otp-input.vue → IdOtpInput.vue}

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-defineProps<{
-  attempts?: number
+const emit = defineEmits<{
+  (e: 'onCompleted', value: string): void
 }>()
 
 const length = 6 // Длина OTP
@@ -9,6 +9,12 @@ 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
@@ -20,6 +26,7 @@ function onInput(event, index) {
   }
 
   otp.value[index] = value
+  checkCompletion()
 
   // Перемещаем фокус на следующий элемент, если введен символ
   if (value && index < length - 1) {
@@ -63,6 +70,7 @@ function onPaste(event) {
       otp.value[index] = char
     }
   })
+  checkCompletion()
 
   // Ставим фокус на следующий незаполненный элемент
   const firstEmptyIndex = otp.value.findIndex(val => val === '')
@@ -117,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
@@ -137,10 +145,6 @@ 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/modals/id/IdRegistrationModal.vue

@@ -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()
   }
 }

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -17,7 +17,6 @@ const otp = ref(['', '', '', '', '', ''])
 const otpFormatted = computed(() => {
   return otp.value.join('')
 })
-const attempts = ref(5)
 const showError = ref(false)
 const isLoading = ref(false)
 
@@ -44,20 +43,23 @@ 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)
   }
   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`, {
@@ -70,6 +72,7 @@ async function onResend() {
         email: intermediateState.value.email,
       },
     })
+    resetOtp()
     runTimer()
   }
   catch (error) {
@@ -77,13 +80,6 @@ async function onResend() {
   }
 }
 
-function onClose() {
-  otp.value = ['', '', '', '', '', '']
-  attempts.value = 5
-  showError.value = false
-  resetPasswordOtpModal.value = false
-}
-
 function handleEnter(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     onConfirm()
@@ -136,29 +132,19 @@ onBeforeUnmount(() => {
       </button>
     </div>
 
-    <otp-input
+    <id-otp-input
       v-model="otp"
       v-model:error="showError"
-      :attempts="attempts"
+      @on-completed="onConfirm"
     />
 
-    <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 || attempts === 0"
-        @click="onConfirm"
-      >
-        {{ t('actions.confirm') }}
-      </a-button>
-    </div>
+    <a-button
+      block
+      view="outline"
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button>
   </div>
 </template>
 

package/components/modals/id/IdTwoFactorModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -98,27 +98,22 @@ onBeforeUnmount(() => {
     </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" />
+    <id-otp-input
+      v-model="otp"
+      v-model:error="showError"
+      @on-completed="onConfirm"
+    />
     <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>
+
+    <a-button
+      class="w-full"
+      view="outline"
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button>
   </div>
 </template>
 

package/lang/en.ts

@@ -520,7 +520,7 @@ const EnLocale: RuLocale = {
       resetPasswordOtp: {
         title: 'Confirm action',
         content: 'Enter the 6-digit confirmation code sent to your email address',
-        seconds: 'Seconds',
+        seconds: 'seconds',
         attempts: 'Remaining attempts: {n}',
       },
       newPassword: {

package/lang/kk.ts

@@ -521,7 +521,7 @@ const KkLocale: RuLocale = {
       resetPasswordOtp: {
         title: 'Әрекетті растау',
         content: 'Электрондық поштаға жіберілген 6 таңбалы кодты енгізіңіз',
-        seconds: 'Секунд',
+        seconds: 'секунд',
         attempts: 'Қалған әрекет саны: {n}',
       },
       newPassword: {

package/lang/ru.ts

@@ -522,7 +522,7 @@ const RuLocale = {
       resetPasswordOtp: {
         title: 'Подтвердите действие',
         content: 'Введите 6-значный код подтверждения отправленный на ваш адрес электронной почты',
-        seconds: 'Секунд',
+        seconds: 'секунд',
         attempts: 'Повторных попыток осталось: {n}',
       },
       newPassword: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",