adata-ui 2.0.23 → 2.0.25

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>

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>