19 lines
1.4 KiB
TypeScript
19 lines
1.4 KiB
TypeScript
|
import Link from "next/link";
|
|||
|
|
import { PreviewNotice } from "@/components/ui";
|
|||
|
|
|
|||
|
|
export function AuthForm({ mode }: { mode: "login" | "register" }) {
|
|||
|
|
const isLogin = mode === "login";
|
|||
|
|
return (
|
|||
|
|
<div className="w-full max-w-md rounded-2xl border border-line bg-panel/70 p-6 sm:p-8">
|
|||
|
|
<PreviewNotice>认证服务尚未接入。当前表单仅用于检查布局，不会提交或创建账户。</PreviewNotice>
|
|||
|
|
<form className="mt-8 space-y-5">
|
|||
|
|
<div><label className="field-label" htmlFor="email">邮箱</label><input className="field-input" disabled id="email" placeholder="name@example.com" type="email" /></div>
|
|||
|
|
<div><label className="field-label" htmlFor="password">密码</label><input className="field-input" disabled id="password" placeholder="至少 8 位字符" type="password" /></div>
|
|||
|
|
{!isLogin ? <div><label className="field-label" htmlFor="password-confirm">确认密码</label><input className="field-input" disabled id="password-confirm" placeholder="再次输入密码" type="password" /></div> : null}
|
|||
|
|
<button className="button-primary w-full" disabled type="submit">{isLogin ? "登录（待接入）" : "注册（待接入）"}</button>
|
|||
|
|
</form>
|
|||
|
|
<p className="mt-6 text-center text-sm text-muted">{isLogin ? "还没有账户？" : "已有账户？"}{" "}<Link className="text-cyan hover:text-copy" href={isLogin ? "/register" : "/login"}>{isLogin ? "去注册" : "去登录"}</Link></p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|