adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,186 +1,181 @@
-<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(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-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 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-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>