feat(m3): auth & user management with session, tests, and e2e

- Custom error classes (lib/errors.ts) and signed-cookie session (lib/auth/session.ts, HMAC-SHA256, httpOnly+sameSite=lax) - UserRepository + AuthService (bcrypt hashing, role/status checks, register/login/logout/getCurrentUser/updateProfile) - Auth helpers (getCurrentUser), user validator, API error handler - API routes: register (auto-login), login, logout, me, PATCH users/me, GET admin/migrations (admin-only guard) - middleware.ts redirects unauthenticated page access to /login - Screens: login (login/register toggle), profile, dashboard skeleton, home redirect - vitest: exclude e2e specs, setupFiles for SESSION_SECRET - playwright: run migrate before dev server, set SESSION_SECRET - Unit tests (UserRepository, AuthService, session), integration auth-flow, e2e auth.spec (register/login/logout/protected/401)
2026-06-25 00:36:42 +02:00
parent 40ff4fb909
commit 21b9f03e9d
27 changed files with 1578 additions and 10 deletions
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@ -0,0 +1,131 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+
+type Mode = 'login' | 'register';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [mode, setMode] = useState<Mode>('login');
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const endpoint =
+      mode === 'login' ? '/api/auth/login' : '/api/auth/register';
+    const payload =
+      mode === 'login' ? { email, password } : { name, email, password };
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+
+    if (res.ok) {
+      router.push('/dashboard');
+      return;
+    }
+
+    const data = (await res.json().catch(() => null)) as {
+      error?: { message?: string };
+    } | null;
+    setError(data?.error?.message ?? '処理に失敗しました');
+    setLoading(false);
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-8">
+      <div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
+        <h1 className="text-2xl font-bold">
+          {mode === 'login' ? 'ログイン' : '新規登録'}
+        </h1>
+
+        <form className="mt-6 space-y-4" onSubmit={onSubmit}>
+          {mode === 'register' && (
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium">
+                表示名
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="mt-1 w-full rounded border px-3 py-2"
+                required
+              />
+            </div>
+          )}
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium">
+              メールアドレス
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 w-full rounded border px-3 py-2"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium">
+              パスワード
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete={
+                mode === 'login' ? 'current-password' : 'new-password'
+              }
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-1 w-full rounded border px-3 py-2"
+              required
+              minLength={8}
+            />
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-600" role="alert">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {loading ? '処理中...' : mode === 'login' ? 'ログイン' : '登録する'}
+          </button>
+        </form>
+
+        <button
+          type="button"
+          className="mt-4 w-full text-center text-sm text-blue-600 hover:underline"
+          onClick={() => {
+            setMode(mode === 'login' ? 'register' : 'login');
+            setError(null);
+          }}
+        >
+          {mode === 'login' ? '新規登録はこちら' : 'ログイン画面に戻る'}
+        </button>
+      </div>
+    </main>
+  );
+}