.
This commit is contained in:
parent
5d99da0b7c
commit
1fb6a2004d
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user