This commit is contained in:
[Valentino Heman Budiarto] 2026-05-29 20:13:23 +07:00
parent 5d99da0b7c
commit 1fb6a2004d

View File

@ -3,51 +3,48 @@
import { useState } from "react"; import { useState } from "react";
import axios from "axios"; import axios from "axios";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Lock, User, Shield } from "lucide-react"; // Tambahan ikon Shield untuk Admin import { Lock, User, Shield } from "lucide-react";
export default function LoginPage() { export default function LoginPage() {
const router = useRouter(); const router = useRouter();
// State untuk menyimpan input user dan pilihan role const [loginRole, setLoginRole] = useState("user");
const [loginRole, setLoginRole] = useState("user"); // "user" atau "admin"
const [nrp, setNrp] = useState(""); const [nrp, setNrp] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
// Fungsi saat tombol Login ditekan
const handleLogin = async (e: React.FormEvent) => { const handleLogin = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
setError(""); setError("");
try { try {
// Tembak API Backend Golang menggunakan IP Laptop
const response = await axios.post("http://172.17.172.17:8080/api/auth/login", { const response = await axios.post("http://172.17.172.17:8080/api/auth/login", {
nrp_nip: nrp, nrp_nip: nrp,
password: password, password: password,
// role_attempt: loginRole // Buka komentar ini jika backend Golang minta parameter role
}); });
const { token, user } = response.data; const { token, user } = response.data;
// 1. Simpan di localStorage (untuk dipakai di axios frontend) // Simpan di localStorage untuk kebutuhan frontend
localStorage.setItem("token", token); localStorage.setItem("token", token);
localStorage.setItem("user", JSON.stringify(user)); localStorage.setItem("user", JSON.stringify(user));
// 2. Simpan di Cookie agar bisa dibaca oleh middleware.ts Next.js // Simpan role ke cookie juga agar Middleware Next.js tahu siapa yang sedang login
document.cookie = `token=${token}; path=/; max-age=86400; SameSite=Lax`; document.cookie = `token=${token}; path=/; max-age=86400; SameSite=Lax`;
document.cookie = `userRole=${user.role}; path=/; max-age=86400; SameSite=Lax`;
// Redirect berdasarkan role dari backend DAN pilihan di UI // Logika Pengalihan Halaman
if (user.role === "admin" && loginRole === "admin") { if (user.role === "admin" && loginRole === "admin") {
router.push("/admin"); router.push("/admin/monitoring"); // Langsung arahkan ke halaman utama admin
} else if (user.role !== "admin" && loginRole === "user") { } else if (user.role === "student" && loginRole === "user") {
router.push("/dashboard"); // Halaman pemesanan kelas biasa router.push("/dashboard");
} else { } else {
// Mencegah user biasa login lewat tab admin, atau sebaliknya
setError("Role tidak sesuai dengan tipe akun Anda."); setError("Role tidak sesuai dengan tipe akun Anda.");
localStorage.clear(); // Bersihkan token yang terlanjur masuk localStorage.clear();
document.cookie = "token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // Hapus cookie document.cookie = "token=; path=/; max-age=0;";
document.cookie = "userRole=; path=/; max-age=0;";
} }
} catch (err: any) { } catch (err: any) {
@ -60,13 +57,11 @@ export default function LoginPage() {
return ( return (
<div className="flex min-h-screen items-center justify-center bg-gray-100"> <div className="flex min-h-screen items-center justify-center bg-gray-100">
<div className="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg"> <div className="w-full max-w-md bg-white p-8 rounded-2xl shadow-lg">
{/* Header / Logo */}
<div className="text-center mb-6"> <div className="text-center mb-6">
<h1 className="text-3xl font-bold text-blue-600 mb-2">S-CLASS</h1> <h1 className="text-3xl font-bold text-blue-600 mb-2">S-CLASS</h1>
<p className="text-gray-500">Smart Classroom Booking System</p> <p className="text-gray-500">Smart Classroom Booking System</p>
</div> </div>
{/* --- BAGIAN BARU: Toggle Role --- */}
<div className="flex justify-center mb-6 bg-gray-100 p-1 rounded-lg"> <div className="flex justify-center mb-6 bg-gray-100 p-1 rounded-lg">
<button <button
type="button" type="button"
@ -87,29 +82,21 @@ export default function LoginPage() {
Administrator Administrator
</button> </button>
</div> </div>
{/* ------------------------------- */}
{/* Form Login */}
<form onSubmit={handleLogin} className="space-y-6"> <form onSubmit={handleLogin} className="space-y-6">
{error && ( {error && (
<div className="bg-red-100 text-red-600 p-3 rounded-lg text-sm text-center"> <div className="bg-red-100 text-red-600 p-3 rounded-lg text-sm text-center">
{error} {error}
</div> </div>
)} )}
{/* Input NRP / Username dinamis tergantung role */}
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1"> <label className="block text-sm font-medium text-gray-700 mb-1">
{loginRole === "admin" ? "Username Admin" : "NRP / NIP"} {loginRole === "admin" ? "Username Admin" : "NRP / NIP"}
</label> </label>
<div className="relative"> <div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
{loginRole === "admin" ? ( {loginRole === "admin" ? <Shield className="h-5 w-5 text-gray-400" /> : <User className="h-5 w-5 text-gray-400" />}
<Shield className="h-5 w-5 text-gray-400" />
) : (
<User className="h-5 w-5 text-gray-400" />
)}
</div> </div>
<input <input
type="text" type="text"
@ -122,7 +109,6 @@ export default function LoginPage() {
</div> </div>
</div> </div>
{/* Input Password */}
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label> <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
<div className="relative"> <div className="relative">
@ -140,7 +126,6 @@ export default function LoginPage() {
</div> </div>
</div> </div>
{/* Tombol Login */}
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
@ -151,7 +136,6 @@ export default function LoginPage() {
</button> </button>
</form> </form>
{/* Footer */}
<div className="mt-6 text-center text-xs text-gray-400"> <div className="mt-6 text-center text-xs text-gray-400">
© 2026 Skripsi S-CLASS Project © 2026 Skripsi S-CLASS Project
</div> </div>