511 lines
15 KiB
TypeScript
511 lines
15 KiB
TypeScript
"use client";
|
|
import { Input } from "@heroui/input";
|
|
import React, { useEffect, useState } from "react";
|
|
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
|
import { Button } from "@heroui/button";
|
|
import Link from "next/link";
|
|
import Cookies from "js-cookie";
|
|
import { close, error, loading } from "@/config/swal";
|
|
import {
|
|
checkUsernames,
|
|
emailValidation,
|
|
getProfile,
|
|
otpRequest,
|
|
otpValidation,
|
|
otpValidationLogin,
|
|
postSignIn,
|
|
savePassword,
|
|
setupEmail,
|
|
updateProfile,
|
|
} from "@/services/master-user";
|
|
import { useRouter } from "next/navigation";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import { saveActivity } from "@/services/activity-log";
|
|
import PasswordChecklist from "react-password-checklist";
|
|
import { Image, InputOtp } from "@heroui/react";
|
|
import { getUnixTimestamp } from "@/utils/global";
|
|
|
|
export default function Login() {
|
|
const accessToken = Cookies.get("access_token");
|
|
const router = useRouter();
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
|
|
const [oldEmail, setOldEmail] = useState("");
|
|
const [newEmail, setNewEmail] = useState("");
|
|
const [passwordSetup, setPasswordSetup] = useState("");
|
|
const [confPasswordSetup, setConfPasswordSetup] = useState("");
|
|
|
|
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
const [needOtp, setNeedOtp] = useState(false);
|
|
const [isFirstLogin, setFirstLogin] = useState(false);
|
|
const [otpValue, setOtpValue] = useState("");
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [accessData, setAccessData] = useState<any>();
|
|
const [profile, setProfile] = useState<any>();
|
|
const [isValidEmail, setIsValidEmail] = useState(false);
|
|
const [isResetPassword, setIsResetPassword] = useState(false);
|
|
const [checkUsernameValue, setCheckUsernameValue] = useState("");
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
useEffect(() => {
|
|
if (accessToken) {
|
|
router.push("/admin/dashboard");
|
|
}
|
|
}, []);
|
|
|
|
const setValUsername = (e: any) => {
|
|
const uname = e.replaceAll(/[^\w.-]/g, "");
|
|
setUsername(uname.toLowerCase());
|
|
};
|
|
|
|
const onSubmit = async () => {
|
|
const data = {
|
|
username: username,
|
|
password: password,
|
|
};
|
|
|
|
if (!username || !password) {
|
|
error("Username & Password Wajib Diisi !");
|
|
} else {
|
|
// login dengan otp
|
|
loading();
|
|
const response: any = await emailValidation(data);
|
|
if (response?.error) {
|
|
console.log("error", response);
|
|
if (response?.message?.messages[0]?.includes("failed to send mail")) {
|
|
error("Gagal Mengirim OTP");
|
|
return false;
|
|
}
|
|
|
|
if (response?.message?.messages[0]?.includes("username")) {
|
|
error("Username / Password Tidak Sesuai");
|
|
return false;
|
|
}
|
|
error("Unknown Error");
|
|
return false;
|
|
}
|
|
close();
|
|
if (response?.data?.messages[0] === "Continue to setup email") {
|
|
setFirstLogin(true);
|
|
} else {
|
|
setNeedOtp(true);
|
|
}
|
|
|
|
// login tanpa otp
|
|
// loading();
|
|
// const response = await postSignIn(data);
|
|
// if (response?.error) {
|
|
// error("Username / Password Tidak Sesuai");
|
|
// } else {
|
|
// const profile = await getProfile(response?.data?.data?.access_token);
|
|
// const dateTime: any = new Date();
|
|
|
|
// const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
|
|
|
|
// Cookies.set("access_token", response?.data?.data?.access_token, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("time_refresh", newTime, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("is_first_login", "true", {
|
|
// secure: true,
|
|
// sameSite: "strict",
|
|
// });
|
|
// const resActivity = await saveActivity(
|
|
// {
|
|
// activityTypeId: 1,
|
|
// url: "https://kontenhumas.com/auth",
|
|
// userId: profile?.data?.data?.id,
|
|
// },
|
|
// accessData?.id_token
|
|
// );
|
|
// Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("uie", profile?.data?.data?.id, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("ufne", profile?.data?.data?.fullname, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("username", profile?.data?.data?.username, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("urie", profile?.data?.data?.userRoleId, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("ulne", profile?.data?.data?.userLevelId, {
|
|
// expires: 1,
|
|
// });
|
|
// // Cookies.set("urce", profile?.data?.data?.roleCode, {
|
|
// // expires: 1,
|
|
// // });
|
|
// Cookies.set("email", profile?.data?.data?.email, {
|
|
// expires: 1,
|
|
// });
|
|
// router.push("/admin/dashboard");
|
|
// Cookies.set("status", "login", {
|
|
// expires: 1,
|
|
// });
|
|
|
|
// close();
|
|
// }
|
|
}
|
|
};
|
|
|
|
const checkUsername = async () => {
|
|
const res = await checkUsernames(checkUsernameValue);
|
|
if (res?.error) {
|
|
error("Username tidak ditemukan");
|
|
return false;
|
|
}
|
|
MySwal.fire({
|
|
title: "",
|
|
text: "",
|
|
html: (
|
|
<>
|
|
<p>
|
|
Kami telah mengirimkan tautan untuk mengatur ulang kata sandi ke
|
|
email Anda
|
|
</p>
|
|
<p className="text-xs">
|
|
Apakah Anda sudah menerima emailnya? Jika belum, periksa folder spam
|
|
Anda
|
|
</p>
|
|
</>
|
|
),
|
|
icon: "info",
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "Oke",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
}
|
|
});
|
|
};
|
|
|
|
const submitOtp = async () => {
|
|
loading();
|
|
const validation = await otpValidationLogin({
|
|
username: username,
|
|
otpCode: otpValue,
|
|
});
|
|
if (validation?.error) {
|
|
error("OTP Tidak Sesuai");
|
|
return false;
|
|
}
|
|
|
|
const response = await postSignIn({
|
|
username: username,
|
|
password: password,
|
|
});
|
|
|
|
const resProfile = await getProfile(response?.data?.data?.access_token);
|
|
const profile = resProfile?.data?.data;
|
|
|
|
const dateTime: any = new Date();
|
|
|
|
const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
|
|
|
|
Cookies.set("access_token", response?.data?.data?.access_token, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("time_refresh", newTime, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("is_first_login", "true", {
|
|
secure: true,
|
|
sameSite: "strict",
|
|
});
|
|
const resActivity = await saveActivity(
|
|
{
|
|
activityTypeId: 1,
|
|
url: "https://new-humas.polri.go.id/auth",
|
|
userId: profile?.data?.data?.id,
|
|
},
|
|
accessData?.id_token
|
|
);
|
|
Cookies.set("profile_picture", profile?.profilePictureUrl, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("uie", profile?.id, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("ufne", profile?.fullname, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("ulie", profile?.userLevelGroup, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("username", profile?.username, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("urie", profile?.userRoleId, {
|
|
expires: 1,
|
|
});
|
|
// Cookies.set("roleName", profile?.roleName, {
|
|
// expires: 1,
|
|
// });
|
|
// Cookies.set("masterPoldaId", profile?.masterPoldaId, {
|
|
// expires: 1,
|
|
// });
|
|
Cookies.set("ulne", profile?.userLevelId, {
|
|
expires: 1,
|
|
});
|
|
// Cookies.set("urce", profile?.data?.data?.roleCode, {
|
|
// expires: 1,
|
|
// });
|
|
Cookies.set("email", profile?.email, {
|
|
expires: 1,
|
|
});
|
|
router.push(`/admin/dashboard?timestamp=${getUnixTimestamp()}`);
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
close();
|
|
};
|
|
|
|
const submitCheckEmail = async () => {
|
|
const req = {
|
|
oldEmail: oldEmail,
|
|
newEmail: newEmail,
|
|
username: username,
|
|
password: password,
|
|
};
|
|
|
|
const res = await setupEmail(req);
|
|
if (res?.error) {
|
|
if (res.message?.messages[0]) {
|
|
error(res.message?.messages[0]);
|
|
} else {
|
|
error(res?.message);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
close();
|
|
setNeedOtp(true);
|
|
setFirstLogin(false);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-row h-full">
|
|
<div className="h-screen hidden md:block md:w-3/5">
|
|
<Image
|
|
src="/headerbanner1.png"
|
|
alt="login-image"
|
|
className="!w-full !h-screen rounded-none object-cover"
|
|
width={1980}
|
|
height={1080}
|
|
/>
|
|
<Link href="/" className="absolute left-5 top-5">
|
|
<Image
|
|
width={480}
|
|
height={480}
|
|
alt="icon"
|
|
src="/divhumas.png"
|
|
className="w-[180px] !h-[180px]"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
{isFirstLogin ? (
|
|
<div className="bg-[#1F1A17] w-full md:w-2/5 p-8 md:px-24 justify-center flex flex-col">
|
|
<p className="text-[72px] text-[#DD8306] font-semibold mb-10">
|
|
Setting Account
|
|
</p>
|
|
<p className="my-2 text-white">Email Lama</p>
|
|
<Input
|
|
isRequired
|
|
type="email"
|
|
label=""
|
|
placeholder=""
|
|
className="my-2"
|
|
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
|
|
value={oldEmail}
|
|
onValueChange={setOldEmail}
|
|
/>
|
|
<p className="my-2 text-white">Email Baru</p>
|
|
<Input
|
|
isRequired
|
|
type="email"
|
|
label=""
|
|
placeholder=""
|
|
className="my-2"
|
|
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
|
|
value={newEmail}
|
|
onValueChange={setNewEmail}
|
|
/>
|
|
<Button
|
|
size="lg"
|
|
className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
|
|
onPress={submitCheckEmail}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
) : needOtp ? (
|
|
<div className="bg-[#1F1A17] w-full md:w-2/5 p-8 md:px-24 justify-center flex flex-col">
|
|
<p className="text-[72px] text-[#DD8306] font-semibold mb-10">
|
|
Submit OTP
|
|
</p>
|
|
<p className="my-2 text-white">OTP</p>
|
|
<InputOtp length={6} value={otpValue} onValueChange={setOtpValue} />
|
|
|
|
<Button
|
|
size="lg"
|
|
className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
|
|
onPress={submitOtp}
|
|
>
|
|
Submit
|
|
</Button>
|
|
<div className="flex justify-between md:justify-end my-2 text-white">
|
|
<Link
|
|
href={`/`}
|
|
className="text-[#DD8306] cursor-pointer md:hidden"
|
|
>
|
|
Beranda
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
) : isResetPassword ? (
|
|
<div className="bg-[#1F1A17] w-full md:w-2/5 p-8 md:px-24 justify-center flex flex-col">
|
|
<p className="text-[72px] text-[#DD8306] font-semibold mb-10">
|
|
Reset Password
|
|
</p>
|
|
<p className="my-2 text-white">Username</p>
|
|
<Input
|
|
isRequired
|
|
type="text"
|
|
label=""
|
|
placeholder=""
|
|
className="my-2"
|
|
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
|
|
value={checkUsernameValue}
|
|
onChange={(e: any) => {
|
|
setCheckUsernameValue(e.target.value.trim());
|
|
}}
|
|
onPaste={(e: any) => {
|
|
setCheckUsernameValue(e.target.value.trim());
|
|
}}
|
|
onCopy={(e: any) => {
|
|
setCheckUsernameValue(e.target.value.trim());
|
|
}}
|
|
/>
|
|
|
|
<Button
|
|
size="lg"
|
|
className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
|
|
onPress={checkUsername}
|
|
isDisabled={checkUsernameValue == ""}
|
|
>
|
|
Check Username
|
|
</Button>
|
|
<div className="flex justify-between md:justify-end my-2 text-white">
|
|
<Link
|
|
href={`/`}
|
|
className="text-[#DD8306] cursor-pointer md:hidden"
|
|
>
|
|
Beranda
|
|
</Link>
|
|
|
|
<a
|
|
className="text-[#DD8306] cursor-pointer"
|
|
onClick={() => setIsResetPassword(false)}
|
|
>
|
|
Login
|
|
</a>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-[#1F1A17] w-full md:w-2/5 p-8 md:px-24 justify-center flex flex-col">
|
|
<p className="text-[72px] text-[#DD8306] font-semibold mb-10">
|
|
Login
|
|
</p>
|
|
<p className="my-2 text-white">Username</p>
|
|
<Input
|
|
isRequired
|
|
type="text"
|
|
label=""
|
|
placeholder=""
|
|
className="my-2"
|
|
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
|
|
value={username}
|
|
onChange={(e: any) => {
|
|
setValUsername(e.target.value.trim());
|
|
}}
|
|
onPaste={(e: any) => {
|
|
setValUsername(e.target.value.trim());
|
|
}}
|
|
onCopy={(e: any) => {
|
|
setValUsername(e.target.value.trim());
|
|
}}
|
|
/>
|
|
<p className="text-white my-2">Password</p>
|
|
<Input
|
|
isRequired
|
|
className="my-2"
|
|
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
|
|
endContent={
|
|
<button
|
|
className="focus:outline-none"
|
|
type="button"
|
|
onClick={toggleVisibility}
|
|
>
|
|
{isVisible ? (
|
|
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
) : (
|
|
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
)}
|
|
</button>
|
|
}
|
|
type={isVisible ? "text" : "password"}
|
|
label=""
|
|
placeholder=""
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
/>
|
|
|
|
<Button
|
|
size="lg"
|
|
className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
|
|
onPress={onSubmit}
|
|
>
|
|
Login
|
|
</Button>
|
|
<div className="flex justify-between md:justify-end my-2 text-white">
|
|
<Link
|
|
href={`/`}
|
|
className="text-[#DD8306] cursor-pointer md:hidden"
|
|
>
|
|
Beranda
|
|
</Link>
|
|
{/* <div>
|
|
<Checkbox color="warning"></Checkbox> Remember me
|
|
</div> */}
|
|
<a
|
|
className="text-[#DD8306] cursor-pointer"
|
|
onClick={() => setIsResetPassword(true)}
|
|
>
|
|
Reset Password
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|