adata-ui 2.0.20 → 2.0.21

package/assets/styles/index.scss

@@ -73,6 +73,9 @@ input::-webkit-inner-spin-button {
   margin:0 !important;
   align-items: stretch !important;
 }
+.Toastify__toast-container {
+  z-index: 10002 !important;
+}
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;

package/components/forms/login/ALogin.vue

@@ -4,10 +4,10 @@ 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'
 
-const appConfig = useAppConfig()
-const authApiURL = appConfig.commonAuth.authApiURL
-const landingUrl = appConfig.myLayer.landingUrl
+const { myLayer, commonAuth } = useAppConfig()
+const authApiURL = commonAuth.authApiURL
 const [isResendModal, toggleResendModal] = useToggle()
 const isConfirmationEmailModal = ref(false)
 const isTwoFactorOpen = ref(false)
@@ -27,10 +27,9 @@ export interface ILoginForm {
   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')),
+  password: z.string().nonempty(t('errors.required'))
 })
 
 const validation = computed(() => {
@@ -40,13 +39,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
@@ -59,7 +58,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)
 
@@ -68,40 +67,37 @@ async function submit() {
   if (!validation.value) {
     loading.value = true
     const login = await fetch(`${authApiURL}/login`, {
-      method: "POST",
+      method: 'POST',
       credentials: 'include',
       headers: {
-        "Content-Type": "application/json",
-        lang: locale.value,
+        '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(() => ({}));
+    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) {
-        const response = await fetch(`${authApiURL}/access/cookie`,{
-          method: "GET",
+      } 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) {
@@ -112,8 +108,7 @@ async function submit() {
         $toast.success(t('login.successfully'))
         loginModal.value = false
         window.location.reload()
-      }
-      else {
+      } else {
         isConfirmationEmailModal.value = true
       }
     }
@@ -122,7 +117,9 @@ async function submit() {
 }
 
 function authWithSocial(social: string) {
-  const mode = (useNuxtApp().$config.public.authApiURL as string).includes('adata') ? 'adata' : 'adtdev'
+  const mode = (useNuxtApp().$config.public.authApiURL as string).includes('adata')
+    ? 'adata'
+    : 'adtdev'
   document.location.replace(`https://auth.${mode}.kz/api/login/social?source=${social}`)
 }
 
@@ -139,7 +136,12 @@ function onRegister() {
 }
 
 function toTariffs() {
-  return navigateToLocalizedPage({ locale, projectUrl: appConfig.myLayer.landingUrl, path: '/tariffs', target: '_self' })
+  return navigateToLocalizedPage({
+    locale,
+    projectUrl: myLayer.landingUrl,
+    path: '/tariffs',
+    target: '_self'
+  })
 }
 
 onMounted(() => {
@@ -153,35 +155,33 @@ function confirmationEmailResend() {
 async function handleConfirmOtp(otpCode: string) {
   isLoadingOtp.value = true
   const login = await fetch(`${authApiURL}/login`, {
-    method: "POST",
+    method: 'POST',
     credentials: 'include',
     headers: {
-      "Content-Type": "application/json",
-      lang: locale.value,
+      'Content-Type': 'application/json',
+      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(() => ({}));
+  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(`${authApiURL}/access/cookie`,{
-      method: "GET",
+  } else {
+    const response = await fetch(`${authApiURL}/access/cookie`, {
+      method: 'GET',
       credentials: 'include',
       headers: {
-        'Authorization': `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value
+      }
     })
     const { data: cookiesData } = await response.json()
     if (cookiesData?.access_token) {
@@ -198,11 +198,33 @@ async function handleConfirmOtp(otpCode: string) {
 }
 
 function handleEnter(e: KeyboardEvent) {
-  if (e.key === 'Enter' && !isTwoFactorOpen.value && !isConfirmationEmailModal.value && !isResendModal.value) {
+  if (
+    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',
+  })
+}
+
+watch(loginModal, (value) => {
+  if (!value) {
+    form.username = ''
+    form.password = ''
+    rememberMe.value = false
+  }
+})
+
 onMounted(() => {
   document.addEventListener('keyup', handleEnter)
 })
@@ -213,9 +235,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal
-    v-model="loginModal"
-  >
+  <a-modal v-model="loginModal">
     <div class="flex flex-col gap-5 rounded-lg bg-white dark:bg-gray-900">
       <h1 class="heading-02 text-center">
         {{ $t('login.form.title') }}
@@ -236,7 +256,7 @@ onBeforeUnmount(() => {
           :error="getError('password')"
         />
         <div class="flex items-center justify-between">
-          <div class="body-400 flex gap-2 ">
+          <div class="body-400 flex gap-2">
             <a-checkbox
               v-model="rememberMe"
               name="remember_me"
@@ -244,18 +264,20 @@ onBeforeUnmount(() => {
             <label
               for="remember_me"
               class="cursor-pointer"
-            >{{ $t('login.form.remember_me') }}</label>
+            >{{
+              $t('login.form.remember_me')
+            }}</label>
           </div>
-          <nuxt-link-locale
+          <button
             class="link-s-400"
-            to="/password-recovery"
+            @click="onForgotPassword"
           >
             {{ $t('login.form.forget_password') }}
-          </nuxt-link-locale>
+          </button>
         </div>
       </div>
       <div class="flex items-center gap-4">
-        <div class="bg-deepblue-500/30 h-px w-full" />
+        <div class="h-px w-full bg-deepblue-500/30" />
         <div class="flex shrink-0 gap-4">
           <span
             class="cursor-pointer"
@@ -276,7 +298,7 @@ onBeforeUnmount(() => {
             <a-icon-mailru />
           </span>
         </div>
-        <div class="bg-deepblue-500/30 h-px w-full" />
+        <div class="h-px w-full bg-deepblue-500/30" />
       </div>
       <a-button
         :loading="loading"
@@ -341,6 +363,4 @@ onBeforeUnmount(() => {
   />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/forms/registration/ARegistration.vue

@@ -75,28 +75,25 @@ async function onSubmit() {
 
   try {
     loading.value = true
-    const register = await fetch(`${authApiURL}/register`, {
+    const { data, message } = await $fetch(`${authApiURL}/register`, {
       method: "POST",
       credentials: "include",
       headers: {
-        "Content-Type": "application/json",
         lang: locale.value,
       },
-      body: JSON.stringify(form)
+      body: form
     })
-    const { data, message, error } = await register.json().catch(() => ({}));
     if (data) {
       registrationModal.value = false
       toggleAcceptModal()
       $toast.success(message)
     }
-    else if (error) {
-      $toast.error(error.data.message.email || error.data.message.password)
-    }
-    loading.value = false
   }
-  catch (e) {
-    console.error(e)
+  catch (error) {
+    $toast.error(error.data.message.email || error.data.message.password[0])
+  }
+  finally {
+    loading.value = false
   }
 }
 
@@ -151,6 +148,16 @@ function onLogin() {
    loginModal.value = true
 }
 
+watch(registrationModal, (value) => {
+  if (!value) {
+    form.email = ''
+    form.password = ''
+    form.password_confirmation = ''
+    agreement.value = false
+  }
+})
+
+
 onMounted(() => {
   document.addEventListener('keyup', handleEnter)
 })

package/components/modals/Accept.vue

@@ -39,7 +39,7 @@ onMounted(() => runTimer())
       {{ $t('register.modal.resend') }}
     </button>
     <a-button @click="$emit('back')">
-      {{ $t('register.modal.back') }}
+      {{ $t('actions.back') }}
     </a-button>
   </section>
 </template>

package/lang/en.ts

@@ -460,9 +460,10 @@ const EnLocale: RuLocale = {
     showMore: 'Show more',
     close: 'Close',
     send: 'Send',
-    login: 'Кіру',
-    register: 'Тіркелу',
-    toTariffs: 'Тарифтерге өту'
+    login: 'Login',
+    register: 'Register',
+    toTariffs: 'Go to tariffs',
+    back: 'Back'
   },
   modals: {
     auth: {

package/lang/kk.ts

@@ -461,9 +461,10 @@ const KkLocale: RuLocale = {
     showMore: 'Көбірек көрсету',
     close: 'Жабу',
     send: 'Жіберу',
-    login: 'Login',
-    register: 'Register',
-    toTariffs: 'Go to tariffs'
+    login: 'Кіру',
+    register: 'Тіркелу',
+    toTariffs: 'Тарифтерге өту',
+    back: 'Артқа',
   },
   modals: {
     auth: {

package/lang/ru.ts

@@ -465,7 +465,8 @@ const RuLocale = {
     send: 'Отправить',
     login: 'Войти',
     register: 'Зарегистрироваться',
-    toTariffs: 'Перейти в тарифы'
+    toTariffs: 'Перейти в тарифы',
+    back: 'Назад'
   },
   modals: {
     auth: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",