adata-ui 2.0.28 → 2.0.30

package/.nuxtrc

@@ -1 +1 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace = true

package/.playground/app.config.ts

@@ -1,5 +1,5 @@
-export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
-})
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/README.md

@@ -1,75 +1,75 @@
-# Adata UI with Nuxt 3 using Layers
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `https://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+# Adata UI with Nuxt 3 using Layers
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `https://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/components/elements/README.md

@@ -1 +1 @@
-# button, alerts, dropdown
+# button, alerts, dropdown

package/components/forms/README.md

@@ -1 +1 @@
-# inputs
+# inputs

package/components/modals/AConfirmationEmail.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'resend'): void
-  (e: 'close'): void
-}>()
-</script>
-
-<template>
-  <div class="flex flex-col justify-center items-center gap-5">
-    <p class="heading-02">
-      {{ $t('login.modal.title') }}
-    </p>
-    <a-ill-mail />
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle1') }}
-    </p>
-    <p class="body-400 text-center">
-      {{ $t('login.modal.confirmationEmail') }}
-    </p>
-    <div class="flex flex-col gap-2 w-full">
-      <a-button
-        class="w-full"
-        view="outline"
-        @click="emit('close')"
-      >
-        {{ $t('login.modal.back') }}
-      </a-button>
-      <a-button
-        class="w-full"
-        @click="emit('resend')"
-      >
-        {{ $t('login.modal.resend') }}
-      </a-button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'resend'): void
+  (e: 'close'): void
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-5">
+    <p class="heading-02">
+      {{ $t('login.modal.title') }}
+    </p>
+    <a-ill-mail />
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle1') }}
+    </p>
+    <p class="body-400 text-center">
+      {{ $t('login.modal.confirmationEmail') }}
+    </p>
+    <div class="flex flex-col gap-2 w-full">
+      <a-button
+        class="w-full"
+        view="outline"
+        @click="emit('close')"
+      >
+        {{ $t('login.modal.back') }}
+      </a-button>
+      <a-button
+        class="w-full"
+        @click="emit('resend')"
+      >
+        {{ $t('login.modal.resend') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/Resend.vue

@@ -1,81 +1,81 @@
-<script setup lang="ts">
-
-const emit = defineEmits<{
-  (e: 'resend'): void
-  (e: 'close'): void
-}>()
-
-const timer = ref(60)
-const isResend = ref(false)
-const route = useRoute()
-const appConfig = useAppConfig()
-const landingUrl = appConfig.myLayer.landingUrl
-
-function runTimer() {
-  timer.value = 60
-  const intervalId = setInterval(() => {
-    if (timer.value <= 0) {
-      isResend.value = true
-      clearInterval(intervalId);
-      return;
-    }
-    timer.value--;
-  }, 1000);
-}
-
-onMounted(() => resend())
-
-const resend = () => {
-  isResend.value = false
-  runTimer()
-  emit('resend')
-}
-const goToMain = () => {
-  if (route.query.url) {
-    document.location.replace(route.query.url)
-  } else {
-    document.location.replace(landingUrl)
-  }
-  emit('close')
-
-}
-</script>
-
-<template>
-  <div class="flex flex-col justify-center items-center gap-5">
-    <p class="heading-02">
-      {{ $t('login.modal.title') }}
-    </p>
-    <a-ill-mail />
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle1') }}
-    </p>
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle2') }}
-    </p>
-    <p
-      v-if="!isResend"
-      class="heading-02"
-    >
-      {{ timer }} {{ $t('login.modal.seconds') }}
-    </p>
-    <a-button
-      v-else
-      class="w-full"
-      view="outline"
-      @click="resend"
-    >
-      {{ $t('login.modal.resend') }}
-    </a-button>
-    <a-button
-      class="w-full"
-      @click="goToMain"
-    >
-      {{ $t('login.modal.back') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+
+const emit = defineEmits<{
+  (e: 'resend'): void
+  (e: 'close'): void
+}>()
+
+const timer = ref(60)
+const isResend = ref(false)
+const route = useRoute()
+const appConfig = useAppConfig()
+const landingUrl = appConfig.myLayer.landingUrl
+
+function runTimer() {
+  timer.value = 60
+  const intervalId = setInterval(() => {
+    if (timer.value <= 0) {
+      isResend.value = true
+      clearInterval(intervalId);
+      return;
+    }
+    timer.value--;
+  }, 1000);
+}
+
+onMounted(() => resend())
+
+const resend = () => {
+  isResend.value = false
+  runTimer()
+  emit('resend')
+}
+const goToMain = () => {
+  if (route.query.url) {
+    document.location.replace(route.query.url)
+  } else {
+    document.location.replace(landingUrl)
+  }
+  emit('close')
+
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-5">
+    <p class="heading-02">
+      {{ $t('login.modal.title') }}
+    </p>
+    <a-ill-mail />
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle1') }}
+    </p>
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle2') }}
+    </p>
+    <p
+      v-if="!isResend"
+      class="heading-02"
+    >
+      {{ timer }} {{ $t('login.modal.seconds') }}
+    </p>
+    <a-button
+      v-else
+      class="w-full"
+      view="outline"
+      @click="resend"
+    >
+      {{ $t('login.modal.resend') }}
+    </a-button>
+    <a-button
+      class="w-full"
+      @click="goToMain"
+    >
+      {{ $t('login.modal.back') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import OtpInput from '#adata-ui/components/modals/two-factor/otp-input.vue'
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
 import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
@@ -20,22 +20,39 @@ const otpFormatted = computed(() => {
 const showError = ref(false)
 const isLoading = ref(false)
 
-async function onResend() {
-  try {
-    await $fetch(`${authApiURL}/email/resend-otp`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        lang: locale.value,
-      },
-      body: {
-        email: intermediateState.value.email,
-      },
-    })
-    runTimer()
-  }
-  catch (error) {
-    $toast.error(error.data)
+async function loginUser() {
+  const login = await fetch(`${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(`${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('accessToken', {
+      maxAge: expire_in,
+      domain: `.${hostname[1]}.${hostname[0]}`,
+      path: '/',
+      secure: true,
+    }).value = access_token
   }
 }
 
@@ -55,27 +72,53 @@ async function onConfirm() {
       },
     })
 
+    await loginUser()
+
     confirmAccountOtpModal.value = false
     confirmSuccessfulModal.value = true
   }
   catch (error) {
     showError.value = true
-    $toast.error(error.data.message)
   }
   finally {
     isLoading.value = false
   }
 }
 
-function onClose() {
+function resetOtp() {
   otp.value = ['', '', '', '', '', '']
   showError.value = false
+}
+
+function onClose() {
+  resetOtp()
   confirmAccountOtpModal.value = false
 }
 
+async function onResend() {
+  try {
+    await $fetch(`${authApiURL}/email/resend-otp`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      params: {
+        email: intermediateState.value.email,
+      },
+    })
+    resetOtp()
+    runTimer()
+  }
+  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--
@@ -101,7 +144,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="flex flex-col items-center gap-4 text-center">
     <h2 class="text-2xl font-bold">
-      {{ t('register.modal.title') }}
+      {{ t('modals.id.confirmAccount.title') }}
     </h2>
 
     <a-icon-hand-with-phone-light class="size-32 dark:hidden" />
@@ -113,7 +156,7 @@ onBeforeUnmount(() => {
       </p>
 
       <div v-if="timer > 0" class="text-2xl font-bold">
-        {{ timer }} {{ t('register.modal.seconds') }}
+        {{ timer }} {{ t('modals.id.resetPasswordOtp.seconds') }}
       </div>
       <button
         v-else
@@ -124,24 +167,18 @@ onBeforeUnmount(() => {
       </button>
     </div>
 
-    <otp-input v-model="otp" v-model:error="showError" />
-
-    <div class="flex w-full gap-2">
-      <a-button
-        block
-        view="outline"
-        @click="onClose"
-      >
-        {{ t('actions.close') }}
-      </a-button>
-      <a-button
-        block
-        :loading="isLoading"
-        :disabled="otpFormatted.length < 6"
-        @click="onConfirm"
-      >
-        {{ t('actions.confirm') }}
-      </a-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,6 +1,11 @@
 <script setup lang="ts">
-const { confirmSuccessfulModal } = useIdModals()
 const { t } = useI18n()
+const { confirmSuccessfulModal } = useIdModals()
+
+function onClose() {
+  confirmSuccessfulModal.value = false
+  window.location.reload()
+}
 </script>
 
 <template>
@@ -14,7 +19,7 @@ const { t } = useI18n()
     <p class="text-sm">
       {{ t('modals.id.confirmSuccessful.content') }}
     </p>
-    <a-button view="outline" @click="confirmSuccessfulModal = false">
+    <a-button view="outline" @click="onClose">
       {{ t('actions.close') }}
     </a-button>
   </div>