Compare commits
2 Commits
0f780ef415
...
3859fc6f3b
| Author | SHA1 | Date | |
|---|---|---|---|
|
3859fc6f3b | ||
| c196ffc265 |
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,2 +1,4 @@
|
||||
target/
|
||||
cache/
|
||||
cache/
|
||||
tokens.bin
|
||||
.auth_key
|
||||
126
frontend/pnpm-lock.yaml
generated
126
frontend/pnpm-lock.yaml
generated
@ -59,7 +59,7 @@ importers:
|
||||
version: 5.9.3
|
||||
typescript-eslint:
|
||||
specifier: ^8.48.1
|
||||
version: 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
version: 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
vite:
|
||||
specifier: npm:rolldown-vite@7.2.5
|
||||
version: rolldown-vite@7.2.5(@types/node@24.10.1)
|
||||
@ -368,63 +368,63 @@ packages:
|
||||
'@types/react@19.2.7':
|
||||
resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
|
||||
|
||||
'@typescript-eslint/eslint-plugin@8.52.0':
|
||||
resolution: {integrity: sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==}
|
||||
'@typescript-eslint/eslint-plugin@8.53.0':
|
||||
resolution: {integrity: sha512-eEXsVvLPu8Z4PkFibtuFJLJOTAV/nPdgtSjkGoPpddpFk3/ym2oy97jynY6ic2m6+nc5M8SE1e9v/mHKsulcJg==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
'@typescript-eslint/parser': ^8.52.0
|
||||
'@typescript-eslint/parser': ^8.53.0
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/parser@8.52.0':
|
||||
resolution: {integrity: sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==}
|
||||
'@typescript-eslint/parser@8.53.0':
|
||||
resolution: {integrity: sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/project-service@8.52.0':
|
||||
resolution: {integrity: sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==}
|
||||
'@typescript-eslint/project-service@8.53.0':
|
||||
resolution: {integrity: sha512-Bl6Gdr7NqkqIP5yP9z1JU///Nmes4Eose6L1HwpuVHwScgDPPuEWbUVhvlZmb8hy0vX9syLk5EGNL700WcBlbg==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/scope-manager@8.52.0':
|
||||
resolution: {integrity: sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==}
|
||||
'@typescript-eslint/scope-manager@8.53.0':
|
||||
resolution: {integrity: sha512-kWNj3l01eOGSdVBnfAF2K1BTh06WS0Yet6JUgb9Cmkqaz3Jlu0fdVUjj9UI8gPidBWSMqDIglmEXifSgDT/D0g==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@typescript-eslint/tsconfig-utils@8.52.0':
|
||||
resolution: {integrity: sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==}
|
||||
'@typescript-eslint/tsconfig-utils@8.53.0':
|
||||
resolution: {integrity: sha512-K6Sc0R5GIG6dNoPdOooQ+KtvT5KCKAvTcY8h2rIuul19vxH5OTQk7ArKkd4yTzkw66WnNY0kPPzzcmWA+XRmiA==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/type-utils@8.52.0':
|
||||
resolution: {integrity: sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==}
|
||||
'@typescript-eslint/type-utils@8.53.0':
|
||||
resolution: {integrity: sha512-BBAUhlx7g4SmcLhn8cnbxoxtmS7hcq39xKCgiutL3oNx1TaIp+cny51s8ewnKMpVUKQUGb41RAUWZ9kxYdovuw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/types@8.52.0':
|
||||
resolution: {integrity: sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==}
|
||||
'@typescript-eslint/types@8.53.0':
|
||||
resolution: {integrity: sha512-Bmh9KX31Vlxa13+PqPvt4RzKRN1XORYSLlAE+sO1i28NkisGbTtSLFVB3l7PWdHtR3E0mVMuC7JilWJ99m2HxQ==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@typescript-eslint/typescript-estree@8.52.0':
|
||||
resolution: {integrity: sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==}
|
||||
'@typescript-eslint/typescript-estree@8.53.0':
|
||||
resolution: {integrity: sha512-pw0c0Gdo7Z4xOG987u3nJ8akL9093yEEKv8QTJ+Bhkghj1xyj8cgPaavlr9rq8h7+s6plUJ4QJYw2gCZodqmGw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/utils@8.52.0':
|
||||
resolution: {integrity: sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==}
|
||||
'@typescript-eslint/utils@8.53.0':
|
||||
resolution: {integrity: sha512-XDY4mXTez3Z1iRDI5mbRhH4DFSt46oaIFsLg+Zn97+sYrXACziXSQcSelMybnVZ5pa1P6xYkPr5cMJyunM1ZDA==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
typescript: '>=4.8.4 <6.0.0'
|
||||
|
||||
'@typescript-eslint/visitor-keys@8.52.0':
|
||||
resolution: {integrity: sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==}
|
||||
'@typescript-eslint/visitor-keys@8.53.0':
|
||||
resolution: {integrity: sha512-LZ2NqIHFhvFwxG0qZeLL9DvdNAHPGCY5dIRwBhyYeU+LfLhcStE1ImjsuTG/WaVh3XysGaeLW8Rqq7cGkPCFvw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@vitejs/plugin-react@5.1.2':
|
||||
@ -1007,8 +1007,8 @@ packages:
|
||||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
typescript-eslint@8.52.0:
|
||||
resolution: {integrity: sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA==}
|
||||
typescript-eslint@8.53.0:
|
||||
resolution: {integrity: sha512-xHURCQNxZ1dsWn0sdOaOfCSQG0HKeqSj9OexIxrz6ypU6wHYOdX2I3D2b8s8wFSsSOYJb+6q283cLiLlkEsBYw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
peerDependencies:
|
||||
eslint: ^8.57.0 || ^9.0.0
|
||||
@ -1370,14 +1370,14 @@ snapshots:
|
||||
dependencies:
|
||||
csstype: 3.2.3
|
||||
|
||||
'@typescript-eslint/eslint-plugin@8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/eslint-plugin@8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@eslint-community/regexpp': 4.12.2
|
||||
'@typescript-eslint/parser': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/scope-manager': 8.52.0
|
||||
'@typescript-eslint/type-utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.52.0
|
||||
'@typescript-eslint/parser': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/scope-manager': 8.53.0
|
||||
'@typescript-eslint/type-utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.53.0
|
||||
eslint: 9.39.1
|
||||
ignore: 7.0.5
|
||||
natural-compare: 1.4.0
|
||||
@ -1386,41 +1386,41 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/scope-manager': 8.52.0
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.52.0
|
||||
'@typescript-eslint/scope-manager': 8.53.0
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
'@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.53.0
|
||||
debug: 4.4.3
|
||||
eslint: 9.39.1
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/project-service@8.52.0(typescript@5.9.3)':
|
||||
'@typescript-eslint/project-service@8.53.0(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
debug: 4.4.3
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/scope-manager@8.52.0':
|
||||
'@typescript-eslint/scope-manager@8.53.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/visitor-keys': 8.52.0
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
'@typescript-eslint/visitor-keys': 8.53.0
|
||||
|
||||
'@typescript-eslint/tsconfig-utils@8.52.0(typescript@5.9.3)':
|
||||
'@typescript-eslint/tsconfig-utils@8.53.0(typescript@5.9.3)':
|
||||
dependencies:
|
||||
typescript: 5.9.3
|
||||
|
||||
'@typescript-eslint/type-utils@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/type-utils@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
'@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
debug: 4.4.3
|
||||
eslint: 9.39.1
|
||||
ts-api-utils: 2.4.0(typescript@5.9.3)
|
||||
@ -1428,14 +1428,14 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/types@8.52.0': {}
|
||||
'@typescript-eslint/types@8.53.0': {}
|
||||
|
||||
'@typescript-eslint/typescript-estree@8.52.0(typescript@5.9.3)':
|
||||
'@typescript-eslint/typescript-estree@8.53.0(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/project-service': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/visitor-keys': 8.52.0
|
||||
'@typescript-eslint/project-service': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
'@typescript-eslint/visitor-keys': 8.53.0
|
||||
debug: 4.4.3
|
||||
minimatch: 9.0.5
|
||||
semver: 7.7.3
|
||||
@ -1445,20 +1445,20 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/utils@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/utils@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@eslint-community/eslint-utils': 4.9.1(eslint@9.39.1)
|
||||
'@typescript-eslint/scope-manager': 8.52.0
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/scope-manager': 8.53.0
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
'@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
|
||||
eslint: 9.39.1
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/visitor-keys@8.52.0':
|
||||
'@typescript-eslint/visitor-keys@8.53.0':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 8.52.0
|
||||
'@typescript-eslint/types': 8.53.0
|
||||
eslint-visitor-keys: 4.2.1
|
||||
|
||||
'@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
|
||||
@ -1961,12 +1961,12 @@ snapshots:
|
||||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
|
||||
typescript-eslint@8.52.0(eslint@9.39.1)(typescript@5.9.3):
|
||||
typescript-eslint@8.53.0(eslint@9.39.1)(typescript@5.9.3):
|
||||
dependencies:
|
||||
'@typescript-eslint/eslint-plugin': 8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/parser': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/eslint-plugin': 8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/parser': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
|
||||
eslint: 9.39.1
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
|
||||
@ -41,6 +41,15 @@ function App() {
|
||||
_setTheme(ev.data as string);
|
||||
};
|
||||
|
||||
const addToast = useCallback((message: string, type: ToastType = "info") => {
|
||||
const id = Date.now();
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
}, []);
|
||||
|
||||
const removeToast = (id: number) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (theme !== "default" && theme !== "sakura") {
|
||||
document.body.classList.remove("sakura-theme");
|
||||
@ -73,15 +82,6 @@ function App() {
|
||||
return () => window.removeEventListener("unauthorized", handleUnauthorized);
|
||||
}, [addToast]);
|
||||
|
||||
const addToast = useCallback((message: string, type: ToastType = "info") => {
|
||||
const id = Date.now();
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
}, []);
|
||||
|
||||
const removeToast = (id: number) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
};
|
||||
|
||||
const fetchPeople = () => {
|
||||
if (!token) return;
|
||||
setIsLoading(true);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { LoginRequest, LoginResponse } from "../items";
|
||||
|
||||
interface LoginProps {
|
||||
@ -6,11 +6,18 @@ interface LoginProps {
|
||||
}
|
||||
|
||||
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 } = {};
|
||||
@ -24,7 +31,11 @@ export function Login({ onLogin }: LoginProps) {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!validateForm()) return;
|
||||
if (!validateForm()) {
|
||||
setShakeCard(true);
|
||||
setTimeout(() => setShakeCard(false), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
@ -44,110 +55,364 @@ export function Login({ onLogin }: LoginProps) {
|
||||
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" style={{ maxWidth: "400px", margin: "4rem auto" }}>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
|
||||
<form onSubmit={handleSubmit} className="form-group">
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
|
||||
}}
|
||||
placeholder="Enter your username"
|
||||
style={{
|
||||
borderColor: fieldErrors.username ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.username ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.username && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
|
||||
}}
|
||||
placeholder="Enter your password"
|
||||
style={{
|
||||
borderColor: fieldErrors.password ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.password ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.password && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.password}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
display: "inline-block",
|
||||
marginRight: "0.5rem"
|
||||
}}
|
||||
></span>
|
||||
Logging in...
|
||||
</>
|
||||
) : (
|
||||
"Login"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<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={{
|
||||
backgroundColor: "rgba(244, 67, 54, 0.1)",
|
||||
border: "1px solid rgba(244, 67, 54, 0.3)",
|
||||
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: "1rem",
|
||||
padding: "0.875rem 1rem",
|
||||
borderRadius: "8px",
|
||||
marginTop: "1rem",
|
||||
marginTop: "1.5rem",
|
||||
textAlign: "center",
|
||||
fontSize: "0.9rem"
|
||||
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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user