291 lines
9.8 KiB
TypeScript
291 lines
9.8 KiB
TypeScript
"use client";
|
|
import { Input } from "@nextui-org/input";
|
|
import React, { useState } from "react";
|
|
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
|
import { Button } from "@nextui-org/button";
|
|
import Link from "next/link";
|
|
import Cookies from "js-cookie";
|
|
import { close, error, loading } from "@/config/swal";
|
|
import { getProfile, postSignIn } from "@/service/master-user";
|
|
import { useRouter } from "next/navigation";
|
|
import { HumasLayout } from "../layout/humas-layout";
|
|
import { Checkbox } from "@nextui-org/react";
|
|
|
|
export default function Login() {
|
|
const router = useRouter();
|
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
|
|
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const onSubmit = async () => {
|
|
const data = {
|
|
username: username,
|
|
password: password,
|
|
};
|
|
|
|
if (!username || !password) {
|
|
error("Username & Password Wajib Diisi !");
|
|
} else {
|
|
loading();
|
|
const response = await postSignIn(data);
|
|
if (response?.error) {
|
|
error("Username / Password Tidak Sesuai");
|
|
} else {
|
|
const access_token: any = response?.data?.data?.id_token;
|
|
const refresh_token: any = response?.data?.data?.refresh_token;
|
|
const dateTime: any = new Date();
|
|
const newTime: any = 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", newTime, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("is_first_login", "true", {
|
|
secure: true,
|
|
sameSite: "strict",
|
|
});
|
|
const profile = await getProfile();
|
|
console.log("PROFILE : ", profile?.data);
|
|
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("username", profile?.data?.data?.username, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("urie", profile?.data?.data?.roleId, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("roleName", profile?.data?.data?.roleName, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("ulne", profile?.data?.data?.roleLevelNumber, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("urce", profile?.data?.data?.roleCode, {
|
|
expires: 1,
|
|
});
|
|
Cookies.set("email", profile?.data?.data?.email, {
|
|
expires: 1,
|
|
});
|
|
|
|
close();
|
|
router.push("/admin/dashboard");
|
|
Cookies.set("status", "login", {
|
|
expires: 1,
|
|
});
|
|
}
|
|
}
|
|
// }
|
|
};
|
|
|
|
const setValUsername = (e: any) => {
|
|
const uname = e.replaceAll(/[^\w.-]/g, "");
|
|
setUsername(uname.toLowerCase());
|
|
};
|
|
|
|
return (
|
|
// <HumasLayout>
|
|
// <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
|
|
// <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
|
|
// <div className="text-xl font-bold">
|
|
// Selamat Datang di Portal Resmi Humas Polri
|
|
// </div>
|
|
// <div>
|
|
// <Input
|
|
// classNames={{
|
|
// input: ["w-full", "bg-transparent", "!text-black"],
|
|
// mainWrapper: ["w-full", "bg-transparent"],
|
|
// innerWrapper: ["bg-transparent"],
|
|
// label: ["!text-black", "font-semibold"],
|
|
// inputWrapper: [
|
|
// "bg-transparent",
|
|
// "dark:bg-transparent",
|
|
// "hover:bg-transparent",
|
|
// "dark:hover:bg-transparent",
|
|
// "group-data-[focused=true]:bg-transparent",
|
|
// "dark:group-data-[focused=true]:bg-transaparent",
|
|
// "group-data-[focused=false]:bg-transparent",
|
|
// "focus-within:!bg-transparent",
|
|
// ],
|
|
// }}
|
|
// isRequired
|
|
// type="text"
|
|
// label="Username"
|
|
// placeholder="Masukkan username anda!"
|
|
// variant="underlined"
|
|
// onChange={(e: any) => {
|
|
// setValUsername(e.target.value.trim());
|
|
// }}
|
|
// onPaste={(e: any) => {
|
|
// setValUsername(e.target.value.trim());
|
|
// }}
|
|
// onCopy={(e: any) => {
|
|
// setValUsername(e.target.value.trim());
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// <div>
|
|
// <Input
|
|
// classNames={{
|
|
// input: ["w-full", "bg-transparent", "!text-black"],
|
|
// mainWrapper: ["w-full", "bg-transparent"],
|
|
// innerWrapper: ["bg-transparent"],
|
|
// label: ["!text-black", "font-semibold"],
|
|
// inputWrapper: [
|
|
// "bg-transparent",
|
|
// "dark:bg-transparent",
|
|
// "hover:bg-transparent",
|
|
// "dark:hover:bg-transparent",
|
|
// "group-data-[focused=true]:bg-transparent",
|
|
// "dark:group-data-[focused=true]:bg-transaparent",
|
|
// "group-data-[focused=false]:bg-transparent",
|
|
// "focus-within:!bg-transparent",
|
|
// ],
|
|
// }}
|
|
// isRequired
|
|
// 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="Password"
|
|
// placeholder="Masukkan password anda"
|
|
// variant="underlined"
|
|
// onChange={(event) => setPassword(event.target.value)}
|
|
// />
|
|
// </div>
|
|
|
|
// <div>
|
|
// <Button
|
|
// size="lg"
|
|
// className="w-full bg-[#DD8306] rounded-md font-semibold"
|
|
// onPress={onSubmit}
|
|
// >
|
|
// Login
|
|
// </Button>
|
|
// </div>
|
|
// <div className="flex justify-center text-xs font-medium py-3">
|
|
// Don't have account? Register Now
|
|
// </div>
|
|
// <div>
|
|
// <Link href={`/form-permohonan-informasi`}>
|
|
// <Button
|
|
// size="lg"
|
|
// variant="bordered"
|
|
// className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold"
|
|
// >
|
|
// Register
|
|
// </Button>
|
|
// </Link>
|
|
// </div>
|
|
// </div>
|
|
// <div className="hidden sm:flex w-1/2 items-center justify-center p-10">
|
|
// <img src="/login.png" alt="logo" />
|
|
// </div>
|
|
// </div>
|
|
// </HumasLayout>
|
|
<div className="flex flex-row">
|
|
<div
|
|
style={{
|
|
backgroundImage: "url(headerbanner1.png)",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "left center",
|
|
}}
|
|
className="h-screen hidden md:block md:w-3/5"
|
|
>
|
|
<img src="divhumas.png" className="w-[120px]" />
|
|
</div>
|
|
<div className="bg-[#1F1A17] w-2/5 md:px-24 md:py-36 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"
|
|
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"
|
|
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)}
|
|
/>
|
|
<div className="flex justify-between my-8 text-white">
|
|
<div>
|
|
<Checkbox color="warning"></Checkbox> Remember me
|
|
</div>
|
|
<Link href="#" className="text-[#DD8306]">
|
|
Reset Password
|
|
</Link>
|
|
</div>
|
|
<Button
|
|
size="lg"
|
|
className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
|
|
onPress={onSubmit}
|
|
>
|
|
Login
|
|
</Button>
|
|
<div className="text-center text-sm">
|
|
Don't have accout yet?{" "}
|
|
<Link href="#" className="text-[#DD8306]">
|
|
New Account
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|