350b2bfb28
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 4m12s
FD2 spawn-test outcome — login subtitle contrast ~4.6 -> ~7.5:1 over translucent card (FD5 WCAG-AA floor). On-scale token, no layout shift. Mirror x2 app. Build x2 PASS, 0 TS error. Test 181 unchanged (FE-only, no .cs). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
import { useState, type FormEvent } from 'react'
|
|
import { useNavigate, useLocation } from 'react-router-dom'
|
|
import { toast } from 'sonner'
|
|
import { Button } from '@/components/ui/Button'
|
|
import { Input } from '@/components/ui/Input'
|
|
import { Label } from '@/components/ui/Label'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
import axios from 'axios'
|
|
|
|
export function LoginPage() {
|
|
const { login } = useAuth()
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const [email, setEmail] = useState('admin@solutionerp.local')
|
|
const [password, setPassword] = useState('Admin@123456')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
setIsSubmitting(true)
|
|
try {
|
|
await login({ email, password })
|
|
const redirectTo = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/dashboard'
|
|
navigate(redirectTo, { replace: true })
|
|
toast.success('Đăng nhập thành công')
|
|
} catch (err) {
|
|
let msg: string
|
|
if (axios.isAxiosError(err)) {
|
|
if (err.code === 'ERR_NETWORK' || err.message === 'Network Error') {
|
|
const apiUrl = (import.meta.env.VITE_API_BASE_URL ?? window.location.origin) + '/api'
|
|
msg = `Không thể kết nối ${apiUrl}. Check dev tools F12 → Network. Có thể do cache cũ — thử Ctrl+Shift+R hoặc tab ẩn danh.`
|
|
} else {
|
|
msg = err.response?.data?.detail ?? err.response?.data?.title ?? err.message
|
|
}
|
|
} else {
|
|
msg = 'Lỗi không xác định'
|
|
}
|
|
toast.error(`Đăng nhập thất bại: ${msg}`, { duration: 8000 })
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-brand-50 to-slate-100 px-4">
|
|
{/* Subtle decorative orbs */}
|
|
<div className="pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full bg-brand-200/40 blur-3xl" />
|
|
<div className="pointer-events-none absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-brand-300/30 blur-3xl" />
|
|
|
|
<div className="relative w-full max-w-md rounded-2xl border border-slate-200/70 bg-white/90 p-10 shadow-xl backdrop-blur">
|
|
<div className="mb-8 flex flex-col items-center text-center">
|
|
<img src="/logo.png" alt="Solutions" className="h-14 w-auto" />
|
|
<div className="mt-4 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
|
|
ERP · Hệ thống quản trị
|
|
</div>
|
|
<div className="mt-1 text-sm text-slate-600">Đăng nhập để tiếp tục</div>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
autoComplete="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="password">Mật khẩu</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
autoComplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Đang đăng nhập…' : 'Đăng nhập'}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|