feat

Deskripsi:
- Create validasi
- Create register
- create global prisma, color tune,dan global state

src/app_modules/auth/index.ts

@@ -1,4 +1,7 @@
 import SplashScreen from "./splash/view";
 import Login from "./login/view";
+import Validasi from "./validasi/view";
+import Register from "./register/view";
+import Logout from "./logout/view";
 
-export {SplashScreen, Login}
+export { SplashScreen, Login, Validasi, Register, Logout };

src/app_modules/auth/login/view.tsx

@@ -1,11 +1,98 @@
-"use client"
-import { Center, Title } from "@mantine/core";
+"use client";
 
-export default function Login(){
-    return <>
-    <Center h={"100vh"}>
-        <Title>Login</Title>
-        
-    </Center>
+import { MyConsole } from "@/app/fun/my_console";
+import { randomOTP } from "@/app/fun/rondom_otp";
+import { ApiHipmi } from "@/app/lib/api";
+import { Warna } from "@/app/lib/warna";
+import { Button, Center, Flex, Stack, TextInput, Title } from "@mantine/core";
+import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+import { useAtom } from "jotai";
+import { gs_otp, gs_nomor } from "../state/state";
+import { IconCircleLetterH } from "@tabler/icons-react";
+
+export default function Login() {
+  const router = useRouter();
+  const [nomor, setNomor] = useState("");
+  const [inputNumber, setInputNumber] = useAtom(gs_nomor);
+  const [code, setCode] = useAtom(gs_otp);
+
+  const onLogin = async () => {
+    const body = {
+      nomor: nomor,
+      otp: randomOTP(),
+    };
+
+    if (body.nomor.length < 10) return toast("Nomor minimal 10 digit");
+    if (body.nomor.length > 13) return toast("Nomor maximal 13 digit");
+
+    await fetch(ApiHipmi.login, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        MyConsole(val);
+        if (val.status == 200) {
+          toast(val.message);
+          setCode(val.body.otp);
+          setInputNumber(val.body.nomor);
+          router.push("/dev/auth/validasi");
+        } else {
+          toast(val.message);
+        }
+      });
+  };
+
+  return (
+    <>
+      <pre>
+        {JSON.stringify(inputNumber, null, 2)}
+        <br />
+        {JSON.stringify(code)}
+      </pre>
+
+      <Flex
+        h={"100vh"}
+        direction={"column"}
+        justify={"center"}
+        align={"center"}
+        gap={"lg"}
+      >
+        <>
+          <IconCircleLetterH size={150} />
+          <Title>Login</Title>
+
+          <TextInput
+            label="Phone Number"
+            w={250}
+            type="number"
+            placeholder="62 xx xxx xxx xxx"
+            // value={nomor}
+            onChange={(val) => {
+              setNomor(val.target.value);
+            }}
+          />
+
+          <Button
+            h={30}
+            radius={50}
+            compact
+            bg={Warna.hijau_muda}
+            color={"green"}
+            onClick={() => {
+              onLogin();
+            }}
+          >
+            Login
+          </Button>
+        </>
+      </Flex>
     </>
-}
+  );
+}

src/app_modules/auth/logout/view.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { MyConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_nomor, gs_otp } from "../state/state";
+
+export default function Logout() {
+  const router = useRouter();
+  const [nomor, setnomor] = useAtom(gs_nomor);
+  const [code, setCode] = useAtom(gs_otp);
+
+  const onLogout = async () => {
+    // MyConsole("keluar");
+
+    await fetch(ApiHipmi.logout)
+      .then((res) => res.json())
+      .then((val) => {
+        if (val.status == 200) {
+          setnomor(null);
+          setCode(null);
+
+          return router.push("/dev/auth/login");
+        }
+      });
+  };
+
+  return (
+    <>
+      <Button compact onClick={() => onLogout()}>
+        Logout
+      </Button>
+    </>
+  );
+}

