adata-ui 2.0.23 → 2.0.25

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/footer/NewFooter.vue

@@ -212,8 +212,8 @@ const contactLinks = {
             />
           </div>
         </div>
-
-        <div class="flex flex-col gap-2 items-start">
+        <!--noindex-->
+        <div class="flex flex-col gap-2 items-start" data-nosnippet>
           <nuxt-link
             class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
             :to="contactLinks.link?.replace(/\/$/, '')"
@@ -249,6 +249,7 @@ const contactLinks = {
             </div>
           </div>
         </div>
+        <!--/noindex-->
       </div>
 
       <div class="lg:hidden flex gap-8 flex-wrap">

package/components/navigation/header/AlmatyContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.almaty.title') }}
     </h2>
@@ -89,6 +90,7 @@
 <!--      </div>-->
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">

package/components/navigation/header/AstanaContacts.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-[272px]">
+  <!--noindex-->
+  <div class="h-[272px]" data-nosnippet>
     <h2 class="heading-02 mb-4">
       {{ t('header.contacts.astana.title') }}
     </h2>
@@ -23,6 +24,7 @@
       </div>
     </div>
   </div>
+  <!--/noindex-->
 </template>
 
 <script setup lang="ts">

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/lang/ru.ts

@@ -470,7 +470,9 @@ const RuLocale = {
     back: 'Назад',
     recover: 'Восстановить',
     cancel: 'Отменить',
-    install: 'Установить',
+    set: 'Установить',
+    resend: 'Отправить еще раз',
+    confirm: 'Подтвердить',
   },
   modals: {
     id: {
@@ -479,9 +481,9 @@ const RuLocale = {
         content: 'Укажите Вашу электронную почту / номер телефона',
         placeholder: 'Введите email или номер телефона',
       },
-      email: {
-        title: 'Внимание',
-        content: 'На вашу почту мы вышлем инструкции по сбросу пароля',
+      resetPasswordOtp: {
+        title: 'Подтвердите действие',
+        content: 'Введите 6-значный код подтверждения отправленный на ваш адрес электронной почты',
       },
       newPassword: {
         title: 'Создание нового пароля',
@@ -499,6 +501,14 @@ const RuLocale = {
         confirm: 'Подтвердить',
         error: 'Вы ввели неверный код',
       },
+      passwordSuccessful: {
+        title: 'Отлично',
+        content: 'Вы успешно сменили пароль от учетной записи',
+      },
+      confirmSuccessful: {
+        title: 'Успешно!',
+        content: 'Электронная почта подтверждена. Спасибо!',
+      },
     },
     auth: {
       title: 'Нет доступа',
@@ -678,7 +688,7 @@ const RuLocale = {
       },
     },
     modal: {
-      title: 'Подтверждение',
+      title: 'Подтверждение аккаунта',
       subtitle1: 'На вашу почту отправлено письмо с ссылкой на подтверждение аккаунта',
       subtitle2: 'Ожидание подтверждения, повторно отправить письмо можно через',
       confirmationEmail: 'Если Вы не получили письмо с подтверждением',
@@ -694,6 +704,7 @@ const RuLocale = {
     user_canceled_auth: 'Вы отменили авторизацию',
     email_not_verified: 'Почта не подтверждена',
     email: 'Неправильный email',
+    otp: 'Вы ввели неверный код',
     authorization_error_with_yandex:
       'Не удалось авторизоваться через Яндекс',
     authorization_error_with_google:

package/nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxtjs/google-fonts',
     '@nuxt/eslint',
+    '@pinia/nuxt',
   ],
 
   eslint: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -34,6 +34,7 @@
     "vue-tsc": "^2.2.12"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "^1.7.23",
     "@nuxt/image": "1.8.1",
@@ -42,6 +43,7 @@
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/i18n": "9.3.3",
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@pinia/nuxt": "^0.11.2",
     "@popperjs/core": "^2.11.8",
     "@samk-dev/nuxt-vcalendar": "^1.0.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -56,6 +58,7 @@
     "lodash.isequal": "^4.5.0",
     "maska": "^2.1.11",
     "ofetch": "^1.4.1",
+    "pinia": "^3.0.3",
     "sass": "^1.90.0",
     "scss": "^0.2.4",
     "tailwind-merge": "^2.6.0",

package/stores/auth.store.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore('auth', () => {
+  const intermediateState = ref({
+    email: '',
+    password: '',
+    otp: '',
+    token: '',
+  })
+
+  return { intermediateState }
+})

package/components/modals/Accept.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-
-defineEmits<{ (e: 'back'): void, (e: 'repeated'): void }>()
-
-const timer = ref(60)
-
-function runTimer() {
-  const intervalId = setInterval(() => {
-    if (!timer.value) clearInterval(intervalId)
-    return timer.value--
-  }, 1000)
-}
-
-onMounted(() => runTimer())
-</script>
-
-<template>
-  <section class="flex flex-col items-stretch gap-4 py-4 py-8 text-center md:px-8">
-    <h2 class="text-2xl font-bold">
-      {{ $t('register.modal.title') }}
-    </h2>
-    <span class="mx-auto">
-      <a-ill-mail/>
-    </span>
-    <p class="text-sm">
-      {{ $t('register.modal.subtitle1') }}
-    </p>
-    <p class="text-sm">
-      {{ $t('register.modal.subtitle2') }}
-    </p>
-    <div v-if="timer > 0" class="text-2xl font-bold">
-      {{ timer }} {{ $t('register.modal.seconds') }}
-    </div>
-    <button
-      v-else
-      class="text-sm text-blue-500"
-      @click="$emit('repeated')"
-    >
-      {{ $t('register.modal.resend') }}
-    </button>
-    <a-button @click="$emit('back')">
-      {{ $t('actions.back') }}
-    </a-button>
-  </section>
-</template>

package/components/modals/id/IdEmailModal.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const { emailModal } = useIdModals()
-const { t } = useI18n()
-</script>
-
-<template>
-  <a-modal v-model="emailModal">
-    <div class="flex flex-col items-stretch gap-5 rounded-lg text-center">
-      <h2 class="text-center text-2xl font-bold">
-        {{ t('modals.id.email.title') }}
-      </h2>
-      <div class="flex justify-center">
-        <span class="flex size-[100px] items-center justify-center rounded-full bg-[#BDC7CE26]">
-          <a-ill-info />
-        </span>
-      </div>
-      <p class="text-center text-sm">
-        {{ t('modals.id.email.content') }}
-      </p>
-      <a-button @click="emailModal = false">
-        {{ t('actions.close') }}
-      </a-button>
-    </div>
-  </a-modal>
-</template>
-
-<style scoped>
-
-</style>