更新登录注册逻辑

This commit is contained in:
2025-05-06 09:25:57 +08:00
parent ebf48b6062
commit 36246d3263

View File

@@ -12,7 +12,7 @@ import LoginBG from './login-bg.jpg';
import { toast } from "sonner"; import { toast } from "sonner";
import Image from "next/image"; import Image from "next/image";
export type SubmitMode = 'password' | 'phone' | 'email' | 'register'; export type SubmitMode = 'password' | 'phone' | 'email';
export type LoginFormData = { export type LoginFormData = {
type: SubmitMode; type: SubmitMode;
account?: string; account?: string;
@@ -25,7 +25,6 @@ export type LoginFormData = {
export type SendCodeMode = 'phone' | 'email'; export type SendCodeMode = 'phone' | 'email';
export type SendCodeFormData = { export type SendCodeFormData = {
type: SendCodeMode; type: SendCodeMode;
codeType: 'login' | 'register';
phone?: string; phone?: string;
email?: string; email?: string;
} }
@@ -82,19 +81,6 @@ function LoginHeader() {
) )
} }
function RegisterHeader() {
return (
<>
<div className="flex flex-col items-center text-center">
<h1 className="text-2xl font-bold"></h1>
<p className="text-muted-foreground text-balance">
</p>
</div>
</>
)
}
function PasswordLoginMode({ forgetPassword }: { forgetPassword: () => void }) { function PasswordLoginMode({ forgetPassword }: { forgetPassword: () => void }) {
return ( return (
<> <>
@@ -141,7 +127,6 @@ function PhoneLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) =
} }
onSendCode({ onSendCode({
type: 'phone', type: 'phone',
codeType: 'login',
phone, phone,
}) })
}, [phone, onSendCode]); }, [phone, onSendCode]);
@@ -185,7 +170,7 @@ function PhoneLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) =
</div> </div>
</div> </div>
<Button type="submit" className="w-full"> <Button type="submit" className="w-full">
</Button> </Button>
</> </>
) )
@@ -200,7 +185,6 @@ function EmailLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) =
} }
onSendCode({ onSendCode({
type: 'email', type: 'email',
codeType: 'login',
email, email,
}) })
}, [email, onSendCode]); }, [email, onSendCode]);
@@ -244,75 +228,7 @@ function EmailLoginMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) =
</div> </div>
</div> </div>
<Button type="submit" className="w-full"> <Button type="submit" className="w-full">
</Button>
</>
)
}
function RegisterMode({ onSendCode }: { onSendCode: (data: SendCodeFormData) => Promise<void> }) {
const [email, setEmail] = useState("");
const handleSendCode = useCallback(() => {
if (!email.trim().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
toast.error('请输入正确的邮箱地址');
return;
}
onSendCode({
type: 'email',
codeType: 'register',
email,
})
}, [email, onSendCode]);
return (
<>
<RegisterHeader />
<div className="grid gap-3">
<Label htmlFor="email"></Label>
<Input
id="register-mode-account"
name="account"
type="text"
placeholder="账户名"
required />
</div>
<div className="grid gap-3">
<Label htmlFor="email"></Label>
<Input
id="register-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="register-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> </Button>
</> </>
) )
@@ -356,11 +272,7 @@ export function LoginForm({
{loginMode === 'password' ? <PasswordLoginMode forgetPassword={handleForgetPassword} /> : null} {loginMode === 'password' ? <PasswordLoginMode forgetPassword={handleForgetPassword} /> : null}
{loginMode === 'phone' ? <PhoneLoginMode onSendCode={handleSendCode} /> : null} {loginMode === 'phone' ? <PhoneLoginMode onSendCode={handleSendCode} /> : null}
{loginMode === 'email' ? <EmailLoginMode onSendCode={handleSendCode} /> : null} {loginMode === 'email' ? <EmailLoginMode onSendCode={handleSendCode} /> : null}
{loginMode === 'register' ? <RegisterMode onSendCode={handleSendCode} /> : null}
{
loginMode !== 'register' && (
<>
<div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"> <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
<span className="bg-card text-muted-foreground relative z-10 px-2"> <span className="bg-card text-muted-foreground relative z-10 px-2">
使 使
@@ -377,31 +289,13 @@ export function LoginForm({
<Mail /> <Mail />
</Button> </Button>
</div> </div>
</>
)
}
{
loginMode === 'register' ? (
<>
<div className="text-center text-sm">
{" "}
<a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('password')}>
</a>
</div>
</>
) : (
<>
<div className="text-center text-sm"> <div className="text-center text-sm">
{" "} {" "}
<a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('register')}> <a className="underline underline-offset-4 cursor-pointer" onClick={() => setLoginMode('phone')}>
</a> </a>
</div> </div>
</>
)
}
</div> </div>
</form> </form>
<div className="bg-muted relative hidden md:block"> <div className="bg-muted relative hidden md:block">