420 lines
12 KiB
TypeScript
420 lines
12 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
||
import { LoginRequest, LoginResponse } from "../items";
|
||
|
||
interface LoginProps {
|
||
onLogin: (token: string) => void;
|
||
}
|
||
|
||
export function Login({ onLogin }: LoginProps) {
|
||
const usernameInputRef = useRef<HTMLInputElement>(null);
|
||
const [username, setUsername] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
|
||
const [isSuccess, setIsSuccess] = useState(false);
|
||
const [shakeCard, setShakeCard] = useState(false);
|
||
|
||
useEffect(() => {
|
||
usernameInputRef.current?.focus();
|
||
}, []);
|
||
|
||
const validateForm = () => {
|
||
const errors: { username?: string, password?: string } = {};
|
||
if (!username.trim()) errors.username = "Username is required";
|
||
if (!password) errors.password = "Password is required";
|
||
setFieldErrors(errors);
|
||
return Object.keys(errors).length === 0;
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError("");
|
||
|
||
if (!validateForm()) {
|
||
setShakeCard(true);
|
||
setTimeout(() => setShakeCard(false), 500);
|
||
return;
|
||
}
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
const req = LoginRequest.create({ username: username.trim(), password });
|
||
const body = LoginRequest.encode(req).finish();
|
||
|
||
const res = await fetch("/auth/login", {
|
||
method: "POST",
|
||
body,
|
||
headers: {
|
||
"Content-Type": "application/octet-stream",
|
||
},
|
||
});
|
||
|
||
const buffer = await res.arrayBuffer();
|
||
const response = LoginResponse.decode(new Uint8Array(buffer));
|
||
|
||
if (response.success) {
|
||
setIsSuccess(true);
|
||
onLogin(response.token);
|
||
} else {
|
||
setError(response.message || "Login failed");
|
||
setShakeCard(true);
|
||
setTimeout(() => setShakeCard(false), 500);
|
||
}
|
||
} catch (err) {
|
||
console.error("Login error:", err);
|
||
setError("An unexpected error occurred. Please try again.");
|
||
setShakeCard(true);
|
||
setTimeout(() => setShakeCard(false), 500);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === "Enter") {
|
||
handleSubmit(e);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className="card login-card"
|
||
style={{
|
||
maxWidth: "420px",
|
||
margin: "6rem auto",
|
||
padding: "2.5rem",
|
||
background: "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
|
||
position: "relative"
|
||
}}
|
||
>
|
||
{isSubmitting && (
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||
borderRadius: "16px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
zIndex: 10,
|
||
backdropFilter: "blur(2px)"
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: "48px",
|
||
height: "48px",
|
||
border: "4px solid rgba(255, 255, 255, 0.2)",
|
||
borderTopColor: "white",
|
||
borderRadius: "50%",
|
||
animation: "spin 0.8s linear infinite"
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{isSuccess && (
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: "1rem",
|
||
animation: "fadeInScale 0.5s ease forwards",
|
||
zIndex: 10
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: "64px",
|
||
height: "64px",
|
||
borderRadius: "50%",
|
||
backgroundColor: "#4caf50",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
fontSize: "2rem",
|
||
color: "white",
|
||
boxShadow: "0 0 20px rgba(76, 175, 80, 0.5)"
|
||
}}
|
||
>
|
||
✓
|
||
</div>
|
||
<span style={{ color: "#4caf50", fontWeight: 600, fontSize: "1.1rem" }}>
|
||
Success!
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<h2
|
||
style={{
|
||
textAlign: "center",
|
||
marginBottom: "0.5rem",
|
||
fontSize: "2rem",
|
||
fontWeight: 700
|
||
}}
|
||
>
|
||
🎮 Login
|
||
</h2>
|
||
<p
|
||
style={{
|
||
textAlign: "center",
|
||
color: "var(--text-muted)",
|
||
marginBottom: "2rem",
|
||
fontSize: "0.95rem"
|
||
}}
|
||
>
|
||
Welcome back! Please sign in to continue.
|
||
</p>
|
||
|
||
<form onSubmit={handleSubmit} className="form-group">
|
||
<div className="form-group" style={{ marginBottom: "1.5rem" }}>
|
||
<label
|
||
style={{
|
||
display: "block",
|
||
marginBottom: "0.5rem",
|
||
fontWeight: 500,
|
||
color: "var(--text-color)",
|
||
fontSize: "0.95rem"
|
||
}}
|
||
>
|
||
Username
|
||
</label>
|
||
<div
|
||
style={{
|
||
position: "relative",
|
||
display: "flex",
|
||
alignItems: "center"
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
position: "absolute",
|
||
left: "0.75rem",
|
||
color: "var(--text-muted)",
|
||
pointerEvents: "none",
|
||
fontSize: "1.1rem"
|
||
}}
|
||
>
|
||
👤
|
||
</span>
|
||
<input
|
||
ref={usernameInputRef}
|
||
type="text"
|
||
value={username}
|
||
onChange={(e) => {
|
||
setUsername(e.target.value);
|
||
if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
|
||
}}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="Enter your username"
|
||
aria-label="Username"
|
||
aria-invalid={!!fieldErrors.username}
|
||
aria-describedby={fieldErrors.username ? "username-error" : undefined}
|
||
style={{
|
||
width: "100%",
|
||
paddingLeft: "2.75rem",
|
||
paddingRight: "0.75rem",
|
||
paddingTop: "0.75rem",
|
||
paddingBottom: "0.75rem",
|
||
borderColor: fieldErrors.username ? "#f44336" : undefined,
|
||
borderWidth: fieldErrors.username ? "2px" : "1px",
|
||
fontSize: "1rem"
|
||
}}
|
||
/>
|
||
</div>
|
||
{fieldErrors.username && (
|
||
<span
|
||
id="username-error"
|
||
role="alert"
|
||
style={{
|
||
color: "#ff6b6b",
|
||
fontSize: "0.85rem",
|
||
marginTop: "0.5rem",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "0.25rem"
|
||
}}
|
||
>
|
||
⚠️ {fieldErrors.username}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="form-group" style={{ marginBottom: "2rem" }}>
|
||
<label
|
||
style={{
|
||
display: "block",
|
||
marginBottom: "0.5rem",
|
||
fontWeight: 500,
|
||
color: "var(--text-color)",
|
||
fontSize: "0.95rem"
|
||
}}
|
||
>
|
||
Password
|
||
</label>
|
||
<div
|
||
style={{
|
||
position: "relative",
|
||
display: "flex",
|
||
alignItems: "center"
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
position: "absolute",
|
||
left: "0.75rem",
|
||
color: "var(--text-muted)",
|
||
pointerEvents: "none",
|
||
fontSize: "1.1rem"
|
||
}}
|
||
>
|
||
🔒
|
||
</span>
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => {
|
||
setPassword(e.target.value);
|
||
if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
|
||
}}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder="Enter your password"
|
||
aria-label="Password"
|
||
aria-invalid={!!fieldErrors.password}
|
||
aria-describedby={fieldErrors.password ? "password-error" : undefined}
|
||
style={{
|
||
width: "100%",
|
||
paddingLeft: "2.75rem",
|
||
paddingRight: "0.75rem",
|
||
paddingTop: "0.75rem",
|
||
paddingBottom: "0.75rem",
|
||
borderColor: fieldErrors.password ? "#f44336" : undefined,
|
||
borderWidth: fieldErrors.password ? "2px" : "1px",
|
||
fontSize: "1rem"
|
||
}}
|
||
/>
|
||
</div>
|
||
{fieldErrors.password && (
|
||
<span
|
||
id="password-error"
|
||
role="alert"
|
||
style={{
|
||
color: "#ff6b6b",
|
||
fontSize: "0.85rem",
|
||
marginTop: "0.5rem",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "0.25rem"
|
||
}}
|
||
>
|
||
⚠️ {fieldErrors.password}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
style={{
|
||
marginTop: "0.5rem",
|
||
width: "100%",
|
||
padding: "0.875rem",
|
||
fontSize: "1rem",
|
||
fontWeight: 600,
|
||
opacity: isSubmitting ? 0.7 : 1,
|
||
cursor: isSubmitting ? "not-allowed" : "pointer",
|
||
background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
|
||
border: "none",
|
||
transition: "transform 0.1s, box-shadow 0.2s"
|
||
}}
|
||
disabled={isSubmitting}
|
||
onMouseEnter={(e) => {
|
||
if (!isSubmitting) {
|
||
e.currentTarget.style.transform = "translateY(-1px)";
|
||
e.currentTarget.style.boxShadow = "0 4px 12px rgba(9, 109, 192, 0.4)";
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (!isSubmitting) {
|
||
e.currentTarget.style.transform = "translateY(0)";
|
||
e.currentTarget.style.boxShadow = "none";
|
||
}
|
||
}}
|
||
onMouseDown={(e) => {
|
||
if (!isSubmitting) {
|
||
e.currentTarget.style.transform = "translateY(0)";
|
||
}
|
||
}}
|
||
>
|
||
Login
|
||
</button>
|
||
</form>
|
||
|
||
{error && (
|
||
<div
|
||
role="alert"
|
||
style={{
|
||
backgroundColor: "rgba(244, 67, 54, 0.15)",
|
||
border: "1px solid rgba(244, 67, 54, 0.4)",
|
||
color: "#ff6b6b",
|
||
padding: "0.875rem 1rem",
|
||
borderRadius: "8px",
|
||
marginTop: "1.5rem",
|
||
textAlign: "center",
|
||
fontSize: "0.9rem",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
gap: "0.5rem"
|
||
}}
|
||
>
|
||
⚠️ {error}
|
||
</div>
|
||
)}
|
||
|
||
<style>{`
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes fadeInScale {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(-50%, -40%) scale(0.8);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
}
|
||
|
||
.login-card {
|
||
animation: ${shakeCard ? "shake 0.5s ease" : "none"};
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% {
|
||
transform: translateX(0);
|
||
}
|
||
20%, 60% {
|
||
transform: translateX(-8px);
|
||
}
|
||
40%, 80% {
|
||
transform: translateX(8px);
|
||
}
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|