adata-ui 2.0.24 → 2.0.25

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"

package/components/modals/id/IdModals.vue

@@ -1,19 +1,53 @@
 <script setup lang="ts">
-import IdEmailModal from '#adata-ui/components/modals/id/IdEmailModal.vue'
+import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
+import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
 import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
 import IdNewPasswordModal from '#adata-ui/components/modals/id/IdNewPasswordModal.vue'
 import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'
 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'
+
+const {
+  loginModal,
+  registrationModal,
+  confirmAccountOtpModal,
+  recoveryModal,
+  resetPasswordOtpModal,
+  newPasswordModal,
+  passwordSuccessfulModal,
+  confirmSuccessfulModal,
+  twoFactorModal,
+} = useIdModals()
 </script>
 
 <template>
-  <id-login-modal />
-  <id-registration-modal />
-  <id-recovery-modal />
-  <id-email-modal />
-  <id-new-password-modal />
-  <id-password-successful-modal />
+  <a-modal v-model="loginModal">
+    <id-login-modal />
+  </a-modal>
+
+  <a-modal v-model="registrationModal">
+    <id-registration-modal v-if="registrationModal" />
+  </a-modal>
+  <a-modal v-model="confirmAccountOtpModal">
+    <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
+  </a-modal>
+  <a-modal v-model="confirmSuccessfulModal">
+    <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
+  </a-modal>
+
+  <a-modal v-model="recoveryModal">
+    <id-recovery-modal v-if="recoveryModal" />
+  </a-modal>
+  <a-modal v-model="resetPasswordOtpModal">
+    <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
+  </a-modal>
+  <a-modal v-model="newPasswordModal">
+    <id-new-password-modal v-if="newPasswordModal" />
+  </a-modal>
+  <a-modal v-model="passwordSuccessfulModal">
+    <id-password-successful-modal v-if="passwordSuccessfulModal" />
+  </a-modal>
 </template>
 
 <style scoped></style>