戻す必要がある

Author: KaichiManabe

package-lock.json

@@ -13,10 +13,11 @@
     "@biomejs/biome": "^1.9.1",
     "@types/bun": "^1.1.10",
     "cspell": "^8.14.4",
-    "typescript": "^5.6.2",
-    "lefthook": "^1.8.2"
+    "lefthook": "^1.8.2",
+    "typescript": "^5.6.2"
   },
   "dependencies": {
+    "cookie": "^1.0.2",
     "zod": "^3.23.8"
   },
   "trustedDependencies": ["@biomejs/biome", "lefthook"]

package.json

@@ -0,0 +1,24 @@
+import { serialize } from "cookie";
+import { NextResponse } from "next/server";
+
+export async function POST(request) {
+  const body = await request.json();
+  const { name, password } = body;
+  console.log("あああ", body);
+  if (name === "admin" && password === "password123") {
+    // 認証成功時にCookieを設定
+    const cookie = serialize("authToken", "admin-token", {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "strict",
+      path: "/",
+      maxAge: 60 * 60 * 24, // 1日
+    });
+
+    const response = NextResponse.json({ message: "Login successful" });
+    response.headers.set("Set-Cookie", cookie);
+    return response;
+  }
+
+  return NextResponse.json({ message: "Invalid credentials" }, { status: 401 });
+}

web/api/admin/login/route.ts

@@ -0,0 +1,13 @@
+import { parse } from "cookie";
+import { NextResponse } from "next/server";
+
+export async function GET(request) {
+  const cookies = parse(request.headers.get("cookie") || "");
+  console.log("こんにちは", cookies);
+
+  if (cookies.authToken === "admin-token") {
+    return NextResponse.json({ isAuthenticated: true });
+  }
+
+  return NextResponse.json({ isAuthenticated: false }, { status: 401 });
+}

web/api/admin/validate/route.ts

@@ -1,12 +1,67 @@
-import AdminLoginForm from "~/components/admin/adminLoginForm";
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export default function LoginPage() {
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const router = useRouter();
+
+  const handleSubmit = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+
+    const res = await fetch("/admin/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, password }),
+    });
+
+    if (res.ok) {
+      router.replace("/admin");
+    } else {
+      alert("Invalid credentials");
+    }
+  };
+
   return (
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="md:-mt-32 relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4">
-        <h2>管理者ログインページ</h2>
-        <AdminLoginForm />
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="w-full max-w-md space-y-6 rounded-lg bg-white p-8 shadow-md">
+        <h2 className="text-center font-bold text-2xl text-gray-700">
+          管理者画面
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="form-control">
+            {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+            <label className="label">
+              <span className="label-text">Name</span>
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input input-bordered w-full"
+              placeholder="Enter your name"
+            />
+          </div>
+          <div className="form-control">
+            {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
+            <label className="label">
+              <span className="label-text">Password</span>
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="input input-bordered w-full"
+              placeholder="Enter your password"
+            />
+          </div>
+          <button type="submit" className="btn btn-primary w-full">
+            Login
+          </button>
+        </form>
       </div>
-    </main>
+    </div>
   );
 }

web/app/admin/login/page.tsx

@@ -1,3 +1,21 @@
-export default function Admin() {
-  return <div>管理者画面</div>;
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function AdminPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const res = await fetch("/admin/validate");
+      if (!res.ok) {
+        router.replace("/admin/login");
+      }
+    };
+
+    checkAuth();
+  }, [router]);
+
+  return <div>Welcome to the Admin Dashboard</div>;
 }