adata-ui 2.0.27 → 2.0.29

package/components/modals/id/IdTwoFactorModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import OtpInput from '#adata-ui/components/modals/id/otp-input.vue'
+import { useAuthStore } from '#adata-ui/stores/auth.store'
+
+const { $toast } = useNuxtApp()
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+
+const authStore = useAuthStore()
+const { intermediateState } = storeToRefs(authStore)
+
+const { twoFactorModal } = 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() {
+  isLoading.value = true
+  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,
+      '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(`${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('accessToken', {
+        maxAge: expire_in,
+        domain: `.${hostname[1]}.${hostname[0]}`,
+        path: '/',
+        secure: true,
+      }).value = access_token
+    }
+    $toast.success(t('login.successfully'))
+    twoFactorModal.value = false
+    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" />
+    <otp-input v-model="otp" v-model:error="showError" />
+    <p class="body-400 text-center">
+      {{ t('modals.id.twoFactor.code') }}
+    </p>
+    <div class="flex w-full gap-2">
+      <a-button
+        class="w-full"
+        view="outline"
+        @click="onClose"
+      >
+        {{ t('actions.close') }}
+      </a-button>
+      <a-button
+        :loading="isLoading"
+        :disabled="otpFormatted.length < 6"
+        class="w-full"
+        @click="onConfirm"
+      >
+        {{ t('actions.confirm') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/{two-factor → id}/otp-input.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+defineProps<{
+  attempts?: number
+}>()
+
 const length = 6 // Длина OTP
 const showError = defineModel('error')
 const otp = defineModel()
@@ -133,6 +137,10 @@ function moveFocus(index: number, to: string) {
     >
       {{ t('error.otp') }}
     </a-alert>
+
+    <p v-show="showError" class="mt-1 text-xs text-red-500 dark:text-red-400">
+      {{ t('modals.id.resetPasswordOtp.attempts', { n: attempts }) }}
+    </p>
   </div>
 </template>
 

package/components/navigation/footer/AFooter.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import AdataLogo from '#adata-ui/icons/adata-logo.vue'
+import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
 import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
 import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
 import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
 import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
 import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
-import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
-import FooterAccordion from './ui/footer-acccordion.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import AFooterAccordion from '#adata-ui/components/navigation/footer/ui/a-footer-accordion.vue'
 import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import { useFooterInfoLinks, useFooterNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { AIconExpandWindow, AIconLocation, AIconMail, AIconPhone } from '#components'
 
-const { myLayer }: any = useAppConfig()
-const { t, locale } = useI18n()
 const year = new Date().getFullYear()
+const { t, locale } = useI18n()
+const { myLayer } = useAppConfig()
+const mode = myLayer.mode
 
 const socialMedia = [
   {
@@ -48,35 +49,212 @@ const socialMedia = [
   }
 ]
 
-const info = useFooterInfoLinks()
+const mainLinks = computed(() => ({
+  services: {
+    title: t('footer.services'),
+    link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.allServices),
+    items: [
+      [
+        {
+          title: t('footer.counterparties.title'),
+          link: buildLocalizedUrl(locale.value, `https://pk.${mode}.kz`, ''),
+        },
+        {
+          title: t('footer.fines.title'),
+          link: buildLocalizedUrl(locale.value, `https://avto.${mode}.kz`, PAGES.fines.main),
+        },
+        {
+          title: t('footer.work.title'),
+          link: `https://work.${mode}.kz` + PAGES.work.vacancy,
+        },
+        {
+          title: t('footer.analytics.title'),
+          link: buildLocalizedUrl(locale.value, `https://analytics-new.${mode}.kz`, PAGES.analytics.main),
+        },
+        {
+          title: t('footer.tenders.title'),
+          link: `https://tender.${mode}.kz` + PAGES.tender.main,
+        }
+      ],
+      [
+        {
+          title: t('footer.compliance.title'),
+          link: `https://ac.${mode}.kz` + PAGES.compliance.l,
+          isNew: true
+        },
+        {
+          title: t('header.products.edo.label'),
+          link: `https://edo.${mode}.kz` + PAGES.edo.l,
+          isNew: true
+        },
+        {
+          title: t('footer.fea.title'),
+          link: buildLocalizedUrl(locale.value, `https://tnved.${mode}.kz`, PAGES.fea.main),
+          isNew: true
+        },
+      ]
+    ]
+  },
+  useful: {
+    title: t('footer.useful'),
+    link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.usefulMain),
+    items: [
+      [
+        {
+          title: t('footer.info.api'),
+          link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.apiDescription),
+        },
+        {
+          title: t('footer.info.userAgreement'),
+          link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.userAgreement),
+        },
+        {
+          title: t('footer.info.privacyPolicy'),
+          link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.privacy),
+        },
+        {
+          title: t('footer.info.vacancy'),
+          link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.vacancy),
+        },
+        {
+          title: t('footer.info.counterparty'),
+          link: buildLocalizedUrl(locale.value, `https://pk.${mode}.kz`, PAGES.pk.counterparty),
+        },
+      ]
+    ]
+  }
+}))
+
+const contactLinks = computed(() => ({
+  title: t('footer.contacts.title'),
+  link: buildLocalizedUrl(locale.value, `https://${mode}.kz`, PAGES.contacts),
+  items: [
+    {
+      title: t('footer.contacts.address'),
+      link: 'https://go.2gis.com/30j2f',
+      startIcon: AIconLocation,
+      endIcon: null,
+    },
+    {
+      title: '+7 (747) 120 34 67',
+      link: 'tel:+77471203467',
+      startIcon: AIconPhone,
+      endIcon: null,
+    },
+    {
+      title: 'info@adata.kz',
+      link: 'mailto:info@adata.kz',
+      startIcon: AIconMail,
+      endIcon: null,
+    },
+    {
+      title: t('footer.contacts.goToChat'),
+      link: 'https://api.whatsapp.com/send?phone=77712289041',
+      startIcon: null,
+      endIcon: AIconExpandWindow,
+      class: 'font-bold',
+    },
+  ],
+}))
 
