adata-ui 2.0.24 → 2.0.26

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>

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { useAuthStore } from '#adata-ui/stores/auth.store'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
-const route = useRoute()
 const { t, locale } = useI18n()
 
-const { email, token } = route.query
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
+
 const authApiURL = commonAuth.authApiURL
-const { loginModal, newPasswordModal, passwordSuccessfulModal } = useIdModals()
+const { newPasswordModal, passwordSuccessfulModal } = useIdModals()
 
 const form = reactive({
   password: '',
@@ -51,22 +53,22 @@ async function onSubmit() {
     if (validation.value) return
     loading.value = true
 
-    const { data } = await $fetch(`${authApiURL}/password/reset`, {
+    const response = await $fetch(`${authApiURL}/password/reset-otp`, {
       method: 'POST',
       credentials: 'include',
       headers: {
         lang: locale.value,
       },
       body: {
-        token,
-        email,
+        token: intermediateState.value.token,
+        email: intermediateState.value.email,
         ...form,
       },
     })
-    if (data?.success) {
+    if (response?.success) {
       newPasswordModal.value = false
       passwordSuccessfulModal.value = true
-      $toast.success(data.message)
+      $toast.success(response.message)
     }
   }
   catch (error) {
@@ -76,62 +78,53 @@ async function onSubmit() {
     loading.value = false
   }
 }
-
-// onMounted(() => {
-//   if (!email || !token) {
-//     newPasswordModal.value = false
-//     loginModal.value = true
-//   }
-// })
 </script>
 
 <template>
-  <a-modal v-model="newPasswordModal">
-    <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('modals.id.newPassword.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('modals.id.newPassword.content') }}
+    </p>
+
+    <a-input-password
+      v-model="form.password"
+      :label="t('modals.id.newPassword.placeholder.1')"
+      :error="getError('password')"
+    />
+
+    <a-alert color="blue">
+      {{ t('modals.id.newPassword.alert') }}
+    </a-alert>
+
+    <a-input-password
+      v-model="form.password_confirmation"
+      :label="t('modals.id.newPassword.placeholder.2')"
+      :error="getError('password_confirmation')"
+    />
+
+    <a-button
+      :loading="loading"
+    >
+      {{ t('actions.set') }}
+    </a-button>
+
+    <p class="text-center text-sm">
+      {{ t('reuse.or') }}
+    </p>
+
+    <a-button
+      type="button"
+      view="outline"
+      @click="newPasswordModal = false"
     >
-      <h2 class="text-center text-2xl font-bold">
-        {{ t('resetPassword.title') }}
-      </h2>
-      <p class="text-center text-sm">
-        {{ t('resetPassword.subtitle') }}
-      </p>
-
-      <a-input-password
-        v-model="form.password"
-        :label="t('register.form.labels.password')"
-        :error="getError('password')"
-      />
-
-      <a-alert color="blue">
-        {{ t('register.form.alert') }}
-      </a-alert>
-
-      <a-input-password
-        v-model="form.password_confirmation"
-        :label="t('register.form.labels.password_confirmation')"
-        :error="getError('password_confirmation')"
-      />
-
-      <a-button
-        :loading="loading"
-      >
-        {{ t('passwordRecovery.form.recover') }}
-      </a-button>
-
-      <p class="text-center text-sm">
-        {{ t('passwordRecovery.form.or') }}
-      </p>
-
-      <a-button
-        type="button"
-        view="outline"
-        @click="newPasswordModal = false"
-      >
-        {{ t('actions.cancel') }}
-      </a-button>
-    </form>
-  </a-modal>
+      {{ t('actions.cancel') }}
+    </a-button>
+  </form>
 </template>

package/components/modals/id/IdPasswordSuccessfulModal.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
 const { passwordSuccessfulModal } = useIdModals()
+const { t } = useI18n()
 </script>
 
 <template>
-  <a-modal v-model="passwordSuccessfulModal">
-    <section class="flex flex-col items-stretch gap-4 text-center">
-      <h2 class="text-2xl font-bold">
-        {{ $t('resetPassword.successModal.title') }}
-      </h2>
-      <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
-        <a-ill-ok />
-      </span>
-      <p class="text-sm">
-        {{ $t('resetPassword.successModal.subtitle') }}
-      </p>
-      <a-button @click="passwordSuccessfulModal = false">
-        {{ $t('resetPassword.successModal.goToAuthorization') }}
-      </a-button>
-    </section>
-  </a-modal>
+  <div class="flex flex-col gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('modals.id.passwordSuccessful.title') }}
+    </h2>
+    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+      <a-ill-ok />
+    </span>
+    <p class="text-sm">
+      {{ t('modals.id.passwordSuccessful.content') }}
+    </p>
+    <a-button @click="passwordSuccessfulModal = false">
+      {{ t('actions.close') }}
+    </a-button>
+  </div>
 </template>
 
 <style scoped>