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 (
    <div className="flex flex-row h-screen">
      <div
        style={{
          backgroundImage: "url(headerbanner1.png)",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          backgroundPosition: "left center",
        }}
        className="h-screen hidden md:block md:w-3/5"
      >
        <Link href="/">
          <img src="divhumas.png" className="w-[120px]" />
        </Link>
      </div>
      <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  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>
  );
}