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";

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>
  );
}