feat: แกไขสวน backend ใหเขากบ frontend
This commit is contained in:
admin
33
frontend/app/(auth)/layout.jsx
Normal file
33
frontend/app/(auth)/layout.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
// frontend/app/(auth)/layout.jsx
|
||||
|
||||
export const metadata = {
|
||||
title: "Authentication | DMS",
|
||||
description:
|
||||
"Login and user authentication pages for Document Management System",
|
||||
};
|
||||
|
||||
export default function AuthLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 to-sky-100">
|
||||
<div className="w-full max-w-md rounded-2xl shadow-lg bg-white p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6 text-center">
|
||||
<h1 className="text-2xl font-bold text-sky-800">
|
||||
Document Management System
|
||||
</h1>
|
||||
<p className="text-sm text-sky-600">LCBP3 Project</p>
|
||||
</div>
|
||||
|
||||
{/* Main content (children = page.jsx ของ login/register) */}
|
||||
<main>{children}</main>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-6 text-center text-xs text-gray-500">
|
||||
© {new Date().getFullYear()} np-dms.work
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,89 +1,341 @@
|
||||
// frontend/app/(auth)/login/page.jsx
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { API_BASE } from "@/lib/api";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useRouter, useSearchParams } 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";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const IS_DEV = process.env.NODE_ENV !== "production";
|
||||
|
||||
// URL builder กันเคสซ้ำ /api
|
||||
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 [err, setErr] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
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();
|
||||
setErr("");
|
||||
setIsLoading(true);
|
||||
setSubmitting(true);
|
||||
setError("");
|
||||
if (IS_DEV) {
|
||||
setDebugInfo(null);
|
||||
setCopyState({ copied: false, error: "" });
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/auth/login`, {
|
||||
const res = await fetch(loginUrl, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
setErr(data.error || "เข้าสู่ระบบไม่สำเร็จ");
|
||||
return;
|
||||
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 (data.token) {
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("refresh_token", data.refresh_token);
|
||||
if (data.user) {
|
||||
localStorage.setItem("user", JSON.stringify(data.user));
|
||||
}
|
||||
location.href = "/dashboard";
|
||||
} else {
|
||||
setErr("ไม่ได้รับ Token");
|
||||
// ✅ สำเร็จ
|
||||
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) },
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Login failed:", error);
|
||||
setErr("เกิดข้อผิดพลาดในการเชื่อมต่อ");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
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 (
|
||||
<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>
|
||||
<Card className="mx-auto w-full max-w-md 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="mt-4 rounded-xl border border-sky-200 bg-sky-50 p-3">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<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="max-h-48 overflow-auto rounded bg-white p-2">
|
||||
{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="max-h-48 overflow-auto rounded bg-white p-2">
|
||||
{JSON.stringify(debugInfo.error, null, 2)}
|
||||
</pre>
|
||||
</>
|
||||
)}
|
||||
|
||||
{debugInfo?.env && (
|
||||
<>
|
||||
<div className="font-medium">Env:</div>
|
||||
<pre className="max-h-40 overflow-auto rounded bg-white p-2">
|
||||
{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>
|
||||
)}
|
||||
<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>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="justify-center text-xs text-gray-500">
|
||||
© {new Date().getFullYear()} np-dms.work
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,34 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import type { NextRequest } from "next/server";
|
||||
|
||||
// ชื่อคุกกี้ให้ตรงกับ backend
|
||||
const COOKIE_NAME = "access_token";
|
||||
|
||||
export function middleware(req: NextRequest) {
|
||||
const protectedPaths = [
|
||||
"/dashboard","/drawings","/rfas","/transmittals","/correspondences",
|
||||
"/contracts-volumes","/users","/reports","/workflow","/health","/admin"
|
||||
];
|
||||
const { pathname } = req.nextUrl;
|
||||
const isProtected = protectedPaths.some(p => pathname.startsWith(p));
|
||||
if (!isProtected) return NextResponse.next();
|
||||
const hasToken = req.cookies.get("access_token");
|
||||
// ตรวจคุกกี้
|
||||
const hastoken = req.cookies.get(COOKIE_NAME)?.value;
|
||||
if (!hasToken) {
|
||||
const url = req.nextUrl.clone();
|
||||
url.pathname = "/login";
|
||||
return NextResponse.redirect(url);
|
||||
const loginUrl = new URL("/login", req.url);
|
||||
// จำเส้นทางเดิมไว้เพื่อเด้งกลับหลังล็อกอิน
|
||||
loginUrl.searchParams.set("from", pathname);
|
||||
return NextResponse.redirect(loginUrl);
|
||||
}
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = { matcher: [
|
||||
"/dashboard/:path*","/drawings/:path*","/rfas/:path*","/transmittals/:path*","/correspondences/:path*",
|
||||
"/contracts-volumes/:path*","/users/:path*","/reports/:path*","/workflow/:path*","/health/:path*","/admin/:path*"
|
||||
] };
|
||||
export const config = {
|
||||
matcher: [
|
||||
"/dashboard/:path*",
|
||||
"/drawings/:path*",
|
||||
"/rfas/:path*",
|
||||
"/transmittals/:path*",
|
||||
"/correspondences/:path*",
|
||||
"/contracts-volumes/:path*",
|
||||
"/users/:path*",
|
||||
"/reports/:path*",
|
||||
"/workflow/:path*",
|
||||
"/admin/:path*",
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user