73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
|
import type { FormEvent } from 'react'
|
|||
|
|
import { motion } from 'framer-motion'
|
|||
|
|
import { fadeUp, stagger } from './motion'
|
|||
|
|
import { TextField } from './ui/TextField'
|
|||
|
|
import { Button } from './ui/Button'
|
|||
|
|
|
|||
|
|
// 右侧登录表单：纯 UI，暂无后端逻辑。
|
|||
|
|
export function LoginForm() {
|
|||
|
|
const handleSubmit = (e: FormEvent) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
// TODO: 接入 Rust 后端鉴权
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<motion.div
|
|||
|
|
variants={stagger(0.5, 0.1)}
|
|||
|
|
initial="hidden"
|
|||
|
|
animate="show"
|
|||
|
|
className="flex w-full max-w-md flex-col justify-center px-8 py-14 sm:px-12 lg:px-16"
|
|||
|
|
>
|
|||
|
|
<motion.div variants={fadeUp} className="mb-10">
|
|||
|
|
<h2 className="font-display text-3xl font-medium text-text">Sign in</h2>
|
|||
|
|
<p className="mt-2 text-sm text-muted">Enter your details to continue.</p>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-7">
|
|||
|
|
<motion.div variants={fadeUp}>
|
|||
|
|
<TextField label="Email" type="email" name="email" autoComplete="email" />
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div variants={fadeUp}>
|
|||
|
|
<TextField
|
|||
|
|
label="Password"
|
|||
|
|
type="password"
|
|||
|
|
name="password"
|
|||
|
|
autoComplete="current-password"
|
|||
|
|
/>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
variants={fadeUp}
|
|||
|
|
className="flex items-center justify-between text-sm"
|
|||
|
|
>
|
|||
|
|
<label className="flex cursor-pointer items-center gap-2 text-muted">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
className="h-4 w-4 accent-[var(--color-accent)]"
|
|||
|
|
/>
|
|||
|
|
Remember me
|
|||
|
|
</label>
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="text-muted underline-offset-4 transition-colors hover:text-accent hover:underline"
|
|||
|
|
>
|
|||
|
|
Forgot password?
|
|||
|
|
</a>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div variants={fadeUp} className="mt-2">
|
|||
|
|
<Button type="submit">Sign in</Button>
|
|||
|
|
</motion.div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<motion.p variants={fadeUp} className="mt-8 text-center text-sm text-muted">
|
|||
|
|
New here?{' '}
|
|||
|
|
<a href="#" className="text-accent underline-offset-4 hover:underline">
|
|||
|
|
Create an account
|
|||
|
|
</a>
|
|||
|
|
</motion.p>
|
|||
|
|
</motion.div>
|
|||
|
|
)
|
|||
|
|
}
|