-const links = useFooterNavigationLinks()
 </script>
 
 <template>
-  <div
+  <footer
     id="footer"
-    class="bg-deepblue-900 dark:bg-gray-900 lg:pt-10"
+    class="bg-deepblue-900 dark:bg-gray-900 py-4 lg:py-5 rounded-t-3xl"
   >
-    <div class="a-container mobile-padding py-5 text-white">
-      <adata-logo
-        filled
-        :font-controlled="false"
-        class="mb-8 h-[26px] w-[92px] lg:hidden"
-      />
-      <div class="grid gap-5 lg:grid-cols-5 lg:gap-10 xl:grid-cols-6">
-        <div
-          v-for="(link, key) in links"
-          :key="key"
-        >
-          <footer-accordion
-            :content="link.items"
-            :label="t(link.title)"
-            :link="link.link.replace(/\/$/, '')"
+    <div class="a-container mobile-padding py-5 text-white flex flex-col lg:flex-row justify-between gap-8">
+      <div class="flex flex-col gap-8 justify-between">
+        <div class="flex flex-col gap-4">
+          <adata-logo
+            filled
+            :font-controlled="false"
+            class="shrink-0"
           />
+
+          <p class="text-sm">
+            {{ t('footer.subtitle') }}
+          </p>
+
+          <div class="hidden lg:flex gap-8">
+            <nuxt-link
+              v-for="(social, idx) in socialMedia"
+              :key="idx"
+              target="_blank"
+              :to="social.link"
+              :aria-label="social.name"
+            >
+              <span class="visually-hidden"> {{ social.name }}</span>
+              <component
+                :is="social.icon"
+                filled
+                :font-controlled="false"
+                class="social-icon size-7"
+              />
+            </nuxt-link>
+          </div>
         </div>
+
+        <p class="hidden lg:block text-[10px]">
+          {{ year }} © {{ t('footer.LLP') }} "Alldata"
+        </p>
       </div>
