adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/modals/id/IdBanner.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const { registrationModal } = useIdModals()
-
-function onRegister() {
-  registrationModal.value = true
-}
-</script>
-
-<template>
-  <div class="bg-gradient-banner flex flex-col justify-between gap-2 rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80 lg:flex-row lg:gap-0">
-    <div>
-      <p class="mb-2 text-h5">
-        {{ t('modals.id.banners.auth.title') }}
-      </p>
-      <i18n-t
-        keypath="modals.id.banners.auth.subtitle"
-        tag="p"
-        class="text-body-md text-quaternary"
-      >
-        <template #register>
-          <button class="font-semibold text-brand" @click="onRegister">
-            {{ t('modals.id.banners.auth.register') }}
-          </button>
-        </template>
-        <template #checks>
-          <span class="font-bold text-primary">{{ t('modals.id.banners.auth.checks') }}</span>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-button
-      size="md"
-      class="sm:self-end bg-gradient-blue"
-      @click="onRegister"
-    >
-      {{ t('actions.register') }}
-    </a-button>
-  </div>
-</template>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="bg-gradient-banner flex flex-col justify-between gap-2 rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80 lg:flex-row lg:gap-0">
+    <div>
+      <p class="mb-2 text-h5">
+        {{ t('modals.id.banners.auth.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.auth.subtitle"
+        tag="p"
+        class="text-body-md text-quaternary"
+      >
+        <template #register>
+          <button class="font-semibold text-brand" @click="onRegister">
+            {{ t('modals.id.banners.auth.register') }}
+          </button>
+        </template>
+        <template #checks>
+          <span class="font-bold text-primary">{{ t('modals.id.banners.auth.checks') }}</span>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="sm:self-end bg-gradient-blue"
+      @click="onRegister"
+    >
+      {{ t('actions.register') }}
+    </a-button>
+  </div>
+</template>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,182 +1,176 @@
-<script setup lang="ts">
-import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
-
-const { $toast } = useNuxtApp()
-const { t, locale } = useI18n()
-const { commonAuth } = useAppConfig()
-
-const { confirmAccountOtpModal, confirmSuccessfulModal, intermediateState } = 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 loginUser() {
-  const login = await fetch(`${removeTrailingSlash(authApiURL)}/login`, {
-    method: 'POST',
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-      'lang': locale.value,
-    },
-    body: JSON.stringify({
-      username: intermediateState.value.email,
-      password: intermediateState.value.password,
-    }),
-  })
-  await login.json().catch(() => ({}))
-
-  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
-    method: 'GET',
-    credentials: 'include',
-    headers: {
-      lang: locale.value,
-    },
-  })
-  const { data: cookiesData } = await response.json()
-  if (cookiesData?.access_token) {
-    const { access_token, expire_in } = cookiesData
-    useCookie('autoLogout').value = true
-
-    await writeAccessTokenCookie(access_token, expire_in)
-  }
-}
-
-async function onConfirm() {
-  try {
-    isLoading.value = true
-
-    await $fetch(`${removeTrailingSlash(authApiURL)}/email/verify-otp`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      params: {
-        email: intermediateState.value.email,
-        otp_code: otpFormatted.value,
-      },
-    })
-
-    await loginUser()
-
-    confirmAccountOtpModal.value = false
-    confirmSuccessfulModal.value = true
-  }
-  catch (error) {
-    showError.value = true
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function resetOtp() {
-  otp.value = ['', '', '', '', '', '']
-  showError.value = false
-}
-
-function onClose() {
-  resetOtp()
-  confirmAccountOtpModal.value = false
-}
-
-const isResendLoading = ref(false)
-async function onResend() {
-  try {
-    isResendLoading.value = true
-    await $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      params: {
-        email: intermediateState.value.email,
-      },
-    })
-    resetOtp()
-    runTimer()
-    isResendLoading.value = false
-  }
-  catch (error) {
-    $toast.error(error.data)
-  }
-}
-
-const timer = ref(120)
-
-function runTimer() {
-  timer.value = 120
-  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-h2">
-      {{ t('modals.id.confirmAccount.title') }}
-    </h2>
-
-    <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
-    <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-body-md">
-      <p class="mb-1">
-        {{ t('modals.id.resetPasswordOtp.content') }}
-      </p>
-
-      <div v-if="timer > 0" class="text-h2">
-        {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
-      </div>
-      <button
-        v-else
-        class="text-brand"
-        :disabled="isResendLoading"
-        @click="onResend"
-      >
-        {{ t('actions.resend') }}
-      </button>
-    </div>
-
-    <id-otp-input
-      v-model="otp"
-      v-model:error="showError"
-      @on-completed="onConfirm"
-    />
-
-    <a-button
-      block
-      view="outline"
-      @click="onClose"
-    >
-      {{ t('actions.close') }}
-    </a-button>
-  </div>
-</template>
+<script setup lang="ts">
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { writeAccessTokenCookie } from '#adata-ui/composables/useAccessTokenCookie'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+
+const { confirmAccountOtpModal, confirmSuccessfulModal, intermediateState } = useIdModals()
+
+const authApiURL = commonAuth.authApiURL
+
+const otp = ref(['', '', '', '', '', ''])
+const otpFormatted = computed(() => {
+  return otp.value.join('')
+})
+const isLoading = ref(false)
+
+async function loginUser() {
+  const login = await fetch(`${removeTrailingSlash(authApiURL)}/login`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'lang': locale.value,
+    },
+    body: JSON.stringify({
+      username: intermediateState.value.email,
+      password: intermediateState.value.password,
+    }),
+  })
+  await login.json().catch(() => ({}))
+
+  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: {
+      lang: locale.value,
+    },
+  })
+  const { data: cookiesData } = await response.json()
+  if (cookiesData?.access_token) {
+    const { access_token, expire_in } = cookiesData
+    useCookie('autoLogout').value = true
+
+    await writeAccessTokenCookie(access_token, expire_in)
+  }
+}
+
+async function onConfirm() {
+  try {
+    isLoading.value = true
+
+    await $fetch(`${removeTrailingSlash(authApiURL)}/email/verify-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      params: {
+        email: intermediateState.value.email,
+        otp_code: otpFormatted.value,
+      },
+    })
+
+    await loginUser()
+
+    confirmAccountOtpModal.value = false
+    confirmSuccessfulModal.value = true
+  }
+  catch (error) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function resetOtp() {
+  otp.value = ['', '', '', '', '', '']
+}
+
+function onClose() {
+  resetOtp()
+  confirmAccountOtpModal.value = false
+}
+
+const isResendLoading = ref(false)
+async function onResend() {
+  try {
+    isResendLoading.value = true
+    await $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      params: {
+        email: intermediateState.value.email,
+      },
+    })
+    resetOtp()
+    runTimer()
+  }
+  catch (error) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    // без finally сбой resend оставлял кнопку заблокированной навсегда
+    isResendLoading.value = false
+  }
+}
+
+const timer = ref(120)
+
+function runTimer() {
+  timer.value = 120
+  const intervalId = setInterval(() => {
+    if (!timer.value) clearInterval(intervalId)
+    return timer.value--
+  }, 1000)
+}
+
+onMounted(() => {
+  runTimer()
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-6 text-center">
+    <h2 class="text-h2 text-primary">
+      {{ t('modals.id.confirmAccount.title') }}
+    </h2>
+
+    <!-- осознанно константный: пара light/dark-ассетов, тема переключается dark:-классами -->
+    <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-body-md text-secondary">
+      <p class="mb-1">
+        {{ t('modals.id.resetPasswordOtp.content') }}
+      </p>
+
+      <div v-if="timer > 0" class="text-h2 text-primary">
+        {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
+      </div>
+      <button
+        v-else
+        type="button"
+        class="mx-auto flex items-center gap-2 text-body-md text-link transition-colors hover:text-link-hover"
+        :disabled="isResendLoading"
+        @click="onResend"
+      >
+        <a-icon-loader-circle v-if="isResendLoading" class="size-4 animate-spin" />
+        <span>{{ t('actions.resend') }}</span>
+      </button>
+    </div>
+
+    <id-otp-input
+      v-model="otp"
+      @on-completed="onConfirm"
+    />
+
+    <a-button-v2
+      view="outline"
+      color="gray"
+      size="lg"
+      block
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button-v2>
+  </div>
+</template>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -1,41 +1,44 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-
-const { t } = useI18n()
-const { confirmSuccessfulModal } = useIdModals()
-const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
-const { pk } = useUrls()
-
-function onClose() {
-  confirmSuccessfulModal.value = false
-
-  const path = window.location.pathname;
-
-  if (regex.test(path)) {
-    navigateTo(`${pk}/${path.split("/")[4]}`, { external: true })
-  } else {
-    window.location.reload()
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 text-center">
-    <h2 class="text-h2">
-      {{ t('modals.id.confirmSuccessful.title') }}
-    </h2>
-    <span class="mx-auto size-[100px] rounded-full bg-muted">
-      <a-ill-ok />
-    </span>
-    <p class="text-body-md">
-      {{ t('modals.id.confirmSuccessful.content') }}
-    </p>
-    <a-button view="outline" @click="onClose">
-      {{ t('actions.close') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const { t } = useI18n()
+const { confirmSuccessfulModal } = useIdModals()
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/
+const { pk } = useUrls()
+
+function onClose() {
+  confirmSuccessfulModal.value = false
+
+  const path = window.location.pathname
+
+  if (regex.test(path)) {
+    navigateTo(`${pk}/${path.split('/')[4]}`, { external: true })
+  }
+  else {
+    window.location.reload()
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-6 text-center">
+    <h2 class="text-h2 text-primary">
+      {{ t('modals.id.confirmSuccessful.title') }}
+    </h2>
+    <div class="mx-auto flex size-24 items-center justify-center rounded-full bg-muted">
+      <a-ill-ok />
+    </div>
+    <p class="text-body-md text-secondary">
+      {{ t('modals.id.confirmSuccessful.content') }}
+    </p>
+    <a-button-v2
+      size="lg"
+      block
+      view="outline"
+      color="gray"
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button-v2>
+  </div>
+</template>