adata-ui 2.0.23 → 2.0.25

package/components/elements/curve-block/ACurveBlock.vue

@@ -13,12 +13,11 @@ const props = defineProps<{
   <component
     :is="to ? NuxtLinkLocale : 'button'"
     :to="to"
-    class="curve-block relative w-fit cursor-pointer"
+    class="curve-block relative w-full cursor-pointer"
     active-class="active-item"
   >
     <svg
-      width="306"
-      height="182"
+      class="w-full"
       viewBox="-1 -1 308 184"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -79,9 +78,7 @@ const props = defineProps<{
     </div>
 
     <svg
-      class="absolute bottom-0 right-0"
-      width="48"
-      height="48"
+      class="absolute bottom-0 right-0 size-12 2xl:size-14"
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
     >

package/components/elements/select/ASelect.vue

@@ -6,6 +6,8 @@ import { onClickOutside, useToggle } from '@vueuse/core'
 import { isEqual } from 'lodash-es'
 import type { Ref } from 'vue'
 
+import { useFloating, offset, flip, shift, size as floatingSize, autoUpdate } from '@floating-ui/vue'
+
 type Props = {
   label: string
   required?: boolean
@@ -61,6 +63,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<Emits>()
 
+
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  middleware: [
+    offset(6),
+    flip({ fallbackPlacements: ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = `${rects.reference.width}px`
+        el.style.maxHeight = `${Math.max(140, Math.min(availableHeight, 320))}px`
+        el.style.overflowY = 'auto'
+      },
+    }),
+  ],
+})
+
+let cleanup: (() => void) | null = null
+
+
+
 const modelValue = defineModel<T | T[] | null | any>({ required: true })
 const search = defineModel<T | null | any>('search')
 const isOpen = defineModel<T | null | any>('open', {
@@ -235,10 +263,21 @@ onUpdated(() => (countedVisibleItems.value = countOfVisibleItems.value))
 defineExpose({
   onClear
 })
+watch(() => isOpen.value, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  } else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+
+onUnmounted(() => cleanup?.())
 </script>
 <template>
   <div ref="wrapper" class="relative w-full rounded-md text-sm">
     <button
+      ref="reference"
       :class="[
         clearable ? 'pr-16' : 'pr-9',
         {
@@ -262,7 +301,7 @@ defineExpose({
       </span>
       <component :is="startIcon" v-if="startIcon" />
 
-      <span :class="{ 'py-1': size === 'md' }" class="w-full text-start">
+      <span :class="{ 'py-1': size === 'md' }" class=" w-full text-start">
         <span v-if="valueToShow">
           <span v-if="!multiple" class="line-clamp-1 text-deepblue-900 dark:text-gray-200">
             <slot name="single-selected" :value="valueToShow">{{ valueToShow[keyToShow] }}</slot>
@@ -310,10 +349,16 @@ defineExpose({
       </span>
     </button>
     <transition>
-      <div
-        v-if="isOpen"
-        class="absolute z-20 mt-1 w-full rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
-      >
+        <div
+          v-if="isOpen"
+          ref="floating"
+          class="z-[10000] rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+        >
         <slot :options="options" name="options">
           <ul class="select m-2 max-h-[250px] overflow-y-auto overflow-x-hidden">
             <li v-if="searchFromOut" class="p-1">

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import OtpInput from '#adata-ui/components/modals/two-factor/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 { confirmAccountOtpModal, confirmSuccessfulModal } = 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 onResend() {
+  try {
+    await $fetch(`${authApiURL}/email/resend-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: intermediateState.value.email,
+      },
+    })
+    runTimer()
+  }
+  catch (error) {
+    $toast.error(error.data)
+  }
+}
+
+async function onConfirm() {
+  try {
+    isLoading.value = true
+
+    await $fetch(`${authApiURL}/email/verify-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      params: {
+        email: intermediateState.value.email,
+        otp_code: otpFormatted.value,
+      },
+    })
+
+    confirmAccountOtpModal.value = false
+    confirmSuccessfulModal.value = true
+  }
+  catch (error) {
+    showError.value = true
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onClose() {
+  otp.value = ['', '', '', '', '', '']
+  showError.value = false
+  confirmAccountOtpModal.value = false
+}
+
+const timer = ref(60)
+
+function runTimer() {
+  const intervalId = setInterval(() => {
+    if (!timer.value) clearInterval(intervalId)
+    return timer.value--
+  }, 1000)
+}
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    onConfirm()
+  }
+}
+
+onMounted(() => {
+  runTimer()
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('register.modal.title') }}
+    </h2>
+
+    <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
+    <a-icon-hand-with-phone-dark class="hidden size-32 dark:block" />
+
+    <div class="text-sm">
+      <p class="mb-1">
+        {{ t('modals.id.resetPasswordOtp.content') }}
+      </p>
+
+      <div v-if="timer > 0" class="text-2xl font-bold">
+        {{ timer }} {{ t('register.modal.seconds') }}
+      </div>
+      <button
+        v-else
+        class="text-blue-700 dark:text-blue-500"
+        @click="onResend"
+      >
+        {{ t('actions.resend') }}
+      </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>
+  </div>
+</template>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { confirmSuccessfulModal } = useIdModals()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('modals.id.confirmSuccessful.title') }}
+    </h2>
+    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+      <a-ill-ok />
+    </span>
+    <p class="text-sm">
+      {{ t('modals.id.confirmSuccessful.content') }}
+    </p>
+    <a-button view="outline" @click="confirmSuccessfulModal = false">
+      {{ t('actions.close') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdLoginModal.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import AConfirmationEmail from '#adata-ui/components/modals/AConfirmationEmail.vue'
-import Resend from '#adata-ui/components/modals/Resend.vue'
 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'
@@ -13,13 +12,14 @@ const isConfirmationEmailModal = ref(false)
 const isTwoFactorOpen = ref(false)
 const isLoadingOtp = ref(false)
 const { $api, $toast } = useNuxtApp()
-const localePath = useLocalePath()
 const showOtpError = ref(false)
 const { t, locale } = useI18n()
-const route = useRoute()
 const submitted = ref(false)
 const accessToken = ref(null)
-const { loginModal, registrationModal, recoveryModal } = useIdModals()
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal } = useIdModals()
+
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
 
 export interface ILoginForm {
   username: string
@@ -84,7 +84,22 @@ async function submit() {
         $toast.error(t('error.validation'))
       }
       else {
-        $toast.error(message)
+        intermediateState.value.email = form.username
+        intermediateState.value.password = form.password
+
+        await fetch(`${authApiURL}/email/resend-otp`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            'lang': locale.value,
+          },
+          body: JSON.stringify({
+            email: intermediateState.value.email,
+          }),
+        }).catch(() => {})
+
+        confirmAccountOtpModal.value = true
       }
     }
     else {
@@ -112,7 +127,20 @@ async function submit() {
         window.location.reload()
       }
       else {
-        isConfirmationEmailModal.value = true
+        intermediateState.value.email = form.username
+        intermediateState.value.password = form.password
+        confirmAccountOtpModal.value = true
+
+        $fetch(`${authApiURL}/email/resend-otp`, {
+          method: 'GET',
+          credentials: 'include',
+          headers: {
+            lang: locale.value,
+          },
+          body: {
+            email: intermediateState.value.email,
+          },
+        }).catch(() => {})
       }
     }
     loading.value = false
@@ -165,8 +193,8 @@ async function handleConfirmOtp(otpCode: string) {
       'lang': locale.value,
     },
     body: JSON.stringify({
-      'username': form.username.trim(),
-      'password': form.password.toString(),
+      'username': intermediateState.value.email.trim(),
+      'password': intermediateState.value.password.toString(),
       '2fa_code': otpCode,
     }),
   })
