feat :update module

src/module/auth/login/view/view_login.tsx

@@ -12,24 +12,68 @@ import {
   Title,
 } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import ViewVerification from "../../varification/view/view_verification";
+import { useFocusTrap } from "@mantine/hooks";
 
 function ViewLogin() {
+  const focusTrapRef = useFocusTrap()
   const router = useRouter()
   const textInfo =
     "Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda.";
-  
-  function onMasuk() {
-    // router.push("/verification")
-    window.location.href = "/verification"
+
+  const [isPhone, setPhone] = useState("")
+  const [isOTP, setOTP] = useState<any>(null)
+  const [isValPhone, setValPhone] = useState<any>(null)
+  const [isUser, setUser] = useState<any>(null)
+  const [isVerif, setVerif] = useState(false)
+  const [isLoading, setLoading] = useState(false)
+
+  async function onLogin() {
+    if (isPhone == "")
+      return toast.error('Please fill in completely')
+    const cek = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ phone: isPhone })
+    })
+    const json = await cek.json()
+    console.log(json)
+
+    const code = Math.floor(Math.random() * 1000) + 1000
+
+    setLoading(true)
+    const res = await fetch(`https://wa.wibudev.com/code?nom=${json.phone}&text=${code}`).then(
+      async (res) => {
+        if (res.status == 200) {
+          setValPhone(json.phone)
+          setOTP(code)
+          setUser(json.id)
+          setVerif(true)
+          setLoading(false)
+          toast.success('OTP sent successfully')
+        } else {
+          toast.error('OTP not sent')
+          setLoading(false)
+        }
+        console.log("code", code)
+      }
+    )
+
+
   }
-  
+
+  if (isVerif) return <ViewVerification otp={isOTP} phone={isValPhone} user={isUser} />
+
   return (
     <>
       <Box p={10}>
         <LayoutLogin>
           <Stack pt={30}>
-            <Box p={10}>
+            <Box p={10} ref={focusTrapRef}>
               <TextInput
                 styles={{
                   input: {
@@ -43,6 +87,7 @@ function ViewLogin() {
                 radius={30}
                 leftSection={<Text>+62</Text>}
                 placeholder="XXX XXX XXX"
+                onChange={(val) => { setPhone(val.target.value) }}
               />
               <Text fz={10} mt={10} c={WARNA.biruTua}>
                 {textInfo}
@@ -62,7 +107,10 @@ function ViewLogin() {
                   size="md"
                   radius={30}
                   fullWidth
-                  onClick={onMasuk}
+                  loading={isLoading}
+                  onClick={() => {
+                    onLogin()
+                  }}
                 >
                   MASUK
                 </Button>

src/module/auth/varification/view/view_verification.tsx

@@ -1,16 +1,54 @@
 "use client";
 import { LayoutLogin, WARNA } from "@/module/_global";
-import { Box, Button, PinInput, Stack, Text, Title } from "@mantine/core";
+import { IVerification } from "@/types";
+import { Anchor, Box, Button, Group, PinInput, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
 
-export default function ViewVerification() {
-  const router = useRouter();
+export default function ViewVerification({ phone, otp, user }: IVerification) {
+  const router = useRouter()
+  const [isOTP, setOTP] = useState(otp)
+  const [inputOTP, setInputOTP] = useState<any>()
+  const [isLoading, setLoading] = useState(false)
 
-  function onNext() {
-    // router.push("/welcome");
-    window.location.href = "/welcome"
+  async function onResend() {
+    const code = Math.floor(Math.random() * 1000) + 1000
+
+    const res = await fetch(`https://wa.wibudev.com/code?nom=${phone}&text=${code}`)
+      .then(
+        async (res) => {
+          if (res.status == 200) {
+            toast.success('Verification code has been sent')
+            setOTP(code)
+          } else {
+            toast.error('Error')
+          }
+        }
+      );
   }
+
+  async function getVerification() {
+    setLoading(true)
+    if (isOTP == inputOTP) {
+      setLoading(false)
+      const res = await fetch('/api/auth/set-cookies', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ user: user })
+      })
+      router.push('/welcome')
+      toast.success("Verification code is correct")
+      setLoading(false)
+    } else {
+      toast.error("Verification code is incorrect")
+      setLoading(false)
+    }
+  }
+
+
   return (
     <>
       <Box p={10}>
@@ -24,7 +62,7 @@ export default function ViewVerification() {
                 Masukkan kode yang kami kirimkan melalui WhatsApp
               </Text>
               <Text fz={12} c={WARNA.biruTua} fw={"bold"}>
-                +6287701790942
+                {phone}
               </Text>
               <Box pt={30}>
                 <PinInput
@@ -39,6 +77,9 @@ export default function ViewVerification() {
                       borderColor: WARNA.biruTua,
                     },
                   }}
+                  onChange={(val) => {
+                    setInputOTP(val)
+                  }}
                 />
               </Box>
               <Box mt={40}>
@@ -48,11 +89,22 @@ export default function ViewVerification() {
                   size="md"
                   radius={30}
                   fullWidth
-                  onClick={onNext}
+                  onClick={() => { getVerification() }}
                 >
                   Lanjut
                 </Button>
               </Box>
+              <Group justify="center" >
+                <Text fz={12} c={WARNA.biruTua}>
+                  Didnt receive a code ? {""}
+                  <Anchor c={WARNA.biruTua}
+                    fz={12}
+                    onClick={() => { onResend() }}
+                  >
+                    Resend
+                  </Anchor>
+                </Text>
+              </Group>
             </Box>
           </Stack>
         </LayoutLogin>