adata-ui 2.0.22 → 2.0.24

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/curve-block/ACurveBlock.vue

@@ -13,12 +13,11 @@ const props = defineProps<{
   <component
     :is="to ? NuxtLinkLocale : 'button'"
     :to="to"
-    class="curve-block relative w-fit cursor-pointer"
+    class="curve-block relative w-full cursor-pointer"
     active-class="active-item"
   >
     <svg
-      width="306"
-      height="182"
+      class="w-full"
       viewBox="-1 -1 308 184"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -79,9 +78,7 @@ const props = defineProps<{
     </div>
 
     <svg
-      class="absolute bottom-0 right-0"
-      width="48"
-      height="48"
+      class="absolute bottom-0 right-0 size-12 2xl:size-14"
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
     >

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/elements/select/ASelect.vue

@@ -6,6 +6,8 @@ import { onClickOutside, useToggle } from '@vueuse/core'
 import { isEqual } from 'lodash-es'
 import type { Ref } from 'vue'
 
+import { useFloating, offset, flip, shift, size as floatingSize, autoUpdate } from '@floating-ui/vue'
+
 type Props = {
   label: string
   required?: boolean
@@ -61,6 +63,32 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<Emits>()
 
+
+
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const { x, y, strategy, update } = useFloating(reference, floating, {
+  placement: 'bottom-start',
+  strategy: 'absolute',
+  middleware: [
+    offset(6),
+    flip({ fallbackPlacements: ['top-start'] }),
+    shift({ padding: 8 }),
+    floatingSize({
+      apply({ availableHeight, elements, rects }) {
+        const el = elements.floating as HTMLElement
+        el.style.width = `${rects.reference.width}px`
+        el.style.maxHeight = `${Math.max(140, Math.min(availableHeight, 320))}px`
+        el.style.overflowY = 'auto'
+      },
+    }),
+  ],
+})
+
+let cleanup: (() => void) | null = null
+
+
+
 const modelValue = defineModel<T | T[] | null | any>({ required: true })
 const search = defineModel<T | null | any>('search')
 const isOpen = defineModel<T | null | any>('open', {
@@ -235,10 +263,21 @@ onUpdated(() => (countedVisibleItems.value = countOfVisibleItems.value))
 defineExpose({
   onClear
 })
+watch(() => isOpen.value, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  } else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+
+onUnmounted(() => cleanup?.())
 </script>
 <template>
   <div ref="wrapper" class="relative w-full rounded-md text-sm">
     <button
+      ref="reference"
       :class="[
         clearable ? 'pr-16' : 'pr-9',
         {
@@ -262,7 +301,7 @@ defineExpose({
       </span>
       <component :is="startIcon" v-if="startIcon" />
 
-      <span :class="{ 'py-1': size === 'md' }" class="w-full text-start">
+      <span :class="{ 'py-1': size === 'md' }" class=" w-full text-start">
         <span v-if="valueToShow">
           <span v-if="!multiple" class="line-clamp-1 text-deepblue-900 dark:text-gray-200">
             <slot name="single-selected" :value="valueToShow">{{ valueToShow[keyToShow] }}</slot>
@@ -310,10 +349,16 @@ defineExpose({
       </span>
     </button>
     <transition>
-      <div
-        v-if="isOpen"
-        class="absolute z-20 mt-1 w-full rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
-      >
+        <div
+          v-if="isOpen"
+          ref="floating"
+          class="z-[10000] rounded-md bg-white shadow-[0_1px_8px_0_rgba(139,146,156,0.3)] dark:bg-gray-900"
+          :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        }"
+        >
         <slot :options="options" name="options">
           <ul class="select m-2 max-h-[250px] overflow-y-auto overflow-x-hidden">
             <li v-if="searchFromOut" class="p-1">

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>