@@ -195,6 +223,7 @@ async function handleConfirmOtp(otpCode: string) {
     }
     $toast.success(t('login.successfully'))
     loginModal.value = false
+    window.location.reload()
 
     isTwoFactorOpen.value = false
   }
@@ -217,14 +246,6 @@ function onForgotPassword() {
   recoveryModal.value = true
 }
 
-watch(loginModal, (value) => {
-  if (!value) {
-    form.username = ''
-    form.password = ''
-    rememberMe.value = false
-  }
-})
-
 onMounted(() => {
   document.addEventListener('keyup', handleEnter)
 })
@@ -235,124 +256,122 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model="loginModal">
-    <div class="flex flex-col gap-5">
-      <h1 class="heading-02 text-center">
-        {{ $t('login.form.title') }}
-      </h1>
-      <p class="body-400 text-center">
-        {{ $t('login.form.subtitle') }}
-      </p>
-      <div class="flex flex-col gap-4">
-        <a-input-standard
-          v-model="form.username"
-          type="email"
-          :label="$t('login.form.labels.email')"
-          :error="getError('username')"
-        />
-        <a-input-password
-          v-model="form.password"
-          :label="$t('login.form.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('login.form.remember_me')
-            }}</label>
-          </div>
-          <button
-            class="link-s-400"
-            @click="onForgotPassword"
-          >
-            {{ $t('login.form.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
+  <div class="flex flex-col gap-5">
+    <h1 class="heading-02 text-center">
+      {{ $t('login.form.title') }}
+    </h1>
+    <p class="body-400 text-center">
+      {{ $t('login.form.subtitle') }}
+    </p>
+    <div class="flex flex-col gap-4">
+      <a-input-standard
+        v-model="form.username"
+        type="email"
+        :label="$t('login.form.labels.email')"
+        :error="getError('username')"
+      />
+      <a-input-password
+        v-model="form.password"
+        :label="$t('login.form.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"
-            @click="authWithSocial('mailru')"
-          >
-            <a-icon-mailru />
-          </span>
+          >{{
+            $t('login.form.remember_me')
+          }}</label>
         </div>
-        <div class="h-px w-full bg-deepblue-500/30" />
+        <button
+          class="link-s-400"
+          @click="onForgotPassword"
+        >
+          {{ $t('login.form.forget_password') }}
+        </button>
       </div>
-      <a-button
-        :loading="loading"
-        type="submit"
-        @click="submit"
-      >
-        {{ $t('actions.login') }}
-      </a-button>
-      <p class="body-400 text-center">
-        {{ $t('login.form.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>
-  </a-modal>
-
-  <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>
+    <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('login.form.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>
+
+  <!--  <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"