src/app_modules/auth/register/view.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Warna } from "@/app/lib/warna";
+import { Flex, Title, TextInput, Button, Text } from "@mantine/core";
+import { IconCircleLetterH } from "@tabler/icons-react";
+import { gs_nomor } from "../state/state";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { MyConsole } from "@/app/fun/my_console";
+import toast from "react-simple-toasts";
+import { ApiHipmi } from "@/app/lib/api";
+import { useRouter } from "next/navigation";
+
+export default function Register() {
+  const route = useRouter();
+  const [nomor, setNomor] = useAtom(gs_nomor);
+  const [value, setValue] = useState("");
+
+  const onRegister = async () => {
+    MyConsole(value);
+
+    const body = {
+      username: value,
+      nomor: nomor,
+    };
+
+    if (!body) return toast("Lengkapi username");
+    if (body.username.length < 5) return toast("Username minimal 5 karakter");
+
+    await fetch(ApiHipmi.register, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        MyConsole(val);
+        if (val.status == 201) {
+          toast("Pendaftaran Berhasil");
+          return route.push("/dev/home");
+        } else {
+          return toast(val.message);
+        }
+      });
+  };
+
+  return (
+    <>
+      <Flex
+        align={"center"}
+        justify={"center"}
+        direction={"column"}
+        gap={50}
+        h={"100vh"}
+      >
+        <Title order={4}>Registrasi</Title>
+        <IconCircleLetterH size={150} />
+        <Flex direction={"column"} gap={"xl"} align={"center"}>
+          <Flex direction={"column"}>
+            <TextInput
+              label="Username"
+              placeholder="Username"
+              onChange={(val) => {
+                setValue(val.target.value);
+              }}
+            />
+
+            <Text>Nomor : {nomor}</Text>
+          </Flex>
+          <Button
+            radius={50}
+            bg={Warna.biru}
+            color="cyan"
+            compact
+            onClick={() => {
+              onRegister();
+            }}
+          >
+            Register
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+}

src/app_modules/auth/splash/view.tsx

@@ -5,12 +5,12 @@ import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function SplashScreen() {
+export default function SplashScreen({ data }: { data: any }) {
   const router = useRouter();
   const [val, setVal] = useState(false);
 
   useShallowEffect(() => {
-    if (!val) {
+    if (!data) {
       setTimeout(() => {
         return router.push("/dev/auth/login");
       }, 2000);

src/app_modules/auth/state/state.ts

@@ -0,0 +1,4 @@
+import { atomWithStorage } from 'jotai/utils'
+
+export const gs_nomor = atomWithStorage<any | null>("nomorHp", null)
+export const gs_otp = atomWithStorage<any | null>("code_otp", null)

src/app_modules/auth/validasi/view.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useAtom } from "jotai";
+import {
+  Button,
+  Center,
+  Flex,
+  PinInput,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { gs_nomor, gs_otp } from "../state/state";
+import { Warna } from "@/app/lib/warna";
+import { useState } from "react";
+import { MyConsole } from "@/app/fun/my_console";
+import { IconCircleLetterH } from "@tabler/icons-react";
+import toast from "react-simple-toasts";
+import { ApiHipmi } from "@/app/lib/api";
+import { useRouter } from "next/navigation";
+
+export default function Validasi() {
+  const router = useRouter();
+  const [nomor, setnomor] = useAtom(gs_nomor);
+  const [code, setCode] = useAtom(gs_otp);
+
+  const [inputCode, setInputOtp] = useState("");
+
+  const onValid = async () => {
+    // MyConsole(inputCode)
+    const body = {
+      nomor: nomor,
+      otp: code,
+    };
+
+    if (!inputCode) return toast("Lengkapi Kode");
+    if (body.otp != inputCode) return toast("Kode Salah");
+
+    await fetch(ApiHipmi.validasi, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        MyConsole(val);
+        if (val.status == 200) {
+          toast("Berhasil Login");
+          return router.push("/dev/home");
+        } else {
+          toast("Silahkan Registrasi");
+          return router.push("/dev/auth/register");
+        }
+      });
+  };
+
+  return (
+    <>
+      {JSON.stringify(nomor)}
+      {JSON.stringify(code)}
+
+      <Flex
+        align={"center"}
+        justify={"center"}
+        direction={"column"}
+        gap={50}
+        h={"100vh"}
+      >
+        <Title order={4}>Validasi Kode OTP</Title>
+        <IconCircleLetterH size={150} />
+        <Flex direction={"column"} gap={"xl"} align={"center"}>
+          <Flex
+            justify={"center"}
+            gap={1}
+            direction={"column"}
+            align={"center"}
+          >
+            <Text>Enter the 6-digit OTP , we’ve just sent</Text>
+            <Text>to {nomor}</Text>
+          </Flex>
+          <PinInput
+            onChange={(val) => {
+              setInputOtp(val);
+            }}
+          />
+          <Button
+            compact
+            radius={50}
+            bg={Warna.hijau_tua}
+            color="green"
+            onClick={() => {
+              onValid();
+            }}
+          >
+            Submit
+          </Button>
+        </Flex>
+      </Flex>
+    </>
+  );
+}