adata-ui 2.0.15 → 2.0.16

package/components/forms/login/ALogin.vue

@@ -6,6 +6,7 @@ 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 authApiURL = appConfig.commonAuth.authApiURL
 const landingUrl = appConfig.myLayer.landingUrl
 const [isResendModal, toggleResendModal] = useToggle()
 const isConfirmationEmailModal = ref(false)
@@ -18,6 +19,8 @@ const { t, locale } = useI18n()
 const route = useRoute()
 const submitted = ref(false)
 const accessToken = ref(null)
+const loginModal = useLoginModal()
+const registrationModal = useRegistrationModal()
 
 export interface ILoginForm {
   username: string
@@ -64,8 +67,9 @@ async function submit() {
   submitted.value = true
   if (!validation.value) {
     loading.value = true
-    const login = await fetch(`https://auth.adtdev.kz/api/login`, {
+    const login = await fetch(`${authApiURL}/login`, {
       method: "POST",
+      credentials: 'include',
       headers: {
         "Content-Type": "application/json",
         lang: locale.value,
@@ -91,7 +95,7 @@ async function submit() {
         isTwoFactorOpen.value = true
       }
       else if (data.email_is_verified) {
-        const response = await fetch('https://auth.adtdev.kz/api/access/cookie',{
+        const response = await fetch(`${authApiURL}/access/cookie`,{
           method: "GET",
           credentials: 'include',
           headers: {
@@ -106,16 +110,8 @@ async function submit() {
           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,
-          })
-        }
+        loginModal.value = false
+        window.location.reload()
       }
       else {
         isConfirmationEmailModal.value = true
@@ -138,12 +134,8 @@ async function onResend() {
 }
 
 function onRegister() {
-  if (Object.keys(route.query).length) {
-    navigateTo(localePath({ path: `/register`, query: route.query }))
-  }
-  else {
-    navigateTo(localePath(`/register`))
-  }
+  loginModal.value = false
+  registrationModal.value = true
 }
 
 function toTariffs() {
@@ -160,8 +152,9 @@ function confirmationEmailResend() {
 }
 async function handleConfirmOtp(otpCode: string) {
   isLoadingOtp.value = true
-  const login = await fetch(`https://auth.adtdev.kz/api/login`, {
+  const login = await fetch(`${authApiURL}/login`, {
     method: "POST",
+    credentials: 'include',
     headers: {
       "Content-Type": "application/json",
       lang: locale.value,
@@ -182,7 +175,7 @@ async function handleConfirmOtp(otpCode: string) {
   }
   else {
 
-    const response = await fetch('https://auth.adtdev.kz/api/access/cookie',{
+    const response = await fetch(`${authApiURL}/access/cookie`,{
       method: "GET",
       credentials: 'include',
       headers: {
@@ -197,16 +190,7 @@ async function handleConfirmOtp(otpCode: string) {
       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,
-      })
-    }
+    loginModal.value = false
 
     isTwoFactorOpen.value = false
   }
@@ -229,126 +213,132 @@ onBeforeUnmount(() => {
 </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>
+  <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') }}
+      </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>
-        <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 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>
-      <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
+        :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="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-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-alert
+        class="max-w-screen-sm !text-[10px]"
+        size="xs"
+      >
+        {{ $t('info.userAgreement') }}
+      </a-alert>
+    </div>
+  </a-modal>
 
-    <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"
+  <a-modal v-model="isResendModal">
+    <resend
+      v-if="isResendModal"
+      @close="isResendModal = false"
+      @resend="onResend"
     />
-  </div>
+  </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"
+  />
 </template>
 
 <style scoped>

package/components/forms/registration/ARegistration.vue

@@ -12,8 +12,11 @@ const route = useRoute()
 
 const localePath = useLocalePath()
 const { t, locale} = useI18n()
-const { myLayer }: any = useAppConfig()
+const { myLayer, commonAuth }: any = useAppConfig()
+const authApiURL = commonAuth.authApiURL
 const redirectUrl = useCookie('redirect_url')
+const registrationModal = useRegistrationModal()
+const loginModal = useLoginModal()
 
 export interface RegistrationForm {
   email: string
@@ -72,8 +75,9 @@ async function onSubmit() {
 
   try {
     loading.value = true
-    const register = await fetch(`https://auth.adtdev.kz/api/register`, {
+    const register = await fetch(`${authApiURL}/register`, {
       method: "POST",
+      credentials: "include",
       headers: {
         "Content-Type": "application/json",
         lang: locale.value,
@@ -82,13 +86,13 @@ async function onSubmit() {
     })
     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)
     }
-    console.error(error.data)
     loading.value = false
   }
   catch (e) {
@@ -101,8 +105,7 @@ if (route.query.url) {
 }
 
 function goBack() {
-  const url = new URL(redirectUrl.value)
-  window.location.href = `${url.protocol}//${url.hostname}`
+  isAcceptModal.value = false
 }
 
 // onMounted(() => {
@@ -111,7 +114,7 @@ function goBack() {
 
 async function onResend() {
 
-  const emailResend = await fetch('https://auth.adtdev.kz/api/email/resend',{
+  const emailResend = await fetch(`${authApiURL}/email/resend`,{
     method: "GET",
     credentials: 'include',
     headers: {
@@ -143,6 +146,11 @@ function handleEnter(event: KeyboardEvent) {
   }
 }
 
+function onLogin() {
+   registrationModal.value = false
+   loginModal.value = true
+}
+
 onMounted(() => {
   document.addEventListener('keyup', handleEnter)
 })
@@ -153,73 +161,75 @@ onBeforeUnmount(() => {
 </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"
+  <a-modal v-model="registrationModal">
+    <form
+      class="flex flex-col items-stretch gap-5 rounded-lg bg-white dark:bg-gray-900"
+      novalidate
+      @submit.prevent="onSubmit"
     >
-      <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>
+      <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>
-      </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-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"
+        @click="onLogin"
+      >
+        {{ t('register.form.enter') }}
+      </a-button>
+    </form>
+  </a-modal>
   <a-modal v-model="isAcceptModal">
     <accept
       v-if="isAcceptModal"

package/components/navigation/header/AHeader.vue

@@ -28,6 +28,7 @@ interface Props {
   mobileHeaderType?: 'search' | 'default'
   module?: ProjectKeys
   oldVersion?: string
+  authMode?: 'local' | 'separate'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,7 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
   rate: 'Базовый',
   showLogIn: true,
   mobileHeaderType: 'default',
-  module: 'pk'
+  module: 'pk',
+  authMode: 'separate',
 })
 
 const emit = defineEmits(['logout', 'search', 'login'])
@@ -51,20 +53,27 @@ const { myLayer }: any = useAppConfig()
 
 const langIsOn = appConfig.myLayer.langIsOn
 const contacts = ref(useContacts())
+const loginModal = useLoginModal()
+
 const goAuth = () => {
-  if (window) {
-    emit('login')
-    let fullPath = encodeURIComponent(window.location.toString())
-    if (fullPath.includes('basic-info')) {
-      fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
-    }
+  if (props.authMode === 'separate') {
+    if (window) {
+      emit('login')
+      let fullPath = encodeURIComponent(window.location.toString())
+      if (fullPath.includes('basic-info')) {
+        fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
+      }
 
-    navigateToLocalizedPage({
-      locale,
-      projectUrl: myLayer.loginUrl.slice(0, -1),
-      path: `/?url=${fullPath}`,
-      target: '_self'
-    })
+      navigateToLocalizedPage({
+        locale,
+        projectUrl: myLayer.loginUrl.slice(0, -1),
+        path: `/?url=${fullPath}`,
+        target: '_self'
+      })
+    }
+  }
+  else {
+    loginModal.value = true
   }
 }
 
@@ -203,6 +212,9 @@ onBeforeMount(() => {
       </div>
     </header>
   </div>
+
+  <a-login />
+  <a-registration />
 </template>
 
 <style scoped></style>

package/composables/modalsState.ts

@@ -6,3 +6,6 @@ export const usePaymentMethodModal = () => useState<boolean>('payment-method-mod
 export const useReplenishModal = () => useState<boolean>('replenish-modal', () => false)
 export const useLowBalanceModal = () => useState<boolean>('low-balance-modal', () => false)
 export const useNoAccessModal = () => useState<boolean>('no-access-modal', () => false)
+
+export const useLoginModal = () => useState<boolean>('login-modal', () => false)
+export const useRegistrationModal = () => useState<boolean>('registration-modal', () => false)

package/package.json

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