搭建用户体系
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
import { useState } from 'react'
|
||||
import { Shield, Lock, AlertCircle, Loader2, UserPlus, LogIn } from 'lucide-react'
|
||||
import { api, setToken } from '@/lib/api'
|
||||
import { setStoredUser } from '@/lib/auth'
|
||||
|
||||
interface LoginFormProps {
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
export function LoginForm({ onSuccess }: LoginFormProps) {
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login')
|
||||
const [username, setUsername] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
if (!username.trim() || !password.trim()) {
|
||||
setError('请输入用户名和密码')
|
||||
return
|
||||
}
|
||||
if (mode === 'register' && password.length < 6) {
|
||||
setError('密码长度至少 6 位')
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res =
|
||||
mode === 'login'
|
||||
? await api.login({ username: username.trim(), password })
|
||||
: await api.register({
|
||||
username: username.trim(),
|
||||
email: email.trim() || undefined,
|
||||
password,
|
||||
})
|
||||
setToken(res.token)
|
||||
setStoredUser(res.user)
|
||||
onSuccess()
|
||||
} catch (err: any) {
|
||||
setError(err?.message || '操作失败，请稍后重试')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
<div className="rounded-card border border-border bg-surface/80 backdrop-blur-sm p-6">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div
|
||||
className="rounded-2xl p-4 border border-border"
|
||||
style={{ background: 'linear-gradient(135deg, #8B5CF622, transparent)' }}
|
||||
>
|
||||
<Shield className="h-8 w-8" style={{ color: '#8B5CF6' }} />
|
||||
</div>
|
||||
<h1 className="mt-5 text-2xl font-bold text-foreground tracking-tight">
|
||||
{mode === 'login' ? '登录账号' : '注册账号'}
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-secondary leading-relaxed">
|
||||
{mode === 'login'
|
||||
? '请输入用户名和密码进入系统。'
|
||||
: '注册后默认获得用户权限。'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
placeholder="用户名"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2.5 rounded-input bg-base border border-border text-sm focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mode === 'register' && (
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted">
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
placeholder="邮箱（可选）"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2.5 rounded-input bg-base border border-border text-sm focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-all"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted">
|
||||
<Lock className="h-4 w-4" />
|
||||
</div>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
|
||||
placeholder="密码"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2.5 rounded-input bg-base border border-border text-sm focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 rounded-btn border border-danger/30 bg-danger/10 px-3 py-2.5 text-xs text-danger">
|
||||
<AlertCircle className="h-3.5 w-3.5 mt-px shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full inline-flex items-center justify-center gap-2 px-5 h-11 rounded-xl bg-accent text-white text-sm font-semibold shadow-lg shadow-accent/20 hover:bg-accent/90 hover:shadow-accent/30 disabled:opacity-60 transition-all"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : mode === 'login' ? (
|
||||
<LogIn className="h-4 w-4" />
|
||||
) : (
|
||||
<UserPlus className="h-4 w-4" />
|
||||
)}
|
||||
{loading ? '处理中…' : mode === 'login' ? '登录' : '注册'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-5 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMode(mode === 'login' ? 'register' : 'login')
|
||||
setError('')
|
||||
}}
|
||||
className="text-xs text-secondary hover:text-accent transition-colors"
|
||||
>
|
||||
{mode === 'login' ? '没有账号？立即注册' : '已有账号？直接登录'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// 简单内联 motion 组件，避免引入 framer-motion 依赖
|
||||
const motion = {
|
||||
div: ({ children, className, ...props }: any) => {
|
||||
return (
|
||||
<div
|
||||
ref={(el) => {
|
||||
if (el && props.initial) {
|
||||
el.style.opacity = String(props.initial.opacity ?? 1)
|
||||
el.style.transform = `translateY(${props.initial.y ?? 0}px)`
|
||||
requestAnimationFrame(() => {
|
||||
el.style.transition = `all ${props.transition?.duration ?? 0.3}s ${(props.transition?.ease || [0.16, 1, 0.3, 1]).join(',')}`
|
||||
el.style.opacity = String(props.animate?.opacity ?? 1)
|
||||
el.style.transform = `translateY(${props.animate?.y ?? 0}px)`
|
||||
})
|
||||
}
|
||||
}}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user