Update frontend login page.jsx และ backend

frontend/app/(auth)/login/page.jsx

@@ -1,5 +1,14 @@
+// File: frontend/app/(auth)/login/page· typescript
+
 "use client";
 
+// ✅ ปรับให้ตรง backend: ใช้ Bearer token (ไม่ใช้ cookie)
+// - เรียก POST /api/auth/login → รับ { token, refresh_token, user }
+// - เก็บ token/refresh_token ใน localStorage (หรือ sessionStorage ถ้าไม่ติ๊กจำไว้)
+// - ไม่ใช้ credentials: "include" อีกต่อไป
+// - เอา RootLayout/metadata ออก เพราะไฟล์เพจเป็น client component
+// - เพิ่มการอ่าน NEXT_PUBLIC_API_BASE และ error handling ให้ตรงกับ backend
+
 import { useState, useMemo } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import {
@@ -15,6 +24,8 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE?.replace(/\/$/, "") || "";
+
 export default function LoginPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -42,25 +53,37 @@ export default function LoginPage() {
     try {
       setSubmitting(true);
 
-      // เรียก backend ให้ตั้ง HttpOnly cookie: access_token
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_BASE}/api/auth/login`,
-        {
-          method: "POST",
-          credentials: "include", // สำคัญ: รับ/ส่งคุกกี้
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ username, password, remember }),
-          cache: "no-store",
-        }
-      );
+      const res = await fetch(`${API_BASE}/api/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+        cache: "no-store",
+      });
 
+      const data = await res.json().catch(() => ({}));
       if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        setErr(data?.message || "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
+        // รองรับข้อความ error จาก backend เช่น INVALID_CREDENTIALS
+        setErr(
+          data?.error === "INVALID_CREDENTIALS"
+            ? "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง"
+            : data?.error || "เข้าสู่ระบบไม่สำเร็จ"
+        );
         return;
       }
 
