feat:qudo login

app/auth/layout.tsx

@@ -5,5 +5,5 @@ export default function AuthLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <HumasLayout>{children}</HumasLayout>;
+  return <> {children}</>;
 }

app/auth/page.tsx

@@ -1,8 +1,8 @@
-import Login from '@/components/form/login'
+import Login from "@/components/form/login";
-import React from 'react'
+import QudoLogin from "@/components/form/qudo-login";
+import React from "react";
 
 export default function AuthPage() {
-    return (
+  // return <Login />;
-        <Login />
+  return <QudoLogin />;
-    )
 }

components/form/login.tsx

@@ -8,6 +8,7 @@ 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();
@@ -99,112 +100,114 @@ export default function Login() {
   };
 
   return (
-    <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
+    <HumasLayout>
-      <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
+      <div className="bg-white text-black md:flex px-0 md:px-2 lg:px-5">
-        <div className="text-xl font-bold">
+        <div className="w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5">
-          Selamat Datang di Portal Resmi Humas Polri
+          <div className="text-xl font-bold">
-        </div>
+            Selamat Datang di Portal Resmi Humas Polri
-        <div>
+          </div>
-          <Input
+          <div>
-            classNames={{
+            <Input
-              input: ["w-full", "bg-transparent", "!text-black"],
+              classNames={{
-              mainWrapper: ["w-full", "bg-transparent"],
+                input: ["w-full", "bg-transparent", "!text-black"],
-              innerWrapper: ["bg-transparent"],
+                mainWrapper: ["w-full", "bg-transparent"],
-              label: ["!text-black", "font-semibold"],
+                innerWrapper: ["bg-transparent"],
-              inputWrapper: [
+                label: ["!text-black", "font-semibold"],
-                "bg-transparent",
+                inputWrapper: [
-                "dark:bg-transparent",
+                  "bg-transparent",
-                "hover:bg-transparent",
+                  "dark:bg-transparent",
-                "dark:hover:bg-transparent",
+                  "hover:bg-transparent",
-                "group-data-[focused=true]:bg-transparent",
+                  "dark:hover:bg-transparent",
-                "dark:group-data-[focused=true]:bg-transaparent",
+                  "group-data-[focused=true]:bg-transparent",
-                "group-data-[focused=false]:bg-transparent",
+                  "dark:group-data-[focused=true]:bg-transaparent",
-                "focus-within:!bg-transparent",
+                  "group-data-[focused=false]:bg-transparent",
-              ],
+                  "focus-within:!bg-transparent",
-            }}
+                ],
-            isRequired
+              }}
-            type="text"
+              isRequired
-            label="Username"
+              type="text"
-            placeholder="Masukkan username anda!"
+              label="Username"
-            variant="underlined"
+              placeholder="Masukkan username anda!"
-            onChange={(e: any) => {
+              variant="underlined"
-              setValUsername(e.target.value.trim());
+              onChange={(e: any) => {
-            }}
+                setValUsername(e.target.value.trim());
-            onPaste={(e: any) => {
+              }}
-              setValUsername(e.target.value.trim());
+              onPaste={(e: any) => {
-            }}
+                setValUsername(e.target.value.trim());
-            onCopy={(e: any) => {
+              }}
-              setValUsername(e.target.value.trim());
+              onCopy={(e: any) => {
-            }}
+                setValUsername(e.target.value.trim());
-          />
+              }}
-        </div>
+            />
-        <div>
+          </div>
-          <Input
+          <div>
-            classNames={{
+            <Input
-              input: ["w-full", "bg-transparent", "!text-black"],
+              classNames={{
-              mainWrapper: ["w-full", "bg-transparent"],
+                input: ["w-full", "bg-transparent", "!text-black"],
-              innerWrapper: ["bg-transparent"],
+                mainWrapper: ["w-full", "bg-transparent"],
-              label: ["!text-black", "font-semibold"],
+                innerWrapper: ["bg-transparent"],
-              inputWrapper: [
+                label: ["!text-black", "font-semibold"],
-                "bg-transparent",
+                inputWrapper: [
-                "dark:bg-transparent",
+                  "bg-transparent",
-                "hover:bg-transparent",
+                  "dark:bg-transparent",
-                "dark:hover:bg-transparent",
+                  "hover:bg-transparent",
-                "group-data-[focused=true]:bg-transparent",
+                  "dark:hover:bg-transparent",
-                "dark:group-data-[focused=true]:bg-transaparent",
+                  "group-data-[focused=true]:bg-transparent",
-                "group-data-[focused=false]:bg-transparent",
+                  "dark:group-data-[focused=true]:bg-transaparent",
-                "focus-within:!bg-transparent",
+                  "group-data-[focused=false]:bg-transparent",
-              ],
+                  "focus-within:!bg-transparent",
-            }}
+                ],
-            isRequired
+              }}
-            endContent={
+              isRequired
-              <button
+              endContent={
-                className="focus:outline-none"
+                <button
-                type="button"
+                  className="focus:outline-none"
-                onClick={toggleVisibility}
+                  type="button"
-              >
+                  onClick={toggleVisibility}
-                {isVisible ? (
+                >
-                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                  {isVisible ? (
-                ) : (
+                    <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                  ) : (
-                )}
+                    <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-              </button>
+                  )}
-            }
+                </button>
-            type={isVisible ? "text" : "password"}
+              }
-            label="Password"
+              type={isVisible ? "text" : "password"}
-            placeholder="Masukkan password anda"
+              label="Password"
-            variant="underlined"
+              placeholder="Masukkan password anda"
-            onChange={(event) => setPassword(event.target.value)}
+              variant="underlined"
-          />
+              onChange={(event) => setPassword(event.target.value)}
-        </div>
+            />
+          </div>
 
-        <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 bg-[#DD8306] rounded-md font-semibold"
-              className="w-full text-[#DD8306] borde-2 border-[#DD8306]  rounded-md font-semibold"
+              onPress={onSubmit}
             >
-              Register
+              Login
             </Button>
-          </Link>
+          </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>
-      <div className="hidden sm:flex w-1/2   items-center justify-center p-10">
+    </HumasLayout>
-        <img src="/login.png" alt="logo" />
-      </div>
-    </div>
   );
 }

