web-humas-fe/components/form/login.tsx

"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&apos;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&apos;t have accout yet?{" "}
          <Link href="#" className="text-[#DD8306]">
            New Account
          </Link>
        </div>
      </div>
    </div>
  );
}