-      // สำเร็จ → backend ตั้งคุกกี้แล้ว → redirect
+      // ✅ เก็บ token ตามโหมดจำไว้/ไม่จำ
+      const storage = remember ? window.localStorage : window.sessionStorage;
+      storage.setItem("dms.token", data.token);
+      storage.setItem("dms.refresh_token", data.refresh_token);
+      storage.setItem("dms.user", JSON.stringify(data.user || {}));
+
+      // (ออปชัน) เผยแพร่ event ให้แท็บอื่นทราบ
+      try {
+        window.dispatchEvent(
+          new StorageEvent("storage", { key: "dms.auth", newValue: "login" })
+        );
+      } catch {}
+
       router.replace(nextPath);
     } catch (e) {
       setErr("เชื่อมต่อเซิร์ฟเวอร์ไม่ได้ กรุณาลองใหม่");
@@ -70,102 +93,104 @@ export default function LoginPage() {
   }
 
   return (
-    <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold text-sky-800">
-          เข้าสู่ระบบ
-        </CardTitle>
-        <CardDescription className="text-sky-700">
-          Document Management System • LCBP3
-        </CardDescription>
-      </CardHeader>
+    <div className="grid min-h-[calc(100vh-4rem)] place-items-center p-4">
+      <Card className="w-full max-w-md border-0 shadow-xl ring-1 ring-black/5 bg-white/90 backdrop-blur">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-sky-800">
+            เข้าสู่ระบบ
+          </CardTitle>
+          <CardDescription className="text-sky-700">
+            Document Management System • LCBP3
+          </CardDescription>
+        </CardHeader>
 
-      <CardContent>
-        {err ? (
-          <Alert className="mb-4">
-            <AlertDescription>{err}</AlertDescription>
-          </Alert>
-        ) : null}
+        <CardContent>
+          {err ? (
+            <Alert className="mb-4">
+              <AlertDescription>{err}</AlertDescription>
+            </Alert>
+          ) : null}
 
-        <form onSubmit={onSubmit} className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="username">ชื่อผู้ใช้</Label>
-            <Input
-              id="username"
-              autoFocus
-              autoComplete="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder="เช่น superadmin"
-              disabled={submitting}
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password">รหัสผ่าน</Label>
-            <div className="relative">
+          <form onSubmit={onSubmit} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="username">ชื่อผู้ใช้</Label>
               <Input
-                id="password"
-                type={showPw ? "text" : "password"}
-                autoComplete="current-password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
+                id="username"
+                autoFocus
+                autoComplete="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="เช่น superadmin"
                 disabled={submitting}
-                className="pr-10"
               />
-              <button
-                type="button"
-                onClick={() => setShowPw((v) => !v)}
-                className="absolute inset-y-0 px-2 my-auto text-xs bg-white border rounded-md right-2 hover:bg-slate-50"
-                aria-label={showPw ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
-                disabled={submitting}
-              >
-                {showPw ? "Hide" : "Show"}
-              </button>
             </div>
-          </div>
 
-          <div className="flex items-center justify-between pt-1">
-            <label className="inline-flex items-center gap-2 text-sm text-slate-600">
-              <input
-                type="checkbox"
-                className="size-4 accent-sky-700"
-                checked={remember}
-                onChange={(e) => setRemember(e.target.checked)}
-                disabled={submitting}
-              />
-              จดจำฉันไว้ในเครื่องนี้
-            </label>
+            <div className="grid gap-2">
+              <Label htmlFor="password">รหัสผ่าน</Label>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPw ? "text" : "password"}
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  disabled={submitting}
+                  className="pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPw((v) => !v)}
+                  className="absolute inset-y-0 px-2 my-auto text-xs bg-white border rounded-md right-2 hover:bg-slate-50"
+                  aria-label={showPw ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
+                  disabled={submitting}
+                >
+                  {showPw ? "Hide" : "Show"}
+                </button>
+              </div>
+            </div>
 
-            <a
-              href="/forgot"
-              className="text-sm text-sky-700 hover:text-sky-900 hover:underline"
+            <div className="flex items-center justify-between pt-1">
+              <label className="inline-flex items-center gap-2 text-sm text-slate-600">
+                <input
+                  type="checkbox"
+                  className="size-4 accent-sky-700"
+                  checked={remember}
+                  onChange={(e) => setRemember(e.target.checked)}
+                  disabled={submitting}
+                />
+                จดจำฉันไว้ในเครื่องนี้
+              </label>
+
+              <a
+                href="/forgot-password"
+                className="text-sm text-sky-700 hover:text-sky-900 hover:underline"
+              >
+                ลืมรหัสผ่าน?
+              </a>
+            </div>
+
+            <Button
+              type="submit"
+              disabled={submitting}
+              className="mt-2 bg-sky-700 hover:bg-sky-800"
             >
-              ลืมรหัสผ่าน?
-            </a>
-          </div>
+              {submitting ? (
+                <span className="inline-flex items-center gap-2">
+                  <Spinner /> กำลังเข้าสู่ระบบ…
+                </span>
+              ) : (
+                "เข้าสู่ระบบ"
+              )}
+            </Button>
+          </form>
+        </CardContent>
 
-          <Button
-            type="submit"
-            disabled={submitting}
-            className="mt-2 bg-sky-700 hover:bg-sky-800"
-          >
-            {submitting ? (
-              <span className="inline-flex items-center gap-2">
-                <Spinner /> กำลังเข้าสู่ระบบ…
-              </span>
-            ) : (
-              "เข้าสู่ระบบ"
-            )}
-          </Button>
-        </form>
-      </CardContent>
-
-      <CardFooter className="text-xs text-center text-slate-500">
-        &copy; {new Date().getFullYear()} np-dms.work
-      </CardFooter>
-    </Card>
+        <CardFooter className="text-xs text-center text-slate-500">
+          &copy; {new Date().getFullYear()} np-dms.work
+        </CardFooter>
+      </Card>
+    </div>
   );
 }