adata-ui 2.1.22 → 2.1.24

package/components/modals/id/IdBanner.vue

@@ -1,61 +1,61 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const { registrationModal } = useIdModals()
-
-function onRegister() {
-  registrationModal.value = true
-}
-</script>
-
-<template>
-  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
-    <div>
-      <p class="mb-2 font-semibold">
-        {{ t('modals.id.banners.auth.title') }}
-      </p>
-      <i18n-t
-        keypath="modals.id.banners.auth.subtitle"
-        tag="p"
-        class="text-sm text-gray-600 dark:text-gray-200"
-      >
-        <template #register>
-          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
-            {{ t('modals.id.banners.auth.register') }}
-          </button>
-        </template>
-        <template #checks>
-          <span class="font-bold text-deepblue-900 dark:text-white">{{ 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>
-
-<style scoped>
-.gradient {
-  background: linear-gradient(
-    239.71deg,
-    #B3D5F9 -7.48%,
-    #E6F1FD 39.62%,
-    #CCE2FB 85.82%
-  );
-}
-
-.dark .gradient {
-  background: linear-gradient(
-    239.71deg,
-    #17303F -7.48%,
-    #161617 39.62%,
-    #17303F 85.82%
-  );
-}
-</style>
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="gradient flex flex-col gap-2 lg:gap-0 lg:flex-row justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 font-semibold">
+        {{ t('modals.id.banners.auth.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banners.auth.subtitle"
+        tag="p"
+        class="text-sm text-gray-600 dark:text-gray-200"
+      >
+        <template #register>
+          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
+            {{ t('modals.id.banners.auth.register') }}
+          </button>
+        </template>
+        <template #checks>
+          <span class="font-bold text-deepblue-900 dark:text-white">{{ 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>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,186 +1,186 @@
-<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 { 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) {
-    const { access_token, expire_in } = cookiesData
-    const hostname = location.hostname.split('.').reverse()
-    useCookie('autoLogout').value = true
-
-    useCookie('accessToken', {
-      maxAge: expire_in,
-      domain: `.${hostname[1]}.${hostname[0]}`,
-      path: '/',
-      secure: true,
-    }).value = access_token
-  }
-}
-
-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(60)
-
-function runTimer() {
-  timer.value = 60
-  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('modals.id.confirmAccount.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('modals.id.resetPasswordOtp.seconds') }}
-      </div>
-      <button
-        v-else
-        class="text-blue-700 dark:text-blue-500"
-        :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 { 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 { 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) {
+    const { access_token, expire_in } = cookiesData
+    const hostname = location.hostname.split('.').reverse()
+    useCookie('autoLogout').value = true
+
+    useCookie('accessToken', {
+      maxAge: expire_in,
+      domain: `.${hostname[1]}.${hostname[0]}`,
+      path: '/',
+      secure: true,
+    }).value = access_token
+  }
+}
+
+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(60)
+
+function runTimer() {
+  timer.value = 60
+  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('modals.id.confirmAccount.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('modals.id.resetPasswordOtp.seconds') }}
+      </div>
+      <button
+        v-else
+        class="text-blue-700 dark:text-blue-500"
+        :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>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -1,41 +1,41 @@
-<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-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="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 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="onClose">
+      {{ t('actions.close') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>