-      <div class="flex grow justify-end gap-8 py-5">
+
+      <div class="flex gap-6 lg:gap-[75px] flex-col lg:flex-row">
+        <div class="flex gap-[18px] lg:gap-[75px] flex-col lg:flex-row">
+          <div
+            v-for="(item, idx) in mainLinks"
+            :key="idx"
+          >
+            <a-footer-accordion
+              :label="item.title"
+              :link="item?.link?.replace(/\/$/, '')"
+              :content="item.items"
+            />
+          </div>
+        </div>
+        <!--noindex-->
+        <div class="flex flex-col gap-2 items-start" data-nosnippet>
+          <nuxt-link
+            class="text-sm font-semibold pb-3 pr-4 border-b-[0.5px] border-white cursor-pointer"
+            :to="contactLinks.link?.replace(/\/$/, '')"
+          >
+            {{ contactLinks.title }}
+          </nuxt-link>
+
+          <div class="flex flex-col gap-3 lg:gap-2">
+            <div
+              v-for="(link, idx) in contactLinks.items"
+              :key="idx"
+              class="flex gap-2 items-center"
+            >
+              <nuxt-link
+                class="text-xs font-medium flex gap-2 items-center cursor-pointer"
+                :class="link.class"
+                :to="link.link?.replace(/\/$/, '')"
+              >
+                <component
+                  :is="link.startIcon"
+                  v-if="link.startIcon"
+                  class="size-4 shrink-0"
+                />
+
+                <p>{{ link.title }}</p>
+
+                <component
+                  :is="link.endIcon"
+                  v-if="link.endIcon"
+                  class="size-4 shrink-0"
+                />
+              </nuxt-link>
+            </div>
+          </div>
+        </div>
+        <!--/noindex-->
+      </div>
+
+      <div class="lg:hidden flex gap-8 flex-wrap">
         <nuxt-link
           v-for="(social, idx) in socialMedia"
           :key="idx"
@@ -88,39 +266,14 @@ const links = useFooterNavigationLinks()
             :is="social.icon"
             filled
             :font-controlled="false"
-            class="social-icon h-[28px] w-[28px]"
+            class="social-icon size-7"
           />
         </nuxt-link>
       </div>
+
+      <p class="lg:hidden text-[10px]">
+        {{ year }} © {{ t('footer.LLP') }} "Alldata"
+      </p>
     </div>
-    <div class="relative">
-      <div class="a-container mobile-padding py-5">
-        <div
-          class="flex flex-col gap-10 text-xs text-white before:absolute before:left-0 before:top-0 before:h-[0.5px] before:w-full before:bg-white lg:flex-row lg:items-center lg:gap-5"
-        >
-          <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
-            <nuxt-link-locale
-              v-for="(item, idx) in info"
-              :key="idx"
-              target="_blank"
-              class="text-[10px]"
-              :to="item.link"
-            >
-              {{ t(item.title) }}
-            </nuxt-link-locale>
-          </div>
-          <div class="flex justify-center lg:grow lg:items-center lg:justify-end lg:gap-4">
-            <div class="flex flex-col gap-1">
-              <span>{{ year }} © {{ t('footer.LLP') }} "Alldata"</span>
-            </div>
-            <adata-logo
-              filled
-              :font-controlled="false"
-              class="hidden h-[26px] w-[92px] lg:block"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  </footer>
 </template>

package/components/navigation/footer/ui/{new-footer-accordion.vue → a-footer-accordion.vue}

@@ -16,8 +16,6 @@ const props = defineProps<Props>()
 
 const isDesktop = useMediaQuery('(max-width: 1024px)')
 
