adata-ui 2.1.0 → 2.1.2

package/components/modals/id/IdPasswordSuccessfulModal.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { passwordSuccessfulModal } = useIdModals()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t('modals.id.passwordSuccessful.title') }}
+    </h2>
+    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+      <a-ill-ok />
+    </span>
+    <p class="text-sm">
+      {{ t('modals.id.passwordSuccessful.content') }}
+    </p>
+    <a-button @click="passwordSuccessfulModal = false">
+      {{ t('actions.close') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdRecoveryModal.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+
+const { loginModal, recoveryModal, resetPasswordOtpModal, intermediateState } = useIdModals()
+const authApiURL = commonAuth.authApiURL
+const emailField = ref('')
+const loading = ref(false)
+const submitted = ref(false)
+
+const emailSchema = z.object({
+  emailField: z.string().nonempty(t('error.required')).email(t('error.email')),
+})
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = emailSchema.safeParse({ emailField: emailField.value })
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
+}
+
+async function onSubmit() {
+  try {
+    submitted.value = true
+    if (validation.value) return
+    loading.value = true
+
+    await $fetch(`${removeTrailingSlash(authApiURL)}/password/email-otp`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: emailField.value,
+      },
+    })
+    intermediateState.value.email = emailField.value
+
+    recoveryModal.value = false
+    resetPasswordOtpModal.value = true
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    onSubmit()
+  }
+}
+
+function onCancel() {
+  recoveryModal.value = false
+  loginModal.value = true
+}
+
+watch(recoveryModal, (value) => {
+  if (!value) {
+    emailField.value = ''
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <form
+    class="flex flex-col items-stretch gap-5 rounded-lg text-center"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('modals.id.recovery.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('modals.id.recovery.content') }}
+    </p>
+    <a-input-standard
+      v-model="emailField"
+      :label="t('modals.id.recovery.placeholder')"
+      :error="getError('emailField')"
+    />
+    <a-button :loading="loading">
+      {{ t('actions.recover') }}
+    </a-button>
+    <p class="text-center text-sm">
+      {{ t('reuse.or') }}
+    </p>
+    <a-button
+      type="button"
+      view="outline"
+      @click="onCancel"
+    >
+      {{ t('actions.cancel') }}
+    </a-button>
+  </form>
+</template>
+
+<style scoped></style>

package/components/modals/id/IdRegistrationModal.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import * as z from 'zod'
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+const { $toast } = useNuxtApp()
+const route = useRoute()
+
+const localePath = useLocalePath()
+const { t, locale } = useI18n()
+const { commonAuth }: any = useAppConfig()
+const { landing } = useUrls()
+const authApiURL = commonAuth.authApiURL
+const redirectUrl = useCookie('redirect_url')
+const { loginModal, registrationModal, confirmAccountOtpModal, intermediateState } = useIdModals()
+
+export interface RegistrationForm {
+  email: string
+  password: string
+  password_confirmation: string
+}
+
+const form = reactive<RegistrationForm>({
+  email: '',
+  password: '',
+  password_confirmation: '',
+})
+
+const agreement = ref(false)
+const loading = ref(false)
+
+const registerSchema = z.object({
+  email: z.string().nonempty(t('error.required')).email(t('error.email')),
+  password: z
+    .string()
+    .nonempty(t('error.required'))
+    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+  password_confirmation: z
+    .string()
+    .nonempty(t('error.required'))
+    .min(8, t('modals.id.register.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('modals.id.register.errors.low_security')),
+}).refine(
+  data => data.password === data.password_confirmation,
+  {
+    message: t('modals.id.register.errors.sameAs'),
+    path: ['password_confirmation'],
+  },
+)
+
+const submitted = ref(false)
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = registerSchema.safeParse(form)
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues?.find(issue => issue.path[0] === path)?.message
+}
+
+async function onSubmit() {
+  if (!agreement.value) return
+
+  submitted.value = true
+
+  if (validation.value) return
+
+  try {
+    loading.value = true
+    const { success, message } = await $fetch(`${removeTrailingSlash(authApiURL)}/v2/register`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: form,
+    })
+    if (success) {
+      intermediateState.value.email = form.email
+      intermediateState.value.password = form.password
+
+      registrationModal.value = false
+      confirmAccountOtpModal.value = true
+    }
+  }
+  catch (error) {
+    $toast.error(error.data.message.email || error.data.message.password[0])
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+if (route.query.url) {
+  redirectUrl.value = route.query.url as string
+}
+
+// onMounted(() => {
+//   v$.value.$touch();
+// });
+
+function getUrl() {
+  return navigateTo(locale.value !== 'ru'
+    ? landing + localePath('/') + PAGES.userAgreement
+    : landing + PAGES.userAgreement, {
+    external: true,
+    open: {
+      target: '_blank',
+    },
+  })
+}
+
+function handleEnter(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    onSubmit()
+  }
+}
+
+function onLogin() {
+  registrationModal.value = false
+  loginModal.value = true
+}
+
+watch(registrationModal, (value) => {
+  if (!value) {
+    form.email = ''
+    form.password = ''
+    form.password_confirmation = ''
+    agreement.value = false
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <form
+    class="flex flex-col items-stretch gap-5"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('modals.id.register.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('modals.id.register.subtitle') }}
+    </p>
+    <a-input-standard
+      v-model="form.email"
+      :label="t('modals.id.register.labels.email')"
+      :error="getError('email')"
+      type="email"
+    />
+
+    <a-input-password
+      v-model="form.password"
+      :label="t('modals.id.register.labels.password')"
+      :error="getError('password')"
+    />
+
+    <a-input-password
+      v-model="form.password_confirmation"
+      :label="t('modals.id.register.labels.password_confirmation')"
+      :error="getError('password_confirmation')"
+    />
+    <a-alert color="blue">
+      {{ t('modals.id.register.alert') }}
+      <template #icon>
+        <a-icon-info-circle />
+      </template>
+    </a-alert>
+    <a-checkbox
+      v-model="agreement"
+      side="right"
+      name="confirm-agreement"
+    >
+      <i18n-t keypath="modals.id.register.agreement.text">
+        <template #link>
+          <nuxt-link-locale
+            class="text-blue-700"
+            @click="getUrl"
+          >
+            {{ t('modals.id.register.agreement.link') }}
+          </nuxt-link-locale>
+        </template>
+      </i18n-t>
+    </a-checkbox>
+    <a-button
+      :disabled="!agreement"
+      :loading="loading"
+    >
+      {{ t('modals.id.register.continue') }}
+    </a-button>
+    <p class="text-center text-sm">
+      {{ t('modals.id.register.haveAcc') }}
+    </p>
+    <a-button
+      type="button"
+      view="outline"
+      @click="onLogin"
+    >
+      {{ t('modals.id.register.enter') }}
+    </a-button>
+  </form>
+</template>

package/components/modals/id/IdResetPasswordOtpModal.vue

@@ -0,0 +1,158 @@
+<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(60)
+
+function runTimer() {
+  timer.value = 60
+  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-2xl font-bold">
+      {{ t('modals.id.resetPasswordOtp.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 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>

package/components/modals/id/IdTwoFactorModal.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
+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
+      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
+    }
+    $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="heading-02 text-center">
+      {{ t('modals.id.twoFactor.title') }}
+    </p>
+    <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="body-400 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>

package/components/navigation/README.md

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