adata-ui 2.0.22 → 2.0.23

package/.editorconfig

@@ -1,12 +1,12 @@
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   myLayer: {
-    name: 'Adata UI v2'
-  }
+    name: 'Adata UI v2',
+  },
 })
 
 declare module '@nuxt/schema' {
@@ -22,6 +22,7 @@ declare module '@nuxt/schema' {
       complianceUrl?: string
       counterParty?: string
       langIsOn?: boolean
+      authMode?: 'local' | 'separate'
     }
   }
 }

package/components/elements/feature-description/AFeatureDescription.vue

@@ -72,7 +72,7 @@ onUnmounted(() => clearTimer())
         />
       </div>
       <p
-        class="font-semibold text-xl transition-colors duration-300 ease-in-out"
+        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
         :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-gray-200'"
       >
         {{ item.title }}
@@ -88,7 +88,7 @@ onUnmounted(() => clearTimer())
       <div
         v-if="selected === idx"
       >
-        <p class="text-sm pt-3">
+        <p class="text-xs lg:text-sm pt-3">
           {{ item.description }}
         </p>
       </div>

package/components/modals/SubmitApplicationModal.vue

@@ -64,11 +64,13 @@ defineExpose({
           v-model="form.name"
           :label="t('modals.submit_application_modal.labels.name')"
           :error="getError('name')"
+          required
         />
         <a-input-standard
           v-model="form.email"
           :label="t('modals.submit_application_modal.labels.email')"
           :error="getError('email')"
+          required
         />
         <a-input-standard
           v-model="form.phone"
@@ -83,6 +85,7 @@ defineExpose({
           v-model="form.comment"
           :label="t('modals.submit_application_modal.labels.comment')"
           :error="getError('comment')"
+          required
         />
       </div>
     </div>

package/components/modals/id/AuthModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+const { t } = useI18n()
+const isOpen = useAuthModal()
+const { myLayer } = useAppConfig()
+const loginUrl = myLayer.loginUrl
+
+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 = `${loginUrl}?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 = `${loginUrl}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/IdEmailModal.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { emailModal } = useIdModals()
+const { t } = useI18n()
+</script>
+
+<template>
+  <a-modal v-model="emailModal">
+    <div class="flex flex-col items-stretch gap-5 rounded-lg text-center">
+      <h2 class="text-center text-2xl font-bold">
+        {{ t('modals.id.email.title') }}
+      </h2>
+      <div class="flex justify-center">
+        <span class="flex size-[100px] items-center justify-center rounded-full bg-[#BDC7CE26]">
+          <a-ill-info />
+        </span>
+      </div>
+      <p class="text-center text-sm">
+        {{ t('modals.id.email.content') }}
+      </p>
+      <a-button @click="emailModal = false">
+        {{ t('actions.close') }}
+      </a-button>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/{forms/login/ALogin.vue → modals/id/IdLoginModal.vue}

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useToggle } from '@vueuse/shared'
-import * as z from 'zod'
 import AConfirmationEmail from '#adata-ui/components/modals/AConfirmationEmail.vue'
 import Resend from '#adata-ui/components/modals/Resend.vue'
 import TwoFactor from '#adata-ui/components/modals/two-factor/two-factor.vue'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { useToggle } from '@vueuse/shared'
+import * as z from 'zod'
 
 const { myLayer, commonAuth } = useAppConfig()
 const authApiURL = commonAuth.authApiURL
@@ -19,8 +19,7 @@ const { t, locale } = useI18n()
 const route = useRoute()
 const submitted = ref(false)
 const accessToken = ref(null)
-const loginModal = useLoginModal()
-const registrationModal = useRegistrationModal()
+const { loginModal, registrationModal, recoveryModal } = useIdModals()
 
 export interface ILoginForm {
   username: string
@@ -29,7 +28,7 @@ export interface ILoginForm {
 
 const loginSchema = z.object({
   username: z.string().nonempty(t('register.form.errors.required')).email(t('register.form.errors.email')),
-  password: z.string().nonempty(t('register.form.errors.required'))
+  password: z.string().nonempty(t('register.form.errors.required')),
 })
 
 const validation = computed(() => {
@@ -39,13 +38,13 @@ const validation = computed(() => {
 })
 
 function getError(path: string) {
-  return validation.value?.issues.find((issue) => issue.path[0] === path)?.message
+  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
 }
 
-function savePassAndLogin(form: { username: string; password: string }) {
+function savePassAndLogin(form: { username: string, password: string }) {
   const { username, password } = form
   const cookieOptions = {
-    expires: rememberMe.value ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1000) : undefined // Срок действия 14 дней
+    expires: rememberMe.value ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1000) : undefined, // Срок действия 14 дней
   }
   useCookie('username', cookieOptions).value = username
   useCookie('password', cookieOptions).value = password
@@ -58,7 +57,7 @@ function clearAuthCookie() {
 const loading = ref(false)
 const form: ILoginForm = reactive({
   username: useCookie('username').value || '',
-  password: useCookie('password').value || ''
+  password: useCookie('password').value || '',
 })
 const rememberMe = ref(false)
 
@@ -71,33 +70,36 @@ async function submit() {
       credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
-        lang: locale.value
+        'lang': locale.value,
       },
       body: JSON.stringify({
         username: form.username.trim().toLowerCase(),
-        password: form.password.toString()
-      })
+        password: form.password.toString(),
+      }),
     })
     const { data, message } = await login.json().catch(() => ({}))
     if (data) accessToken.value = data?.access_token
     if (login.status > 202) {
       if (login.status === 422) {
         $toast.error(t('error.validation'))
-      } else {
+      }
+      else {
         $toast.error(message)
       }
-    } else {
+    }
+    else {
       rememberMe.value ? savePassAndLogin(form) : clearAuthCookie()
       if (data.is_2fa_enabled) {
         isTwoFactorOpen.value = true
-      } else if (data.email_is_verified) {
+      }
+      else if (data.email_is_verified) {
         const response = await fetch(`${authApiURL}/access/cookie`, {
           method: 'GET',
           credentials: 'include',
           headers: {
             Authorization: `Bearer ${accessToken.value}`,
-            lang: locale.value
-          }
+            lang: locale.value,
+          },
         })
         const { data: cookiesData } = await response.json()
         if (cookiesData) {
@@ -108,7 +110,8 @@ async function submit() {
         $toast.success(t('login.successfully'))
         loginModal.value = false
         window.location.reload()
-      } else {
+      }
+      else {
         isConfirmationEmailModal.value = true
       }
     }
@@ -140,7 +143,7 @@ function toTariffs() {
     locale,
     projectUrl: myLayer.landingUrl,
     path: '/tariffs',
-    target: '_self'
+    target: '_self',
   })
 }
 
@@ -159,13 +162,13 @@ async function handleConfirmOtp(otpCode: string) {
     credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
-      lang: locale.value
+      'lang': locale.value,
     },
     body: JSON.stringify({
-      username: form.username.trim(),
-      password: form.password.toString(),
-      '2fa_code': otpCode
-    })
+      'username': form.username.trim(),
+      'password': form.password.toString(),
+      '2fa_code': otpCode,
+    }),
   })
   const { data, message } = await login.json().catch(() => ({}))
 
