135 lines
4.6 KiB
TypeScript
135 lines
4.6 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useForm } from 'react-hook-form'
|
|
import * as z from 'zod'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
|
|
import { Lock, User } from 'lucide-react'
|
|
import { useAuthStore } from '@/store/auth'
|
|
import { toast, Toaster } from 'sonner'
|
|
|
|
const formSchema = z.object({
|
|
account: z.string().min(3, '账号至少需要3个字符'),
|
|
password: z.string().min(6, '密码至少需要6个字符'),
|
|
})
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter()
|
|
const [loading, setLoading] = useState(false)
|
|
const setAuth = useAuthStore((state) => state.setAuth)
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
account: '',
|
|
password: '',
|
|
},
|
|
})
|
|
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
setLoading(true)
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(values),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || '登录失败')
|
|
}
|
|
|
|
if (data.success) {
|
|
toast.success("登录成功", {
|
|
description: "正在跳转到仪表盘...",
|
|
})
|
|
setAuth(true)
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
router.push('/dashboard')
|
|
router.refresh()
|
|
}
|
|
} catch (error) {
|
|
toast.error("登录失败", {
|
|
description: error instanceof Error ? error.message : "服务器连接失败，请稍后重试",
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<div className="flex h-screen items-center justify-center bg-gray-50">
|
|
<Card className="w-[350px] shadow-lg">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl font-bold text-center">登录</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="account"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>账号</FormLabel>
|
|
<FormControl>
|
|
<div className="relative">
|
|
<User className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="请输入您的账号"
|
|
className="pl-8"
|
|
{...field}
|
|
/>
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>密码</FormLabel>
|
|
<FormControl>
|
|
<div className="relative">
|
|
<Lock className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input type="password" placeholder="请输入密码" className="pl-8" {...field} />
|
|
</div>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={loading}
|
|
size="lg"
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
|
登录中...
|
|
</div>
|
|
) : (
|
|
'登录'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<Toaster richColors />
|
|
</>
|
|
)
|
|
} |