75 lines
2.9 KiB
JavaScript
Executable File
75 lines
2.9 KiB
JavaScript
Executable File
"use client";
|
|
import { useState } from "react";
|
|
import { API_BASE } from "@/lib/api";
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [err, setErr] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
async function onSubmit(e) {
|
|
e.preventDefault();
|
|
setErr("");
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/auth/login`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
setErr(data.error || "เข้าสู่ระบบไม่สำเร็จ");
|
|
return;
|
|
}
|
|
|
|
if (data.token) {
|
|
localStorage.setItem("token", data.token);
|
|
localStorage.setItem("refresh_token", data.refresh_token);
|
|
location.href = "/dashboard";
|
|
} else {
|
|
setErr("ไม่ได้รับ Token");
|
|
}
|
|
} catch (error) {
|
|
console.error("Login failed:", error);
|
|
setErr("เกิดข้อผิดพลาดในการเชื่อมต่อ");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid min-h-screen place-items-center" style={{background: 'linear-gradient(to bottom right, #00c6ff, #0072ff)'}}>
|
|
<form onSubmit={onSubmit} className="w-full max-w-sm p-8 space-y-4 shadow-lg bg-white/20 backdrop-blur-md rounded-3xl">
|
|
<div className="text-2xl font-bold text-center text-white">เข้าสู่ระบบ</div>
|
|
<input
|
|
disabled={isLoading}
|
|
className="w-full p-3 text-white placeholder-gray-200 border bg-white/30 border-white/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-white/50 disabled:opacity-50"
|
|
placeholder="ชื่อผู้ใช้"
|
|
value={username}
|
|
onChange={e=>setUsername(e.target.value)}
|
|
/>
|
|
<input
|
|
type="password"
|
|
disabled={isLoading}
|
|
className="w-full p-3 text-white placeholder-gray-200 border bg-white/30 border-white/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-white/50 disabled:opacity-50"
|
|
placeholder="รหัสผ่าน"
|
|
value={password}
|
|
onChange={e=>setPassword(e.target.value)}
|
|
/>
|
|
{err && <div className="text-sm text-center text-yellow-300">{err}</div>}
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full p-3 font-bold text-white transition-colors duration-300 bg-blue-500 rounded-xl hover:bg-blue-600 disabled:bg-blue-400 disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|