@@ -174,14 +177,15 @@ async function handleConfirmOtp(otpCode: string) {
       showOtpError.value = true
       isLoadingOtp.value = false
     }
-  } else {
+  }
+  else {
     const response = await fetch(`${authApiURL}/access/cookie`, {
       method: 'GET',
       credentials: 'include',
       headers: {
         Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value
-      }
+        lang: locale.value,
+      },
     })
     const { data: cookiesData } = await response.json()
     if (cookiesData?.access_token) {
@@ -199,22 +203,18 @@ async function handleConfirmOtp(otpCode: string) {
 
 function handleEnter(e: KeyboardEvent) {
   if (
-    e.key === 'Enter' &&
-    !isTwoFactorOpen.value &&
-    !isConfirmationEmailModal.value &&
-    !isResendModal.value
+    e.key === 'Enter'
+    && !isTwoFactorOpen.value
+    && !isConfirmationEmailModal.value
+    && !isResendModal.value
   ) {
     submit()
   }
 }
 
 function onForgotPassword() {
-  return navigateToLocalizedPage({
-    locale,
-    projectUrl: myLayer.loginUrl.slice(0, -1),
-    path: `/password-recovery`,
-    target: '_self',
-  })
+  loginModal.value = false
+  recoveryModal.value = true
 }
 
 watch(loginModal, (value) => {
@@ -236,7 +236,7 @@ onBeforeUnmount(() => {
 
 <template>
   <a-modal v-model="loginModal">
-    <div class="flex flex-col gap-5 rounded-lg bg-white dark:bg-gray-900">
+    <div class="flex flex-col gap-5">
       <h1 class="heading-02 text-center">
         {{ $t('login.form.title') }}
       </h1>

package/components/modals/id/IdModals.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import IdEmailModal from '#adata-ui/components/modals/id/IdEmailModal.vue'
+import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'
+import IdNewPasswordModal from '#adata-ui/components/modals/id/IdNewPasswordModal.vue'
+import IdPasswordSuccessfulModal from '#adata-ui/components/modals/id/IdPasswordSuccessfulModal.vue'
+import IdRecoveryModal from '#adata-ui/components/modals/id/IdRecoveryModal.vue'
+import IdRegistrationModal from '#adata-ui/components/modals/id/IdRegistrationModal.vue'
+</script>
+
+<template>
+  <id-login-modal />
+  <id-registration-modal />
+  <id-recovery-modal />
+  <id-email-modal />
+  <id-new-password-modal />
+  <id-password-successful-modal />
+</template>
+
+<style scoped></style>

package/components/modals/id/IdNewPasswordModal.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const route = useRoute()
+const { t, locale } = useI18n()
+
+const { email, token } = route.query
+const authApiURL = commonAuth.authApiURL
+const { loginModal, newPasswordModal, passwordSuccessfulModal } = useIdModals()
+
+const form = reactive({
+  password: '',
+  password_confirmation: '',
+})
+const loading = ref(false)
+
+const resetSchema = z.object({
+  password: z
+    .string()
+    .min(8, t('register.form.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+  password_confirmation: z
+    .string()
+    .min(8, t('register.form.errors.low_security', { length: 8 }))
+    .regex(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/, t('register.form.errors.low_security')),
+}).refine(
+  data => data.password === data.password_confirmation,
+  {
+    message: t('register.form.errors.sameAs'),
+    path: ['password_confirmation'],
+  },
+)
+
+const submitted = ref(false)
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = resetSchema.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() {
+  try {
+    submitted.value = true
+    if (validation.value) return
+    loading.value = true
+
+    const { data } = await $fetch(`${authApiURL}/password/reset`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        token,
+        email,
+        ...form,
+      },
+    })
+    if (data?.success) {
+      newPasswordModal.value = false
+      passwordSuccessfulModal.value = true
+      $toast.success(data.message)
+    }
+  }
+  catch (error) {
+    $toast.error(error?.data.message.password as string)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// onMounted(() => {
+//   if (!email || !token) {
+//     newPasswordModal.value = false
+//     loginModal.value = true
+//   }
+// })
+</script>
+
+<template>
+  <a-modal v-model="newPasswordModal">
+    <form
+      class="flex flex-col items-stretch gap-5"
+      novalidate
+      @submit.prevent="onSubmit"
+    >
+      <h2 class="text-center text-2xl font-bold">
+        {{ t('resetPassword.title') }}
+      </h2>
+      <p class="text-center text-sm">
+        {{ t('resetPassword.subtitle') }}
+      </p>
+
+      <a-input-password
+        v-model="form.password"
+        :label="t('register.form.labels.password')"
+        :error="getError('password')"
+      />
+
+      <a-alert color="blue">
+        {{ t('register.form.alert') }}
+      </a-alert>
+
+      <a-input-password
+        v-model="form.password_confirmation"
+        :label="t('register.form.labels.password_confirmation')"
+        :error="getError('password_confirmation')"
+      />
+
+      <a-button
+        :loading="loading"
+      >
+        {{ t('passwordRecovery.form.recover') }}
+      </a-button>
+
+      <p class="text-center text-sm">
+        {{ t('passwordRecovery.form.or') }}
+      </p>
+
+      <a-button
+        type="button"
+        view="outline"
+        @click="newPasswordModal = false"
+      >
+        {{ t('actions.cancel') }}
+      </a-button>
+    </form>
+  </a-modal>
+</template>

package/components/modals/id/IdPasswordSuccessfulModal.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const { passwordSuccessfulModal } = useIdModals()
+</script>
+
+<template>
+  <a-modal v-model="passwordSuccessfulModal">
+    <section class="flex flex-col items-stretch gap-4 text-center">
+      <h2 class="text-2xl font-bold">
+        {{ $t('resetPassword.successModal.title') }}
+      </h2>
+      <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+        <a-ill-ok />
+      </span>
+      <p class="text-sm">
+        {{ $t('resetPassword.successModal.subtitle') }}
+      </p>
+      <a-button @click="passwordSuccessfulModal = false">
+        {{ $t('resetPassword.successModal.goToAuthorization') }}
+      </a-button>
+    </section>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdRecoveryModal.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+
+const { recoveryModal, emailModal } = 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(`${authApiURL}/password/email`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        lang: locale.value,
+      },
+      body: {
+        email: emailField.value,
+      },
+    })
+    recoveryModal.value = false
+    emailModal.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
+}
+
+watch(recoveryModal, (value) => {
+  if (!value) {
+    emailField.value = ''
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <a-modal v-model="recoveryModal">
+    <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>
+  </a-modal>
+</template>
+
+<style scoped></style>