@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/forms/auth/LoginForm.vue

@@ -1,806 +0,0 @@
-<script setup lang="ts">
-import { onBeforeMount, onMounted, ref } from "vue";
-import { cn } from "../../../lib/utils";
-import api from "../../../api/api";
-import { customAlphabet } from "nanoid";
-import { PinInput, PinInputGroup, PinInputInput } from "../../../components/ui/pin-input";
-import BtnPrimary from "../../../components/button/BtnPrimary.vue";
-import BtnSecondary from "../../../components/button/BtnSecondary.vue";
-import { LucideX, Eye, EyeOff, LucideArrowLeft, LucideOctagonAlert } from "lucide-vue-next";
-import BtnCircle from "../../../components/button/BtnCircle.vue";
-import PwdScore from "../../../components/forms/auth/PwdScore.vue";
-import { useRoute } from "vue-router";
-import LoadingIndicator from "../../../components/loadings/LoadingIndicator.vue";
-import { useAuthStore } from "../../../stores/auth";
-import { useAppConfig } from "../../../composables/useAppConfig";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../../../components/ui/alert-dialog";
-import PrivacyPolicy from "../../../components/helper/PrivacyPolicy.vue";
-import { Slide } from "go-captcha-vue";
-import "go-captcha-vue/dist/style.css";
-
-const route = useRoute();
-const showPassword = ref(false);
-
-// Initialize stores and configuration
-const authStore = useAuthStore();
-const { tokenKey, userKey, organizationKey, apiEndpoints } = useAppConfig();
-const loginError = ref(null);
-const isLoading = ref(false);
-const isOtpLoading = ref(false);
-const loginEmail = ref("");
-const loginPwd = ref("");
-const grecaptchaSiteKey = ref("");
-const state = ref("login");
-const changePwdType = ref("default");
-const ssoUrl = ref("");
-const initLoading = ref(true);
-const initError = ref(false);
-const stopingAllSession = ref(false);
-const allSessionStoped = ref(false);
-
-/**
- * Soft lockout password
- *
- */
-const lockoutInterval = ref(0);
-const loginAttemp = ref(0);
-
-/**
- * Change pwd
- *
- */
-const showPwd1 = ref(false);
-const showPwd2 = ref(false);
-const changePwdErr = ref<string | null>(null);
-const isLoadingChangePwd = ref(false);
-const pwd1Str = ref("");
-const pwdScore = ref(0);
-
-/**
- * Forgot pwd
- *
- */
-const forgotPwdErr = ref<string | null>(null);
-const forgotPwdEmail = ref("");
-const forgotPwdPwd = ref("");
-
-/**
- * OTP
- *
- */
-const otp = ref<string[]>([]);
-const resendInterval = ref(0);
-const resendTried = ref(0);
-const sendingOtpEmail = ref(false);
-const otpEmailSent = ref(false);
-const otpCompleted = () => {
-  sendOtp();
-};
-
-function sendOtp() {
-  isOtpLoading.value = true;
-  let uri = apiEndpoints.value.auth.login + "/otp";
-  let email = loginEmail.value;
-  if (state.value === "forgot_pwd_otp") {
-    uri = apiEndpoints.value.auth.forgotPassword + "/otp";
-    email = forgotPwdEmail.value;
-  }
-  api
-    .post(uri, {
-      email,
-      code: otp.value.join("")
-    })
-    .then(r => {
-      if (state.value === "forgot_pwd_otp") {
-        state.value = "change_pwd";
-        return;
-      }
-
-      // Login successfull, redirect to home
-      if (r.data.auth_token) localStorage.setItem(tokenKey.value, r.data.auth_token);
-      localStorage.setItem(userKey.value, r.data.user.name);
-      localStorage.setItem("app.user.default_app", r.data.user.defaultApp);
-
-      if (r.data.user.organization) localStorage.setItem(organizationKey.value, r.data.user.organization.name);
-      if (r.data.user.organization && r.data.user.organization.accessLevel) {
-        localStorage.setItem("app.user.organization.level", r.data.user.organization.accessLevel.code);
-      }
-
-      // Initialize WebSocket connection after successful login
-      // try {
-      //   websocketStore.connect();
-      // } catch (error) {
-      //   console.warn("Failed to initialize WebSocket connection:", error);
-      // }
-
-      const nextUri = r.data.user.defaultApp === "app1" ? "/dashboard/profile-sentral" : "/apk2/overview";
-      window.location.href =
-        route.query.next && String(route.query.next) !== "/" && String(route.query.next).substring(0, 1) === "/" && String(route.query.next).substring(0, 2) !== "//"
-          ? String(route.query.next)
-          : nextUri;
-    })
-    .catch(err => {
-      if (err.response && err.response.status === 406) {
-        changePwdType.value = err.response.data.type;
-        state.value = "change_pwd_default";
-      } else {
-        loginError.value = err.message;
-      }
-    })
-    .finally(() => {
-      isOtpLoading.value = false;
-    });
-}
-
-function loginSso() {
-  /**
-   * Save next routes
-   *
-   */
-  const afterLogin = route.query.next && String(route.query.next) !== "/" ? String(route.query.next) : "/";
-  sessionStorage.setItem("app.next", afterLogin);
-
-  /**
-   * Redirect to oauth login
-   *
-   */
-  window.location.href = ssoUrl.value;
-}
-
-function doLogin(e: any) {
-  // openCaptcha();
-  // privacyPolicyOpen.value = true;
-  // return;
-
-  try {
-    isLoading.value = true;
-    loginError.value = null;
-    sendingOtpEmail.value = true;
-    otpEmailSent.value = false;
-    captchaX.value = e.x;
-    captchaY.value = e.y;
-
-    api
-      .post(apiEndpoints.value.auth.login, {
-        email: loginEmail.value,
-        password: loginPwd.value,
-        captchaKey: captchaData.value.captKey,
-        captchaX: e.x,
-        captchaY: e.y
-      })
-      .then(r => {
-        /**
-         * User requried to verify email
-         *
-         */
-        if (!r.data.user) {
-          otp.value = [];
-          state.value = "login_otp";
-          resendTried.value += 1;
-          resendInterval.value = 15 * resendTried.value + 1;
-          otpEmailSent.value = true;
-          setTimeout(() => {
-            otpEmailSent.value = false;
-            updateInterval();
-          }, 2400);
-          return;
-        }
-
-        /**
-         * Login successfull, redirect to home
-         *
-         */
-        if (r.data.auth_token) localStorage.setItem(tokenKey.value, r.data.auth_token);
-        localStorage.setItem(userKey.value, r.data.user.name);
-        localStorage.setItem("app.user.default_app", r.data.user.defaultApp);
-
-        if (r.data.user.organization) localStorage.setItem(organizationKey.value, r.data.user.organization.name);
-        if (r.data.user.organization && r.data.user.organization.accessLevel) {
-          localStorage.setItem("app.user.organization.level", r.data.user.organization.accessLevel.code);
-        }
-
-        const nextUri = r.data.user.defaultApp === "app1" ? "/" : "/";
-        window.location.href =
-          route.query.next && String(route.query.next) !== "/" && String(route.query.next).substring(0, 1) === "/" && String(route.query.next).substring(0, 2) !== "//"
-            ? String(route.query.next)
-            : nextUri;
-      })
-      .catch(err => {
-        if (err.response && err.response.status === 406) {
-          changePwdType.value = err.response.data.type;
-          state.value = "change_pwd_default";
-        } else {
-          loginError.value = err.message;
-          loginAttemp.value += 1;
-          if (loginAttemp.value >= 3) {
-            lockoutInterval.value = 5 * loginAttemp.value + 1;
-            updateLockoutInterval();
-          }
-        }
-      })
-      .finally(() => {
-        isLoading.value = false;
-        sendingOtpEmail.value = false;
-      });
-  } catch (err: any) {
-    console.error(err);
-    isLoading.value = false;
-    loginError.value = err.message;
-  }
-}
-
-function login(_: FormData, form$: any) {
-  loginEmail.value = form$.data.email.toLowerCase();
-  loginPwd.value = form$.data.password;
-  openCaptcha();
-}
-
-function resendOtp() {
-  if (state.value === "forgot_pwd_otp") doSendForgotPwdEmail();
-  else login(new FormData(), { data: { email: loginEmail.value, password: loginPwd.value } });
-}
-
-function updateInterval() {
-  if (!resendInterval.value) return;
-  resendInterval.value -= 1;
-  setTimeout(() => {
-    updateInterval();
-  }, 1000);
-}
-
-function updateLockoutInterval() {
-  if (!lockoutInterval.value) return;
-  lockoutInterval.value -= 1;
-  setTimeout(() => {
-    updateLockoutInterval();
-  }, 1000);
-}
-
-function forgotPwd(formData: FormData, form$: any) {
-  forgotPwdEmail.value = form$.data.email.toLowerCase();
-  doSendForgotPwdEmail();
-}
-
-function doSendForgotPwdEmail() {
-  sendingOtpEmail.value = true;
-  otpEmailSent.value = false;
-  api
-    .post(apiEndpoints.value.auth.forgotPassword, {
-      email: forgotPwdEmail.value
-    })
-    .then(r => {
-      state.value = "forgot_pwd_otp";
-      resendTried.value += 1;
-      resendInterval.value = 15 * resendTried.value + 1;
-      otpEmailSent.value = true;
-      setTimeout(() => {
-        otpEmailSent.value = false;
-        updateInterval();
-      }, 2400);
-    })
-    .catch(err => {
-      forgotPwdErr.value = err.message;
-    })
-    .finally(() => {
-      sendingOtpEmail.value = false;
-    });
-}
-
-function stopAllSession() {
-  if (allSessionStoped.value) return;
-  stopingAllSession.value = true;
-  api
-    .post(apiEndpoints.value.auth.changePassword + "/stop-all-session", {
-      email: forgotPwdEmail.value,
-      password: forgotPwdPwd.value
-    })
-    .then(r => {
-      allSessionStoped.value = true;
-    })
-    .finally(() => {
-      stopingAllSession.value = false;
-    });
-}
-
-function changePwd(formData: FormData, form$: any) {
-  if (pwdScore.value < 4) {
-    changePwdErr.value = "Mohon gunakan password yang lebih sulit untuk ditebak";
-    return;
-  }
-  if (form$.data.password1 !== form$.data.password2) {
-    changePwdErr.value = "Kata sandi dan ulangi kata sandi tidak sama";
-    return;
-  }
-  isLoadingChangePwd.value = true;
-  let uri = apiEndpoints.value.auth.changePassword + "/default";
-  let email = loginEmail.value;
-  if (state.value === "change_pwd") {
-    uri = apiEndpoints.value.auth.changePassword + "/otp";
-    email = forgotPwdEmail.value;
-  }
-  forgotPwdPwd.value = form$.data.password1;
-  api
-    .post(uri, {
-      email,
-      code: otp.value.join(""),
-      password: forgotPwdPwd.value
-    })
-    .then(r => {
-      if (state.value === "change_pwd") {
-        state.value = "change_pwd_success";
-        allSessionStoped.value = false;
-        stopingAllSession.value = false;
-        loginError.value = null;
-        return;
-      }
-
-      // Login successfull, redirect to home
-      if (r.data.auth_token) localStorage.setItem(tokenKey.value, r.data.auth_token);
-      localStorage.setItem(userKey.value, r.data.user.name);
-      localStorage.setItem("app.user.default_app", r.data.user.defaultApp);
-
-      if (r.data.user.organization) localStorage.setItem(organizationKey.value, r.data.user.organization.name);
-      if (r.data.user.organization && r.data.user.organization.accessLevel) {
-        localStorage.setItem("app.user.organization.level", r.data.user.organization.accessLevel.code);
-      }
-
-      // Initialize WebSocket connection after successful login
-      // try {
-      //   websocketStore.connect();
-      // } catch (error) {
-      //   console.warn("Failed to initialize WebSocket connection:", error);
-      // }
-
-      const nextUri = r.data.user.defaultApp === "app1" ? "/" : "/";
-      window.location.href =
-        route.query.next && String(route.query.next) !== "/" && String(route.query.next).substring(0, 1) === "/" && String(route.query.next).substring(0, 2) !== "//"
-          ? String(route.query.next)
-          : nextUri;
-    })
-    .catch(err => {
-      changePwdErr.value = err.message;
-    })
-    .finally(() => {
-      isLoadingChangePwd.value = false;
-    });
-}
-
-function pwd1Inputed(e: any) {
-  changePwdErr.value = null;
-  pwd1Str.value = e.target.value;
-}
-
-function openForgotPwd() {
-  state.value = "forgot_pwd";
-  otp.value = [];
-  loginError.value = null;
-}
-
-/**
- * Captcha
- *
- */
-const captchaOpen = ref(false);
-const captchaX = ref(0);
-const captchaY = ref(0);
-const captchaData = ref({
-  image: "",
-  thumb: "",
-  captKey: "",
-  thumbX: 0,
-  thumbY: 0,
-  thumbWidth: 0,
-  thumbHeight: 0
-});
-const captchaEvents = {
-  close: () => {
-    captchaOpen.value = false;
-  },
-  refresh: () => {
-    openCaptcha();
-  },
-  confirm: (e: any) => {
-    captchaOpen.value = false;
-    doLogin(e);
-  }
-};
-
-function openCaptcha() {
-  captchaOpen.value = true;
-  api.get(apiEndpoints.value.auth.captcha).then(r => {
-    captchaData.value = {
-      image: r.data.data.image_base64 || "",
-      thumb: r.data.data.tile_base64 || "",
-      captKey: r.data.data.captcha_key || "",
-      thumbX: r.data.data.tile_x || 0,
-      thumbY: r.data.data.tile_y || 0,
-      thumbWidth: r.data.data.tile_width || 0,
-      thumbHeight: r.data.data.tile_height || 0
-    };
-  });
-}
-
-/**
- * Privacy policy
- *
- */
-const privacyPolicyOpen = ref(false);
-const privacyToken = ref<string | null>(null);
-const privacyPolicyCanAgree = ref(false);
-
-function privacyPolicyScrolled(e: any) {
-  // Hitung jika sudah mencapai bagian bawah elemen
-  const isAtBottom = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 200;
-  if (isAtBottom) privacyPolicyCanAgree.value = true;
-}
-
-function agreePrivacy() {
-  initLoading.value = true;
-  // api.post('/auth/login/privacy/accept', {
-  //   email: loginEmail.value,
-  //   password: loginPwd.value,
-  //   token: privacyToken.value,
-  // }).then(r => {
-  //   if (state.value === 'forgot_pwd_otp') {
-  //     otpToken.value = r.data.token
-  //     state.value = 'change_pwd'
-  //     return
-  //   }
-
-  //   /**
-  //    * Login successful, set auth data and redirect to /pemilik
-  //    *
-  //    */
-  //   localStorage.setItem('biomassa.user.name', r.data.nama)
-  //   localStorage.setItem('biomassa.user.type', r.data.tipe_user)
-
-  //   let path = '/';
-  //   switch (r.data.tipe_user) {
-  //     case 'SUPER_ADMIN':
-  //     case 'ADMIN':
-  //       path = '/master-user';
-  //       break;
-  //     case 'PEMETAAN_LAHAN':
-  //     case 'MONITORING':
-  //       path = '/peta-sebaran'; break;
-  //     default: break;
-  //   };
-  //   router.push({ path });
-  //   console.log('Login successful')
-  // }).catch(err => {
-  //   handleLoginError(err);
-  // }).finally(() => {
-  //   initLoading.value = false
-  // })
-}
-
-function disagreePrivacy() {
-  initLoading.value = true;
-  api
-    .post("/auth/login/privacy/not-accept", {
-      email: loginEmail.value,
-      password: loginPwd.value,
-      token: privacyToken.value
-    })
-    .finally(() => {
-      privacyToken.value = null;
-      initLoading.value = false;
-    });
-}
-
-function initLogin() {
-  initLoading.value = true;
-  initError.value = false;
-  api
-    .get(apiEndpoints.value.auth.init)
-    .then(r => {
-      /**
-       * Used to prevent CSRF attacks by
-       * ensuring the response matches the initial request
-       *
-       */
-      const { state } = r.data;
-
-      /**
-       * Save one-time only state
-       *
-       */
-      sessionStorage.setItem("oauth_state", state);
-
-      /**
-       * Save sso authorize url
-       *
-       */
-      ssoUrl.value = r.data.ssoUrl;
-    })
-    .catch(err => {
-      initError.value = true;
-    })
-    .finally(() => {
-      initLoading.value = false;
-    });
-}
-
-onMounted(() => {
-  initLogin();
-});
-</script>
-
-<template>
-  <section v-if="initLoading" class="flex h-[440px] items-center justify-center">
-    <LoadingIndicator class="scale-90" />
-  </section>
-  <section v-else-if="initError" class="flex h-[440px] items-center justify-center">
-    <div class="text-center text-red-500">
-      <LucideOctagonAlert :size="40" :stroke-width="1.5" class="mx-auto mb-3" />
-      <h4 class="text-lg font-medium">Login Initilization Failed</h4>
-      <p class="mb-4 text-sm">Can not connect to Server, please check again your internet connection</p>
-      <BtnPrimary class="h-9 rounded-full py-0" v-on:click="initLogin">Coba Lagi</BtnPrimary>
-    </div>
-  </section>
-  <section v-else-if="['change_pwd_default', 'change_pwd'].includes(state)">
-    <div class="mb-4 flex flex-col space-y-2 text-left">
-      <h1 class="mb-[2px] text-2xl font-semibold leading-none">Ganti Kata Sandi</h1>
-      <p class="!mt-1 mb-4 text-[15px] leading-snug text-muted-foreground">
-        <template v-if="state === 'change_pwd_default'">
-          <template v-if="changePwdType === 'expired'"> Kata sandi Anda sudah kadaluarsa, anda harus mengganti kata sandi dengan kata sandi baru untuk masuk ke aplikasi. </template>
-          <template v-else>Kata sandi awal hanya dapat digunakan sekali. Silahkan masukan kata sandi baru.</template>
-        </template>
-        <template v-else>Silahkan masukan kata sandi baru.</template>
-      </p>
-    </div>
-    <div :class="cn('grid gap-6', $attrs.class ?? '')">
-      <div class="relative -mb-1 rounded-sm border-l-4 border-red-400 bg-red-50 px-4 py-2 pr-16 text-[15px] leading-tight text-red-500" v-if="changePwdErr">
-        <span>{{ changePwdErr }}</span>
-        <BtnCircle class="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 bg-gray-200 opacity-70 transition hover:bg-slate-300 hover:opacity-100" v-on:click="changePwdErr = null">
-          <LucideX :size="16"></LucideX>
-        </BtnCircle>
-      </div>
-      <Vueform :endpoint="changePwd">
-        <TextElement
-          name="password1"
-          :input-type="showPwd1 ? 'text' : 'password'"
-          label="Kata Sandi Baru"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          v-on:input="pwd1Inputed"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPwd1" class="cursor-pointer text-slate-400" @click="showPwd1 = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd1 = true" />
-          </template>
-        </TextElement>
-        <div class="col-span-12 -mt-2.5 px-1">
-          <PwdScore v-model="pwdScore" :password="pwd1Str" />
-        </div>
-        <TextElement
-          name="password2"
-          :input-type="showPwd2 ? 'text' : 'password'"
-          label="Ulangi Kata Sandi"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          v-on:input="changePwdErr = null"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPwd2" class="cursor-pointer text-slate-400" @click="showPwd2 = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPwd2 = true" />
-          </template>
-        </TextElement>
-        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-if="isLoadingChangePwd">
-          <div class="bottom-0 left-0 right-0 top-0 bg-gray-300">
-            <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
-          </div>
-        </div>
-        <ButtonElement size="lg" name="submit" button-class="mt-1 font-medium h-12 text-md" button-label="Tetapkan Kata Sandi" :submits="true" :full="true" v-else />
-      </Vueform>
-    </div>
-  </section>
-  <section v-else-if="['forgot_pwd'].includes(state)">
-    <div class="mb-4 flex flex-col space-y-2 text-left">
-      <h1 class="mb-[2px] text-2xl font-semibold leading-none">Lupa Kata Sandi</h1>
-      <p class="!mt-1 mb-4 text-[15px] leading-snug text-muted-foreground">Masukan alamat email Anda yang terdaftar pada aplikasi.</p>
-    </div>
-    <button class="-ml-[3px] mb-5 flex items-center px-0 py-1 text-[15px]" v-on:click="state = 'login'">
-      <LucideArrowLeft class="mr-2" :size="22" />
-      Kembali ke Login
-    </button>
-    <div :class="cn('grid gap-6', $attrs.class ?? '')">
-      <div class="relative -mb-1 rounded-sm border-l-4 border-red-400 bg-red-50 px-4 py-2 pr-16 text-[15px] leading-tight text-red-500" v-if="forgotPwdErr">
-        <span>{{ forgotPwdErr }}</span>
-        <BtnCircle class="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 bg-gray-200 opacity-70 transition hover:bg-slate-300 hover:opacity-100" v-on:click="forgotPwdErr = null">
-          <LucideX :size="16"></LucideX>
-        </BtnCircle>
-      </div>
-      <Vueform :endpoint="forgotPwd">
-        <TextElement name="email" input-type="email" :rules="['required']" label="Email" placeholder="Masukkan email..." :floating="false" v-on:input="forgotPwdErr = null" />
-        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-if="sendingOtpEmail">
-          <div class="bottom-0 left-0 right-0 top-0 bg-gray-300">
-            <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
-          </div>
-        </div>
-        <ButtonElement size="lg" name="submit" button-class="mt-1 font-medium h-12 text-md" button-label="Kirimkan Email" :submits="true" :full="true" v-else />
-      </Vueform>
-    </div>
-  </section>
-  <section v-else-if="['change_pwd_success'].includes(state)">
-    <div class="mb-4 flex flex-col space-y-2 text-left">
-      <h1 class="mb-2.5 text-xl font-semibold leading-none">Kata Sandi Sukses Dirubah</h1>
-      <div class="!mt-1 mb-4 text-[15px] text-muted-foreground">
-        <p>Kata sandi berhasil di rubah, sekarang Anda dapat masuk menggunakan kata sandi baru Anda.</p>
-        <br />
-        <p>
-          Apakah Anda ingin menghentikan semua sesi aktif?<br />
-          Perangkat yang sedang aktif akan diminta untuk masuk kembali dengan password baru Anda.
-        </p>
-      </div>
-    </div>
-    <BtnPrimary class="mb-5 w-full text-[16px]" :loading="stopingAllSession" :disabled="allSessionStoped" v-on:click="stopAllSession">
-      <template v-if="allSessionStoped">Semua Sesi Dihentikan</template>
-      <template v-else>Hentikan Semua Sesi</template>
-    </BtnPrimary>
-    <button class="-ml-[3px] mb-5 flex items-center px-0 py-1 text-[15px]" v-on:click="state = 'login'">
-      <LucideArrowLeft class="mr-2" :size="22" />
-      Kembali ke Login
-    </button>
-  </section>
-  <section v-else-if="['login_otp', 'forgot_pwd_otp'].includes(state)">
-    <div class="mb-3 flex flex-col space-y-2 text-left">
-      <h1 class="mb-[2px] text-2xl font-semibold leading-none">Verifikasi</h1>
-      <p class="!mt-1 mb-4 text-[15px] text-muted-foreground">
-        Masukan 8 digit kode verifikasi yang dikirimkan ke email Anda
-        <b>
-          <template v-if="state === 'login_otp'"> {{ loginEmail.split("@")[0].substring(0, 2) }}***@{{ loginEmail.split("@")[1] }} </template>
-          <template v-if="state === 'forgot_pwd_otp'"> {{ forgotPwdEmail.split("@")[0].substring(0, 2) }}***@{{ forgotPwdEmail.split("@")[1] }} </template> </b
-        >.
-      </p>
-    </div>
-    <div :class="cn('grid gap-6', $attrs.class ?? '')">
-      <div class="relative -mb-1 rounded-sm border-l-4 border-red-400 bg-red-50 px-4 py-2 text-[15px] text-red-500" v-if="loginError">
-        <span>{{ loginError }}</span>
-        <BtnCircle class="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 bg-gray-200 opacity-70 transition hover:bg-slate-300 hover:opacity-100" v-on:click="loginError = null">
-          <LucideX :size="16"></LucideX>
-        </BtnCircle>
-      </div>
-      <PinInput id="otp-input" v-model="otp" placeholder="○" @complete="otpCompleted" :otp="true">
-        <PinInputGroup class="gap-1.5">
-          <template v-for="(id, index) in 8" :key="id">
-            <PinInputInput class="w-full rounded-md border py-3 text-xl" :index="index" />
-          </template>
-        </PinInputGroup>
-      </PinInput>
-      <div class="-mt-4 pl-2">
-        <div class="py-1 text-sm text-gray-400" v-if="sendingOtpEmail">Mengirimkan email...</div>
-        <div class="py-1 text-sm text-gray-400" v-else-if="otpEmailSent">Email terkirim!</div>
-        <button class="hover:text-primary_main_hover px-0 py-1 text-sm font-medium text-primary_main" v-else-if="!resendInterval" v-on:click="resendOtp">Kirim ulang email</button>
-        <div class="py-1 text-sm text-gray-400" v-else>Kirimkan ulang dalam {{ resendInterval }}</div>
-      </div>
-      <BtnPrimary class="text-md h-12 w-full" v-on:click="sendOtp" :loading="isOtpLoading"> Verifikasi Kode </BtnPrimary>
-    </div>
-  </section>
-  <section v-else>
-    <div class="mb-3 flex flex-col space-y-2 text-left">
-      <h1 class="mb-[2px] text-2xl font-semibold leading-none">Login</h1>
-      <p class="!mt-1 mb-4 text-[15px] text-muted-foreground">Silakan login terlebih dahulu untuk masuk aplikasi.</p>
-    </div>
-    <div :class="cn('grid gap-6', $attrs.class ?? '')">
-      <div class="relative -mb-1 rounded-sm border-l-4 border-red-400 bg-red-50 px-4 py-2 text-[15px] text-red-500" v-if="loginError">
-        <span>{{ loginError }}</span>
-        <BtnCircle class="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 bg-gray-200 opacity-70 transition hover:bg-slate-300 hover:opacity-100" v-on:click="loginError = null">
-          <LucideX :size="16"></LucideX>
-        </BtnCircle>
-      </div>
-      <Vueform :endpoint="login">
-        <TextElement name="email" input-type="email" :rules="['required']" label="Email" placeholder="Masukkan email..." :floating="false" v-on:input="loginError = null" />
-        <TextElement
-          name="password"
-          :input-type="showPassword ? 'text' : 'password'"
-          label="Kata Sandi"
-          placeholder="Masukkan kata sandi..."
-          :floating="false"
-          :rules="['required']"
-          v-on:input="loginError = null"
-          onpaste="return false;">
-          <template #addon-after>
-            <EyeOff :size="22" v-if="showPassword" class="cursor-pointer text-slate-400" @click="showPassword = false" />
-            <Eye :size="22" v-else class="cursor-pointer text-slate-400" @click="showPassword = true" />
-          </template>
-        </TextElement>
-        <div class="col-span-12 -mt-2 mb-5">
-          <button class="hover:text-primary_main_hover ml-1 text-sm font-semibold text-primary_main" type="button" v-on:click="openForgotPwd">Lupa Kata Sandi?</button>
-        </div>
-        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-if="isLoading">
-          <div class="absolute bottom-0 left-0 right-0 top-0 bg-gray-300">
-            <svg class="absolute bottom-0 left-0 right-0 top-0 m-auto h-7 w-7 animate-spin text-black" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <circle class="opacity-15" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-              <path class="opacity-15" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
-          </div>
-        </div>
-        <div class="relative col-span-12 mt-1 h-12 cursor-default overflow-hidden rounded-md !border-gray-300 !bg-gray-300 px-6 !text-gray-300 transition" v-else-if="lockoutInterval">
-          <div class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-gray-200 leading-tight text-gray-400">
-            <div class="text-center">
-              <h4 class="text-[16px] font-medium">Akun terkunci</h4>
-              <p class="text-xs">Anda dapat login kembali dalam {{ lockoutInterval }}</p>
-            </div>
-          </div>
-        </div>
-        <ButtonElement
-          size="lg"
-          name="submit"
-          button-class="mt-1 font-medium h-11 !py-0 text-md !bg-blue-500 hover:!bg-blue-600 !transition !border-none"
-          button-label="Login Non-SSO"
-          :submits="true"
-          :full="true"
-          v-else />
-      </Vueform>
-      <div class="relative -mb-3 -mt-5">
-        <div class="absolute inset-0 flex items-center">
-          <span class="w-full border-t border-slate-300 dark:border-dark_border2"></span>
-        </div>
-        <div class="relative flex justify-center pt-1.5 text-sm">
-          <span class="bg-slate-100 px-2 text-muted-foreground text-slate-400 dark:bg-dark_bg dark:text-gray-500"> Atau login dengan </span>
-        </div>
-      </div>
-      <BtnSecondary
-        class="text-md h-11 border border-gray-200 bg-white !py-0 hover:shadow-sm dark:border-none dark:bg-dark_bg4 dark:text-dark_text dark:hover:bg-dark_bg6"
-        type="button"
-        v-on:click="loginSso">
-        Login SSO
-      </BtnSecondary>
-    </div>
-  </section>
-  <div :data-sitekey="grecaptchaSiteKey" class="g-recaptcha" data-size="invisible"></div>
-
-  <div class="fixed bottom-0 left-0 right-0 top-0 z-[99] !m-0 flex items-center justify-center bg-black/60" v-if="captchaOpen">
-    <Slide
-      :config="{
-        title: 'Verifikasi bukan robot',
-        buttonText: 'Verifikasi'
-      }"
-      :data="captchaData"
-      :events="captchaEvents"
-      ref="domRef" />
-  </div>
-
-  <!-- Privacy policy -->
-  <AlertDialog v-model:open="privacyPolicyOpen">
-    <AlertDialogContent class="w-full max-w-[940px]">
-      <AlertDialogHeader>
-        <AlertDialogTitle>Setujui Privacy Policy</AlertDialogTitle>
-        <AlertDialogDescription>
-          <div class="-mx-6">
-            <section class="h-[80vh] w-full overflow-auto border-b border-t" v-on:scroll="privacyPolicyScrolled">
-              <div class="px-6 pb-10 pt-4">
-                <PrivacyPolicy />
-              </div>
-            </section>
-          </div>
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel
-          class="h-10 border-none px-5 text-base font-medium text-gray-500 shadow-none hover:bg-slate-100 hover:text-slate-600"
-          :class="{ '!text-gray-300 hover:!bg-white': !privacyPolicyCanAgree }"
-          v-on:click="disagreePrivacy"
-          :disabled="!privacyPolicyCanAgree">
-          Tidak Setuju
-        </AlertDialogCancel>
-        <AlertDialogAction
-          class="h-10 border-none px-5 text-base font-medium shadow-none"
-          :class="{ '!bg-gray-200 !text-gray-400': !privacyPolicyCanAgree }"
-          v-on:click="agreePrivacy"
-          :disabled="!privacyPolicyCanAgree">
-          Setuju
-        </AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-</template>