adata-ui 2.0.12 → 2.0.14

package/components/elements/select/ASelect.vue

@@ -77,9 +77,14 @@ const disabledStyles =
   'disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500'
 
 const componentOptions = computed(() =>
-  props.options.filter((item: T) =>
-    item[props.searchKey as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
-  )
+  props.options.filter((item: T) => {
+    if (Array.isArray(props.searchKey) && props.searchKey.length === 2) {
+      return item[props.searchKey[0] as keyof T].toLowerCase().includes(searchValue.value.toLowerCase()) ||
+        item[props.searchKey[1] as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
+    } else {
+      return item[props.searchKey as keyof T].toLowerCase().includes(searchValue.value.toLowerCase())
+    }
+  })
 )
 
 onClickOutside(wrapper, () => {

package/components/forms/login/ALogin.vue

@@ -0,0 +1,356 @@
+<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'
+
+const appConfig = useAppConfig()
+const landingUrl = appConfig.myLayer.landingUrl
+const [isResendModal, toggleResendModal] = useToggle()
+const isConfirmationEmailModal = ref(false)
+const isTwoFactorOpen = ref(false)
+const isLoadingOtp = ref(false)
+const { $api, $toast } = useNuxtApp()
+const localePath = useLocalePath()
+const showOtpError = ref(false)
+const { t, locale } = useI18n()
+const route = useRoute()
+const submitted = ref(false)
+const accessToken = ref(null)
+
+export interface ILoginForm {
+  username: string
+  password: string
+}
+
+
+const loginSchema = z.object({
+  username: z.string().nonempty(t('errors.required')).email(t('register.form.errors.email')),
+  password: z.string().nonempty(t('errors.required')),
+})
+
+const validation = computed(() => {
+  if (!submitted.value) return null
+  const result = loginSchema.safeParse(form)
+  return result.success ? null : result.error
+})
+
+function getError(path: string) {
+  return validation.value?.issues.find(issue => issue.path[0] === path)?.message
+}
+
+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 дней
+  }
+  useCookie('username', cookieOptions).value = username
+  useCookie('password', cookieOptions).value = password
+}
+function clearAuthCookie() {
+  useCookie('username').value = null
+  useCookie('password').value = null
+}
+
+const loading = ref(false)
+const form: ILoginForm = reactive({
+  username: useCookie('username').value || '',
+  password: useCookie('password').value || '',
+})
+const rememberMe = ref(false)
+
+async function submit() {
+  submitted.value = true
+  if (!validation.value) {
+    loading.value = true
+    const login = await fetch(`https://auth.adtdev.kz/api/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        lang: locale.value,
+      },
+      body: JSON.stringify({
+        username: form.username.trim().toLowerCase(),
+        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 {
+        $toast.error(message)
+      }
+    }
+    else {
+      rememberMe.value ? savePassAndLogin(form) : clearAuthCookie()
+      if (data.is_2fa_enabled) {
+        isTwoFactorOpen.value = true
+      }
+      else if (data.email_is_verified) {
+        const response = await fetch('https://auth.adtdev.kz/api/access/cookie',{
+          method: "GET",
+          credentials: 'include',
+          headers: {
+            Authorization: `Bearer ${accessToken.value}`,
+            lang: locale.value,
+          },
+        })
+        const { data: cookiesData } = await response.json()
+        if (cookiesData) {
+          const { access_token, expire_in } = cookiesData
+          const hostname = location.hostname.split('.').reverse()
+          document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
+        }
+        $toast.success(t('login.successfully'))
+        if (route.query.url) {
+          await navigateTo(route.query.url as string, {
+            external: true,
+          })
+        }
+        else {
+          await navigateTo(landingUrl, {
+            external: true,
+          })
+        }
+      }
+      else {
+        isConfirmationEmailModal.value = true
+      }
+    }
+    loading.value = false
+  }
+}
+
+function authWithSocial(social: string) {
+  const mode = (useNuxtApp().$config.public.authApiURL as string).includes('adata') ? 'adata' : 'adtdev'
+  document.location.replace(`https://auth.${mode}.kz/api/login/social?source=${social}`)
+}
+
+async function onResend() {
+  const { data, success, message } = await $api.auth.emailResend()
+  if (success) {
+    $toast.success(message)
+  }
+}
+
+function onRegister() {
+  if (Object.keys(route.query).length) {
+    navigateTo(localePath({ path: `/register`, query: route.query }))
+  }
+  else {
+    navigateTo(localePath(`/register`))
+  }
+}
+
+function toTariffs() {
+  return navigateToLocalizedPage({ locale, projectUrl: appConfig.myLayer.landingUrl, path: '/tariffs', target: '_self' })
+}
+
+onMounted(() => {
+  rememberMe.value = !!useCookie('username').value && !!useCookie('password').value
+})
+
+function confirmationEmailResend() {
+  isConfirmationEmailModal.value = false
+  toggleResendModal()
+}
+async function handleConfirmOtp(otpCode: string) {
+  isLoadingOtp.value = true
+  const login = await fetch(`https://auth.adtdev.kz/api/login`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      lang: locale.value,
+    },
+    body: JSON.stringify({
+      'username': form.username.trim(),
+      'password': form.password.toString(),
+      '2fa_code': otpCode,
+    })
+  })
+  const { data, message } = await login.json().catch(() => ({}));
+
+  if (login.status > 202) {
+    if (login.status === 403) {
+      showOtpError.value = true
+      isLoadingOtp.value = false
+    }
+  }
+  else {
+
+    const response = await fetch('https://auth.adtdev.kz/api/access/cookie',{
+      method: "GET",
+      credentials: 'include',
+      headers: {
+        'Authorization': `Bearer ${accessToken.value}`,
+        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()
+      document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
+    }
+    $toast.success(t('login.successfully'))
+    if (route.query.url) {
+      await navigateTo(route.query.url as string, {
+        external: true,
+      })
+    }
+    else {
+      await navigateTo(landingUrl, {
+        external: true,
+      })
+    }
+
+    isTwoFactorOpen.value = false
+  }
+  isLoadingOtp.value = false
+}
+
+function handleEnter(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !isTwoFactorOpen.value && !isConfirmationEmailModal.value && !isResendModal.value) {
+    submit()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-5 rounded-lg bg-white px-7 py-8 dark:bg-gray-900">
+    <h1 class="heading-02 text-center">
+      {{ $t('login.form.title') }}
+    </h1>
+    <p class="body-400 text-center">
+      {{ $t('login.form.subtitle') }}
+    </p>
+    <div class="flex flex-col gap-4">
+      <a-input-standard
+        v-model="form.username"
+        type="email"
+        :label="$t('login.form.labels.email')"
+        :error="getError('username')"
+      />
+      <a-input-password
+        v-model="form.password"
+        :label="$t('login.form.labels.password')"
+        :error="getError('password')"
+      />
+      <div class="flex items-center justify-between">
+        <div class="body-400 flex gap-2 ">
+          <a-checkbox
+            v-model="rememberMe"
+            name="remember_me"
+          />
+          <label
+            for="remember_me"
+            class="cursor-pointer"
+          >{{ $t('login.form.remember_me') }}</label>
+        </div>
+        <nuxt-link-locale
+          class="link-s-400"
+          to="/password-recovery"
+        >
+          {{ $t('login.form.forget_password') }}
+        </nuxt-link-locale>
+      </div>
+    </div>
+    <div class="flex items-center gap-4">
+      <div class="bg-deepblue-500/30 h-px w-full" />
+      <div class="flex shrink-0 gap-4">
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('google')"
+        >
+          <a-icon-google />
+        </span>
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('yandex')"
+        >
+          <a-icon-yandex />
+        </span>
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('mailru')"
+        >
+          <a-icon-mailru />
+        </span>
+      </div>
+      <div class="bg-deepblue-500/30 h-px w-full" />
+    </div>
+    <a-button
+      :loading="loading"
+      type="submit"
+      @click="submit"
+    >
+      {{ $t('actions.login') }}
+    </a-button>
+    <p class="body-400 text-center">
+      {{ $t('login.form.first_time') }}
+    </p>
+
+    <a-button
+      type="button"
+      view="outline"
+      class="w-full"
+      @click="onRegister"
+    >
+      {{ $t('actions.register') }}
+    </a-button>
+
+    <a-button
+      type="button"
+      view="transparent"
+      class="w-full"
+      @click="toTariffs"
+    >
+      {{ $t('actions.toTariffs') }}
+    </a-button>
+
+    <a-alert
+      class="max-w-screen-sm !text-[10px]"
+      size="xs"
+    >
+      {{ $t('info.userAgreement') }}
+    </a-alert>
+
+    <a-modal v-model="isResendModal">
+      <resend
+        v-if="isResendModal"
+        @close="isResendModal = false"
+        @resend="onResend"
+      />
+    </a-modal>
+    <a-modal v-model="isConfirmationEmailModal">
+      <a-confirmation-email
+        v-if="isConfirmationEmailModal"
+        @close="isConfirmationEmailModal = false"
+        @resend="confirmationEmailResend"
+      />
+    </a-modal>
+    <two-factor
+      v-model="isTwoFactorOpen"
+      v-model:error="showOtpError"
+      :loading="isLoadingOtp"
+      @confirm="handleConfirmOtp"
+      @close="isTwoFactorOpen = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/forms/registration/ARegistration.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useToggle } from '@vueuse/shared'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+import Accept from '#adata-ui/components/modals/Accept.vue'
+
+import * as z from 'zod'
+
+const { $toast } = useNuxtApp()
+const route = useRoute()
+
+const localePath = useLocalePath()
+const { t, locale} = useI18n()
+const { myLayer }: any = useAppConfig()
+const redirectUrl = useCookie('redirect_url')
+
+export interface RegistrationForm {
+  email: string
+  password: string
+  password_confirmation: string
+}
+
+const form = reactive<RegistrationForm>({
+  email: '',
+  password: '',
+  password_confirmation: '',
+})
+
+const [isAcceptModal, toggleAcceptModal] = useToggle()
+const agreement = ref(false)
+const loading = ref(false)
+
+const registerSchema = z.object({
+  email: z.string().nonempty(t('register.form.errors.required')).email(t('register.form.errors.email')),
+  password: z
+    .string()
+    .nonempty(t('register.form.errors.required'))
+    .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()
+    .nonempty(t('register.form.errors.required'))
+    .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 = 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 register = await fetch(`https://auth.adtdev.kz/api/register`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        lang: locale.value,
+      },
+      body: JSON.stringify(form)
+    })
+    const { data, message, error } = await register.json().catch(() => ({}));
+    if (data) {
+      toggleAcceptModal()
+      $toast.success(message)
+    }
+    else if (error) {
+      $toast.error(error.data.message.email || error.data.message.password)
+    }
+    console.error(error.data)
+    loading.value = false
+  }
+  catch (e) {
+    console.error(e)
+  }
+}
+
+if (route.query.url) {
+  redirectUrl.value = route.query.url as string
+}
+
+function goBack() {
+  const url = new URL(redirectUrl.value)
+  window.location.href = `${url.protocol}//${url.hostname}`
+}
+
+// onMounted(() => {
+//   v$.value.$touch();
+// });
+
+async function onResend() {
+
+  const emailResend = await fetch('https://auth.adtdev.kz/api/email/resend',{
+    method: "GET",
+    credentials: 'include',
+    headers: {
+      lang: locale.value,
+    },
+  })
+  const { data, success, message } = await emailResend.json()
+  if (success) {
+    toggleAcceptModal()
+    loading.value = false
+    $toast.success(message)
+  }
+}
+
+function getUrl() {
+  return navigateTo(locale.value !== 'ru'
+    ? myLayer.landingUrl + localePath('/') + PAGES.userAgreement
+    : myLayer.landingUrl + PAGES.userAgreement, {
+    external: true,
+    open: {
+      target: "_blank",
+    },
+  })
+}
+
+function handleEnter(event: KeyboardEvent) {
+  if (event.key === 'Enter' && !isAcceptModal.value) {
+    onSubmit()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keyup', handleEnter)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleEnter)
+})
+</script>
+
+<template>
+  <form
+    class="flex flex-col items-stretch gap-5 rounded-lg bg-white px-4 py-8 md:px-7 dark:bg-gray-900"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <h2 class="text-center text-2xl font-bold">
+      {{ t('register.form.title') }}
+    </h2>
+    <p class="text-center text-sm">
+      {{ t('register.form.subtitle') }}
+    </p>
+    <a-input-standard
+      v-model="form.email"
+      :label="t('register.form.labels.email')"
+      :error="getError('email')"
+      type="email"
+    />
+
+    <a-input-password
+      v-model="form.password"
+      :label="t('register.form.labels.password')"
+      :error="getError('password')"
+    />
+
+    <a-input-password
+      v-model="form.password_confirmation"
+      :label="t('register.form.labels.password_confirmation')"
+      :error="getError('password_confirmation')"
+    />
+    <a-alert color="blue">
+      {{ t('register.form.alert') }}
+      <template #icon>
+        <a-icon-info-circle />
+      </template>
+    </a-alert>
+    <a-checkbox
+      v-model="agreement"
+      side="right"
+    >
+      <i18n-t keypath="register.form.agreement.text">
+        <template #link>
+          <nuxt-link-locale
+            class="text-blue-700"
+            @click="getUrl"
+          >
+            {{ t('register.form.agreement.link') }}
+          </nuxt-link-locale>
+        </template>
+      </i18n-t>
+    </a-checkbox>
+    <a-button
+      :disabled="!agreement"
+      :loading="loading"
+    >
+      {{ t('register.form.continue') }}
+    </a-button>
+    <p class="text-center text-sm">
+      {{ t('register.form.haveAcc') }}
+    </p>
+    <a-button
+      type="button"
+      view="outline"
+      :to="localePath('/')"
+    >
+      {{ t('register.form.enter') }}
+    </a-button>
+  </form>
+  <a-modal v-model="isAcceptModal">
+    <accept
+      v-if="isAcceptModal"
+      @back="goBack"
+      @repeated="onResend"
+    />
+  </a-modal>
+</template>

package/components/modals/AConfirmationEmail.vue

@@ -0,0 +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>

package/components/modals/Accept.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+
+defineEmits<{ (e: 'back'): void, (e: 'repeated'): void }>()
+
+const timer = ref(60)
+
+function runTimer() {
+  const intervalId = setInterval(() => {
+    if (!timer.value) clearInterval(intervalId)
+    return timer.value--
+  }, 1000)
+}
+
+onMounted(() => runTimer())
+</script>
+
+<template>
+  <section class="flex flex-col items-stretch gap-4 py-4 py-8 text-center md:px-8">
+    <h2 class="text-2xl font-bold">
+      {{ $t('register.modal.title') }}
+    </h2>
+    <span class="mx-auto">
+      <a-ill-mail/>
+    </span>
+    <p class="text-sm">
+      {{ $t('register.modal.subtitle1') }}
+    </p>
+    <p class="text-sm">
+      {{ $t('register.modal.subtitle2') }}
+    </p>
+    <div v-if="timer > 0" class="text-2xl font-bold">
+      {{ timer }} {{ $t('register.modal.seconds') }}
+    </div>
+    <button
+      v-else
+      class="text-sm text-blue-500"
+      @click="$emit('repeated')"
+    >
+      {{ $t('register.modal.resend') }}
+    </button>
+    <a-button @click="$emit('back')">
+      {{ $t('register.modal.back') }}
+    </a-button>
+  </section>
+</template>