Redesign login page (#5)

- Rename header to "Assistant System", subtitle to "Вхід у систему"
- Glassmorphism card over animated gradient backdrop, logo mark
- Password visibility toggle, larger inputs, focus rings

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-25 15:21:11 +03:00
co-authored by Claude Opus 5.5
parent f6971a612f
commit 47df3a78dc
2 changed files with 247 additions and 40 deletions
+40 -12
View File
@@ -19,6 +19,7 @@ export function LoginPage() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [submitting, setSubmitting] = useState(false)
const [formError, setFormError] = useState<string | null>(null)
@@ -45,10 +46,22 @@ export function LoginPage() {
return (
<div className="login-page">
<div className="login-backdrop" aria-hidden="true">
<span className="login-blob login-blob--a" />
<span className="login-blob login-blob--b" />
<span className="login-blob login-blob--c" />
</div>
<div className="login-card">
<div className="login-header">
<h1>lux_fiscal</h1>
<p>Вход в систему фискализации заказов</p>
<div className="login-logo" aria-hidden="true">
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 3l7 4v5c0 4.5-3 8-7 9-4-1-7-4.5-7-9V7l7-4z" />
<path d="M9 12l2 2 4-4" />
</svg>
</div>
<h1>Assistant System</h1>
<p>Вхід у систему</p>
</div>
<form onSubmit={handleSubmit} noValidate>
@@ -74,16 +87,31 @@ export function LoginPage() {
<div className="login-field">
<label htmlFor={passwordId}>Пароль</label>
<input
id={passwordId}
type="password"
autoComplete="current-password"
required
value={password}
disabled={submitting}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
/>
<div className="login-password">
<input
id={passwordId}
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
required
value={password}
disabled={submitting}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
/>
<button
type="button"
className="login-toggle"
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
aria-pressed={showPassword}
>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
<circle cx="12" cy="12" r="3" />
{showPassword && <path d="M3 3l18 18" />}
</svg>
</button>
</div>
</div>
<button type="submit" className="login-submit" disabled={submitting}>