adata-ui 2.1.0 → 2.1.2

package/components/modals/id/AuthModal.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+const { t } = useI18n()
+const isOpen = useAuthModal()
+const { myLayer } = useAppConfig()
+const { login } = useUrls()
+
+const { loginModal, registrationModal } = useIdModals()
+
+function goAuth() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${login}?url=${fullPath}`
+    }
+  }
+  else {
+    isOpen.value = false
+    loginModal.value = true
+  }
+}
+
+function goRegister() {
+  if (myLayer.authMode !== 'local') {
+    if (window) {
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
+      window.location.href = `${login}register?url=${fullPath}`
+    }
+  }
+  else {
+    isOpen.value = false
+    registrationModal.value = true
+  }
+}
+</script>
+
+<template>
+  <a-modal v-model="isOpen" :title="t('modals.auth.title')">
+    <div class="flex flex-col items-center gap-5 text-center text-sm">
+      <a-ill-door />
+      <div>{{ t('modals.auth.content') }}</div>
+      <a-button
+        block
+        variant="success"
+        @click="goAuth"
+      >
+        {{ t('modals.buttons.logIn') }}
+      </a-button>
+      <div>{{ t('modals.auth.firstTime') }}</div>
+    </div>
+    <template #footer>
+      <div class="flex gap-2">
+        <a-button
+          view="outline"
+          block
+          @click="emit('close')"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button>
+        <a-button block @click="goRegister">
+          {{ t('modals.buttons.register') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/id/IdAutoLogoutModal.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'closed', value: boolean): void
+}>()
+
+const { t } = useI18n()
+
+const { loginModal, autoLogoutModal } = useIdModals()
+
+function onLogin() {
+  autoLogoutModal.value = false
+  loginModal.value = true
+}
+
+function onClose() {
+  emit('closed', true)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('modals.id.autoLogout.title') }}
+    </h2>
+    <a-ill-info class="size-[120px]" />
+    <p class="text-sm">
+      {{ t('modals.id.autoLogout.content') }}
+    </p>
+    <div class="flex w-full gap-2">
+      <a-button block view="outline" @click="onClose">
+        {{ t('actions.close') }}
+      </a-button>
+      <a-button
+        block
+        @click="onLogin"
+      >
+        {{ t('actions.login') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdBanner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="gradient flex 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>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @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

@@ -0,0 +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>

package/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -0,0 +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>