Login bug fix

package.json

@@ -53,6 +53,7 @@
     "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
     "react-fast-marquee": "^1.6.4",
+    "react-international-phone": "^4.2.6",
     "react-quill": "^2.0.0",
     "react-responsive-carousel": "^3.2.23",
     "react-simple-toasts": "^5.10.0",

src/app/dev/event/main/loading.tsx

@@ -0,0 +1,9 @@
+import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+
+export default async function Page() {
+    return (
+      <>
+        <ComponentGlobal_LoadingPage height="100%"/>
+      </>
+    );
+}

src/app/dev/event/splash/loading.tsx

@@ -0,0 +1,9 @@
+import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+
+export default async function Page() {
+    return (
+      <>
+        <ComponentGlobal_LoadingPage height="100vh"/>
+      </>
+    );
+}

src/app/dev/event/splash/page.tsx

@@ -1,5 +1,8 @@
 import { Event_SplashScreen } from "@/app_modules/event";
 
 export default async function Page() {
+  // await new Promise((a, b) => {
+  //   setTimeout(a, 1000);
+  // });
   return <Event_SplashScreen />;
 }

src/app/dev/home/loading.tsx

@@ -0,0 +1,9 @@
+import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+
+export default async function Page() {
+  return (
+    <>
+      <ComponentGlobal_LoadingPage height="100%"/>
+    </>
+  );
+}

src/app/dev/home/page.tsx

