78 lines
3.2 KiB
TypeScript
78 lines
3.2 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 { Label } from "@/components/ui/label"
|
|
import { HumanVerification } from "@/components/human-verification";
|
|
import { AuthAPI, SmsAPI } from "@/lib/api/client";
|
|
import { handleAPIError } from "@/lib/api/common";
|
|
|
|
export default function SmsLoginMode() {
|
|
const [phone, setPhone] = useState("");
|
|
const handleSendCode = useCallback(async () => {
|
|
await SmsAPI.sendLoginSms(phone)
|
|
.then(() => toast.success('验证码已发送！'))
|
|
.catch(e => handleAPIError(e, ({ message }) => toast.error(`${message}`)))
|
|
}, [phone]);
|
|
|
|
return (
|
|
<>
|
|
<LoginHeader />
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="phone">手机号</Label>
|
|
<Input
|
|
id="phone-login-mode-phone"
|
|
name="phone"
|
|
type="text"
|
|
placeholder="+86 手机号"
|
|
value={phone}
|
|
onChange={(e) => setPhone(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-1 overflow-hidden items-center flex-row-reverse">
|
|
<HumanVerification onSuccess={handleSendCode} >
|
|
<Button type="button" variant="secondary">
|
|
获取验证码
|
|
</Button>
|
|
</HumanVerification>
|
|
<div className="flex-1 min-w-0">
|
|
<InputOTP
|
|
id="phone-login-mode-code"
|
|
name="code"
|
|
maxLength={6}
|
|
pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
|
|
required
|
|
>
|
|
<InputOTPGroup className="w-full flex justify-between">
|
|
{[...Array(6)].map((_, i) => (
|
|
<InputOTPSlot
|
|
key={i}
|
|
index={i}
|
|
className="flex-1 aspect-square"
|
|
/>
|
|
))}
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button type="submit" className="w-full" >
|
|
注册并登陆
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export async function handleSubmit(formData: FormData) {
|
|
const phone = formData.get('phone')?.toString() || '';
|
|
const code = formData.get('code')?.toString() || '';
|
|
|
|
return AuthAPI.loginBySms(phone, code)
|
|
} |