init: initial commit
This commit is contained in:
Blizzard
@@ -0,0 +1,164 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { loginApi, getCaptchaApi } from '../../api/auth';
|
||||
import { toast } from 'sonner';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Label } from '../../components/ui/label';
|
||||
import { Radio } from 'lucide-react';
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const setToken = useAuthStore((state) => state.setToken);
|
||||
const setUserInfo = useAuthStore((state) => state.setUserInfo);
|
||||
|
||||
const [account, setAccount] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [captcha, setCaptcha] = useState('');
|
||||
const [captchaId, setCaptchaId] = useState('');
|
||||
const [captchaImage, setCaptchaImage] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Guard to ensure we only fetch on mount once
|
||||
const mounted = useRef(false);
|
||||
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res: any = await getCaptchaApi();
|
||||
const b64 = res.captcha;
|
||||
if (b64 && !b64.startsWith('data:')) {
|
||||
setCaptchaImage(`data:image/png;base64,${b64}`);
|
||||
} else {
|
||||
setCaptchaImage(b64);
|
||||
}
|
||||
setCaptchaId(res.captchaId);
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted.current) {
|
||||
fetchCaptcha();
|
||||
mounted.current = true;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!account || !password) {
|
||||
toast.error('请输入账号和密码');
|
||||
return;
|
||||
}
|
||||
if (!captcha) {
|
||||
toast.error('请输入验证码');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res: any = await loginApi({
|
||||
account,
|
||||
password,
|
||||
captcha,
|
||||
captchaId
|
||||
});
|
||||
toast.success('登录成功');
|
||||
setToken(res.token);
|
||||
setUserInfo(res.user);
|
||||
navigate('/');
|
||||
} catch (error: any) {
|
||||
fetchCaptcha();
|
||||
setCaptcha('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4">
|
||||
<Card className="w-full max-w-sm border-none shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-slate-900">
|
||||
<CardHeader className="space-y-2 flex flex-col items-center pt-10 pb-6 bg-slate-50/50">
|
||||
<div className="w-16 h-16 bg-primary text-primary-foreground rounded-2xl flex items-center justify-center mb-2 shadow-xl shadow-primary/20 rotate-3 transform hover:rotate-0 transition-transform">
|
||||
<Radio className="w-8 h-8" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<CardTitle className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">早安电台</CardTitle>
|
||||
<CardDescription className="text-slate-500 font-medium">
|
||||
后台管理系统 portal
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-8">
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="account">账号</Label>
|
||||
<Input
|
||||
id="account"
|
||||
placeholder="请输入管理员账号"
|
||||
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary"
|
||||
value={account}
|
||||
onChange={(e) => setAccount(e.target.value)}
|
||||
disabled={loading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">密码</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="captcha">验证码</Label>
|
||||
<div className="flex gap-3">
|
||||
<Input
|
||||
id="captcha"
|
||||
placeholder="验证码"
|
||||
autoComplete="off"
|
||||
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary flex-1"
|
||||
value={captcha}
|
||||
onChange={(e) => setCaptcha(e.target.value)}
|
||||
disabled={loading}
|
||||
required
|
||||
/>
|
||||
{captchaImage ? (
|
||||
<div
|
||||
className="h-12 w-32 border rounded-xl overflow-hidden bg-white shrink-0 cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => fetchCaptcha()}
|
||||
>
|
||||
<img
|
||||
src={captchaImage}
|
||||
alt="captcha"
|
||||
className="w-full h-full object-contain p-1"
|
||||
title="点击刷新"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-12 w-32 border rounded-xl bg-slate-100 animate-pulse shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-12 text-base font-bold rounded-2xl shadow-lg shadow-primary/20 mt-4 active:scale-[0.98] transition-all"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '验证中...' : '立即登录'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user