blob: 4130518db4590d3b12b0ce12e5ab23c78ee77051 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { type FormEvent, useState } from "react";
import { useLocation } from "wouter";
import BorderedContainer from "../components/BorderedContainer";
import InputText from "../components/InputText";
import SubmitButton from "../components/SubmitButton";
import { APP_NAME } from "../config";
import { useAuth } from "../hooks/useAuth";
import { usePageTitle } from "../hooks/usePageTitle";
export default function LoginPage() {
usePageTitle(`Login | ${APP_NAME}`);
const { login } = useAuth();
const [, navigate] = useLocation();
const [error, setError] = useState<string | null>(null);
const [fieldErrors, setFieldErrors] = useState<{
username?: string;
password?: string;
}>({});
const [submitting, setSubmitting] = useState(false);
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const username = String(formData.get("username"));
const password = String(formData.get("password"));
const errors: { username?: string; password?: string } = {};
if (username === "") errors.username = "ユーザー名を入力してください";
if (password === "") errors.password = "パスワードを入力してください";
if (Object.keys(errors).length > 0) {
setFieldErrors(errors);
setError("ユーザー名またはパスワードが誤っています");
return;
}
setSubmitting(true);
setError(null);
setFieldErrors({});
try {
await login(username, password);
navigate("/dashboard");
} catch (err) {
setError(err instanceof Error ? err.message : "ログインに失敗しました");
} finally {
setSubmitting(false);
}
}
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="mx-2">
<BorderedContainer>
<form onSubmit={handleSubmit} className="w-full max-w-sm p-2">
<h2 className="text-2xl mb-6 text-center">
fortee アカウントでログイン
</h2>
{error && <p className="text-brand-500 text-sm mb-4">{error}</p>}
<div className="mb-4 flex flex-col gap-1">
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700"
>
ユーザー名
</label>
<InputText type="text" name="username" id="username" required />
{fieldErrors.username && (
<p className="text-red-500 text-sm">{fieldErrors.username}</p>
)}
</div>
<div className="mb-6 flex flex-col gap-1">
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700"
>
パスワード
</label>
<InputText
type="password"
name="password"
id="password"
autoComplete="current-password"
required
/>
{fieldErrors.password && (
<p className="text-red-500 text-sm">{fieldErrors.password}</p>
)}
</div>
<div className="flex justify-center">
<SubmitButton type="submit" disabled={submitting}>
{submitting ? "ログイン中..." : "ログイン"}
</SubmitButton>
</div>
</form>
</BorderedContainer>
</div>
</div>
);
}
|
