feat: ...

2025-09-24 15:05:42 +07:00
parent 58a2fc3f5c
commit b78a95e244
13 changed files with 330 additions and 96 deletions
--- a/frontend/app/(auth)/login/page.jsx
+++ b/frontend/app/(auth)/login/page.jsx
@@ -1,34 +1,74 @@
-"use client";
-import { useState } from "react";
-import { API_BASE } from "@/lib/api";
-
-export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [err, setErr] = useState("");
-
-  async function onSubmit(e){
-    e.preventDefault();
-    setErr("");
-    const res = await fetch(`${API_BASE}/auth/login`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, password }),
-      credentials: "include",
-    });
-    if (!res.ok) { setErr("เข้าสู่ระบบไม่สำเร็จ"); return; }
-    location.href = "/dashboard";
-  }
-
-  return (
-    <div className="grid place-items-center min-h-screen">
-      <form onSubmit={onSubmit} className="bg-white/90 rounded-2xl p-6 w-full max-w-sm shadow">
-        <div className="text-lg font-semibold mb-4">เข้าสู่ระบบ</div>
-        <input className="w-full border rounded-xl p-2 mb-2" placeholder="อีเมล" value={email} onChange={e=>setEmail(e.target.value)} />
-        <input type="password" className="w-full border rounded-xl p-2 mb-3" placeholder="รหัสผ่าน" value={password} onChange={e=>setPassword(e.target.value)} />
-        {err && <div className="text-red-600 text-sm mb-2">{err}</div>}
-        <button className="w-full rounded-xl p-2 text-white" style={{background:'#0D5C75'}}>เข้าสู่ระบบ</button>
-      </form>
-    </div>
-  );
-}
+"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>
+  );
+}