68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
|
|
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
|
|
import { useState, useCallback } from "react";
|
|
import { toast } from "sonner";
|
|
import LoginHeader from "./LoginHeader";
|
|
import { SendCodeFormData } from "./types";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
export default function EmailLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) => Promise<boolean> }) {
|
|
const [email, setEmail] = useState("");
|
|
const handleSendCode = useCallback(() => {
|
|
if (!email.trim().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
|
toast.error('请输入正确的邮箱地址');
|
|
return;
|
|
}
|
|
onSendCode({
|
|
type: 'email',
|
|
email,
|
|
})
|
|
}, [email, onSendCode]);
|
|
|
|
return (
|
|
<>
|
|
<LoginHeader />
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="email">电子邮箱</Label>
|
|
<Input
|
|
id="email-login-mode-email"
|
|
name="email"
|
|
type="text"
|
|
placeholder="电子邮箱"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required />
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center h-4">
|
|
<Label htmlFor="code">验证码</Label>
|
|
</div>
|
|
<div className="flex gap-5">
|
|
<InputOTP
|
|
id="email-login-mode-code"
|
|
name="code"
|
|
maxLength={6}
|
|
pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
|
|
required
|
|
>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
<Button type="button" variant="secondary" onClick={handleSendCode}>获取验证码</Button>
|
|
</div>
|
|
</div>
|
|
<Button type="submit" className="w-full">
|
|
注册并登录
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|