-const { t } = useI18n()
-
 const open = ref(false)
 function toFinalValues(el: HTMLDivElement) {
   el.style.height = el.scrollHeight + 'px'
@@ -46,7 +44,7 @@ const filterCheck = computed(() => {
         :class="{ 'cursor-pointer': link }"
         :to="link?.replace(/\/$/, '')"
       >
-        {{ t(label) }}
+        {{ label }}
       </nuxt-link>
 
       <div class="transition-all lg:hidden cursor-pointer">
@@ -85,7 +83,7 @@ const filterCheck = computed(() => {
               class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
               :to="link.link?.replace(/\/$/, '')"
             >
-              {{ t(link.title) }}
+              {{ link.title }}
             </nuxt-link>
 
             <div

package/components/navigation/header/AlmatyContacts.vue

@@ -11,7 +11,7 @@
           class="flex flex-col gap-2 "
         >
           <div class="heading-04">
-            {{ t(item.title) }}
+            {{ item.title }}
           </div>
           <a
             class="flex items-center gap-1 text-deepblue-900 dark:text-white"
@@ -22,7 +22,7 @@
               class="shrink-0"
             />
             <div class=" body-400">
-              {{ t(item.subtitle) }}
+              {{ item.subtitle }}
             </div>
           </a>
         </div>
@@ -61,7 +61,7 @@
                 target="_blank"
               >
                 <div class="body-400 line-clamp-1 text-blue-600">
-                  {{ t(link.subtitle) }}
+                  {{ link.subtitle }}
                 </div>
                 <component
                   :is="link.icon"
@@ -105,33 +105,33 @@ import {useContacts} from "#adata-ui/composables/projectState";
 
 const {t} = useI18n()
 const contacts = ref(useContacts())
-const AlmatyItems = [
+const AlmatyItems = computed(() => ([
   {
-    title: 'header.contacts.almaty.adress.title',
-    subtitle: 'header.contacts.almaty.adress.subtitle',
+    title: t('header.contacts.almaty.adress.title'),
+    subtitle: t('header.contacts.almaty.adress.subtitle'),
     icon: Location,
     to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
   },
   {
-    title: 'header.contacts.almaty.email.title',
+    title: t('header.contacts.almaty.email.title'),
     subtitle: 'info@adata.kz',
     icon: Mail,
     to: 'mailto:info@adata.kz'
   },
   {
-    title: 'header.contacts.almaty.schedule.title',
-    subtitle: 'header.contacts.almaty.schedule.subtitle',
+    title: t('header.contacts.almaty.schedule.title'),
+    subtitle: t('header.contacts.almaty.schedule.subtitle'),
     icon: Clock,
   },
-]
+]))
 
-const technicalSupport = [
+const technicalSupport = computed(() => ([
   {
-    subtitle: 'header.contacts.almaty.support.linkTitle',
+    subtitle: t('header.contacts.almaty.support.linkTitle'),
     icon: ExpandWindow,
     to: "https://api.whatsapp.com/send/?phone=77712289041"
   }
-]
+]))
 
 const newContacts = computed(()=> contacts.value.map(item => ({
   subtitle: item.contact,

package/components/navigation/header/AstanaContacts.vue

@@ -8,7 +8,7 @@
       <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
         <div v-for="(item, index) in AstanaItems" class="flex flex-col gap-2 " :class="{'col-span-2':index===0 }">
           <div class="heading-04">
-            {{ t(item.title) }}
+            {{ item.title }}
           </div>
           <a
             class="flex items-center gap-1 text-deepblue-900 dark:text-white"
@@ -17,7 +17,7 @@
           >
             <component :is="item.icon"/>
             <div class=" body-400">
-              {{ t(item.subtitle) }}
+              {{ item.subtitle }}
             </div>
           </a>
         </div>
@@ -35,31 +35,31 @@ import Clock from "#adata-ui/icons/clock.vue";
 import Whatsapp from "#adata-ui/icons/whatsapp.vue";
 
 const {t} = useI18n()
-const AstanaItems = [
+const AstanaItems = computed(() => ([
   {
-    title: 'header.contacts.astana.adress.title',
-    subtitle: 'header.contacts.astana.adress.subtitle',
+    title: t('header.contacts.astana.adress.title'),
+    subtitle: t('header.contacts.astana.adress.subtitle'),
     icon: Location,
     to: 'https://yandex.kz/maps/ru/org/adata_consulting/214484722242/?ll=71.429573%2C51.131319&z=20.56'
   },
   {
-    title: 'header.contacts.astana.email.title',
+    title: t('header.contacts.astana.email.title'),
     subtitle: 'info@adata-c.kz',
     icon: Mail,
     to: 'mailto:info@adata-c.kz'
   },
   {
-    title: 'header.contacts.astana.schedule.title',
-    subtitle: 'header.contacts.astana.schedule.subtitle',
+    title: t('header.contacts.astana.schedule.title'),
+    subtitle: t('header.contacts.astana.schedule.subtitle'),
     icon: Clock,
   },
   {
-    title: 'header.contacts.astana.sellDep.title',
+    title: t('header.contacts.astana.sellDep.title'),
     subtitle: '+7 700 744 00 10',
     icon: Whatsapp,
     to: "https://api.whatsapp.com/send/?phone=77007440010"
   },
-]
+]))
 </script>
 
 <style scoped>