qudoco-fe/components/form/login.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
import { close, error, loading } from "@/config/swal";
import { useRouter } from "next/navigation";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { EyeSlashFilledIcon, EyeFilledIcon } from "../icons";
import Image from "next/image";
import { EyeOff, Eye } from "lucide-react";

export default function Login() {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(false);
  const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
  const [oldEmail, setOldEmail] = useState("");
  const [newEmail, setNewEmail] = 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 [showPassword, setShowPassword] = useState(false);

  const setValUsername = (e: any) => {
    const uname = e.replaceAll(/[^\w.-]/g, "");
    setUsername(uname.toLowerCase());
  };

  const onSubmit = async () => {
    if (!username || !password) {
      error("Username & Password Wajib Diisi !");
      return;
    }

    loading();

    setTimeout(() => {
      const users = [
        {
          username: "admin",
          password: "admin123",
          role: "Admin",
          redirect: "/admin/dashboard",
        },
        {
          username: "approver",
          password: "approver123",
          role: "Approver",
          redirect: "/admin/dashboard",
        },
        {
          username: "kontributor",
          password: "kontributor123",
          role: "Kontributor",
          redirect: "/admin/dashboard",
        },
      ];

      const foundUser = users.find(
        (u) => u.username === username && u.password === password,
      );

      if (!foundUser) {
        close();
        error("Username / Password Tidak Sesuai");
        return;
      }

      // Dummy Token
      const fakeToken = `dummy-token-${foundUser.role}`;
      const fakeRefresh = `dummy-refresh-${foundUser.role}`;

      const newTime = (new Date().getTime() + 10 * 60 * 1000).toString();

      Cookies.set("time_refresh", newTime, { expires: 1 });

      Cookies.set("access_token", fakeToken, { expires: 1 });
      Cookies.set("refresh_token", fakeRefresh, { expires: 1 });
      Cookies.set("time_refresh", newTime, { expires: 1 });

      Cookies.set("username", foundUser.username);
      Cookies.set("fullname", foundUser.role);
      Cookies.set("roleName", foundUser.role);
      Cookies.set("status", "login");

      close();

      router.push(foundUser.redirect);
    }, 1000);
  };

  return (
    <div className="min-h-screen flex">
      {/* LEFT IMAGE SECTION */}
      <div className="hidden lg:block lg:w-1/2 relative">
        <Image
          src="/image/login.jpg"
          alt="Login Illustration"
          fill
          priority
          className="object-cover"
        />
      </div>

      {/* RIGHT FORM SECTION */}
      <div className="w-full lg:w-1/2 flex items-center justify-center bg-gray-50 px-6">
        <div className="w-full max-w-md">
          {/* LOGO */}
          <div className="flex justify-center mb-8">
            <Image
              src="/image/qudo1.png"
              alt="Qudoco Logo"
              width={90}
              height={90}
              className="object-contain"
            />
          </div>

          {/* TITLE */}
          <h1 className="text-3xl font-bold text-gray-900 mb-8 text-center">
            Welcome Back
          </h1>

          {/* FORM */}
          <div className="space-y-6">
            {/* Username */}
            <div>
              <label className="block text-sm text-gray-600 mb-2">
                Username
              </label>
              <Input
                type="text"
                placeholder="Enter username"
                value={username}
                onChange={(e) => setValUsername(e.target.value)}
                className="w-full border-b border-gray-300 focus:border-[#9c6b16] outline-none py-2 bg-transparent transition"
              />
            </div>

            {/* Password */}
            <div>
              <label className="block text-sm text-gray-600 mb-2">
                Password
              </label>
              <div className="relative">
                <Input
                  type={showPassword ? "text" : "password"}
                  placeholder="Enter password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full border-b border-gray-300 focus:border-[#9c6b16] outline-none py-2 pr-10 bg-transparent transition"
                />

                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-0 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
            </div>

            {/* BUTTON */}
            <button
              onClick={onSubmit}
              className="w-full bg-[#9c6b16] hover:bg-[#805512] text-white py-3 rounded-lg transition font-medium"
            >
              Login
            </button>
          </div>

          {/* REGISTER */}
          <p className="text-center text-sm text-gray-500 mt-6">
            Don’t have an account?{" "}
            <span className="text-blue-600 cursor-pointer hover:underline">
              Register
            </span>
          </p>

          {/* FOOTER */}
          <div className="text-center text-xs text-gray-400 mt-12 space-x-4">
            <span className="hover:text-gray-600 cursor-pointer">Terms</span>
            <span className="hover:text-gray-600 cursor-pointer">
              Privacy Policy
            </span>
            <span className="hover:text-gray-600 cursor-pointer">Security</span>

            <div className="mt-4">
              © 2024 Copyrights by company. All Rights Reserved.
              <br />
              Designed by <span className="font-medium">Qudoco Team</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}