blob: 7dc71e72576bf0a32bb8b69fd7853d5123b6505c (
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
|
import { useSetAtom } from "jotai";
import { useState } from "react";
import { useLocation } from "wouter";
import { loginAtom } from "../atoms";
export function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false);
const login = useSetAtom(loginAtom);
const [, setLocation] = useLocation();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setIsLoading(true);
try {
await login({ username, password });
setLocation("/");
} catch (err) {
setError(err instanceof Error ? err.message : "Login failed");
} finally {
setIsLoading(false);
}
};
return (
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-stone-100 to-stone-50 px-4">
<div className="w-full max-w-sm">
<div className="mb-8 text-center">
<h1 className="text-2xl font-semibold tracking-tight text-stone-900">
feedaka
</h1>
<p className="mt-2 text-sm text-stone-500">Sign in to your account</p>
</div>
<div className="rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label
htmlFor="username"
className="mb-1.5 block text-sm font-medium text-stone-700"
>
Username
</label>
<input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
className="w-full rounded-lg border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 transition-all duration-200 placeholder:text-stone-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-70"
disabled={isLoading}
/>
</div>
<div>
<label
htmlFor="password"
className="mb-1.5 block text-sm font-medium text-stone-700"
>
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
className="w-full rounded-lg border border-stone-200 bg-white px-4 py-2.5 text-sm text-stone-900 transition-all duration-200 placeholder:text-stone-400 focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-70"
disabled={isLoading}
/>
</div>
{error && (
<div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">
{error}
</div>
)}
<button
type="submit"
disabled={isLoading}
className="w-full rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-medium text-white transition-all duration-200 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70"
>
{isLoading ? "Signing in..." : "Sign in"}
</button>
</form>
</div>
</div>
</div>
);
}
|