@@ -8,6 +8,9 @@ import { User_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
 export default async function Page() {
   const userId = await User_getUserId();
   const dataUser = await User_getOneById(userId);
+  // await new Promise((a, b) => {
+  //   setTimeout(a, 1000);
+  // });
 
   return (
     <>

src/app/dev/katalog/[id]/loading.tsx

@@ -0,0 +1,10 @@
+import ComponentGlobal_LoadingPage from "@/app_modules/component_global/loading_page";
+
+export default async function Page() {
+    
+  return (
+    <>
+      <ComponentGlobal_LoadingPage height="100%" />
+    </>
+  );
+}

src/app/dev/katalog/[id]/page.tsx

@@ -12,18 +12,28 @@ import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/g
 import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
 import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
 import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
+import { User_getOneById } from "@/app_modules/home/fun/get/get_one_user_by_id";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export default async function Page({ params }: { params: { id: string } }) {
   let profileId = params.id;
-  const userLoginId = await User_getUserId()
+  const authorId = await User_getUserId();
+  const dataUser = await User_getOneById(authorId)
   const listPorto = await funGetListPortofolio(profileId);
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId)
+  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
   // console.log(dataProfile)
 
+  await new Promise((a, b) => {
+    setTimeout(a, 1000);
+  });
+
   return (
     <>
-      <KatalogView profile={dataProfile as any} listPorto={listPorto as any} userLoginId={userLoginId} />
+      <KatalogView
+        profile={dataProfile as any}
+        listPorto={listPorto as any}
+        userLoginId={authorId}
+      />
     </>
   );
 }

src/app_modules/auth/fun/fun_login.ts

@@ -6,29 +6,6 @@ import { randomOTP } from "./rondom_otp";
 export async function auth_funLogin(nomor: string) {
   const codeOtp = randomOTP();
 
-  // const res = await fetch(
-  //   `https://wa.wibudev.com/code?nom=${nomor}&text=Masukan Kode OTP:${codeOtp}`
-  // );
-
-  // const sendWa = await res.json();
-  // if (sendWa.status !== "success")
-  //   return { status: 400, message: "WA Tidak Terdaftar" };
-
-  // const createOtpId = await prisma.kodeOtp.create({
-  //   data: {
-  //     nomor: nomor,
-  //     otp: codeOtp,
-  //   },
-  // });
-
-  // if (!createOtpId) return { status: 400, message: "Gagal Membuat Kode OTP" };
-
-  // return {
-  //   status: 200,
-  //   message: "Kode Verifikasi Dikirim",
-  //   kodeOtpId: createOtpId.id
-  // };
-
   try {
     const res = await fetch(
       `https://wa.wibudev.com/code?nom=${nomor}&text=Masukan Kode OTP:${codeOtp}`

src/app_modules/auth/fun/fun_logout.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 
 export async function auth_Logout(kodeId: string) {
@@ -8,6 +9,7 @@ export async function auth_Logout(kodeId: string) {
     name: "ssn",
     value: "",
     maxAge: 0,
+    path: "/dev/auth/login",
   });
 
   const c = cookies().get("ssn");
@@ -19,7 +21,7 @@ export async function auth_Logout(kodeId: string) {
     },
   });
 
-  if (!del) return { status: 400, message: "Gagal Hapus Kode OTP Id" };
+  if (!del) return { status: 400, message: "Gagal Hapus Kode OTP Id"};
-  
+  revalidatePath("/dev/katalog")
   return { status: 200, message: "Logout Berhasil" };
 }

src/app_modules/auth/fun/fun_register.ts

@@ -31,8 +31,8 @@ export async function Auth_funRegister(data: any) {
 
   const seal = await sealData(
     JSON.stringify({
-      id: data.id,
+      id: create.id,
-      username: data.username,
+      username: create.username,
     }),
     {
       password: await config.server.password,

src/app_modules/auth/login/view.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { randomOTP } from "@/app_modules/auth/fun/rondom_otp";
-import { ApiHipmi } from "@/app/lib/api";
-import { Warna } from "@/app/lib/warna";
 import {
+  Box,
   Button,
   Center,
   Flex,
@@ -16,33 +13,34 @@ import {
   TextInput,
   Title,
 } from "@mantine/core";
-import { getHotkeyHandler, useFocusTrap, useHotkeys } from "@mantine/hooks";
+import { useFocusTrap } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useAtom } from "jotai";
-import { gs_otp, gs_nomor, gs_kodeId } from "../state/state";
+import { gs_kodeId } from "../state/state";
-import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
-import { NotifBerhasil } from "@/app_modules/donasi/component/notifikasi/notif_berhasil";
-import { NotifGagal } from "@/app_modules/donasi/component/notifikasi/notif_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
 
 export default function Login() {
   const router = useRouter();
-  const [nomor, setNomor] = useState("");
   const [kodeId, setKodeId] = useAtom(gs_kodeId);
   const focusTrapRef = useFocusTrap();
+  const [phone, setPhone] = useState("");
+  const [loading, setLoading] = useState(false);
 
   async function onLogin() {
-    if (nomor.length < 10)
+    // if (nomor.length < 10)
-      return ComponentGlobal_NotifikasiPeringatan("Nomor minimal 10 digit");
+    //   return ComponentGlobal_NotifikasiPeringatan("Nomor minimal 10 digit");
-    if (nomor.length > 13)
+    // if (nomor.length > 13)
-      return ComponentGlobal_NotifikasiPeringatan("Nomor maximal 13 digit");
+    //   return ComponentGlobal_NotifikasiPeringatan("Nomor maximal 13 digit");
 
+    const nomorHp = phone.substring(1);
 
-    await auth_funLogin(nomor).then((res) => {
+    await auth_funLogin(nomorHp).then((res) => {
       if (res.status === 200) {
         ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
         setKodeId(res.kodeOtpId);
@@ -79,7 +77,6 @@ export default function Login() {
 
   return (
     <>
-
       <Center h={"80%"}>
         <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
           <Center h={"100%"}>
@@ -98,7 +95,7 @@ export default function Login() {
             </Text>
           </Stack>
 
-          <Grid>
+          {/* <Grid>
             <Grid.Col span={"content"}>
               <Center h={"100%"}>
                 <Text fw={"bold"}>+62</Text>
@@ -115,7 +112,16 @@ export default function Login() {
                 }}
               />
             </Grid.Col>
-          </Grid>
+          </Grid> */}
+
+          <PhoneInput
+            // ref={focusTrapRef}
+            inputStyle={{ width: "100%" }}
+            defaultCountry="id"
+            onChange={(val) => {
+              setPhone(val);
+            }}
+          />
 
           <Button
             radius={"md"}
@@ -124,7 +130,10 @@ export default function Login() {
             color={"teal"}
             onClick={() => {
               onLogin();
+              setLoading(true);
             }}
+            loading={loading ? true : false}
+            loaderPosition="center"
           >
             <Text>LOGIN</Text>
           </Button>

src/app_modules/auth/logout/view.tsx

@@ -10,11 +10,15 @@ import { useDisclosure } from "@mantine/hooks";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { auth_Logout } from "../fun/fun_logout";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { useState } from "react";
 
 export default function User_Logout() {
   const router = useRouter();
   const [opened, { toggle }] = useDisclosure(false);
   const [kodeId, setKodeId] = useAtom(gs_kodeId);
+  const [loading, setLoading] = useState(false);
+  const [loading2, setLoading2] = useState(false);
 
   const onLogout = async () => {
     // await fetch(ApiHipmi.logout)
@@ -34,6 +38,7 @@ export default function User_Logout() {
       if (res.status === 200) {
         setKodeId("");
         ComponentGlobal_NotifikasiBerhasil(res.message);
+        router.push(RouterAuth.login)
       } else {
         ComponentGlobal_NotifikasiPeringatan(res.message);
       }
@@ -46,15 +51,25 @@ export default function User_Logout() {
         <Stack>
           <Title order={6}>Anda yakin ingin keluar ?</Title>
           <Group align="center" position="center">
-            <Button compact onClick={toggle} radius={50}>
+            <Button
+              onClick={() => {
+                setLoading(false);
+                toggle();
+              }}
+              radius={50}
+            >
               Batal
             </Button>
             <Button
-              compact
+              loaderPosition="center"
+              loading={loading2 ? true : false}
               radius={50}
               bg={Warna.merah}
               color="red"
-              onClick={() => onClickLogout()}
+              onClick={() => {
+                setLoading2(true);
+                onClickLogout();
+              }}
             >
               Keluar
             </Button>
@@ -64,7 +79,16 @@ export default function User_Logout() {
       {/* <ActionIcon variant="transparent">
         <IconLogout color={Warna.merah} onClick={toggle} />
       </ActionIcon> */}
-      <Button radius={"xl"} color={"red"} onClick={toggle}>
+      <Button
+        loading={loading ? true : false}
+        loaderPosition="center"
+        radius={"xl"}
+        color={"red"}
+        onClick={() => {
+          setLoading(true);
+          toggle();
+        }}
+      >
         Logout
       </Button>
     </>

src/app_modules/auth/register/view.tsx

@@ -33,6 +33,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
   const [nomor, setNomor] = useState(dataOtp.nomor);
   const [value, setValue] = useState("");
   const focusTrapRef = useFocusTrap();
+  const [loading, setLoading] = useState(false);
 
   // const onRegister = async () => {
   //   myConsole(value);
@@ -169,12 +170,15 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
 
             <Stack>
               <Button
+                loading={loading ? true : false}
+                loaderPosition="center"
                 radius={"md"}
                 compact
                 h={40}
                 color={"teal"}
                 onClick={() => {
                   onRegistarsi();
+                  setLoading(true);
                 }}
               >
                 <Text>DAFTAR</Text>

src/app_modules/auth/validasi/view.tsx

@@ -42,6 +42,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
   const [code, setCode] = useState(dataOtp.otp);
   const [inputCode, setInputOtp] = useState("");
   const focusTrapRef = useFocusTrap();
+  const [loading, setLoading] = useState(false);
 
   const onValid = async () => {
     // MyConsole(inputCode)
@@ -174,12 +175,15 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
             </Center>
             <Stack>
               <Button
+                loading={loading ? true : false}
+                loaderPosition="center"
                 radius={"md"}
                 compact
                 h={40}
                 color={"teal"}
                 onClick={() => {
                   onVerifikasi();
+                  setLoading(true)
                 }}
               >
                 <Text>VERIFIKASI</Text>

src/app_modules/component_global/loading_page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Center, Group, Loader, Skeleton, Stack } from "@mantine/core";
+
+/**
+ * @param | is On Layout: 100%, is Not On Layout: 100vh
+ * @returns Skeleton loading
+ */
+export default function ComponentGlobal_LoadingPage({ height }: { height: string }) {
+  return (
+    <>
+      <Center h={height}>
+        <Group>
+          {Array(3)
+            .fill(0)
+            .map((e, i) => (
+              <Skeleton key={i} height={50} circle mb="xl" />
+            ))}
+        </Group>
+        {/* <Stack spacing={0}>
+          {Array(3)
+            .fill(0)
+            .map((v, index) => (
+              <Group key={index}>
+                {Array(3)
+                  .fill(0)
+                  .map((e, i) => (
+                    <Skeleton key={i} height={50} circle mb="xl" />
+                  ))}
+              </Group>
+            ))}
+        </Stack> */}
+      </Center>
+    </>
+  );
+}

src/app_modules/fun_global/get_user_token.ts

@@ -12,6 +12,7 @@ export async function User_getUserId() {
   const c = cookies().get("ssn");
   if (!c?.value) return redirect(RouterAuth.login);
 
+
   const token = JSON.parse(
     await unsealData(c?.value as string, {
       password: config.server.password,

src/app_modules/home/layout.tsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Group,
   Header,
+  Loader,
   SimpleGrid,
   Stack,
   Text,
@@ -39,6 +40,7 @@ export default function HomeLayout({
 }) {
   const router = useRouter();
   const [user, setUser] = useState(dataUser);
+  const [loading, setLoading] = useState(false);
   const listFooter = [
     {
       id: 1,
@@ -68,7 +70,7 @@ export default function HomeLayout({
               <Text color="white" fw={"bold"}>
                 HIPMI
               </Text>
-              <Logout/>
+              {/* <Logout/> */}
               {/* <Group spacing={"sm"}>
                 <ActionIcon>
                   <IconQrcode />
@@ -103,6 +105,7 @@ export default function HomeLayout({
               <Grid.Col
                 span={"auto"}
                 onClick={() => {
+                  setLoading(true);
                   if (user?.Profile === null) {
                     router.push(RouterProfile.create + `${user.id}`);
                   } else {
@@ -114,6 +117,8 @@ export default function HomeLayout({
                   <ActionIcon variant={"transparent"}>
                     {user?.Profile === null ? (
                       <IconUserCircle color="white" />
+                    ) : loading ? (
+                      <Loader />
                     ) : (
                       <Avatar
                         radius={"xl"}

src/app_modules/home/view.tsx

@@ -7,6 +7,7 @@ import {
   Flex,
   Image,
   Loader,
+  LoadingOverlay,
   Paper,
   SimpleGrid,
   Text,
@@ -35,18 +36,24 @@ import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import { MODEL_USER } from "./model/interface";
 import { ComponentGlobal_NotifikasiPeringatan } from "../component_global/notif_global/notifikasi_peringatan";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_LoadingPage from "../component_global/loading_page";
 
 export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
   const router = useRouter();
   // const [stateUser, setStateUser] = useState(user);
+  const [loading, setLoading] = useState(false);
+  const [visible, { toggle }] = useDisclosure(false);
 
   const listHalaman = [
     {
       id: 1,
-      name: "Crowd Funding",
+      name: "Forums",
-      icon: <IconHeartHandshake size={50} />,
+      icon: <IconMessages size={50} />,
-      link: `/dev/crowd/splash`,
+      link: "",
     },
+
     {
       id: 2,
       name: "Event",
@@ -55,45 +62,56 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
     },
     {
       id: 3,
+      name: "Business Maps",
+      icon: <IconMap2 size={50} />,
+      link: "",
+    },
+    {
+      id: 4,
       name: "Voting",
       icon: <IconPackageImport size={50} />,
       link: RouterVote.splash,
     },
     {
-      id: 4,
+      id: 5,
+      name: "Project Collaboration",
+      icon: <IconAffiliate size={50} />,
+      link: "",
+    },
+    {
+      id: 6,
+      name: "Crowd Funding",
+      icon: <IconHeartHandshake size={50} />,
+      link: `/dev/crowd/splash`,
+    },
+    {
+      id: 7,
       name: "Job Vacancy",
       icon: <IconBriefcase size={50} />,
       link: RouterJob.spalsh,
     },
 
     {
-      id: 5,
+      id: 8,
-      name: "Forums",
-      icon: <IconMessages size={50} />,
-      link: "",
-    },
-    {
-      id: 6,
       name: "Marketplace",
       icon: <IconShoppingBag size={50} />,
       link: "",
     },
-    {
-      id: 7,
-      name: "Project Collaboration",
-      icon: <IconAffiliate size={50} />,
-      link: "",
-    },
-    {
-      id: 8,
-      name: "Business Maps",
-      icon: <IconMap2 size={50} />,
-      link: "",
-    },
   ];
 
   return (
     <>
+      {visible ? (
+        <Box h={"100%"} pos="relative">
+          <LoadingOverlay
+            visible={visible}
+            loader={<ComponentGlobal_LoadingPage height="100%" />}
+          />
+        </Box>
+      ) : (
+        ""
+      )}
+
       <Box>
         <Paper bg={"dark"} radius={5} my={"xs"}>
           <Image alt="logo" src={"/aset/home/home-hipmi.png"} />
@@ -127,6 +145,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
                         "Cooming Soon !!"
                       );
                     } else {
+                      toggle();
                       return router.push(e.link);
                     }
                   }

yarn.lock

@@ -3717,6 +3717,11 @@ react-fast-marquee@^1.6.4:
   resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.4.tgz#ac0bed0faee63e4d97e9b8cd03f3bea9f242fab3"
   integrity sha512-LAgvhRmHdqaUQ8R5jCUwzEGFUIjnCCt3T3W8X7j7wF6DWe0SATlpP0JX1V0pp2qX3DYUezmn1Iz5AtRFdL2EWQ==
 
+react-international-phone@^4.2.6:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/react-international-phone/-/react-international-phone-4.2.6.tgz#a92518b66b44015f5e32c96b646e0355056ae809"
+  integrity sha512-El/ZVYmov5uGuk07nrfxe7M3/4Y8HhA9c3aCpAwilbPU8DekISwNSZMplqxzvxS+TIavIh28ZMDDx1u/4GqULg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"