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

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -1,159 +1,145 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-
-const { $toast } = useNuxtApp()
-const { t, locale } = useI18n()
-const { commonAuth } = useAppConfig()
-
-const { resetPasswordOtpModal, newPasswordModal, 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 onConfirm() {
-  try {
-    isLoading.value = true
-
-    const response = await $fetch(`${removeTrailingSlash(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
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function resetOtp() {
-  otp.value = ['', '', '', '', '', '']
-  showError.value = false
-}
-
-function onClose() {
-  resetOtp()
-  resetPasswordOtpModal.value = false
-}
-
-const isResendLoading = ref(false)
-async function onResend() {
-  try {
-    isResendLoading.value = true
-    await $fetch(`${removeTrailingSlash(authApiURL)}/password/email-otp`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      body: {
-        email: intermediateState.value.email,
-      },
-    })
-    resetOtp()
-    runTimer()
-    isResendLoading.value = false
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-}
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
-  }
-}
-
-const timer = ref(120)
-
-function runTimer() {
-  timer.value = 120
-  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-h2">
-      {{ t('modals.id.resetPasswordOtp.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 flex items-center gap-2 mx-auto"
-        @click="onResend"
-        :disabled="isResendLoading"
-      >
-        <a-icon-loader-circle
-          v-if="isResendLoading"
-          class="animate-spin"
-        ></a-icon-loader-circle>
-        <span>{{ t('actions.resend') }}</span>
-      </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>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { apiErrorMessage } from '#adata-ui/utils/apiErrorMessage'
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+
+const { resetPasswordOtpModal, newPasswordModal, intermediateState } = useIdModals()
+
+const authApiURL = commonAuth.authApiURL
+
+const otp = ref(['', '', '', '', '', ''])
+const otpFormatted = computed(() => {
+  return otp.value.join('')
+})
+const isLoading = ref(false)
+
+async function onConfirm() {
+  try {
+    isLoading.value = true
+
+    const response = await $fetch(`${removeTrailingSlash(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) {
+    $toast.error(apiErrorMessage(error, t('error.validation')))
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function resetOtp() {
+  otp.value = ['', '', '', '', '', '']
+}
+
+function onClose() {
+  resetOtp()
+  resetPasswordOtpModal.value = false
+}
+
+const isResendLoading = ref(false)
+async function onResend() {
+  try {
+    isResendLoading.value = true
+    await $fetch(`${removeTrailingSlash(authApiURL)}/password/email-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        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.resetPasswordOtp.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/IdTwoFactorModal.vue

@@ -1,126 +1,111 @@
-<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 { useUrls } from '#adata-ui/composables/useUrls'
-
-const { $toast } = useNuxtApp()
-const { t, locale } = useI18n()
-const { commonAuth } = useAppConfig()
-const { pk } = useUrls()
-
-const { twoFactorModal, intermediateState } = useIdModals()
-
-const authApiURL = commonAuth.authApiURL
-const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
-
-const otp = ref(['', '', '', '', '', ''])
-const otpFormatted = computed(() => {
-  return otp.value.join('')
-})
-const showError = ref(false)
-const isLoading = ref(false)
-
-async function onConfirm() {
-  isLoading.value = true
-  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,
-      '2fa_code': otpFormatted.value,
-    }),
-  })
-  const { data, message } = await login.json().catch(() => ({}))
-
-  if (login.status > 202) {
-    if (login.status === 403) {
-      showError.value = true
-      isLoading.value = false
-    }
-  }
-  else {
-    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)
-    }
-    $toast.success(t('login.successfully'))
-    twoFactorModal.value = false
-
-    const path = window.location.pathname;
-
-    if (regex.test(path)) {
-      navigateTo(`${pk}/company/${path.split("/")[4]}`, { external: true })
-    } else {
-      window.location.reload()
-    }
-  }
-  isLoading.value = false
-}
-
-function onClose() {
-  otp.value = ['', '', '', '', '', '']
-  showError.value = false
-  twoFactorModal.value = false
-}
-
-function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    onConfirm()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keyup', handleEnter)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', handleEnter)
-})
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-4">
-    <p class="text-h2 text-center">
-      {{ t('modals.id.twoFactor.title') }}
-    </p>
-    <!-- осознанно константный: пара 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" />
-    <id-otp-input
-      v-model="otp"
-      v-model:error="showError"
-      @on-completed="onConfirm"
-    />
-    <p class="text-body-md text-center">
-      {{ t('modals.id.twoFactor.code') }}
-    </p>
-
-    <a-button
-      class="w-full"
-      view="outline"
-      @click="onClose"
-    >
-      {{ t('actions.close') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<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 { useUrls } from '#adata-ui/composables/useUrls'
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const { pk } = useUrls()
+
+const { twoFactorModal, intermediateState } = useIdModals()
+
+const authApiURL = commonAuth.authApiURL
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/
+
+const otp = ref(['', '', '', '', '', ''])
+const otpFormatted = computed(() => {
+  return otp.value.join('')
+})
+const showError = ref(false)
+const isLoading = ref(false)
+
+async function onConfirm() {
+  isLoading.value = true
+  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,
+      '2fa_code': otpFormatted.value,
+    }),
+  })
+  const { data, message } = await login.json().catch(() => ({}))
+
+  if (login.status > 202) {
+    if (login.status === 403) {
+      showError.value = true
+      isLoading.value = false
+    }
+  }
+  else {
+    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)
+    }
+    $toast.success(t('login.successfully'))
+    twoFactorModal.value = false
+
+    const path = window.location.pathname
+
+    if (regex.test(path)) {
+      navigateTo(`${pk}/company/${path.split('/')[4]}`, { external: true })
+    }
+    else {
+      window.location.reload()
+    }
+  }
+  isLoading.value = false
+}
+
+function onClose() {
+  otp.value = ['', '', '', '', '', '']
+  showError.value = false
+  twoFactorModal.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 p-6">
+    <h2 class="text-center text-h2 text-primary">
+      {{ t('modals.id.twoFactor.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" />
+    <id-otp-input
+      v-model="otp"
+      v-model:error="showError"
+      @on-completed="onConfirm"
+    />
+    <p class="text-center text-body-md text-secondary">
+      {{ t('modals.id.twoFactor.code') }}
+    </p>
+
+    <a-button-v2
+      view="outline"
+      color="gray"
+      size="lg"
+      block
+      @click="onClose"
+    >
+      {{ t('actions.close') }}
+    </a-button-v2>
+  </div>
+</template>

package/components/navigation/README.md

@@ -1 +1 @@
-# breadcrumb, tabs
+# breadcrumb, tabs