87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import Form from "next/form";
|
|
|
|
import { Input } from "./ui/input";
|
|
import { Label } from "./ui/label";
|
|
|
|
export function AuthForm({
|
|
action,
|
|
children,
|
|
defaultEmail = "",
|
|
className = "",
|
|
showConfirmPassword = false,
|
|
onEmailChange,
|
|
}: {
|
|
action: NonNullable<
|
|
string | ((formData: FormData) => void | Promise<void>) | undefined
|
|
>;
|
|
children: React.ReactNode;
|
|
defaultEmail?: string;
|
|
className?: string;
|
|
showConfirmPassword?: boolean;
|
|
onEmailChange?: (email: string) => void;
|
|
}) {
|
|
return (
|
|
<Form action={action} className={`flex flex-col gap-4 px-4 sm:px-16 ${className}`}>
|
|
<div className="flex flex-col gap-2">
|
|
<Label
|
|
className="font-normal text-zinc-600 dark:text-zinc-400"
|
|
htmlFor="email"
|
|
>
|
|
邮箱地址
|
|
</Label>
|
|
|
|
<Input
|
|
autoComplete="email"
|
|
autoFocus
|
|
className="bg-muted text-md md:text-sm"
|
|
defaultValue={defaultEmail}
|
|
id="email"
|
|
name="email"
|
|
onChange={(event) => onEmailChange?.(event.target.value)}
|
|
placeholder="user@example.com"
|
|
required
|
|
type="email"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<Label
|
|
className="font-normal text-zinc-600 dark:text-zinc-400"
|
|
htmlFor="password"
|
|
>
|
|
登录密码
|
|
</Label>
|
|
|
|
<Input
|
|
className="bg-muted text-md md:text-sm"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
type="password"
|
|
/>
|
|
</div>
|
|
|
|
{showConfirmPassword ? (
|
|
<div className="flex flex-col gap-2">
|
|
<Label
|
|
className="font-normal text-zinc-600 dark:text-zinc-400"
|
|
htmlFor="confirmPassword"
|
|
>
|
|
确认密码
|
|
</Label>
|
|
|
|
<Input
|
|
className="bg-muted text-md md:text-sm"
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
required
|
|
type="password"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
{children}
|
|
</Form>
|
|
);
|
|
}
|