components/form/qudo-login.tsx

@@ -0,0 +1,261 @@
+"use client";
+import { successToast } from "@/config/swal";
+import Cookies from "js-cookie";
+import { EyeIconMdi, EyeOffIconMdi } from "@/components/icons";
+import { error, loading, close } from "@/config/swal";
+
+import { Button, Input } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getProfile, postSignIn } from "@/service/master-user";
+
+const images = ["bg1.jpg", "bg2.jpg"];
+
+export default function QudoLogin() {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const router = useRouter();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 10000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  useEffect(() => {
+    const isLogout = Cookies.get("is_logout");
+    if (isLogout) {
+      successToast("Session Expired", "Please log in again.");
+      Cookies.remove("is_logout");
+    }
+  }, []);
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [typePass, setTypePass] = useState("password");
+  const [category, setCategory] = useState("5");
+  const [role, setRole] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  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());
+  };
+
+  const [forgotPassword, setForgotPassword] = useState(false);
+
+  const handleForgotPassword = (data: boolean) => {
+    setForgotPassword(false);
+  };
+
+  return (
+    <div className="min-h-screen flex w-full">
+      <div
+        className="w-3/4 hidden md:flex items-center flex-col justify-center text-center bg-cover p-12 transition-all duration-1000 ease-in-out"
+        style={{ backgroundImage: `url(${images[currentImageIndex]})` }}
+      >
+        <h2 className="text-white text-lg mb-2">Another innovation from</h2>
+        <h1 className="text-5xl text-white font-bold">Qudōco</h1>
+        <p className="text-white mt-4">
+          AI-based creativity and functionality will soon be available for
+          public use.
+        </p>
+      </div>
+
+      <div className="w-full md:w-1/4 flex flex-col justify-center items-center bg-gray-100 p-12">
+        <img src="qudoco.png" alt="Qudoco Logo" className="mb-6 w-25 h-25" />
+
+        <h2 className="text-2xl font-semibold mb-2 text-black">
+          Welcome Back!
+        </h2>
+
+        <div className="flex flex-col justify-start items-start w-full mt-10">
+          <p className="text-xs py-1 text-black">
+            Username<span className="text-red-600">*</span>
+          </p>
+          <Input
+            placeholder=""
+            className="w-full lg:max-w-full mb-5"
+            labelPlacement="outside"
+            classNames={{
+              input: ["w-full", "bg-slate-100", "!text-black", "rounded-sm"],
+              mainWrapper: [
+                "w-full",
+                "bg-slate-100",
+                "border-2",
+                "border-slate-200",
+                "rounded-sm",
+              ],
+              innerWrapper: ["bg-transparent "],
+              inputWrapper: [
+                "bg-transparent",
+                "rounded-sm",
+                "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",
+              ],
+            }}
+            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 className="flex flex-col justify-start items-start w-full">
+          <p className="text-xs py-1 text-black">
+            Password<span className="text-red-600">*</span>
+          </p>
+          <Input
+            placeholder=""
+            className="w-full lg:max-w-full"
+            labelPlacement="outside"
+            endContent={
+              <button
+                className="focus:outline-none"
+                type="button"
+                onClick={toggleVisibility}
+              >
+                {isVisible ? (
+                  <EyeOffIconMdi className="text-2xl text-default-400 pointer-events-none" />
+                ) : (
+                  <EyeIconMdi className="text-2xl text-default-400 pointer-events-none" />
+                )}
+              </button>
+            }
+            type={isVisible ? "text" : "password" && typePass}
+            classNames={{
+              input: ["w-full", "bg-slate-100", "!text-black", "rounded-sm"],
+              mainWrapper: [
+                "w-full",
+                "bg-slate-100",
+                "border-2",
+                "border-slate-200",
+                "rounded-sm",
+              ],
+              innerWrapper: ["bg-transparent"],
+              inputWrapper: [
+                "bg-transparent",
+                "rounded-sm",
+                "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",
+              ],
+            }}
+            onChange={(event) => setPassword(event.target.value)}
+          />
+          <a
+            onClick={() => setForgotPassword(true)}
+            className="cursor-pointer mt-2 text-sm text-black mb-5"
+          >
+            Forgot Password?
+          </a>
+          <Button
+            onClick={() => onSubmit()}
+            className="text-white bg-[#62532C] rounded-sm w-full font-bold"
+          >
+            Login
+          </Button>
+        </div>
+
+        <div className="text-sm text-gray-700 mt-4">
+          Dont have an account?{" "}
+          <a href="#" className="text-blue-600 hover:underline">
+            Sign up now
+          </a>
+        </div>
+
+        <div className="text-gray-500 text-xs mt-8">&copy; 2024 Qudoco</div>
+      </div>
+    </div>
+  );
+}

