Update login page.jsx ครั้งที่ 2

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

@@ -1,8 +1,7 @@
-// frontend/app/(auth)/login/page.jsx
 "use client";
 
-import { useMemo, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useState, useMemo } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import {
   Card,
   CardHeader,
@@ -15,24 +14,14 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Separator } from "@/components/ui/separator";
-
-const IS_DEV = process.env.NODE_ENV !== "production";
-
-// URL builder กันเคสซ้ำ /api"use client";
-
-import { useState, useMemo } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription } from "@/components/ui/alert";
 
 export default function LoginPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const nextPath = useMemo(() => searchParams.get("next") || "/dashboard", [searchParams]);
+  const nextPath = useMemo(
+    () => searchParams.get("next") || "/dashboard",
+    [searchParams]
+  );
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -54,13 +43,16 @@ export default function LoginPage() {
       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(
+        `${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",
+        }
+      );
 
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
@@ -80,7 +72,9 @@ 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>
+        <CardTitle className="text-2xl font-bold text-sky-800">
+          เข้าสู่ระบบ
+        </CardTitle>
         <CardDescription className="text-sky-700">
           Document Management System • LCBP3
         </CardDescription>
@@ -200,323 +194,3 @@ function Spinner() {
     </svg>
   );
 }
-
-function buildLoginUrl() {
-  const base = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/+$/, "");
-  if (base.endsWith("/api")) return `${base}/auth/login`;
-  return `${base}/api/auth/login`;
-}
-
-// helper: parse response body เป็น json หรือ text
-async function parseBody(res) {
-  const text = await res.text();
-  try {
-    return { raw: text, json: JSON.parse(text) };
-  } catch {
-    return { raw: text, json: null };
-  }
-}
-
-// สร้างข้อความ debug ที่พร้อม copy
-function stringifyDebug(debugInfo) {
-  try {
-    return JSON.stringify(debugInfo, null, 2);
-  } catch {
-    return String(debugInfo);
-  }
-}
-
-export default function LoginPage() {
-  const router = useRouter();
-  const search = useSearchParams();
-  const redirectTo = search.get("from") || "/dashboard";
-
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState("");
-
-  // สำหรับ debug panel
-  const [debugInfo, setDebugInfo] = useState(null);
-  const [copyState, setCopyState] = useState({ copied: false, error: "" });
-
-  const loginUrl = useMemo(buildLoginUrl, [process.env.NEXT_PUBLIC_API_BASE]);
-
-  async function onSubmit(e) {
-    e.preventDefault();
-    setSubmitting(true);
-    setError("");
-    if (IS_DEV) {
-      setDebugInfo(null);
-      setCopyState({ copied: false, error: "" });
-    }
-
-    try {
-      const res = await fetch(loginUrl, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ username, password }),
-      });
-
-      if (!res.ok) {
-        const body = await parseBody(res);
-
-        const apiErr = {
-          name: "ApiError",
-          status: res.status,
-          statusText: res.statusText,
-          body: body.json ?? body.raw,
-          message: (() => {
-            const msgFromJson =
-              (body.json && (body.json.error || body.json.message)) || null;
-
-            if (res.status === 400)
-              return `Bad request: ${msgFromJson ?? res.statusText}`;
-            if (res.status === 401)
-              return `Unauthenticated: ${msgFromJson ?? "Invalid credentials"}`;
-            if (res.status === 403)
-              return `Forbidden: ${msgFromJson ?? res.statusText}`;
-            if (res.status === 404)
-              return `Not found: ${msgFromJson ?? res.statusText}`;
-            if (res.status >= 500)
-              return `Server error (${res.status}): ${
-                msgFromJson ?? res.statusText
-              }`;
-            return `${res.status} ${res.statusText}: ${
-              msgFromJson ?? "Request failed"
-            }`;
-          })(),
-        };
-
-        if (IS_DEV) {
-          setDebugInfo({
-            kind: "api",
-            request: {
-              url: loginUrl,
-              method: "POST",
-              payload: { username: "(masked)", password: "(masked)" },
-            },
-            response: {
-              status: res.status,
-              statusText: res.statusText,
-              body: apiErr.body,
-            },
-            env: {
-              NEXT_PUBLIC_API_BASE:
-                process.env.NEXT_PUBLIC_API_BASE || "(unset)",
-              NODE_ENV: process.env.NODE_ENV,
-            },
-          });
-        }
-
-        throw apiErr;
-      }
-
-      // ✅ สำเร็จ
-      if (IS_DEV) {
-        setDebugInfo({
-          kind: "success",
-          request: { url: loginUrl, method: "POST" },
-          note: "Login success. Redirecting…",
-        });
-      }
-      router.push(redirectTo);
-    } catch (err) {
-      if (err?.name === "ApiError") {
-        setError(err.message);
-      } else if (err instanceof TypeError && /fetch/i.test(err.message)) {
-        setError(
-          "Network error: ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์ได้ (ตรวจสอบ proxy/NPM/SSL)"
-        );
-        if (IS_DEV) {
-          setDebugInfo({
-            kind: "network",
-            request: { url: loginUrl, method: "POST" },
-            error: { message: err.message },
-            hint: "เช็คว่า NPM ชี้ proxy /api ไปที่ backend ถูก network/port, และ TLS chain ถูกต้อง",
-          });
-        }
-      } else {
-        setError(err?.message || "Unexpected error");
-        if (IS_DEV) {
-          setDebugInfo({
-            kind: "unknown",
-            request: { url: loginUrl, method: "POST" },
-            error: { message: String(err) },
-          });
-        }
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  async function handleCopyDebug() {
-    if (!debugInfo) return;
-    const text = stringifyDebug(debugInfo);
-    try {
-      if (navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(text);
-      } else {
-        // Fallback
-        const ta = document.createElement("textarea");
-        ta.value = text;
-        ta.style.position = "fixed";
-        ta.style.left = "-9999px";
-        document.body.appendChild(ta);
-        ta.focus();
-        ta.select();
-        document.execCommand("copy");
-        document.body.removeChild(ta);
-      }
-      setCopyState({ copied: true, error: "" });
-      setTimeout(() => setCopyState({ copied: false, error: "" }), 1500);
-    } catch (e) {
-      setCopyState({
-        copied: false,
-        error: "คัดลอกไม่สำเร็จ (permission ของ clipboard?)",
-      });
-      setTimeout(() => setCopyState({ copied: false, error: "" }), 2500);
-    }
-  }
-
-  return (
-    <Card className="w-full max-w-md mx-auto shadow-lg">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl text-sky-800">Sign in</CardTitle>
-        <CardDescription>
-          Enter your credentials to access the DMS
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        {error ? (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        ) : null}
-
-        <form onSubmit={onSubmit} className="space-y-4">
-          <div className="grid gap-2">
-            <Label htmlFor="username">Username</Label>
-            <Input
-              id="username"
-              autoComplete="username"
-              placeholder="superadmin"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              autoComplete="current-password"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </div>
-
-          <Button type="submit" className="w-full" disabled={submitting}>
-            {submitting ? "Signing in..." : "Sign in"}
-          </Button>
-        </form>
-
-        {IS_DEV && (
-          <div className="p-3 mt-4 border rounded-xl border-sky-200 bg-sky-50">
-            <div className="flex items-center justify-between mb-2">
-              <div className="text-sm font-semibold text-sky-900">
-                Debug (dev mode only)
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="secondary"
-                  onClick={handleCopyDebug}
-                  disabled={!debugInfo}
-                  aria-label="Copy debug info"
-                >
-                  {copyState.copied ? "Copied!" : "Copy debug"}
-                </Button>
-              </div>
-            </div>
-            <Separator className="my-2" />
-            <div className="space-y-2 text-xs text-sky-900">
-              <div>
-                <span className="font-medium">Request URL:</span>{" "}
-                <code className="break-all">{loginUrl}</code>
-              </div>
-
-              {debugInfo?.request?.method && (
-                <div>
-                  <span className="font-medium">Method:</span>{" "}
-                  <code>{debugInfo.request.method}</code>
-                </div>
-              )}
-
-              {debugInfo?.response && (
-                <>
-                  <div>
-                    <span className="font-medium">Status:</span>{" "}
-                    <code>
-                      {debugInfo.response.status}{" "}
-                      {debugInfo.response.statusText}
-                    </code>
-                  </div>
-                  <div className="font-medium">Response body:</div>
-                  <pre className="p-2 overflow-auto bg-white rounded max-h-48">
-                    {typeof debugInfo.response.body === "string"
-                      ? debugInfo.response.body
-                      : JSON.stringify(debugInfo.response.body, null, 2)}
-                  </pre>
-                </>
-              )}
-
-              {debugInfo?.error && (
-                <>
-                  <div className="font-medium">Error:</div>
-                  <pre className="p-2 overflow-auto bg-white rounded max-h-48">
-                    {JSON.stringify(debugInfo.error, null, 2)}
-                  </pre>
-                </>
-              )}
-
-              {debugInfo?.env && (
-                <>
-                  <div className="font-medium">Env:</div>
-                  <pre className="p-2 overflow-auto bg-white rounded max-h-40">
-                    {JSON.stringify(debugInfo.env, null, 2)}
-                  </pre>
-                </>
-              )}
-
-              {debugInfo?.note && (
-                <div className="italic text-sky-700">{debugInfo.note}</div>
-              )}
-              {debugInfo?.hint && (
-                <div className="italic text-sky-700">
-                  Hint: {debugInfo.hint}
-                </div>
-              )}
-
-              {copyState.error && (
-                <div className="text-red-600">{copyState.error}</div>
-              )}
-            </div>
-          </div>
-        )}
-      </CardContent>
-
-      <CardFooter className="justify-center text-xs text-gray-500">
-        &copy; {new Date().getFullYear()} np-dms.work
-      </CardFooter>
-    </Card>
-  );
-}