mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-10 17:26:38 +08:00
prettier
This commit is contained in:
ryan
@@ -1,225 +1,250 @@
|
||||
"use client"
|
||||
'use client';
|
||||
|
||||
import {useEffect, useMemo, useRef, useState} from "react"
|
||||
import {useMutation, useQuery} from "@tanstack/react-query"
|
||||
import {useRouter, useSearchParams} from "next/navigation"
|
||||
import {toast} from "sonner"
|
||||
import Link from "next/link"
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import Link from 'next/link';
|
||||
|
||||
import {useAuth} from "@/components/providers/auth-provider"
|
||||
import {Button} from "@/components/ui/button"
|
||||
import {Input} from "@/components/ui/input"
|
||||
import {Spinner} from "@/components/ui/spinner"
|
||||
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
|
||||
import {AuthHeading} from "@/components/auth/auth-shell"
|
||||
import {CapWidget} from "@/components/auth/cap-widget"
|
||||
import {AuthService} from "@/lib/services/auth"
|
||||
import {ConfigService} from "@/lib/services/config"
|
||||
import type {RegisterRequest} from "@/lib/services/auth/types"
|
||||
import {safeRedirectTarget} from "@/lib/utils"
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
|
||||
import { AuthHeading } from '@/components/auth/auth-shell';
|
||||
import { CapWidget } from '@/components/auth/cap-widget';
|
||||
import { AuthService } from '@/lib/services/auth';
|
||||
import { ConfigService } from '@/lib/services/config';
|
||||
import type { RegisterRequest } from '@/lib/services/auth/types';
|
||||
import { safeRedirectTarget } from '@/lib/utils';
|
||||
|
||||
function getRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
|
||||
const callbackUrl = searchParams.get("callbackUrl")
|
||||
const callbackUrl = searchParams.get('callbackUrl');
|
||||
const storedRedirect =
|
||||
typeof window === "undefined"
|
||||
typeof window === 'undefined'
|
||||
? null
|
||||
: sessionStorage.getItem("redirect_after_login")
|
||||
return safeRedirectTarget(callbackUrl || storedRedirect || "/home")
|
||||
: sessionStorage.getItem('redirect_after_login');
|
||||
return safeRedirectTarget(callbackUrl || storedRedirect || '/home');
|
||||
}
|
||||
|
||||
|
||||
function configBool(value: string | undefined, fallback: boolean) {
|
||||
if (value === undefined) return fallback
|
||||
return value === "true"
|
||||
if (value === undefined) return fallback;
|
||||
return value === 'true';
|
||||
}
|
||||
|
||||
export function RegisterForm() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const { setUser } = useAuth()
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [nickname, setNickname] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [code, setCode] = useState("")
|
||||
const [registerCooldown, setRegisterCooldown] = useState(0)
|
||||
const [errorMessage, setErrorMessage] = useState("")
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { setUser } = useAuth();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [nickname, setNickname] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [registerCooldown, setRegisterCooldown] = useState(0);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (registerCooldown > 0) {
|
||||
const timer = setTimeout(() => setRegisterCooldown(registerCooldown - 1), 1000)
|
||||
return () => clearTimeout(timer)
|
||||
const timer = setTimeout(
|
||||
() => setRegisterCooldown(registerCooldown - 1),
|
||||
1000,
|
||||
);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [registerCooldown])
|
||||
}, [registerCooldown]);
|
||||
|
||||
const publicConfigQuery = useQuery({
|
||||
queryKey: ["public-config"],
|
||||
queryKey: ['public-config'],
|
||||
queryFn: () => ConfigService.getPublicConfig(),
|
||||
})
|
||||
});
|
||||
|
||||
const redirectTarget = useMemo(
|
||||
() => getRedirectTarget(searchParams),
|
||||
[searchParams],
|
||||
)
|
||||
);
|
||||
|
||||
const registrationEnabled =
|
||||
configBool(publicConfigQuery.data?.registration_enabled, true) &&
|
||||
configBool(publicConfigQuery.data?.password_register_enabled, true)
|
||||
configBool(publicConfigQuery.data?.password_register_enabled, true);
|
||||
|
||||
const emailRegisterEnabled = configBool(publicConfigQuery.data?.email_register_verification_enabled, false)
|
||||
const emailRegisterEnabled = configBool(
|
||||
publicConfigQuery.data?.email_register_verification_enabled,
|
||||
false,
|
||||
);
|
||||
|
||||
const capEnabled = configBool(publicConfigQuery.data?.cap_login_enabled, false)
|
||||
const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true)
|
||||
const capEnabled = configBool(
|
||||
publicConfigQuery.data?.cap_login_enabled,
|
||||
false,
|
||||
);
|
||||
const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true);
|
||||
|
||||
const [capScope, setCapScope] = useState<'send_email_code' | 'register'>('send_email_code')
|
||||
const [capScope, setCapScope] = useState<'send_email_code' | 'register'>(
|
||||
'send_email_code',
|
||||
);
|
||||
|
||||
// 监听 emailRegisterEnabled 改变初始 scope
|
||||
useEffect(() => {
|
||||
setCapScope(emailRegisterEnabled ? 'send_email_code' : 'register')
|
||||
}, [emailRegisterEnabled])
|
||||
setCapScope(emailRegisterEnabled ? 'send_email_code' : 'register');
|
||||
}, [emailRegisterEnabled]);
|
||||
|
||||
const capTokenRef = useRef<string | null>(null)
|
||||
const [capReady, setCapReady] = useState(false)
|
||||
const [capError, setCapError] = useState(false)
|
||||
const [capResetKey, setCapResetKey] = useState(0)
|
||||
const capTokenRef = useRef<string | null>(null);
|
||||
const [capReady, setCapReady] = useState(false);
|
||||
const [capError, setCapError] = useState(false);
|
||||
const [capResetKey, setCapResetKey] = useState(0);
|
||||
|
||||
const handleCapToken = (token: string) => {
|
||||
capTokenRef.current = token
|
||||
setCapReady(true)
|
||||
setCapError(false)
|
||||
}
|
||||
capTokenRef.current = token;
|
||||
setCapReady(true);
|
||||
setCapError(false);
|
||||
};
|
||||
|
||||
const handleCapError = () => {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapError(true)
|
||||
}
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
setCapError(true);
|
||||
};
|
||||
|
||||
// Redirect to login if registration is closed
|
||||
useEffect(() => {
|
||||
if (publicConfigQuery.isSuccess && !registrationEnabled) {
|
||||
toast.error("系统注册功能已关闭")
|
||||
router.replace("/login")
|
||||
toast.error('系统注册功能已关闭');
|
||||
router.replace('/login');
|
||||
}
|
||||
}, [publicConfigQuery.isSuccess, registrationEnabled, router])
|
||||
}, [publicConfigQuery.isSuccess, registrationEnabled, router]);
|
||||
|
||||
const registerMutation = useMutation({
|
||||
mutationFn: (req: RegisterRequest) => {
|
||||
const headers: Record<string, string> = {}
|
||||
const headers: Record<string, string> = {};
|
||||
if (capEnabled && capTokenRef.current) {
|
||||
headers["X-Cap-Token"] = capTokenRef.current
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
headers['X-Cap-Token'] = capTokenRef.current;
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
}
|
||||
return AuthService.register(req, Object.keys(headers).length ? headers : undefined)
|
||||
return AuthService.register(
|
||||
req,
|
||||
Object.keys(headers).length ? headers : undefined,
|
||||
);
|
||||
},
|
||||
onSuccess: (user) => {
|
||||
setUser(user)
|
||||
router.replace(redirectTarget)
|
||||
toast.success("注册并登录成功")
|
||||
setUser(user);
|
||||
router.replace(redirectTarget);
|
||||
toast.success('注册并登录成功');
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
setErrorMessage(error.message || "注册失败，请重试")
|
||||
setErrorMessage(error.message || '注册失败，请重试');
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
setCapResetKey((key) => key + 1);
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const sendRegisterCodeMutation = useMutation({
|
||||
mutationFn: (targetEmail: string) => {
|
||||
const headers: Record<string, string> = {}
|
||||
const headers: Record<string, string> = {};
|
||||
if (capEnabled && capTokenRef.current) {
|
||||
headers["X-Cap-Token"] = capTokenRef.current
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
headers['X-Cap-Token'] = capTokenRef.current;
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
}
|
||||
return AuthService.sendEmailCode(targetEmail, "register", Object.keys(headers).length ? headers : undefined)
|
||||
return AuthService.sendEmailCode(
|
||||
targetEmail,
|
||||
'register',
|
||||
Object.keys(headers).length ? headers : undefined,
|
||||
);
|
||||
},
|
||||
onSuccess: () => {
|
||||
setRegisterCooldown(60)
|
||||
toast.success("验证码已发送至您的邮箱，请查收")
|
||||
setRegisterCooldown(60);
|
||||
toast.success('验证码已发送至您的邮箱，请查收');
|
||||
if (capEnabled) {
|
||||
setCapScope('register')
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
setCapScope('register');
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
setCapResetKey((key) => key + 1);
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast.error(error.message || "发送验证码失败，请重试")
|
||||
toast.error(error.message || '发送验证码失败，请重试');
|
||||
if (capEnabled) {
|
||||
capTokenRef.current = null
|
||||
setCapReady(false)
|
||||
setCapResetKey((key) => key + 1)
|
||||
capTokenRef.current = null;
|
||||
setCapReady(false);
|
||||
setCapResetKey((key) => key + 1);
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const registerDisabled =
|
||||
registerMutation.isPending ||
|
||||
(capEnabled && capScope === 'register' && capAutoSolve && !capReady && !capError)
|
||||
(capEnabled &&
|
||||
capScope === 'register' &&
|
||||
capAutoSolve &&
|
||||
!capReady &&
|
||||
!capError);
|
||||
|
||||
const sendCodeDisabled =
|
||||
registerCooldown > 0 ||
|
||||
sendRegisterCodeMutation.isPending ||
|
||||
(capEnabled && capScope === 'send_email_code' && capAutoSolve && !capReady && !capError)
|
||||
(capEnabled &&
|
||||
capScope === 'send_email_code' &&
|
||||
capAutoSolve &&
|
||||
!capReady &&
|
||||
!capError);
|
||||
|
||||
const handleSendRegisterCode = () => {
|
||||
const trimmedEmail = email.trim()
|
||||
const trimmedEmail = email.trim();
|
||||
if (!trimmedEmail) {
|
||||
toast.error("请先输入邮箱地址")
|
||||
return
|
||||
toast.error('请先输入邮箱地址');
|
||||
return;
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
toast.error("请输入有效的邮箱地址")
|
||||
return
|
||||
toast.error('请输入有效的邮箱地址');
|
||||
return;
|
||||
}
|
||||
if (capEnabled && capScope === 'send_email_code' && !capReady) {
|
||||
toast.error(
|
||||
capAutoSolve
|
||||
? "人机验证尚未完成，请稍候…"
|
||||
: "请先点击「开始验证」完成人机验证",
|
||||
)
|
||||
return
|
||||
? '人机验证尚未完成，请稍候…'
|
||||
: '请先点击「开始验证」完成人机验证',
|
||||
);
|
||||
return;
|
||||
}
|
||||
sendRegisterCodeMutation.mutate(trimmedEmail)
|
||||
}
|
||||
sendRegisterCodeMutation.mutate(trimmedEmail);
|
||||
};
|
||||
|
||||
const handleRegister = () => {
|
||||
setErrorMessage("")
|
||||
setErrorMessage('');
|
||||
if (!username.trim() || !password) {
|
||||
toast.error("用户名和密码不能为空")
|
||||
return
|
||||
toast.error('用户名和密码不能为空');
|
||||
return;
|
||||
}
|
||||
if (password.length < 8) {
|
||||
toast.error("密码长度不能少于 8 位")
|
||||
return
|
||||
toast.error('密码长度不能少于 8 位');
|
||||
return;
|
||||
}
|
||||
const trimmedEmail = email.trim()
|
||||
const trimmedEmail = email.trim();
|
||||
if (!trimmedEmail) {
|
||||
toast.error("邮箱不能为空")
|
||||
return
|
||||
toast.error('邮箱不能为空');
|
||||
return;
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
toast.error("请输入有效的邮箱地址")
|
||||
return
|
||||
toast.error('请输入有效的邮箱地址');
|
||||
return;
|
||||
}
|
||||
if (emailRegisterEnabled && !code.trim()) {
|
||||
toast.error("验证码不能为空")
|
||||
return
|
||||
toast.error('验证码不能为空');
|
||||
return;
|
||||
}
|
||||
if (capEnabled && capScope === 'register' && !capReady) {
|
||||
toast.error(
|
||||
capAutoSolve
|
||||
? "人机验证尚未完成，请稍候…"
|
||||
: "请先点击「开始验证」完成人机验证",
|
||||
)
|
||||
return
|
||||
? '人机验证尚未完成，请稍候…'
|
||||
: '请先点击「开始验证」完成人机验证',
|
||||
);
|
||||
return;
|
||||
}
|
||||
registerMutation.mutate({
|
||||
username: username.trim(),
|
||||
@@ -227,104 +252,116 @@ export function RegisterForm() {
|
||||
nickname: nickname.trim() || undefined,
|
||||
email: trimmedEmail,
|
||||
code: code.trim() || undefined,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (publicConfigQuery.isPending) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-24">
|
||||
<div className='flex items-center justify-center py-24'>
|
||||
<Spinner />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (!registrationEnabled) {
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
|
||||
<div className='flex flex-col gap-6 [@media(max-height:700px)]:gap-4'>
|
||||
<AuthHeading
|
||||
siteName={publicConfigQuery.data?.site_name}
|
||||
title="创建您的账号"
|
||||
description="填写以下信息，开始使用平台服务。"
|
||||
title='创建您的账号'
|
||||
description='填写以下信息，开始使用平台服务。'
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
|
||||
<FieldGroup className="gap-4 [@media(min-width:500px)]:grid [@media(min-width:500px)]:grid-cols-2 [@media(max-height:700px)]:gap-3">
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="username">用户名 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Input
|
||||
id="username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
autoComplete="username"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="nickname">
|
||||
昵称
|
||||
<span className="ml-1 text-xs font-normal text-muted-foreground">（可选）</span>
|
||||
<div className='flex flex-col gap-5 [@media(max-height:700px)]:gap-3'>
|
||||
<FieldGroup className='gap-4 [@media(min-width:500px)]:grid [@media(min-width:500px)]:grid-cols-2 [@media(max-height:700px)]:gap-3'>
|
||||
<Field className='gap-1.5'>
|
||||
<FieldLabel htmlFor='username'>
|
||||
用户名 <span className='text-destructive'>*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="nickname"
|
||||
id='username'
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder='请输入用户名'
|
||||
autoComplete='username'
|
||||
className='h-10 text-sm [@media(max-height:700px)]:h-9'
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className='gap-1.5'>
|
||||
<FieldLabel htmlFor='nickname'>
|
||||
昵称
|
||||
<span className='ml-1 text-xs font-normal text-muted-foreground'>
|
||||
（可选）
|
||||
</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id='nickname'
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
placeholder="请输入昵称"
|
||||
autoComplete="nickname"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
placeholder='请输入昵称'
|
||||
autoComplete='nickname'
|
||||
className='h-10 text-sm [@media(max-height:700px)]:h-9'
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="email">电子邮箱 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Field className='gap-1.5'>
|
||||
<FieldLabel htmlFor='email'>
|
||||
电子邮箱 <span className='text-destructive'>*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
id='email'
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="请输入电子邮箱"
|
||||
autoComplete="email"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
placeholder='请输入电子邮箱'
|
||||
autoComplete='email'
|
||||
className='h-10 text-sm [@media(max-height:700px)]:h-9'
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="gap-1.5">
|
||||
<FieldLabel htmlFor="password">密码 <span className="text-destructive">*</span></FieldLabel>
|
||||
<Field className='gap-1.5'>
|
||||
<FieldLabel htmlFor='password'>
|
||||
密码 <span className='text-destructive'>*</span>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="password"
|
||||
id='password'
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
placeholder="请输入密码（至少 8 位）"
|
||||
autoComplete="new-password"
|
||||
className="h-10 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
type='password'
|
||||
placeholder='请输入密码（至少 8 位）'
|
||||
autoComplete='new-password'
|
||||
className='h-10 text-sm [@media(max-height:700px)]:h-9'
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRegister()}
|
||||
/>
|
||||
</Field>
|
||||
{emailRegisterEnabled && (
|
||||
<Field className="gap-1.5 [@media(min-width:500px)]:col-span-2">
|
||||
<FieldLabel htmlFor="code">邮箱验证码 <span className="text-destructive">*</span></FieldLabel>
|
||||
<div className="flex gap-2">
|
||||
<Field className='gap-1.5 [@media(min-width:500px)]:col-span-2'>
|
||||
<FieldLabel htmlFor='code'>
|
||||
邮箱验证码 <span className='text-destructive'>*</span>
|
||||
</FieldLabel>
|
||||
<div className='flex gap-2'>
|
||||
<Input
|
||||
id="code"
|
||||
id='code'
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
placeholder="请输入 6 位邮箱验证码"
|
||||
placeholder='请输入 6 位邮箱验证码'
|
||||
maxLength={6}
|
||||
className="h-10 flex-1 text-sm [@media(max-height:700px)]:h-9"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleRegister()}
|
||||
className='h-10 flex-1 text-sm [@media(max-height:700px)]:h-9'
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleRegister()}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
type='button'
|
||||
variant='outline'
|
||||
onClick={handleSendRegisterCode}
|
||||
disabled={sendCodeDisabled}
|
||||
className="h-10 w-[120px] text-xs [@media(max-height:700px)]:h-9"
|
||||
className='h-10 w-[120px] text-xs [@media(max-height:700px)]:h-9'
|
||||
>
|
||||
{registerCooldown > 0 ? `${registerCooldown}秒后重发` : "获取验证码"}
|
||||
{registerCooldown > 0
|
||||
? `${registerCooldown}秒后重发`
|
||||
: '获取验证码'}
|
||||
</Button>
|
||||
</div>
|
||||
</Field>
|
||||
@@ -342,15 +379,15 @@ export function RegisterForm() {
|
||||
)}
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
||||
<div className='rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive'>
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="h-10 w-full [@media(max-height:700px)]:h-9"
|
||||
variant="auth"
|
||||
type='button'
|
||||
className='h-10 w-full [@media(max-height:700px)]:h-9'
|
||||
variant='auth'
|
||||
onClick={handleRegister}
|
||||
disabled={registerDisabled}
|
||||
>
|
||||
@@ -360,17 +397,20 @@ export function RegisterForm() {
|
||||
注册中...
|
||||
</>
|
||||
) : (
|
||||
"创建账号"
|
||||
'创建账号'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
已经有账号？{" "}
|
||||
<Link href="/login" className="font-medium text-foreground underline underline-offset-4">
|
||||
<div className='text-center text-sm text-muted-foreground'>
|
||||
已经有账号？{' '}
|
||||
<Link
|
||||
href='/login'
|
||||
className='font-medium text-foreground underline underline-offset-4'
|
||||
>
|
||||
返回登录
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user