wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix API

Browse Source 
deskripsi:
- api login , validasi, hapus code otp
This commit is contained in:
Bagasbanuna02
2025-02-05 10:35:33 +08:00
parent 46d49992b4
commit 7c04d85134
18 changed files with 442 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/app_modules/auth/_lib/api_fetch_auth.ts
View File

@@ -1,4 +1,9 @@
export { apiFetchLogin };
export {
apiFetchLogin,
apiGetCheckCodeOtp,
apiPostVerifikasiCodeOtp,
apiDeleteAktivasiKodeOtpByNomor,
};
const apiFetchLogin = async ({ nomor }: { nomor: string }) => {
const respone = await fetch("/api/auth/login", {
@@ -11,3 +16,33 @@ const apiFetchLogin = async ({ nomor }: { nomor: string }) => {
return await respone.json().catch(() => null);
};
const apiGetCheckCodeOtp = async ({ id }: { id: string }) => {
const respone = await fetch(`/api/auth/check/${id}`);
return await respone.json().catch(() => null);
};
const apiPostVerifikasiCodeOtp = async ({ nomor }: { nomor: string }) => {
const respone = await fetch("/api/auth/validasi", {
method: "POST",
body: JSON.stringify({ nomor: nomor }),
headers: {
"Content-Type": "application/json",
},
});
return await respone.json().catch(() => null);
};
const apiDeleteAktivasiKodeOtpByNomor = async ({
nomor,
}: {
nomor: string;
}) => {
const respone = await fetch(`/api/auth/delete/${nomor}`, {
method: "DELETE",
});
return await respone.json().catch(() => null);
};

134
src/app_modules/auth/register/view.tsx
View File

@@ -5,7 +5,7 @@ import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_in
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import { Button, Stack, Text, TextInput, Title } from "@mantine/core";
import { Button, Center, Stack, Text, TextInput, Title } from "@mantine/core";
import { useFocusTrap, useShallowEffect } from "@mantine/hooks";
import { IconUserCircle } from "@tabler/icons-react";
import _ from "lodash";
@@ -14,6 +14,8 @@ import { useState } from "react";
import { auth_funDeleteAktivasiKodeOtpByNomor } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
import Register_SkeletonView from "./skeleton";
import { clientLogger } from "@/util/clientLogger";
import { apiGetCheckCodeOtp } from "../_lib/api_fetch_auth";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function Register() {
const router = useRouter();
@@ -39,10 +41,16 @@ export default function Register() {
kodeId: string;
onSetData: any;
}) {
const res = await fetch(`/api/auth/check?id=${kodeId}`);
const result = await res.json();
onSetData(result.nomor);
try {
const respone = await apiGetCheckCodeOtp({ id: kodeId });
if (respone) {
onSetData(respone.nomor);
}
} catch (error) {
clientLogger.error("Error onCheckAuthCode:", error);
}
// const res = await fetch(`/api/auth/check?id=${kodeId}`);
// const result = await res.json();
}
async function onRegistarsi() {
@@ -102,71 +110,75 @@ export default function Register() {
return (
<>
<UIGlobal_LayoutDefault>
{nomor == "" ? (
<Register_SkeletonView />
) : (
<Stack h={"100vh"} align="center" justify="center" spacing={50}>
<Title order={2} c={MainColor.yellow}>
REGISTRASI
</Title>
<Stack h={"100vh"} align="center" justify="center" spacing={50}>
<Title order={2} c={MainColor.yellow}>
REGISTRASI
</Title>
<IconUserCircle size={100} color={MainColor.white} />
<IconUserCircle size={100} color={MainColor.white} />
<Stack spacing={"sm"} w={300}>
<Stack spacing={"sm"} w={300}>
<Stack spacing={0}>
<Text align="center" c={MainColor.white}>
Anda akan terdaftar dengan nomor berikut{" "}
<Text inherit span fw={"bold"}>
Anda akan terdaftar dengan nomor
</Text>
{nomor == "" ? (
<Center>
<CustomSkeleton height={20} w={150} />
</Center>
) : (
<Text align="center" c={MainColor.white} fw={"bold"}>
+{nomor}
</Text>
</Text>
<TextInput
ref={focusTrapRef}
placeholder="Masukan Username"
maxLength={50}
error={
value.length > 0 && value.length < 5 ? (
<ComponentGlobal_ErrorInput text="Minimal 5 karakter !" />
) : _.values(value).includes(" ") ? (
<Stack spacing={5}>
<ComponentGlobal_ErrorInput text="Tidak boleh ada space" />
<ComponentGlobal_ErrorInput text="Sambungkan huruf meggunakan karakter _" />
</Stack>
) : isValue ? (
<ComponentGlobal_ErrorInput text="Masukan username anda" />
) : (
""
)
)}
</Stack>
<TextInput
ref={focusTrapRef}
placeholder="Masukan Username"
maxLength={50}
error={
value.length > 0 && value.length < 5 ? (
<ComponentGlobal_ErrorInput text="Minimal 5 karakter !" />
) : _.values(value).includes(" ") ? (
<Stack spacing={5}>
<ComponentGlobal_ErrorInput text="Tidak boleh ada space" />
<ComponentGlobal_ErrorInput text="Sambungkan huruf meggunakan karakter _" />
</Stack>
) : isValue ? (
<ComponentGlobal_ErrorInput text="Masukan username anda" />
) : (
""
)
}
onChange={(val) => {
val.currentTarget.value.length > 0 ? setIsValue(false) : "";
setValue(val.currentTarget.value);
}}
/>
<Stack>
<Button
disabled={
value === "" ||
value.length < 5 ||
_.values(value).includes(" ")
}
onChange={(val) => {
val.currentTarget.value.length > 0 ? setIsValue(false) : "";
setValue(val.currentTarget.value);
loading={loading ? true : false}
loaderPosition="center"
radius={"md"}
compact
h={40}
c={"black"}
bg={MainColor.yellow}
color={"yellow"}
onClick={() => {
onRegistarsi();
}}
/>
<Stack>
<Button
disabled={
value === "" ||
value.length < 5 ||
_.values(value).includes(" ")
}
loading={loading ? true : false}
loaderPosition="center"
radius={"md"}
compact
h={40}
c={"black"}
bg={MainColor.yellow}
color={"yellow"}
onClick={() => {
onRegistarsi();
}}
>
<Text>DAFTAR</Text>
</Button>
</Stack>
>
<Text>DAFTAR</Text>
</Button>
</Stack>
</Stack>
)}
</Stack>
</UIGlobal_LayoutDefault>
</>
);

285
src/app_modules/auth/validasi/view.tsx
View File

@@ -10,8 +10,11 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
import {
ActionIcon,
Box,
Button,
Center,
Group,
Loader,
PinInput,
Stack,
@@ -26,6 +29,14 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_glo
import { auth_funDeleteAktivasiKodeOtpByNomor } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
import Validasi_SkeletonView from "./skeleton";
import { clientLogger } from "@/util/clientLogger";
import { IconChevronLeft } from "@tabler/icons-react";
import _ from "lodash";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import {
apiDeleteAktivasiKodeOtpByNomor,
apiGetCheckCodeOtp,
apiPostVerifikasiCodeOtp,
} from "../_lib/api_fetch_auth";
export default function Validasi() {
const router = useRouter();
@@ -61,20 +72,24 @@ export default function Validasi() {
}, [triggerOtp]);
async function onCheckAuthCode({ kodeId }: { kodeId: string }) {
const res = await fetch(`/api/auth/check?id=${kodeId}`);
const result = await res.json();
setData({
nomor: result.nomor,
code: result.otp,
});
try {
const respone = await apiGetCheckCodeOtp({ id: kodeId });
if (respone) {
setData({
nomor: respone.nomor,
code: respone.otp,
});
}
} catch (error) {
clientLogger.error("Error onCheckAuthCode:", error);
}
}
useEffect(() => {
counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
}, [counter]);
async function onVerifikasi() {
async function onSubmitVerifikasi() {
if (!inputCode)
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Kode");
if (data.code != inputCode)
@@ -82,59 +97,77 @@ export default function Validasi() {
try {
setLoading(true);
const res = await fetch("/api/auth/validasi", {
method: "POST",
body: JSON.stringify({
nomor: data.nomor,
}),
});
const respone = await apiPostVerifikasiCodeOtp({ nomor: data.nomor });
const result = await res.json();
if (respone && respone.success == true) {
if (respone.roleId == "1") {
ComponentGlobal_NotifikasiBerhasil(respone.message);
localStorage.removeItem("hipmi_auth_code_id");
if (res.status === 200 && result.roleId == "1") {
ComponentGlobal_NotifikasiBerhasil(result.message);
localStorage.removeItem("hipmi_auth_code_id");
await auth_funDeleteAktivasiKodeOtpByNomor({
nomor: data.nomor,
});
router.push(RouterHome.main_home, { scroll: false });
} else if (respone.roleId != "1") {
ComponentGlobal_NotifikasiBerhasil("Admin berhasil login");
localStorage.removeItem("hipmi_auth_code_id");
router.push(RouterHome.main_home, { scroll: false });
return;
}
router.push(RouterAdminDashboard.splash_admin, { scroll: false });
}
if (res.status === 200 && result.roleId != "1") {
ComponentGlobal_NotifikasiBerhasil("Admin Logged in");
localStorage.removeItem("hipmi_auth_code_id");
await auth_funDeleteAktivasiKodeOtpByNomor({
nomor: data.nomor,
});
router.push(RouterAdminDashboard.splash_admin, { scroll: false });
return;
}
if (res.status === 404) {
setLoading(false);
try {
const responeDelete = await apiDeleteAktivasiKodeOtpByNomor({
nomor: data.nomor,
});
} catch (error) {
clientLogger.error("Error apiDeleteAktivasiKodeOtpByNomor:", error);
}
} else if (respone && respone.success == false) {
router.push("/register", { scroll: false });
ComponentGlobal_NotifikasiBerhasil(result.message);
return;
ComponentGlobal_NotifikasiBerhasil(respone.message);
}
if (res.status === 400) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan(result.message);
return;
}
// if (respone.status === 200 && result.roleId == "1") {
// ComponentGlobal_NotifikasiBerhasil(result.message);
// localStorage.removeItem("hipmi_auth_code_id");
// await auth_funDeleteAktivasiKodeOtpByNomor({
// nomor: data.nomor,
// });
if (res.status == 500) {
setLoading(false);
ComponentGlobal_NotifikasiGagal(result.message);
return;
}
// router.push(RouterHome.main_home, { scroll: false });
// return;
// }
// if (respone.status === 200 && result.roleId != "1") {
// ComponentGlobal_NotifikasiBerhasil("Admin Logged in");
// localStorage.removeItem("hipmi_auth_code_id");
// await auth_funDeleteAktivasiKodeOtpByNomor({
// nomor: data.nomor,
// });
// router.push(RouterAdminDashboard.splash_admin, { scroll: false });
// return;
// }
// if (respone.status === 404) {
// setLoading(false);
// router.push("/register", { scroll: false });
// ComponentGlobal_NotifikasiBerhasil(result.message);
// return;
// }
// if (respone.status === 400) {
// setLoading(false);
// ComponentGlobal_NotifikasiPeringatan(result.message);
// return;
// }
// if (respone.status == 500) {
// setLoading(false);
// ComponentGlobal_NotifikasiGagal(result.message);
// return;
// }
} catch (error) {
setLoading(false);
clientLogger.error("Error validasi:", error);
}
}
}
async function onBack() {
@@ -176,8 +209,6 @@ export default function Validasi() {
}
}
// console.log(data.code);
return (
<>
<UIGlobal_LayoutDefault>
@@ -194,84 +225,88 @@ export default function Validasi() {
<IconChevronLeft color="white" />
</ActionIcon>
</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 spacing={"md"} align="center">
<Stack spacing={0} align="center">
<Text c={MainColor.white}>Masukan 4 digit kode otp</Text>
<Text c={MainColor.white}>
Yang dikirim ke{" "}
<Text span inherit fw={"bold"}>
{" "}
<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={MainColor.white}>Masukan 4 digit kode otp</Text>
<Group position="center" spacing={"xs"}>
<Text c={MainColor.white}>Yang dikirim ke</Text>
{data && data.nomor !== "" ? (
<Text fw={"bold"} c={MainColor.white}>
+{data.nomor}
</Text>
</Text>
</Stack>
<Center>
<PinInput
size="xl"
type={"number"}
ref={focusTrapRef}
spacing={"md"}
mt={"md"}
styles={{ input: { backgroundColor: MainColor.white } }}
onChange={(val) => {
setInputOtp(val);
}}
/>
</Center>
<Stack h={"5vh"} align="center" justify="center">
<Text fs="italic" c={MainColor.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>
) : (
<CustomSkeleton height={15} radius={"xl"} width={150} />
)}
</Group>
</Stack>
<Center>
<PinInput
size="xl"
type={"number"}
ref={focusTrapRef}
spacing={"md"}
mt={"md"}
styles={{ input: { backgroundColor: MainColor.white } }}
onChange={(val) => {
setInputOtp(val);
}}
/>
</Center>
<Stack h={"5vh"} align="center" justify="center">
<Text fs="italic" c={MainColor.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>
<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={() => {
data.nomor == "" && data.code == ""
? null
: onSubmitVerifikasi();
}}
>
<Text>VERIFIKASI</Text>
</Button>
</Stack>
{/* {data.nomor == "" && data.code == "" ? <Validasi_SkeletonView /> : ""} */}
</Stack>
</UIGlobal_LayoutDefault>
</>