Skip to content

phsl / new-api

Go to a project
Commit d7e577cb by Apple\Apple
Options

♻️Refactor: RegisterForm

parent 02214001
Showing with 237 additions and 176 deletions
web/src/components/LoginForm.js
...@@ -223,7 +223,7 @@ const LoginForm = () => { ...@@ -223,7 +223,7 @@ const LoginForm = () => {
theme='outline' theme='outline'
className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors" className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
type="tertiary" type="tertiary"
icon={<OIDCIcon style={{ color: '#1877F2', width: '20px', height: '20px' }} />} icon={<OIDCIcon style={{ color: '#1877F2' }} />}
size="large" size="large"
onClick={() => onClick={() =>
onOIDCClicked( onOIDCClicked(
......
web/src/components/OIDCIcon.js
...@@ -11,8 +11,8 @@ const OIDCIcon = (props) => { ...@@ -11,8 +11,8 @@ const OIDCIcon = (props) => {
version='1.1' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
p-id='10969' p-id='10969'
width='1em' width='20'
height='1em' height='20'
> >
<path <path
d='M512 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z m0-882.6c-239.7 0-434.6 195-434.6 434.6s195 434.6 434.6 434.6 434.6-195 434.6-434.6S751.7 77.4 512 77.4z' d='M512 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z m0-882.6c-239.7 0-434.6 195-434.6 434.6s195 434.6 434.6 434.6 434.6-195 434.6-434.6S751.7 77.4 512 77.4z'
......
web/src/components/RegisterForm.js
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
showInfo, showInfo,
showSuccess, showSuccess,
updateAPI, updateAPI,
getSystemName,
} from '../helpers'; } from '../helpers';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
import { import {
...@@ -20,7 +21,7 @@ import { ...@@ -20,7 +21,7 @@ import {
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import Title from '@douyinfe/semi-ui/lib/es/typography/title'; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from '@douyinfe/semi-ui/lib/es/typography/text'; import Text from '@douyinfe/semi-ui/lib/es/typography/text';
import { IconGithubLogo } from '@douyinfe/semi-icons'; import { IconGithubLogo, IconMail } from '@douyinfe/semi-icons';
import { import {
onGitHubOAuthClicked, onGitHubOAuthClicked,
onLinuxDOOAuthClicked, onLinuxDOOAuthClicked,
...@@ -33,6 +34,7 @@ import TelegramLoginButton from 'react-telegram-login/src'; ...@@ -33,6 +34,7 @@ import TelegramLoginButton from 'react-telegram-login/src';
import { setUserData } from '../helpers/data.js'; import { setUserData } from '../helpers/data.js';
import { UserContext } from '../context/User/index.js'; import { UserContext } from '../context/User/index.js';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Background from '../images/example.png';
const RegisterForm = () => { const RegisterForm = () => {
const { t } = useTranslation(); const { t } = useTranslation();
...@@ -42,6 +44,7 @@ const RegisterForm = () => { ...@@ -42,6 +44,7 @@ const RegisterForm = () => {
password2: '', password2: '',
email: '', email: '',
verification_code: '', verification_code: '',
wechat_verification_code: '',
}); });
const { username, password, password2 } = inputs; const { username, password, password2 } = inputs;
const [showEmailVerification, setShowEmailVerification] = useState(false); const [showEmailVerification, setShowEmailVerification] = useState(false);
...@@ -51,9 +54,12 @@ const RegisterForm = () => { ...@@ -51,9 +54,12 @@ const RegisterForm = () => {
const [turnstileToken, setTurnstileToken] = useState(''); const [turnstileToken, setTurnstileToken] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false); const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
const [showEmailRegister, setShowEmailRegister] = useState(false);
const [status, setStatus] = useState({}); const [status, setStatus] = useState({});
let navigate = useNavigate(); let navigate = useNavigate();
const logo = getLogo(); const logo = getLogo();
const systemName = getSystemName();
let affCode = new URLSearchParams(window.location.search).get('aff'); let affCode = new URLSearchParams(window.location.search).get('aff');
if (affCode) { if (affCode) {
...@@ -71,7 +77,7 @@ const RegisterForm = () => { ...@@ -71,7 +77,7 @@ const RegisterForm = () => {
setTurnstileSiteKey(status.turnstile_site_key); setTurnstileSiteKey(status.turnstile_site_key);
} }
} }
}); }, []);
const onWeChatLoginClicked = () => { const onWeChatLoginClicked = () => {
setShowWeChatLoginModal(true); setShowWeChatLoginModal(true);
...@@ -187,186 +193,248 @@ const RegisterForm = () => { ...@@ -187,186 +193,248 @@ const RegisterForm = () => {
} }
}; };
const renderOAuthOptions = () => {
return ( return (
<div> <div className="flex flex-col items-center">
<Layout> <div className="w-full max-w-md">
<Layout.Header></Layout.Header> <div className="flex items-center justify-center mb-6 gap-2">
<Layout.Content> <img src={logo} alt="Logo" className="h-10 rounded-full" />
<div <Title heading={3} className='!text-white'>{systemName}</Title>
style={{ </div>
justifyContent: 'center',
display: 'flex', <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
marginTop: 120, <div className="flex justify-center pt-6 pb-2">
}} <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
</div>
<div className="px-2 py-8">
<div className="space-y-3">
{status.wechat_login && (
<Button
theme='outline'
className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
type="tertiary"
icon={<Icon svg={<WeChatIcon />} style={{ color: '#07C160' }} />}
size="large"
onClick={onWeChatLoginClicked}
>
<span className="ml-3">{t('使用 微信 继续')}</span>
</Button>
)}
{status.github_oauth && (
<Button
theme='outline'
className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
type="tertiary"
icon={<IconGithubLogo size="large" style={{ color: '#24292e' }} />}
size="large"
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
>
<span className="ml-3">{t('使用 GitHub 继续')}</span>
</Button>
)}
{status.oidc_enabled && (
<Button
theme='outline'
className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
type="tertiary"
icon={<OIDCIcon style={{ color: '#1877F2' }} />}
size="large"
onClick={() =>
onOIDCClicked(
status.oidc_authorization_endpoint,
status.oidc_client_id
)
}
>
<span className="ml-3">{t('使用 OIDC 继续')}</span>
</Button>
)}
{status.linuxdo_oauth && (
<Button
theme='outline'
className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
type="tertiary"
icon={<LinuxDoIcon style={{ color: '#E95420', width: '20px', height: '20px' }} />}
size="large"
onClick={() => onLinuxDOOAuthClicked(status.linuxdo_client_id)}
>
<span className="ml-3">{t('使用 LinuxDO 继续')}</span>
</Button>
)}
{status.telegram_oauth && (
<div className="flex justify-center my-2">
<TelegramLoginButton
dataOnauth={onTelegramLoginClicked}
botName={status.telegram_bot_name}
/>
</div>
)}
<Divider margin='12px' align='center'>
{t('或')}
</Divider>
<Button
theme="solid"
type="primary"
className="w-full h-12 flex items-center justify-center bg-black text-white !rounded-full hover:bg-gray-800 transition-colors"
icon={<IconMail size="large" />}
size="large"
onClick={() => setShowEmailRegister(true)}
> >
<div style={{ width: 500 }}> <span className="ml-3">{t('使用 邮箱 注册')}</span>
<Card> </Button>
<Title heading={2} style={{ textAlign: 'center' }}> </div>
{t('新用户注册')}
</Title> <div className="mt-6 text-center text-sm">
<Form size='large'> <Text>{t('已有账户？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
</div>
</div>
</Card>
{turnstileEnabled && (
<div className="flex justify-center mt-6">
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
</div>
)}
</div>
</div>
);
};
const renderEmailRegisterForm = () => {
return (
<div className="flex flex-col items-center">
<div className="w-full max-w-md">
<div className="flex items-center justify-center mb-6 gap-2">
<img src={logo} alt="Logo" className="h-10 rounded-full" />
<Title heading={3} className='!text-white'>{systemName}</Title>
</div>
<Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
<div className="flex justify-center pt-6 pb-2">
<Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
</div>
<div className="px-2 py-8">
<Form className="space-y-3">
<Form.Input <Form.Input
field={'username'} field="username"
label={t('用户名')} label={t('用户名')}
placeholder={t('用户名')} placeholder={t('请输入用户名')}
name='username' name="username"
size="large"
className="!rounded-md"
onChange={(value) => handleChange('username', value)} onChange={(value) => handleChange('username', value)}
/> />
<Form.Input <Form.Input
field={'password'} field="password"
label={t('密码')} label={t('密码')}
placeholder={t('输入密码，最短 8 位，最长 20 位')} placeholder={t('输入密码，最短 8 位，最长 20 位')}
name='password' name="password"
type='password' type="password"
size="large"
className="!rounded-md"
onChange={(value) => handleChange('password', value)} onChange={(value) => handleChange('password', value)}
/> />
<Form.Input <Form.Input
field={'password2'} field="password2"
label={t('确认密码')} label={t('确认密码')}
placeholder={t('确认密码')} placeholder={t('确认密码')}
name='password2' name="password2"
type='password' type="password"
size="large"
className="!rounded-md"
onChange={(value) => handleChange('password2', value)} onChange={(value) => handleChange('password2', value)}
/> />
{showEmailVerification ? (
{showEmailVerification && (
<> <>
<Form.Input <Form.Input
field={'email'} field="email"
label={t('邮箱')} label={t('邮箱')}
placeholder={t('输入邮箱地址')} placeholder={t('输入邮箱地址')}
name="email"
type="email"
size="large"
className="!rounded-md"
onChange={(value) => handleChange('email', value)} onChange={(value) => handleChange('email', value)}
name='email'
type='email'
suffix={ suffix={
<Button <Button
onClick={sendVerificationCode} onClick={sendVerificationCode}
disabled={loading} disabled={loading}
size="small"
className="!rounded-md mr-2"
> >
{t('获取验证码')} {t('获取验证码')}
</Button> </Button>
} }
/> />
<Form.Input <Form.Input
field={'verification_code'} field="verification_code"
label={t('验证码')} label={t('验证码')}
placeholder={t('输入验证码')} placeholder={t('输入验证码')}
onChange={(value) => name="verification_code"
handleChange('verification_code', value) size="large"
} className="!rounded-md"
name='verification_code' onChange={(value) => handleChange('verification_code', value)}
/> />
</> </>
) : (
<></>
)} )}
<div className="space-y-2 pt-2">
<Button <Button
theme='solid' theme="solid"
style={{ width: '100%' }} className="w-full !rounded-full"
type={'primary'} type="primary"
size='large' htmlType="submit"
htmlType={'submit'} size="large"
onClick={handleSubmit} onClick={handleSubmit}
> >
{t('注册')} {t('注册')}
</Button> </Button>
</Form>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginTop: 20,
}}
>
<Text>
{t('已有账户？')}
<Link to='/login'>{t('点击登录')}</Link>
</Text>
</div> </div>
{status.github_oauth || </Form>
status.oidc_enabled ||
status.wechat_login ||
status.telegram_oauth ||
status.linuxdo_oauth ? (
<>
<Divider margin='12px' align='center'> <Divider margin='12px' align='center'>
{t('第三方登录')} {t('或')}
</Divider> </Divider>
<div
style={{ <div className="mt-4 text-center">
display: 'flex',
justifyContent: 'center',
marginTop: 20,
}}
>
{status.github_oauth ? (
<Button
type='primary'
icon={<IconGithubLogo />}
onClick={() =>
onGitHubOAuthClicked(status.github_client_id)
}
/>
) : (
<></>
)}
{status.oidc_enabled ? (
<Button
type='primary'
icon={<OIDCIcon />}
onClick={() =>
onOIDCClicked(
status.oidc_authorization_endpoint,
status.oidc_client_id,
)
}
/>
) : (
<></>
)}
{status.linuxdo_oauth ? (
<Button
icon={<LinuxDoIcon />}
onClick={() =>
onLinuxDOOAuthClicked(status.linuxdo_client_id)
}
/>
) : (
<></>
)}
{status.wechat_login ? (
<Button <Button
type='primary' theme="outline"
style={{ color: 'rgba(var(--semi-green-5), 1)' }} type="tertiary"
icon={<Icon svg={<WeChatIcon />} />} className="w-full !rounded-full"
onClick={onWeChatLoginClicked} size="large"
/> onClick={() => setShowEmailRegister(false)}
) : (
<></>
)}
</div>
{status.telegram_oauth ? (
<>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginTop: 5,
}}
> >
<TelegramLoginButton {t('其他注册选项')}
dataOnauth={onTelegramLoginClicked} </Button>
botName={status.telegram_bot_name} </div>
/>
<div className="mt-6 text-center text-sm">
<Text>{t('已有账户？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
</div>
</div> </div>
</>
) : (
<></>
)}
</>
) : (
<></>
)}
</Card> </Card>
</div>
</div>
);
};
// 微信登录模态框
const renderWeChatLoginModal = () => {
return (
<Modal <Modal
title={t('微信扫码登录')} title={t('微信扫码登录')}
visible={showWeChatLoginModal} visible={showWeChatLoginModal}
...@@ -374,59 +442,49 @@ const RegisterForm = () => { ...@@ -374,59 +442,49 @@ const RegisterForm = () => {
onOk={onSubmitWeChatVerificationCode} onOk={onSubmitWeChatVerificationCode}
onCancel={() => setShowWeChatLoginModal(false)} onCancel={() => setShowWeChatLoginModal(false)}
okText={t('登录')} okText={t('登录')}
size={'small'} size="small"
centered={true} centered={true}
> >
<div <div className="flex flex-col items-center">
style={{ <img src={status.wechat_qrcode} alt="微信二维码" className="mb-4" />
display: 'flex',
alignItem: 'center',
flexDirection: 'column',
}}
>
<img src={status.wechat_qrcode} />
</div> </div>
<div style={{ textAlign: 'center' }}>
<p> <div className="text-center mb-4">
{t( <p>{t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}</p>
'微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）',
)}
</p>
</div> </div>
<Form size='large'>
<Form size="large">
<Form.Input <Form.Input
field={'wechat_verification_code'} field="wechat_verification_code"
placeholder={t('验证码')} placeholder={t('验证码')}
label={t('验证码')} label={t('验证码')}
value={inputs.wechat_verification_code} value={inputs.wechat_verification_code}
onChange={(value) => onChange={(value) => handleChange('wechat_verification_code', value)}
handleChange('wechat_verification_code', value)
}
/> />
</Form> </Form>
</Modal> </Modal>
{turnstileEnabled ? ( );
};
return (
<div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
{/* 背景图片容器 - 放大并保持居中 */}
<div <div
className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
style={{ style={{
display: 'flex', backgroundImage: `url(${Background})`
justifyContent: 'center',
marginTop: 20,
}} }}
> ></div>
<Turnstile
sitekey={turnstileSiteKey} {/* 半透明遮罩层 */}
onVerify={(token) => { <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
setTurnstileToken(token);
}} <div className="w-full max-w-md relative z-10">
/> {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
</div> ? renderEmailRegisterForm()
) : ( : renderOAuthOptions()}
<></> {renderWeChatLoginModal()}
)}
</div>
</div> </div>
</Layout.Content>
</Layout>
</div> </div>
); );
}; };
......
web/src/i18n/locales/en.json
...@@ -5,12 +5,15 @@ ...@@ -5,12 +5,15 @@
"$%.6f 额度": "$%.6f quota", "$%.6f 额度": "$%.6f quota",
"或": "or", "或": "or",
"登 录": "Log In", "登 录": "Log In",
"注 册": "Sign Up",
"使用 邮箱 登录": "Sign in with Email", "使用 邮箱 登录": "Sign in with Email",
"使用 GitHub 继续": "Continue with GitHub", "使用 GitHub 继续": "Continue with GitHub",
"使用 OIDC 继续": "Continue with OIDC", "使用 OIDC 继续": "Continue with OIDC",
"使用 微信 继续": "Continue with WeChat", "使用 微信 继续": "Continue with WeChat",
"使用 LinuxDO 继续": "Continue with LinuxDO", "使用 LinuxDO 继续": "Continue with LinuxDO",
"使用 邮箱 注册": "Sign up with Email",
"其他登录选项": "Other login options", "其他登录选项": "Other login options",
"其他注册选项": "Other registration options",
"请输入您的邮箱地址": "Please enter your email address", "请输入您的邮箱地址": "Please enter your email address",
"请输入您的密码": "Please enter your password", "请输入您的密码": "Please enter your password",
"继续": "Continue", "继续": "Continue",
...@@ -775,7 +778,7 @@ ...@@ -775,7 +778,7 @@
"邀请码": "Invitation code", "邀请码": "Invitation code",
"输入邀请码": "Enter invitation code", "输入邀请码": "Enter invitation code",
"账户": "Account", "账户": "Account",
"邮箱": "Mail", "邮箱": "Email",
"已有账户？": "Already have an account?", "已有账户？": "Already have an account?",
"创意任务": "Tasks", "创意任务": "Tasks",
"用户管理": "User Management", "用户管理": "User Management",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment