adata-ui 3.1.36 → 3.1.38

package/dist/runtime/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -0,0 +1,169 @@
+<script setup>
+import IdOtpInput from "./IdOtpInput.vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { useCookie, useNuxtApp, useAppConfig, useI18n } from "#imports";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+const { $toast } = useNuxtApp();
+const { t, locale } = useI18n();
+const { commonAuth } = useAppConfig();
+const { confirmAccountOtpModal, confirmSuccessfulModal, intermediateState } = 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 loginUser() {
+  const login = await fetch(`${removeTrailingSlash(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
+    })
+  });
+  await login.json().catch(() => ({}));
+  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      lang: locale.value
+    }
+  });
+  const { data: cookiesData } = await response.json();
+  if (cookiesData) {
+    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;
+  }
+}
+async function onConfirm() {
+  try {
+    isLoading.value = true;
+    await $fetch(`${removeTrailingSlash(authApiURL)}/email/verify-otp`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        lang: locale.value
+      },
+      params: {
+        email: intermediateState.value.email,
+        otp_code: otpFormatted.value
+      }
+    });
+    await loginUser();
+    confirmAccountOtpModal.value = false;
+    confirmSuccessfulModal.value = true;
+  } catch (error) {
+    showError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+function resetOtp() {
+  otp.value = ["", "", "", "", "", ""];
+  showError.value = false;
+}
+function onClose() {
+  resetOtp();
+  confirmAccountOtpModal.value = false;
+}
+const isResendLoading = ref(false);
+async function onResend() {
+  try {
+    isResendLoading.value = true;
+    await $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        lang: locale.value
+      },
+      params: {
+        email: intermediateState.value.email
+      }
+    });
+    resetOtp();
+    runTimer();
+    isResendLoading.value = false;
+  } catch (error) {
+    $toast.error(error.data);
+  }
+}
+const timer = ref(60);
+function runTimer() {
+  timer.value = 60;
+  const intervalId = setInterval(() => {
+    if (!timer.value) clearInterval(intervalId);
+    return timer.value--;
+  }, 1e3);
+}
+function handleEnter(e) {
+  if (e.key === "Enter") {
+    onConfirm();
+  }
+}
+onMounted(() => {
+  runTimer();
+  document.addEventListener("keyup", handleEnter);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("keyup", handleEnter);
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t("modals.id.confirmAccount.title") }}
+    </h2>
+
+    <i-hand-with-phone-light class="size-32 dark:hidden" />
+    <i-hand-with-phone-dark class="hidden size-32 dark:block" />
+
+    <div class="text-sm">
+      <p class="mb-1">
+        {{ t("modals.id.resetPasswordOtp.content") }}
+      </p>
+
+      <div
+        v-if="timer > 0"
+        class="text-2xl font-bold"
+      >
+        {{ timer }} {{ t("modals.id.resetPasswordOtp.seconds") }}
+      </div>
+      <button
+        v-else
+        class="text-blue-700 dark:text-blue-500"
+        :disabled="isResendLoading"
+        @click="onResend"
+      >
+        {{ t("actions.resend") }}
+      </button>
+    </div>
+
+    <id-otp-input
+      v-model="otp"
+      v-model:error="showError"
+      @on-completed="onConfirm"
+    />
+
+    <adt-button
+      block
+      view="outline"
+      @click="onClose"
+    >
+      {{ t("actions.close") }}
+    </adt-button>
+  </div>
+</template>

package/dist/runtime/components/modals/id/IdConfirmAccountOtpModal.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/modals/id/IdConfirmSuccessfulModal.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useI18n, navigateTo } from "#imports";
+import { useUrls } from "#adata-ui/utils/useUrls";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+const { t } = useI18n();
+const { confirmSuccessfulModal } = useIdModals();
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
+const { pk } = useUrls();
+function onClose() {
+  confirmSuccessfulModal.value = false;
+  const path = window.location.pathname;
+  if (regex.test(path)) {
+    navigateTo(`${pk}/${path.split("/")[4]}`, { external: true });
+  } else {
+    window.location.reload();
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 text-center">
+    <h2 class="text-2xl font-bold">
+      {{ t("modals.id.confirmSuccessful.title") }}
+    </h2>
+    <span class="mx-auto size-[100px] rounded-full bg-[#BDC7CE26]">
+      <ill-ok />
+    </span>
+    <p class="text-sm">
+      {{ t("modals.id.confirmSuccessful.content") }}
+    </p>
+    <adt-button
+      view="outline"
+      @click="onClose"
+    >
+      {{ t("actions.close") }}
+    </adt-button>
+  </div>
+</template>

package/dist/runtime/components/modals/id/IdConfirmSuccessfulModal.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/modals/id/IdLoginModal.vue

@@ -0,0 +1,277 @@
+<script setup>
+import { navigateToLocalizedPage } from "#adata-ui/utils/localizedNavigation";
+import * as z from "zod";
+import { ref, computed, reactive, onMounted, onBeforeUnmount } from "vue";
+import { useCookie, useNuxtApp, useAppConfig, useI18n, navigateTo } from "#imports";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+import { useUrls } from "#adata-ui/utils/useUrls";
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+const { $toast } = useNuxtApp();
+const { commonAuth } = useAppConfig();
+const { t, locale } = useI18n();
+const { pk, landing } = useUrls();
+const regex = /^\/counterparty\/main\/company\/\d+\/basic-info$/;
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal, intermediateState } = useIdModals();
+const authApiURL = commonAuth.authApiURL;
+const submitted = ref(false);
+const accessToken = ref(null);
+const loginSchema = z.object({
+  username: z.string().nonempty(t("error.required")).email(t("error.email")),
+  password: z.string().nonempty(t("error.required"))
+});
+const validation = computed(() => {
+  if (!submitted.value) return null;
+  const result = loginSchema.safeParse(form);
+  return result.success ? null : result.error;
+});
+function getError(path) {
+  return validation.value?.issues.find((issue) => issue.path[0] === path)?.message;
+}
+function savePassAndLogin(form2) {
+  const { username, password } = form2;
+  const cookieOptions = {
+    expires: rememberMe.value ? new Date(Date.now() + 14 * 24 * 60 * 60 * 1e3) : void 0
+    // Срок действия 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 = 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(`${removeTrailingSlash(authApiURL)}/login`, {
+      method: "POST",
+      credentials: "include",
+      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(() => ({}));
+    intermediateState.value.email = form.username;
+    intermediateState.value.password = form.password;
+    if (data) accessToken.value = data?.access_token;
+    if (login.status > 202) {
+      if (login.status === 422) {
+        $toast.error(t("error.validation"));
+      }
+      if (login.status === 206) {
+        confirmAccountOtpModal.value = true;
+        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+          method: "GET",
+          credentials: "include",
+          headers: {
+            lang: locale.value
+          },
+          params: {
+            email: intermediateState.value.email
+          }
+        }).catch(() => {
+        });
+      } else {
+        $toast.error(message);
+      }
+    } else {
+      rememberMe.value ? savePassAndLogin(form) : clearAuthCookie();
+      if (data.is_2fa_enabled) {
+        loginModal.value = false;
+        twoFactorModal.value = true;
+      } else if (data.email_is_verified) {
+        const response = await fetch(`${removeTrailingSlash(authApiURL)}/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();
+          useCookie("accessToken", {
+            maxAge: expire_in,
+            domain: `.${hostname[1]}.${hostname[0]}`,
+            path: "/",
+            secure: true
+          }).value = access_token;
+        }
+        $toast.success(t("reuse.successfully"));
+        loginModal.value = false;
+        const path = window.location.pathname;
+        if (regex.test(path)) {
+          navigateTo(`${pk}/company/${path.split("/")[4]}`, { external: true });
+        } else {
+          window.location.reload();
+        }
+      } else {
+        confirmAccountOtpModal.value = true;
+        $fetch(`${removeTrailingSlash(authApiURL)}/email/resend-otp`, {
+          method: "GET",
+          credentials: "include",
+          headers: {
+            lang: locale.value
+          },
+          params: {
+            email: intermediateState.value.email
+          }
+        }).catch(() => {
+        });
+      }
+    }
+    loading.value = false;
+  }
+}
+function authWithSocial(social) {
+  const mode = useNuxtApp().$config.public.authApiURL.includes("adata") ? "adata" : "adtdev";
+  document.location.replace(`https://auth.${mode}.kz/api/login/social?source=${social}`);
+}
+function onRegister() {
+  loginModal.value = false;
+  registrationModal.value = true;
+}
+function toTariffs() {
+  return navigateToLocalizedPage({
+    locale,
+    projectUrl: landing,
+    path: "/tariffs",
+    target: "_self"
+  });
+}
+onMounted(() => {
+  rememberMe.value = !!useCookie("username").value && !!useCookie("password").value;
+});
+function handleEnter(e) {
+  if (e.key === "Enter") {
+    submit();
+  }
+}
+function onForgotPassword() {
+  loginModal.value = false;
+  recoveryModal.value = true;
+}
+onMounted(() => {
+  document.addEventListener("keyup", handleEnter);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("keyup", handleEnter);
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <h1 class="heading-02 text-center">
+      {{ t("modals.id.login.title") }}
+    </h1>
+    <p class="body-400 text-center">
+      {{ t("modals.id.login.subtitle") }}
+    </p>
+    <div class="flex flex-col gap-4">
+      <adt-forms-input-standard
+        v-model="form.username"
+        type="email"
+        :label="t('modals.id.login.labels.email')"
+        :error="getError('username')"
+      />
+      <adt-forms-input-standard
+        v-model="form.password"
+        :label="t('modals.id.login.labels.password')"
+        :error="getError('password')"
+      />
+      <div class="flex items-center justify-between">
+        <div class="body-400 flex gap-2">
+          <adt-checkbox
+            v-model="rememberMe"
+            name="remember_me"
+          />
+          <label
+            for="remember_me"
+            class="cursor-pointer"
+          >{{
+            t("modals.id.login.remember_me")
+          }}</label>
+        </div>
+        <button
+          class="link-s-400"
+          @click="onForgotPassword"
+        >
+          {{ t("modals.id.login.forget_password") }}
+        </button>
+      </div>
+    </div>
+    <div class="flex items-center gap-4">
+      <div class="h-px w-full bg-deepblue-500/30" />
+      <div class="flex shrink-0 gap-4">
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('google')"
+        >
+          <i-socials-google />
+        </span>
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('yandex')"
+        >
+          <i-socials-yandex />
+        </span>
+        <span
+          class="cursor-pointer"
+          @click="authWithSocial('mailru')"
+        >
+          <i-socials-mailru />
+        </span>
+      </div>
+      <div class="h-px w-full bg-deepblue-500/30" />
+    </div>
+    <adt-button
+      :loading="loading"
+      type="submit"
+      @click="submit"
+    >
+      {{ t("actions.login") }}
+    </adt-button>
+    <p class="body-400 text-center">
+      {{ t("modals.id.login.first_time") }}
+    </p>
+
+    <adt-button
+      type="button"
+      view="outline"
+      class="w-full"
+      @click="onRegister"
+    >
+      {{ t("actions.register") }}
+    </adt-button>
+
+    <adt-button
+      type="button"
+      view="transparent"
+      class="w-full"
+      @click="toTariffs"
+    >
+      {{ t("actions.toTariffs") }}
+    </adt-button>
+
+    <adt-alert
+      class="max-w-screen-sm !text-[10px]"
+      size="xs"
+    >
+      {{ t("info.userAgreement") }}
+    </adt-alert>
+  </div>
+</template>

package/dist/runtime/components/modals/id/IdLoginModal.vue.d.ts

@@ -0,0 +1,6 @@
+export interface ILoginForm {
+    username: string;
+    password: string;
+}
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/modals/id/IdModals.vue

@@ -0,0 +1,98 @@
+<script setup>
+import IdConfirmAccountOtpModal from "./IdConfirmAccountOtpModal.vue";
+import IdConfirmSuccessfulModal from "./IdConfirmSuccessfulModal.vue";
+import IdLoginModal from "./IdLoginModal.vue";
+import IdNewPasswordModal from "./IdNewPasswordModal.vue";
+import IdPasswordSuccessfulModal from "./IdPasswordSuccessfulModal.vue";
+import IdRecoveryModal from "./IdRecoveryModal.vue";
+import IdRegistrationModal from "./IdRegistrationModal.vue";
+import IdResetPasswordOtpModal from "./IdResetPasswordOtpModal.vue";
+import IdTwoFactorModal from "./IdTwoFactorModal.vue";
+import { useI18n, useAppConfig, useCookie } from "#imports";
+import { onMounted } from "vue";
+import { useIdModals } from "#adata-ui/composables/useIdModals";
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+const {
+  loginModal,
+  registrationModal,
+  confirmAccountOtpModal,
+  recoveryModal,
+  resetPasswordOtpModal,
+  newPasswordModal,
+  passwordSuccessfulModal,
+  confirmSuccessfulModal,
+  twoFactorModal
+} = useIdModals();
+const { locale } = useI18n();
+const { commonAuth } = useAppConfig();
+const authApiURL = commonAuth.authApiURL;
+onMounted(async () => {
+  const accessToken = useCookie("accessToken");
+  const response = await fetch(`${removeTrailingSlash(authApiURL)}/access/cookie`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      lang: locale.value
+    }
+  });
+  const { data: cookiesData } = await response.json();
+  if (cookiesData?.access_token && !accessToken.value) {
+    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;
+    window.location.reload();
+  }
+});
+</script>
+
+<template>
+  <adt-modal v-model="loginModal">
+    <id-login-modal v-if="loginModal" />
+  </adt-modal>
+  <adt-modal v-model="twoFactorModal">
+    <id-two-factor-modal v-if="twoFactorModal" />
+  </adt-modal>
+
+  <adt-modal v-model="registrationModal">
+    <id-registration-modal v-if="registrationModal" />
+  </adt-modal>
+  <adt-modal
+    v-model="confirmAccountOtpModal"
+    prevent-close
+  >
+    <id-confirm-account-otp-modal v-if="confirmAccountOtpModal" />
+  </adt-modal>
+  <adt-modal
+    v-model="confirmSuccessfulModal"
+    prevent-close
+  >
+    <id-confirm-successful-modal v-if="confirmSuccessfulModal" />
+  </adt-modal>
+
+  <adt-modal v-model="recoveryModal">
+    <id-recovery-modal v-if="recoveryModal" />
+  </adt-modal>
+  <adt-modal
+    v-model="resetPasswordOtpModal"
+    prevent-close
+  >
+    <id-reset-password-otp-modal v-if="resetPasswordOtpModal" />
+  </adt-modal>
+  <adt-modal
+    v-model="newPasswordModal"
+    prevent-close
+  >
+    <id-new-password-modal v-if="newPasswordModal" />
+  </adt-modal>
+  <adt-modal
+    v-model="passwordSuccessfulModal"
+    prevent-close
+  >
+    <id-password-successful-modal v-if="passwordSuccessfulModal" />
+  </adt-modal>
+</template>

package/dist/runtime/components/modals/id/IdModals.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;