ログインフォームを追加

Author: KaichiManabe

server/src/index.ts

@@ -4,6 +4,7 @@ import csrf from "./lib/cross-origin/block-unknown-origin";
 import cors from "./lib/cross-origin/multi-origin-cors";
 import { initializeSocket } from "./lib/socket/socket";
 import { allUrlMustBeValid, panic } from "./lib/utils";
+import adminRoutes from "./router/admin";
 import chatRoutes from "./router/chat";
 import coursesRoutes from "./router/courses";
 import matchesRoutes from "./router/matches";
@@ -49,6 +50,7 @@ app.use("/courses", coursesRoutes);
 app.use("/requests", requestsRoutes);
 app.use("/matches", matchesRoutes);
 app.use("/chat", chatRoutes);
+app.use("/admin", adminRoutes);
 
 export function main() {
   // サーバーの起動

server/src/router/admin.ts

@@ -0,0 +1,39 @@
+import { safeParseInt } from "common/lib/result/safeParseInt";
+import { serialize } from "cookie";
+import express from "express";
+import { z } from "zod";
+import { safeGetUserId } from "../firebase/auth/db";
+import * as core from "../functions/chat";
+import * as ws from "../lib/socket/socket";
+
+const router = express.Router();
+
+export const adminLoginForm = z.object({
+  userName: z.string(),
+  password: z.string(),
+});
+
+router.post("/login", async (req, res) => {
+  const user = await safeGetUserId(req);
+  if (!user.ok) return res.status(401).send("auth error");
+
+  const form = adminLoginForm.safeParse(req.body);
+  if (!form.success) {
+    return res.status(422).send("invalid format");
+  }
+  if (form.data.userName !== "admin" && form.data.password !== "password") {
+    return res.status(401).send("Failed to login Admin Page.");
+  }
+  // // 認証成功時にCookieを設定
+  // const cookie = serialize("authToken", "admin-token", {
+  //   httpOnly: true,
+  //   secure: process.env.NODE_ENV === "production",
+  //   sameSite: "strict",
+  //   path: "/",
+  //   maxAge: 60 * 60 * 24, // 1日
+  // });
+
+  res.status(201).json({ message: "Login successful" });
+});
+
+export default router;

web/api/admin/login/route.ts

@@ -1,24 +1,15 @@
-import { serialize } from "cookie";
-import { NextResponse } from "next/server";
+import { credFetch } from "../../../firebase/auth/lib";
+import endpoints from "../../internal/endpoints";
 
-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日
-    });
+export async function adminLogin(userName: string, password: string) {
+  const body = { userName, password };
 
-    const response = NextResponse.json({ message: "Login successful" });
-    response.headers.set("Set-Cookie", cookie);
-    return response;
+  const res = await credFetch("POST", endpoints.adminLogin, body);
+
+  if (!res.ok) {
+    const errorData = await res.json();
+    throw new Error(errorData.message || "ログインに失敗しました。");
   }
 
-  return NextResponse.json({ message: "Invalid credentials" }, { status: 401 });
+  return res.json();
 }

web/api/internal/endpoints.ts

@@ -366,6 +366,8 @@ export const pictureOf = (guid: GUID) => `${origin}/picture/${guid}`;
  */
 export const picture = `${origin}/picture`;
 
+export const adminLogin = `${origin}/admin/login`;
+
 export default {
   user,
   me,
@@ -395,4 +397,5 @@ export default {
   coursesMineOverlaps,
   pictureOf,
   picture,
+  adminLogin,
 };

web/app/admin/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { adminLogin } from "../../../api/admin/login/route";
 
 export default function LoginPage() {
   const [name, setName] = useState("");
@@ -11,24 +12,20 @@ export default function LoginPage() {
   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) {
+    try {
+      await adminLogin(name, password);
+      alert("成功しました。遷移します");
       router.replace("/admin");
-    } else {
-      alert("Invalid credentials");
+    } catch (e) {
+      alert("ログインに失敗しました");
     }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+    <div className="flex min-h-screen items-center justify-center">
       <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">

web/app/admin/page.tsx

@@ -6,16 +6,16 @@ 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]);
+  // useEffect(() => {
+  //   const checkAuth = async () => {
+  //     console.log("こんにちはあああ")
+  //     const res = await fetch("/admin/validate");
+  //     if (!res.ok) {
+  //       router.replace("/admin/login");
+  //     }
+  //   };
+  //   checkAuth();
+  // }, [router]);
 
   return <div>Welcome to the Admin Dashboard</div>;
 }