components/layout/navbar/NavbarHumas.tsx

@@ -18,7 +18,7 @@ import {
 } from "@nextui-org/react";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   ChevronDownIcon,
   ChevronRightIcon,
@@ -32,6 +32,8 @@ import {
   YtIcon,
 } from "../../icons";
 import { ThemeSwitch } from "../../theme-switch";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
 
 interface MenuItem {
   key: string;
@@ -51,6 +53,22 @@ interface DropdownOpenState {
 
 export default function NavbarHumas() {
   const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
+  const router = useRouter();
+
+  const token = Cookies.get("access_token");
+
+  useEffect(() => {
+    if (!token) {
+      onLogout();
+    }
+  }, [token]);
+
+  const onLogout = () => {
+    Object.keys(Cookies.get()).forEach((cookieName) => {
+      Cookies.remove(cookieName);
+    });
+    router.push("/auth");
+  };
 
   const toggleDropdown = (key: any) => {
     setDropdownOpen({
@@ -363,9 +381,15 @@ export default function NavbarHumas() {
               <div>
                 <ThemeSwitch />
               </div>
-              <Link href="/auth">
+              {token ? (
-                <Button className="bg-[#DD8306]">Login</Button>
+                <Button className="bg-[#DD8306]" onPress={onLogout}>
-              </Link>
+                  Logout
+                </Button>
+              ) : (
+                <Link href="/auth">
+                  <Button className="bg-[#DD8306]">Login</Button>
+                </Link>
+              )}
             </div>
           </div>
         </div>
@@ -379,9 +403,15 @@ export default function NavbarHumas() {
                 <div key={item.key} className="relative">
                   <NavbarMenuItem>
                     {item.key === "login" ? (
-                      <Link href="/auth" className="my-3">
+                      token ? (
-                        <Button className="bg-[#DD8306]">Login</Button>
+                        <Button className="bg-[#DD8306]" onPress={onLogout}>
-                      </Link>
+                          Logout
+                        </Button>
+                      ) : (
+                        <Link href="/auth">
+                          <Button className="bg-[#DD8306]">Login</Button>
+                        </Link>
+                      )
                     ) : (
                       <div
                         onClick={() => toggleDropdown(item.key)}