adata-ui 2.0.24 → 2.0.26

package/components/modals/id/IdRecoveryModal.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { useAuthStore } from '#adata-ui/stores/auth.store'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const { recoveryModal, emailModal } = useIdModals()
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
+
+const { recoveryModal, resetPasswordOtpModal } = useIdModals()
 const authApiURL = commonAuth.authApiURL
 const emailField = ref('')
 const loading = ref(false)
@@ -31,7 +35,7 @@ async function onSubmit() {
     if (validation.value) return
     loading.value = true
 
-    await $fetch(`${authApiURL}/password/email`, {
+    await $fetch(`${authApiURL}/password/email-otp`, {
       method: 'POST',
       credentials: 'include',
       headers: {
@@ -41,8 +45,10 @@ async function onSubmit() {
         email: emailField.value,
       },
     })
+    intermediateState.value.email = emailField.value
+
     recoveryModal.value = false
-    emailModal.value = true
+    resetPasswordOtpModal.value = true
   }
   catch (error) {
     $toast.error(error.data.message)
@@ -51,6 +57,7 @@ async function onSubmit() {
     loading.value = false
   }
 }
+
 function handleEnter(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     onSubmit()
@@ -77,38 +84,36 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model="recoveryModal">
-    <form
-      class="flex flex-col items-stretch gap-5 rounded-lg text-center"
-      novalidate
-      @submit.prevent="onSubmit"
+  <form
+    class="flex flex-col items-stretch gap-5 rounded-lg text-center"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('modals.id.recovery.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('modals.id.recovery.content') }}
+    </p>
+    <a-input-standard
+      v-model="emailField"
+      :label="t('modals.id.recovery.placeholder')"
+      :error="getError('emailField')"
+    />
+    <a-button :loading="loading">
+      {{ t('actions.recover') }}
+    </a-button>
+    <p class="text-center text-sm">
+      {{ t('reuse.or') }}
+    </p>
+    <a-button
+      type="button"
+      view="outline"
+      @click="onCancel"
     >
-      <h2 class="text-center text-2xl font-bold">
-        {{ t('modals.id.recovery.title') }}
-      </h2>
-      <p class="text-center text-sm">
-        {{ t('modals.id.recovery.content') }}
-      </p>
-      <a-input-standard
-        v-model="emailField"
-        :label="t('modals.id.recovery.placeholder')"
-        :error="getError('emailField')"
-      />
-      <a-button :loading="loading">
-        {{ t('actions.recover') }}
-      </a-button>
-      <p class="text-center text-sm">
-        {{ t('reuse.or') }}
-      </p>
-      <a-button
-        type="button"
-        view="outline"
-        @click="onCancel"
-      >
-        {{ t('actions.cancel') }}
-      </a-button>
-    </form>
-  </a-modal>
+      {{ t('actions.cancel') }}
+    </a-button>
+  </form>
 </template>
 
 <style scoped></style>

package/components/modals/id/IdRegistrationModal.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import Accept from '#adata-ui/components/modals/Accept.vue'
 import { PAGES } from '#adata-ui/shared/constans/pages'
-import { useToggle } from '@vueuse/shared'
+import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 import { computed, reactive, ref } from 'vue'
-
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const route = useRoute()
 
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
+
 const localePath = useLocalePath()
 const { t, locale } = useI18n()
 const { myLayer, commonAuth }: any = useAppConfig()
 const authApiURL = commonAuth.authApiURL
 const redirectUrl = useCookie('redirect_url')
-const { loginModal, registrationModal } = useIdModals()
+const { loginModal, registrationModal, confirmAccountOtpModal } = useIdModals()
 
 export interface RegistrationForm {
   email: string
@@ -29,7 +30,6 @@ const form = reactive<RegistrationForm>({
   password_confirmation: '',
 })
 
-const [isAcceptModal, toggleAcceptModal] = useToggle()
 const agreement = ref(false)
 const loading = ref(false)
 
@@ -74,7 +74,7 @@ async function onSubmit() {
 
   try {
     loading.value = true
-    const { data, message } = await $fetch(`${authApiURL}/register`, {
+    const { success, message } = await $fetch(`${authApiURL}/register`, {
       method: 'POST',
       credentials: 'include',
       headers: {
@@ -82,9 +82,10 @@ async function onSubmit() {
       },
       body: form,
     })
-    if (data) {
+    if (success) {
+      intermediateState.value.email = form.email
       registrationModal.value = false
-      toggleAcceptModal()
+      confirmAccountOtpModal.value = true
       $toast.success(message)
     }
   }
@@ -100,30 +101,10 @@ if (route.query.url) {
   redirectUrl.value = route.query.url as string
 }
 
-function goBack() {
-  isAcceptModal.value = false
-}
-
 // onMounted(() => {
 //   v$.value.$touch();
 // });
 
-async function onResend() {
-  const emailResend = await fetch(`${authApiURL}/email/resend`, {
-    method: 'GET',
-    credentials: 'include',
-    headers: {
-      lang: locale.value,
-    },
-  })
-  const { data, success, message } = await emailResend.json()
-  if (success) {
-    toggleAcceptModal()
-    loading.value = false
-    $toast.success(message)
-  }
-}
-
 function getUrl() {
   return navigateTo(locale.value !== 'ru'
     ? myLayer.landingUrl + localePath('/') + PAGES.userAgreement
@@ -136,7 +117,7 @@ function getUrl() {
 }
 
 function handleEnter(event: KeyboardEvent) {
-  if (event.key === 'Enter' && !isAcceptModal.value) {
+  if (event.key === 'Enter' && !confirmAccountOtpModal.value) {
     onSubmit()
   }
 }
@@ -165,80 +146,71 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model="registrationModal">
-    <form
-      class="flex flex-col items-stretch gap-5"
-      novalidate
-      @submit.prevent="onSubmit"
+  <form
+    class="flex flex-col items-stretch gap-5"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('register.form.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('register.form.subtitle') }}
+    </p>
+    <a-input-standard
+      v-model="form.email"
+      :label="t('register.form.labels.email')"
+      :error="getError('email')"
+      type="email"
+    />
+
+    <a-input-password
+      v-model="form.password"
+      :label="t('register.form.labels.password')"
+      :error="getError('password')"
+    />
+
+    <a-input-password
+      v-model="form.password_confirmation"
+      :label="t('register.form.labels.password_confirmation')"
+      :error="getError('password_confirmation')"
+    />
+    <a-alert color="blue">
+      {{ t('register.form.alert') }}
+      <template #icon>
+        <a-icon-info-circle />
+      </template>
+    </a-alert>
+    <a-checkbox
+      v-model="agreement"
+      side="right"
     >
-      <h2 class="text-center text-2xl font-bold">
-        {{ t('register.form.title') }}
-      </h2>
-      <p class="text-center text-sm">
-        {{ t('register.form.subtitle') }}
-      </p>
-      <a-input-standard
-        v-model="form.email"
-        :label="t('register.form.labels.email')"
-        :error="getError('email')"
-        type="email"
-      />
-
-      <a-input-password
-        v-model="form.password"
-        :label="t('register.form.labels.password')"
-        :error="getError('password')"
-      />
-
-      <a-input-password
-        v-model="form.password_confirmation"
-        :label="t('register.form.labels.password_confirmation')"
-        :error="getError('password_confirmation')"
-      />
-      <a-alert color="blue">
-        {{ t('register.form.alert') }}
-        <template #icon>
-          <a-icon-info-circle />
+      <i18n-t keypath="register.form.agreement.text">
+        <template #link>
+          <nuxt-link-locale
+            class="text-blue-700"
+            @click="getUrl"
+          >
+            {{ t('register.form.agreement.link') }}
+          </nuxt-link-locale>
         </template>
-      </a-alert>
-      <a-checkbox
-        v-model="agreement"
-        side="right"
-      >
-        <i18n-t keypath="register.form.agreement.text">
-          <template #link>
-            <nuxt-link-locale
-              class="text-blue-700"
-              @click="getUrl"
-            >
-              {{ t('register.form.agreement.link') }}
-            </nuxt-link-locale>
-          </template>
-        </i18n-t>
-      </a-checkbox>
-      <a-button
-        :disabled="!agreement"
-        :loading="loading"
-      >
-        {{ t('register.form.continue') }}
-      </a-button>
-      <p class="text-center text-sm">
-        {{ t('register.form.haveAcc') }}
-      </p>
-      <a-button
-        type="button"
-        view="outline"
-        @click="onLogin"
-      >
-        {{ t('register.form.enter') }}
-      </a-button>
-    </form>
-  </a-modal>
-  <a-modal v-model="isAcceptModal">
-    <accept
-      v-if="isAcceptModal"
-      @back="goBack"
-      @repeated="onResend"
-    />
-  </a-modal>
+      </i18n-t>
+    </a-checkbox>
+    <a-button
+      :disabled="!agreement"
+      :loading="loading"
+    >
+      {{ t('register.form.continue') }}
+    </a-button>
+    <p class="text-center text-sm">
+      {{ t('register.form.haveAcc') }}
+    </p>
+    <a-button
+      type="button"
+      view="outline"
+      @click="onLogin"
+    >
+      {{ t('register.form.enter') }}
+    </a-button>
+  </form>
 </template>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -0,0 +1,154 @@
+<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 { resetPasswordOtpModal, newPasswordModal } = 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() {
+  try {
+    isLoading.value = true
+
+    const response = await $fetch(`${authApiURL}/password/validate-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: intermediateState.value.email,
+        otp: otpFormatted.value,
+      },
+    })
+
+    intermediateState.value.token = response.data
+    intermediateState.value.otp = otpFormatted.value
+
+    resetPasswordOtpModal.value = false
+    newPasswordModal.value = true
+  }
+  catch (error) {
+    showError.value = true
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+async function onResend() {
+  try {
+    await $fetch(`${authApiURL}/password/email-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: intermediateState.value.email,
+      },
+    })
+    runTimer()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+}
+
+function onClose() {
+  otp.value = ['', '', '', '', '', '']
+  showError.value = false
+  resetPasswordOtpModal.value = false
+}
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    onConfirm()
+  }
+}
+
+const timer = ref(60)
+
+function runTimer() {
+  const intervalId = setInterval(() => {
+    if (!timer.value) clearInterval(intervalId)
+    return timer.value--
+  }, 1000)
+}
+
+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('modals.id.resetPasswordOtp.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>
+
+<style scoped>
+
+</style>

package/components/modals/two-factor/otp-input.vue

@@ -131,7 +131,7 @@ function moveFocus(index: number, to: string) {
       size="sm"
       icon-type="triangle"
     >
-      {{ t('twoFactor.error') }}
+      {{ t('error.otp') }}
     </a-alert>
   </div>
 </template>

package/components/navigation/README.md

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

package/components/overlays/README.md

@@ -1 +1 @@
-# tooltip, popover, slide over, modal, context menu
+# tooltip, popover, slide over, modal, context menu

package/composables/useIdModals.ts

@@ -1,17 +1,25 @@
 export function useIdModals() {
   const loginModal = useState('login-modal', () => false)
+  const twoFactorModal = useState('two-factor-modal', () => false)
+
   const registrationModal = useState('registration-modal', () => false)
+  const confirmAccountOtpModal = useState('confirm-account-otp-modal', () => false)
+  const confirmSuccessfulModal = useState('confirm-successful-modal', () => false)
+
   const recoveryModal = useState('recovery-modal', () => false)
-  const emailModal = useState('email-modal', () => false)
+  const resetPasswordOtpModal = useState('reset-password-otp-modal', () => false)
   const newPasswordModal = useState('new-password-modal', () => false)
   const passwordSuccessfulModal = useState('password-successful-modal', () => false)
 
   return {
     loginModal,
+    twoFactorModal,
     registrationModal,
+    confirmAccountOtpModal,
     recoveryModal,
-    emailModal,
+    resetPasswordOtpModal,
     newPasswordModal,
     passwordSuccessfulModal,
+    confirmSuccessfulModal,
   }
 }

package/icons/chart-pie.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_16139_4935" fill="white">
+      <path d="M11.5689 2.7041C9.95675 2.7041 8.36808 3.09007 6.93567 3.82973C5.50326 4.56938 4.26876 5.64124 3.33539 6.95565C2.40202 8.27007 1.79691 9.78886 1.57065 11.385C1.3444 12.9812 1.50358 14.6083 2.03488 16.1303C2.56618 17.6524 3.45416 19.0251 4.62458 20.1337C5.79499 21.2423 7.21382 22.0546 8.76241 22.5026C10.311 22.9506 11.9444 23.0214 13.5259 22.709C15.1074 22.3965 16.5912 21.71 17.8531 20.7067L11.5689 12.8023V2.7041Z"/>
+    </mask>
+    <path d="M11.5689 2.7041C9.95675 2.7041 8.36808 3.09007 6.93567 3.82973C5.50326 4.56938 4.26876 5.64124 3.33539 6.95565C2.40202 8.27007 1.79691 9.78886 1.57065 11.385C1.3444 12.9812 1.50358 14.6083 2.03488 16.1303C2.56618 17.6524 3.45416 19.0251 4.62458 20.1337C5.79499 21.2423 7.21382 22.0546 8.76241 22.5026C10.311 22.9506 11.9444 23.0214 13.5259 22.709C15.1074 22.3965 16.5912 21.71 17.8531 20.7067L11.5689 12.8023V2.7041Z" stroke="currentColor" stroke-width="2.44898" mask="url(#path-1-inside-1_16139_4935)"/>
+    <mask id="path-2-inside-2_16139_4935" fill="white">
+      <path d="M12.3329 0.979492C14.8031 0.979492 17.2017 1.80939 19.1436 3.336C21.0856 4.8626 22.4584 6.99738 23.0417 9.39772L12.3329 11.9999V0.979492Z"/>
+    </mask>
+    <path d="M12.3329 0.979492C14.8031 0.979492 17.2017 1.80939 19.1436 3.336C21.0856 4.8626 22.4584 6.99738 23.0417 9.39772L12.3329 11.9999V0.979492Z" stroke="currentColor" stroke-width="2.44898" mask="url(#path-2-inside-2_16139_4935)"/>
+    <mask id="path-3-inside-3_16139_4935" fill="white">
+      <path d="M21.6275 10.667C22.0329 12.3775 21.9429 14.168 21.3681 15.8292C20.7932 17.4904 19.7572 18.9536 18.3813 20.0476L12.6204 12.8021L21.6275 10.667Z"/>
+    </mask>
+    <path d="M21.6275 10.667C22.0329 12.3775 21.9429 14.168 21.3681 15.8292C20.7932 17.4904 19.7572 18.9536 18.3813 20.0476L12.6204 12.8021L21.6275 10.667Z" stroke="currentColor" stroke-width="2.44898" mask="url(#path-3-inside-3_16139_4935)"/>
+  </svg>
+</template>

package/icons/google.vue

@@ -1,41 +1,41 @@
-
-
-<script lang="ts" setup>
-</script>
-
-<template>
-  <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      x="0.5"
-      y="0.5"
-      width="31"
-      height="31"
-      rx="5.5"
-      stroke="#9DA3AC"
-    />
-    <path
-      d="M26.501 16.2332C26.501 15.3699 26.4296 14.7399 26.2748 14.0865H16.2153V17.9832H22.12C22.001 18.9515 21.3582 20.4099 19.9296 21.3898L19.9096 21.5203L23.0902 23.935L23.3106 23.9565C25.3343 22.1249 26.501 19.4298 26.501 16.2332Z"
-      fill="#4285F4"
-    />
-    <path
-      d="M16.2147 26.5C19.1075 26.5 21.5361 25.5666 23.3099 23.9566L19.929 21.3898C19.0242 22.0082 17.8099 22.4399 16.2147 22.4399C13.3814 22.4399 10.9767 20.6082 10.1195 18.0765L9.99382 18.087L6.68656 20.5954L6.64331 20.7132C8.40519 24.1432 12.0242 26.5 16.2147 26.5Z"
-      fill="#34A853"
-    />
-    <path
-      d="M10.12 18.0766C9.89379 17.4233 9.76289 16.7232 9.76289 15.9999C9.76289 15.2765 9.89379 14.5766 10.1081 13.9232L10.1021 13.7841L6.75337 11.2355L6.64381 11.2865C5.91765 12.7099 5.50098 14.3083 5.50098 15.9999C5.50098 17.6916 5.91765 19.2899 6.64381 20.7132L10.12 18.0766Z"
-      fill="#FBBC05"
-    />
-    <path
-      d="M16.2148 9.55997C18.2267 9.55997 19.5838 10.4116 20.3576 11.1233L23.3814 8.23C21.5243 6.53834 19.1076 5.5 16.2148 5.5C12.0243 5.5 8.4052 7.85665 6.64331 11.2866L10.1076 13.9233C10.9767 11.3917 13.3815 9.55997 16.2148 9.55997Z"
-      fill="#EB4335"
-    />
-  </svg>
-</template>
-
-<style scoped></style>
+
+
+<script lang="ts" setup>
+</script>
+
+<template>
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.5"
+      y="0.5"
+      width="31"
+      height="31"
+      rx="5.5"
+      stroke="#9DA3AC"
+    />
+    <path
+      d="M26.501 16.2332C26.501 15.3699 26.4296 14.7399 26.2748 14.0865H16.2153V17.9832H22.12C22.001 18.9515 21.3582 20.4099 19.9296 21.3898L19.9096 21.5203L23.0902 23.935L23.3106 23.9565C25.3343 22.1249 26.501 19.4298 26.501 16.2332Z"
+      fill="#4285F4"
+    />
+    <path
+      d="M16.2147 26.5C19.1075 26.5 21.5361 25.5666 23.3099 23.9566L19.929 21.3898C19.0242 22.0082 17.8099 22.4399 16.2147 22.4399C13.3814 22.4399 10.9767 20.6082 10.1195 18.0765L9.99382 18.087L6.68656 20.5954L6.64331 20.7132C8.40519 24.1432 12.0242 26.5 16.2147 26.5Z"
+      fill="#34A853"
+    />
+    <path
+      d="M10.12 18.0766C9.89379 17.4233 9.76289 16.7232 9.76289 15.9999C9.76289 15.2765 9.89379 14.5766 10.1081 13.9232L10.1021 13.7841L6.75337 11.2355L6.64381 11.2865C5.91765 12.7099 5.50098 14.3083 5.50098 15.9999C5.50098 17.6916 5.91765 19.2899 6.64381 20.7132L10.12 18.0766Z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M16.2148 9.55997C18.2267 9.55997 19.5838 10.4116 20.3576 11.1233L23.3814 8.23C21.5243 6.53834 19.1076 5.5 16.2148 5.5C12.0243 5.5 8.4052 7.85665 6.64331 11.2866L10.1076 13.9233C10.9767 11.3917 13.3815 9.55997 16.2148 9.55997Z"
+      fill="#EB4335"
+    />
+  </svg>
+</template>
+
+<style scoped></style>