392 lines
12 KiB
TypeScript
392 lines
12 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import Cookies from "js-cookie";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { useForm, SubmitHandler } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { cn, setCookiesEncrypt } from "@/lib/utils";
|
|
import { Loader2 } from "lucide-react";
|
|
import { getProfile, login, requestOTP } from "@/service/auth";
|
|
import { toast } from "sonner";
|
|
import { useRouter } from "@/components/navigation";
|
|
import { warning } from "@/lib/swal";
|
|
import { Link } from "@/i18n/routing";
|
|
import { useTranslations } from "next-intl";
|
|
import {
|
|
InputOTP,
|
|
InputOTPGroup,
|
|
InputOTPSeparator,
|
|
InputOTPSlot,
|
|
} from "@/components/ui/input-otp";
|
|
import { error, loading } from "@/config/swal";
|
|
|
|
// Schema validasi menggunakan zod
|
|
const schema = z.object({
|
|
username: z.string().min(1, { message: "Judul diperlukan" }),
|
|
password: z
|
|
.string()
|
|
.min(4, { message: "Password must be at least 4 characters." }),
|
|
});
|
|
|
|
// Tipe untuk form values
|
|
type LoginFormValues = {
|
|
username: string;
|
|
password: string;
|
|
};
|
|
|
|
const LoginForm = () => {
|
|
const [isPending, startTransition] = React.useTransition();
|
|
const router = useRouter();
|
|
const [passwordType, setPasswordType] = React.useState("password");
|
|
const t = useTranslations("LandingPage");
|
|
|
|
const [isOtpStep, setIsOtpStep] = useState(false);
|
|
const [otpValue, setOtpValue] = useState("");
|
|
const [userIdentity] = useState();
|
|
const [email, setEmail] = useState();
|
|
const [category, setCategory] = useState("5");
|
|
|
|
const handleSignInClick = () => {
|
|
handleSendOTP();
|
|
setIsOtpStep(true);
|
|
};
|
|
|
|
const [otp1, setOtp1] = useState();
|
|
const [otp2, setOtp2] = useState();
|
|
const [otp3, setOtp3] = useState();
|
|
const [otp4, setOtp4] = useState();
|
|
const [otp5, setOtp5] = useState();
|
|
const [otp6, setOtp6] = useState();
|
|
|
|
const togglePasswordType = () => {
|
|
setPasswordType((prevType) =>
|
|
prevType === "password" ? "text" : "password"
|
|
);
|
|
};
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<LoginFormValues>({
|
|
resolver: zodResolver(schema),
|
|
mode: "all",
|
|
});
|
|
|
|
const handleTypeOTP = (event: any) => {
|
|
const { form } = event.target;
|
|
const index = [...form].indexOf(event.target);
|
|
form.elements[index + 1].focus();
|
|
event.preventDefault();
|
|
};
|
|
|
|
// const handleNextStep = () => {
|
|
// setIsOtpStep(true);
|
|
// };
|
|
|
|
const handleSendOTP = async () => {
|
|
console.log(userIdentity, email);
|
|
|
|
console.log("UMUM");
|
|
if (email != "") {
|
|
const data = {
|
|
memberIdentity: null,
|
|
email: "",
|
|
category,
|
|
};
|
|
|
|
// loading();
|
|
const response = await requestOTP(data);
|
|
|
|
if (response.error) {
|
|
error(response.message);
|
|
return false;
|
|
}
|
|
|
|
close();
|
|
}
|
|
};
|
|
|
|
// Fungsi submit form
|
|
const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
|
|
try {
|
|
// const response = null;
|
|
const response = await login({
|
|
...data,
|
|
grantType: "password",
|
|
clientId: "mediahub-app",
|
|
});
|
|
|
|
console.log("LOGIN: ", response);
|
|
|
|
if (response?.error) {
|
|
toast.error("Username / Password Tidak Sesuai");
|
|
} else {
|
|
const { access_token } = response?.data;
|
|
const { refresh_token } = response?.data;
|
|
const dateTime = new Date();
|
|
const newTime = dateTime.getTime() + 10 * 60 * 1000;
|
|
|
|
Cookies.set("access_token", access_token, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("refresh_token", refresh_token, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("time_refresh", new Date(newTime).toISOString(), {
|
|
expires: 1,
|
|
});
|
|
|
|
Cookies.set("is_first_login", String(true), {
|
|
secure: true,
|
|
sameSite: "strict",
|
|
});
|
|
const profile = await getProfile(access_token);
|
|
console.log("PROFILE : ", profile?.data?.data);
|
|
|
|
if (
|
|
profile?.data?.data?.isInternational == true ||
|
|
profile?.data?.data?.isActive == false ||
|
|
profile?.data?.data?.isDelete == true
|
|
) {
|
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
|
Cookies.remove(cookieName);
|
|
});
|
|
warning(
|
|
"Akun Anda tidak dapat digunakan untuk masuk ke MediaHub Polri",
|
|
"/auth/login"
|
|
);
|
|
} else {
|
|
Cookies.set("home_path", profile?.data?.data?.homePath, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set(
|
|
"profile_picture",
|
|
profile?.data?.data?.profilePictureUrl,
|
|
{
|
|
expires: 1,
|
|
}
|
|
);
|
|
Cookies.set("state", profile?.data?.data?.userLevel?.name, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("uie", profile?.data?.data?.id, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("urie", profile?.data?.data?.roleId, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("urne", profile?.data?.data?.role?.name, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("ulie", profile?.data?.data?.userLevel?.id, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt(
|
|
"uplie",
|
|
profile?.data?.data?.userLevel?.parentLevelId,
|
|
{
|
|
expires: 1,
|
|
}
|
|
);
|
|
setCookiesEncrypt(
|
|
"ulne",
|
|
profile?.data?.data?.userLevel?.levelNumber,
|
|
{
|
|
expires: 1,
|
|
}
|
|
);
|
|
setCookiesEncrypt("ufne", profile?.data?.data?.fullname, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("ulnae", profile?.data?.data?.userLevel?.name, {
|
|
expires: 1,
|
|
});
|
|
setCookiesEncrypt("uinse", profile?.data?.data?.instituteId, {
|
|
expires: 1,
|
|
});
|
|
console.log("ssaddd", profile?.data?.data?.roleId);
|
|
if (
|
|
Number(profile?.data?.data?.roleId) == 2 ||
|
|
Number(profile?.data?.data?.roleId) == 3 ||
|
|
Number(profile?.data?.data?.roleId) == 4 ||
|
|
Number(profile?.data?.data?.roleId) == 9 ||
|
|
Number(profile?.data?.data?.roleId) == 10 ||
|
|
Number(profile?.data?.data?.roleId) == 11 ||
|
|
Number(profile?.data?.data?.roleId) == 12 ||
|
|
Number(profile?.data?.data?.roleId) == 18 ||
|
|
Number(profile?.data?.data?.roleId) == 19
|
|
) {
|
|
if (profile?.data?.data?.roleId === 18) {
|
|
window.location.href = "/in/dashboard/executive";
|
|
// router.push('/admin/dashboard');
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
} else if (
|
|
profile?.data?.data?.userLevel?.id == 761 ||
|
|
profile?.data?.data?.userLevel?.parentLevelId == 761
|
|
) {
|
|
window.location.href = "/in/welcome";
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
} else {
|
|
window.location.href = "/in/dashboard";
|
|
// router.push('/admin/dashboard');
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
}
|
|
} else {
|
|
window.location.href = "/";
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
} catch (err: any) {
|
|
toast.error(err.message || "An unexpected error occurred.");
|
|
}
|
|
// startTransition( () => {
|
|
|
|
// });
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
|
|
{!isOtpStep && (
|
|
<>
|
|
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
|
<h4 className="font-semibold text-3xl text-left">
|
|
{t("logInPlease")}
|
|
</h4>
|
|
<div className="text-default-500 text-base">
|
|
{t("acc")} <span className="text-red-500">{t("reg")}</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username" className="font-medium text-default-600">
|
|
Username
|
|
</Label>
|
|
<Input
|
|
size="lg"
|
|
disabled={isPending}
|
|
{...register("username")}
|
|
id="username"
|
|
type="text"
|
|
className={cn("", {
|
|
"border-destructive": errors.username,
|
|
})}
|
|
/>
|
|
{errors.username?.message && (
|
|
<div className="text-destructive mt-2 text-sm">
|
|
{errors.username.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-3.5 space-y-2">
|
|
<Label htmlFor="password" className="font-medium text-default-600">
|
|
{t("password")}
|
|
</Label>
|
|
<div className="relative">
|
|
<Input
|
|
size="lg"
|
|
disabled={isPending}
|
|
{...register("password")}
|
|
id="password"
|
|
type="password"
|
|
className="peer"
|
|
/>
|
|
</div>
|
|
{errors.password?.message && (
|
|
<div className="text-destructive mt-2 text-sm">
|
|
{errors.password.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<div className="flex gap-2 items-center">
|
|
<Checkbox id="checkbox" defaultChecked />
|
|
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
|
</div>
|
|
<Link
|
|
href="/auth/forgot-password"
|
|
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
|
>
|
|
{t("forgotPass")}
|
|
</Link>
|
|
</div>
|
|
<Button fullWidth onClick={handleSignInClick}>
|
|
Selanjutnya
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{isOtpStep && (
|
|
<>
|
|
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
|
<h4 className="font-semibold text-3xl text-left">
|
|
{t("pleaseEnterOtp")}
|
|
</h4>
|
|
</div>
|
|
<div className="flex justify-center mb-6">
|
|
<InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot
|
|
index={0}
|
|
onChange={(e: any) => setOtp1(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
<InputOTPSlot
|
|
index={1}
|
|
onChange={(e: any) => setOtp2(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot
|
|
index={2}
|
|
onChange={(e: any) => setOtp3(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
<InputOTPSlot
|
|
index={3}
|
|
onChange={(e: any) => setOtp4(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot
|
|
index={4}
|
|
onChange={(e: any) => setOtp5(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
<InputOTPSlot
|
|
index={5}
|
|
onChange={(e: any) => setOtp6(e.target.value)}
|
|
onKeyUp={handleTypeOTP}
|
|
/>
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
<Button fullWidth className="bg-red-500">
|
|
Sign in
|
|
</Button>
|
|
</>
|
|
)}
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default LoginForm;
|