Fix: middleware

Deskripsi
- Fix middleware
- Fix metode login ( sekarang menggunakan api )

src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts

@@ -2,12 +2,15 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function auth_funDeleteAktivasiKodeOtpById({
+export async function auth_funDeleteAktivasiKodeOtpByNomor({
   nomor,
 }: {
   nomor: string;
 }) {
   // console.log(otpId);
+
+
+  
   const updt = await prisma.kodeOtp.deleteMany({
     where: {
       nomor: nomor,

src/app_modules/auth/index.ts

@@ -2,12 +2,12 @@ import SplashScreen from "./splash/view";
 import Login from "./login/view";
 import Validasi from "./validasi/view";
 import Register from "./register/view";
-import Component_Logout from "./logout/view";
+import Component_ButtonLogout from "./logout/view";
 
 export {
   SplashScreen,
   Login,
   Validasi,
   Register,
-  Component_Logout as Logout,
+  Component_ButtonLogout as Logout,
 };

src/app_modules/auth/login/view.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import {
   AccentColor,
   MainColor,
@@ -8,10 +7,10 @@ import {
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
   ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
 import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
-import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
 import { Box, Button, Center, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -28,23 +27,28 @@ export default function Login({ version }: { version: string }) {
     const nomor = phone.substring(1);
     if (nomor.length <= 4) return setError(true);
 
-    const res = await auth_funLogin({ nomor: nomor });
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-      // router.push(RouterAuth.validasi + res.kodeId, { scroll: false });
-      router.push("/validasi/" + res.kodeId, { scroll: false });
-    } else {
-      ComponentGlobal_NotifikasiPeringatan(res.message);
-    }
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ nomor: nomor }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
 
-    // await fetch(ApiHipmi.login, {
-    //   method: "POST",
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: JSON.stringify(body),
-    // })
+      const result = await res.json();
+      if (res.status === 200) {
+        localStorage.setItem("hipmi_auth_code_id", result.kodeId);
+        ComponentGlobal_NotifikasiBerhasil(result.message, 2000);
+        router.push("/validasi", { scroll: false });
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+      }
+    } catch (error) {
+      console.error(error);
+      ComponentGlobal_NotifikasiGagal("Terjadi Kesalahan");
+    }
   }
 
   return (
@@ -96,16 +100,11 @@ export default function Login({ version }: { version: string }) {
 
           <Box pos={"fixed"} bottom={10}>
             <Text fw={"bold"} c={"white"} fs={"italic"} fz={"xs"}>
-              V.{version}
+              v {version}
             </Text>
           </Box>
         </Stack>
       </UIGlobal_LayoutDefault>
-      {/* <BackgroundImage
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-        // pos={"static"}
-      ></BackgroundImage> */}
     </>
   );
 }

src/app_modules/auth/logout/view.tsx

@@ -11,18 +11,21 @@ import { useState } from "react";
 import { auth_Logout } from "../fun/fun_logout";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 
-export default function Component_Logout() {
+export default function Component_ButtonLogout({userId}: {userId: string}) {
   const router = useRouter();
   const [opened, setOpened] = useState(false);
   const [loading, setLoading] = useState(false);
 
   async function onClickLogout() {
-    const res = await auth_Logout();
+    setLoading(true);
+    const res = await fetch(`/api/auth/logout?id=${userId}`, {
+      method: "GET",
+    });
+
+    const result = await res.json();
     if (res.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.push("/login", { scroll: false });
-    } else {
-      ComponentGlobal_NotifikasiPeringatan(res.message);
+      ComponentGlobal_NotifikasiBerhasil(result.message);
+      router.push("/", { scroll: false });
     }
   }
 
@@ -49,7 +52,6 @@ export default function Component_Logout() {
             bg={Warna.merah}
             color="red"
             onClick={() => {
-              setLoading(true);
               onClickLogout();
             }}
           >

src/app_modules/auth/register/skeleton.tsx

@@ -0,0 +1,19 @@
+import { Stack, Skeleton } from "@mantine/core";
+
+export default function Register_SkeletonView() {
+  return (
+    <>
+      <Stack h={"100vh"} align="center" justify="center" spacing={50}>
+        <Skeleton h={30} w={250} radius={"xl"} />
+
+        <Skeleton h={100} w={100} radius={"50%"} />
+
+        <Stack spacing={"sm"}>
+          <Skeleton h={20} w={300} radius={"xl"} />
+          <Skeleton h={50} w={300} radius={"sm"} />
+          <Skeleton h={50} w={300} radius={"sm"} />
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app_modules/auth/register/view.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { GlobalEnv } from "@/app/lib/token";
 import {
-  AccentColor,
-  MainColor,
+  MainColor
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -12,65 +9,95 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
 import {
   Button,
-  Center,
   Stack,
   Text,
   TextInput,
   Title
 } from "@mantine/core";
-import { useFocusTrap } from "@mantine/hooks";
+import { useFocusTrap, useShallowEffect } from "@mantine/hooks";
 import { IconUserCircle } from "@tabler/icons-react";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
-import { Auth_funRegister } from "../fun/fun_register";
+import { auth_funDeleteAktivasiKodeOtpByNomor } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
+import Register_SkeletonView from "./skeleton";
 
-export default function Register({ dataOtp }: { dataOtp: any }) {
+export default function Register() {
   const router = useRouter();
-  const [nomor, setNomor] = useState(dataOtp.nomor);
+  const [nomor, setNomor] = useState("");
   const [value, setValue] = useState("");
   const [isValue, setIsValue] = useState(false);
   const focusTrapRef = useFocusTrap();
   const [loading, setLoading] = useState(false);
 
+  useShallowEffect(() => {
+    const kodeId = localStorage.getItem("hipmi_auth_code_id");
+    if (kodeId != null) {
+      onCheckAuthCode({ kodeId: kodeId as string, onSetData: setNomor });
+    } else {
+      console.log("code id not found");
+    }
+  }, [setNomor]);
+
+  async function onCheckAuthCode({
+    kodeId,
+    onSetData,
+  }: {
+    kodeId: string;
+    onSetData: any;
+  }) {
+    const res = await fetch(`/api/auth/check?id=${kodeId}`);
+    const result = await res.json();
+
+    onSetData(result.data.nomor);
+  }
+
   async function onRegistarsi() {
-    const body = {
+    const data = {
       username: value,
       nomor: nomor,
     };
 
-    if (body.username === "") {
-      setIsValue(true);
-      return null;
-    }
-    if (body.username.length < 5) return null;
-    if (_.values(body.username).includes(" ")) return null;
-
-    const res = await Auth_funRegister({
-      data: body,
-      HIPMI_PWD: GlobalEnv.value?.WIBU_PWD as string,
-    });
-    if (res.status === 200) {
-      await auth_funDeleteAktivasiKodeOtpById({ nomor: nomor }).then((val) => {
-        if (val.status === 200) {
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-          setLoading(true);
-          router.push(RouterHome.main_home, { scroll: false });
-        } else {
-          ComponentGlobal_NotifikasiPeringatan(val.message);
-        }
+    try {
+      setLoading(true);
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        body: JSON.stringify({
+          data,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
       });
-    } else {
-      ComponentGlobal_NotifikasiPeringatan(res.message);
+
+      const result = await res.json();
+
+      if (res.status === 200) {
+        localStorage.removeItem("hipmi_auth_code_id");
+        ComponentGlobal_NotifikasiBerhasil(result.message);
+        router.push("/waiting-room", { scroll: false });
+
+        const resAktivasi = await auth_funDeleteAktivasiKodeOtpByNomor({
+          nomor: data.nomor,
+        });
+      }
+
+      if(res.status === 400){
+        setLoading(false);
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+      }
+    } catch (error) {
+      console.log(error);
     }
   }
 
   return (
     <>
       <UIGlobal_LayoutDefault>
-        <Center h={"100vh"}>
-          <Stack h={"100%"} align="center" justify="center" spacing={70}>
+        {nomor == "" ? (
+          <Register_SkeletonView />
+        ) : (
+          <Stack h={"100vh"} align="center" justify="center" spacing={50}>
             <Title order={2} c={MainColor.yellow}>
               REGISTRASI
             </Title>
@@ -78,7 +105,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
             <IconUserCircle size={100} color="white" />
 
             <Stack spacing={"sm"} w={300}>
-              <Text fz={10} c={"white"}>
+              <Text align="center" c={"white"}>
                 Anda akan terdaftar dengan nomor berikut{" "}
                 <Text inherit span fw={"bold"}>
                   +{nomor}
@@ -109,6 +136,11 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
               />
               <Stack>
                 <Button
+                  disabled={
+                    value === "" ||
+                    value.length < 5 ||
+                    _.values(value).includes(" ")
+                  }
                   loading={loading ? true : false}
                   loaderPosition="center"
                   radius={"md"}
@@ -117,9 +149,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
                   c={"black"}
                   bg={MainColor.yellow}
                   color={"yellow"}
-                  style={{
-                    borderColor: AccentColor.yellow,
-                  }}
                   onClick={() => {
                     onRegistarsi();
                   }}
@@ -129,7 +158,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
               </Stack>
             </Stack>
           </Stack>
-        </Center>
+        )}
       </UIGlobal_LayoutDefault>
     </>
   );

src/app_modules/auth/splash/view.tsx

@@ -10,20 +10,16 @@ import { Avatar, BackgroundImage, Center, Image, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 
-export default function SplashScreen({
-  checkCookies,
-}: {
-  checkCookies: boolean;
-}) {
+export default function SplashScreen() {
   const router = useRouter();
 
   useShallowEffect(() => {
     // if (!checkCookies) return router.push(RouterAuth.login, { scroll: false });
     // onCheckUser();
 
-    // setTimeout(() => {
-    //   router.push(RouterAuth.login, { scroll: false });
-    // }, 1000);
+    setTimeout(() => {
+      router.push("/login", { scroll: false });
+    }, 1000);
     // if (!userLoginId) {
     //   setTimeout(() => {
     //     router.push(RouterAuth.login, { scroll: false });

src/app_modules/auth/validasi/skeleton.tsx

@@ -0,0 +1,25 @@
+import { Stack, Skeleton, Group } from "@mantine/core";
+
+export default function Validasi_SkeletonView() {
+  return (
+    <>
+      <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+        <Skeleton h={30} w={250} radius={"xl"} />
+        <Stack>
+          <Skeleton h={20} w={250} radius={"xl"} />
+          <Skeleton h={20} w={250} radius={"xl"} />
+        </Stack>
+
+        <Group>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} h={50} w={50} radius={"sm"} />
+          ))}
+        </Group>
+
+        <Skeleton h={20} w={250} radius={"xl"} />
+
+        <Skeleton h={50} w={250} radius={"sm"} />
+      </Stack>
+    </>
+  );
+}

src/app_modules/auth/validasi/view.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
-import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { GlobalEnv } from "@/app/lib/token";
 import {
   AccentColor,
   MainColor,
@@ -16,103 +14,175 @@ import {
   Box,
   Button,
   Center,
+  Loader,
   PinInput,
   Stack,
   Text,
   Title,
 } from "@mantine/core";
 import { useFocusTrap, useShallowEffect } from "@mantine/hooks";
-import { Prisma } from "@prisma/client";
-import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { auth_funResendCode } from "../fun";
-import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
-import { auth_funValidasi } from "../fun/fun_validasi";
+import { useEffect, useState } from "react";
 
-export default function Validasi({
-  dataOtp,
-}: {
-  dataOtp: Prisma.KodeOtpSelect;
-}) {
+import Validasi_SkeletonView from "./skeleton";
+import { auth_funDeleteAktivasiKodeOtpByNomor } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global";
+import { auth_funResendCode } from "../fun";
+
+export default function Validasi() {
   const router = useRouter();
-  const nomor = dataOtp.nomor as any;
-  const code = dataOtp.otp as any;
   const [inputCode, setInputOtp] = useState("");
   const focusTrapRef = useFocusTrap();
   const [loading, setLoading] = useState(false);
+  const [counter, setCounter] = useState(7);
+  const [loadingResend, setLoadingResend] = useState(false);
+  const [triggerOtp, setTriggerOtp] = useState(false);
 
-  const [counter, setCounter] = useState(60);
+  const [data, setData] = useState({
+    nomor: "",
+    code: "",
+  });
 
   useShallowEffect(() => {
+    const kodeId = localStorage.getItem("hipmi_auth_code_id");
+    if (kodeId != null) {
+      onCheckAuthCode({ kodeId: kodeId as string, onSetData: setData });
+    } else {
+      console.log("code id not found");
+    }
+
+    if (triggerOtp) {
+      const kodeId = localStorage.getItem("hipmi_auth_code_id");
+      if (kodeId != null) {
+        onCheckAuthCode({ kodeId: kodeId as string, onSetData: setData });
+      } else {
+        console.log("code id not found");
+      }
+      setTriggerOtp(false);
+    }
+  }, [triggerOtp, setData, setTriggerOtp]);
+
+  async function onCheckAuthCode({
+    kodeId,
+    onSetData,
+  }: {
+    kodeId: string;
+    onSetData: any;
+  }) {
+    const res = await fetch(`/api/auth/check?id=${kodeId}`);
+    const result = await res.json();
+
+    onSetData({
+      nomor: result.data.nomor,
+      code: result.data.otp,
+    });
+  }
+
+  useEffect(() => {
     counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
   }, [counter]);
 
   async function onVerifikasi() {
     if (!inputCode)
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Kode");
-    if (code != inputCode)
+    if (data.code != inputCode)
       return ComponentGlobal_NotifikasiPeringatan("Kode Salah");
 
-    const res = await auth_funValidasi({
-      nomor: nomor,
-      HIPMI_PWD: GlobalEnv.value?.WIBU_PWD as string,
-    });
-    if (res.status === 200) {
-      const resAktivasi = await auth_funDeleteAktivasiKodeOtpById(
-        dataOtp.id as any
-      );
-      if (resAktivasi.status === 200) {
-        if (res.role === "1") {
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-          setLoading(true);
-          router.push(RouterHome.main_home, { scroll: false });
+    try {
+      setLoading(true);
+      const res = await fetch("/api/auth/validasi", {
+        method: "POST",
+        body: JSON.stringify({
+          nomor: data.nomor,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const result = await res.json();
+
+      if (res.status === 200) {
+        localStorage.removeItem("hipmi_auth_code_id");
+
+        if (result.roleId === "1") {
+          if (result.active === true) {
+            ComponentGlobal_NotifikasiBerhasil(result.message);
+            router.push(RouterHome.main_home, { scroll: false });
+          } else {
+            ComponentGlobal_NotifikasiBerhasil(result.message);
+            router.push("/waiting-room", { scroll: false });
+          }
         } else {
           ComponentGlobal_NotifikasiBerhasil("Admin Logged in");
-          setLoading(true);
           router.push(RouterAdminDashboard.splash_admin, { scroll: false });
         }
-      } else {
-        ComponentGlobal_NotifikasiPeringatan(resAktivasi.message);
-      }
-    }
 
-    if (res.status === 400) {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.push("/register/" + dataOtp.id, { scroll: false });
-    }
-
-    if (res.status === 401) {
-      const resAktivasi = await auth_funDeleteAktivasiKodeOtpById({
-        nomor: nomor,
-      });
-      if (resAktivasi.status === 200) {
-        ComponentGlobal_NotifikasiPeringatan(res.message);
-        router.push("/login", { scroll: false });
+        const resAktivasi = await auth_funDeleteAktivasiKodeOtpByNomor({
+          nomor: data.nomor,
+        });
       }
+
+      if (res.status === 404) {
+        ComponentGlobal_NotifikasiBerhasil(result.message);
+        router.push("/register", { scroll: false });
+      }
+
+      if (res.status === 400) {
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+      }
+    } catch (error) {
+      console.error(error);
     }
   }
 
   async function onBack() {
-    await auth_funDeleteAktivasiKodeOtpById({ nomor: nomor });
+    localStorage.removeItem("hipmi_auth_code_id");
+    await auth_funDeleteAktivasiKodeOtpByNomor({ nomor: data.nomor });
     router.back();
   }
 
   async function onResendCode() {
-    const res = await auth_funResendCode({ nomor: nomor });
-    if (res.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-      router.push("/validasi/" + res.kodeId, { scroll: false });
-    } else {
-      ComponentGlobal_NotifikasiPeringatan(res.message);
+    setLoadingResend(true);
+    localStorage.removeItem("hipmi_auth_code_id");
+
+    try {
+      const res = await fetch("/api/auth/resend", {
+        method: "POST",
+        body: JSON.stringify({ nomor: data.nomor }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const result = await res.json();
+
+      if (res.status === 200) {
+        localStorage.setItem("hipmi_auth_code_id", result.kodeId);
+        ComponentGlobal_NotifikasiBerhasil("Kode Berhasil Dikirim", 2000);
+        setTriggerOtp(true);
+        setCounter(7);
+        setLoadingResend(false);
+        //  router.push("/validasi", { scroll: false });
+      } else {
+        setLoadingResend(false);
+        ComponentGlobal_NotifikasiPeringatan(result.message);
+      }
+    } catch (error) {
+      console.error(error);
+      setLoadingResend(false);
+      ComponentGlobal_NotifikasiGagal("Terjadi Kesalahan");
     }
   }
 
+  // console.log(data.code);
+
   return (
     <>
       <UIGlobal_LayoutDefault>
         <Stack h={"100vh"}>
-          <Box
+          {/* <Box
             pt={"md"}
             px={"md"}
             style={{
@@ -123,70 +193,84 @@ export default function Validasi({
             <ActionIcon variant="transparent" onClick={() => onBack()}>
               <IconChevronLeft color="white" />
             </ActionIcon>
-          </Box>
+          </Box> */}
+          {data.nomor == "" && data.code == "" ? (
+            <Validasi_SkeletonView />
+          ) : (
+            <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+              <Title order={2} color={MainColor.yellow}>
+                Verifikasi Kode OTP
+              </Title>
 
-          <Stack align="center" justify="center" h={"100vh"} spacing={50}>
-            <Title order={2} color={MainColor.yellow}>
-              Verifikasi Kode OTP
-            </Title>
-
-            <Stack spacing={"md"} align="center">
-              <Stack spacing={0} align="center">
-                <Text c={"white"}>Masukan 4 digit kode otp</Text>
-                <Text c={"white"}>
-                  Yang dikirim ke{" "}
-                  <Text span inherit fw={"bold"}>
-                    {" "}
-                    +{nomor}
+              <Stack spacing={"md"} align="center">
+                <Stack spacing={0} align="center">
+                  <Text c={"white"}>Masukan 4 digit kode otp</Text>
+                  <Text c={"white"}>
+                    Yang dikirim ke{" "}
+                    <Text span inherit fw={"bold"}>
+                      {" "}
+                      +{data.nomor}
+                    </Text>
                   </Text>
-                </Text>
+                </Stack>
+                <Center>
+                  <PinInput
+                    size="xl"
+                    type={"number"}
+                    ref={focusTrapRef}
+                    spacing={"md"}
+                    mt={"md"}
+                    onChange={(val) => {
+                      setInputOtp(val);
+                    }}
+                  />
+                </Center>
+
+                <Stack  h={"5vh"} align="center" justify="center">
+                  <Text fs="italic" c={"white"} >
+                    Tidak menerima kode ?{" "}
+                    {counter > 0 ? (
+                      <Text fw={"bold"} inherit span>
+                        {counter + "s"}
+                      </Text>
+                    ) : loadingResend ? (
+                      <Loader ml={"sm"} size={"xs"} color="yellow" />
+                    ) : (
+                      <Text
+                        inherit
+                        span
+                        onClick={() => {
+                          onResendCode();
+                        }}
+                        fw={"bold"}
+                      >
+                        Kirim ulang
+                      </Text>
+                    )}
+                  </Text>
+                </Stack>
               </Stack>
-              <Center>
-                <PinInput
-                  size="xl"
-                  type={"number"}
-                  ref={focusTrapRef}
-                  spacing={"md"}
-                  mt={"md"}
-                  onChange={(val) => {
-                    setInputOtp(val);
-                  }}
-                />
-              </Center>
-
-              <Text fs="italic" mt={"sm"} c={"white"}>
-                Tidak menerima kode ?{" "}
-                {counter > 0 ? (
-                  <Text fw={"bold"} inherit span>
-                    {counter + "s"}
-                  </Text>
-                ) : (
-                  <Text inherit span onClick={() => onResendCode()}>
-                    Kirim ulang
-                  </Text>
-                )}
-              </Text>
+              <Button
+                w={300}
+                loading={loading ? true : false}
+                loaderPosition="center"
+                radius={"md"}
+                compact
+                h={40}
+                c={"black"}
+                bg={MainColor.yellow}
+                color={"yellow"}
+                style={{
+                  borderColor: AccentColor.yellow,
+                }}
+                onClick={() => {
+                  onVerifikasi();
+                }}
+              >
+                <Text>VERIFIKASI</Text>
+              </Button>
             </Stack>
-            <Button
-              w={300}
-              loading={loading ? true : false}
-              loaderPosition="center"
-              radius={"md"}
-              compact
-              h={40}
-              c={"black"}
-              bg={MainColor.yellow}
-              color={"yellow"}
-              style={{
-                borderColor: AccentColor.yellow,
-              }}
-              onClick={() => {
-                onVerifikasi();
-              }}
-            >
-              <Text>VERIFIKASI</Text>
-            </Button>
-          </Stack>
+          )}
         </Stack>
       </UIGlobal_LayoutDefault>
     </>