@dasidev/dasi-ui 1.0.0

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

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