mirror of
https://github.com/songquanpeng/one-api.git
synced 2025-11-04 15:53:42 +08:00
chore: update default theme style
This commit is contained in:
JustSong
@@ -1,5 +1,16 @@
|
|||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
|
import {
|
||||||
|
Button,
|
||||||
|
Divider,
|
||||||
|
Form,
|
||||||
|
Grid,
|
||||||
|
Header,
|
||||||
|
Image,
|
||||||
|
Message,
|
||||||
|
Modal,
|
||||||
|
Segment,
|
||||||
|
Card,
|
||||||
|
} from 'semantic-ui-react';
|
||||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { UserContext } from '../context/User';
|
import { UserContext } from '../context/User';
|
||||||
import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
|
import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
|
||||||
@@ -10,7 +21,7 @@ const LoginForm = () => {
|
|||||||
const [inputs, setInputs] = useState({
|
const [inputs, setInputs] = useState({
|
||||||
username: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
wechat_verification_code: ''
|
wechat_verification_code: '',
|
||||||
});
|
});
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const [submitted, setSubmitted] = useState(false);
|
const [submitted, setSubmitted] = useState(false);
|
||||||
@@ -63,7 +74,7 @@ const LoginForm = () => {
|
|||||||
if (username && password) {
|
if (username && password) {
|
||||||
const res = await API.post(`/api/user/login`, {
|
const res = await API.post(`/api/user/login`, {
|
||||||
username,
|
username,
|
||||||
password
|
password,
|
||||||
});
|
});
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
@@ -86,129 +97,140 @@ const LoginForm = () => {
|
|||||||
return (
|
return (
|
||||||
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
||||||
<Grid.Column style={{ maxWidth: 450 }}>
|
<Grid.Column style={{ maxWidth: 450 }}>
|
||||||
<Header as='h2' color='' textAlign='center'>
|
<Card
|
||||||
<Image src={logo} /> 用户登录
|
fluid
|
||||||
</Header>
|
className='chart-card'
|
||||||
<Form size='large'>
|
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
|
||||||
<Segment>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
|
||||||
icon='user'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='用户名 / 邮箱地址'
|
|
||||||
name='username'
|
|
||||||
value={username}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
|
||||||
icon='lock'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='密码'
|
|
||||||
name='password'
|
|
||||||
type='password'
|
|
||||||
value={password}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<Button color='green' fluid size='large' onClick={handleSubmit}>
|
|
||||||
登录
|
|
||||||
</Button>
|
|
||||||
</Segment>
|
|
||||||
</Form>
|
|
||||||
<Message>
|
|
||||||
忘记密码？
|
|
||||||
<Link to='/reset' className='btn btn-link'>
|
|
||||||
点击重置
|
|
||||||
</Link>
|
|
||||||
； 没有账户？
|
|
||||||
<Link to='/register' className='btn btn-link'>
|
|
||||||
点击注册
|
|
||||||
</Link>
|
|
||||||
</Message>
|
|
||||||
{status.github_oauth || status.wechat_login || status.lark_client_id ? (
|
|
||||||
<>
|
|
||||||
<Divider horizontal>Or</Divider>
|
|
||||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
||||||
{status.github_oauth ? (
|
|
||||||
<Button
|
|
||||||
circular
|
|
||||||
color='black'
|
|
||||||
icon='github'
|
|
||||||
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{status.wechat_login ? (
|
|
||||||
<Button
|
|
||||||
circular
|
|
||||||
color='green'
|
|
||||||
icon='wechat'
|
|
||||||
onClick={onWeChatLoginClicked}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{status.lark_client_id ? (
|
|
||||||
<div style={{
|
|
||||||
background: "radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)",
|
|
||||||
width: "36px",
|
|
||||||
height: "36px",
|
|
||||||
borderRadius: "10em",
|
|
||||||
display: "flex",
|
|
||||||
cursor: "pointer"
|
|
||||||
}}
|
|
||||||
onClick={() => onLarkOAuthClicked(status.lark_client_id)}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={larkIcon}
|
|
||||||
avatar
|
|
||||||
style={{ width: "16px", height: "16px", cursor: "pointer", margin: "auto" }}
|
|
||||||
onClick={() => onLarkOAuthClicked(status.lark_client_id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<Modal
|
|
||||||
onClose={() => setShowWeChatLoginModal(false)}
|
|
||||||
onOpen={() => setShowWeChatLoginModal(true)}
|
|
||||||
open={showWeChatLoginModal}
|
|
||||||
size={'mini'}
|
|
||||||
>
|
>
|
||||||
<Modal.Content>
|
<Card.Content>
|
||||||
<Modal.Description>
|
<Card.Header>
|
||||||
<Image src={status.wechat_qrcode} fluid />
|
<Header
|
||||||
<div style={{ textAlign: 'center' }}>
|
as='h2'
|
||||||
<p>
|
textAlign='center'
|
||||||
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
style={{ marginBottom: '1.5em' }}
|
||||||
</p>
|
>
|
||||||
|
<Image src={logo} style={{ marginBottom: '10px' }} />
|
||||||
|
<Header.Content>用户登录</Header.Content>
|
||||||
|
</Header>
|
||||||
|
</Card.Header>
|
||||||
|
<Form size='large'>
|
||||||
|
<Form.Input
|
||||||
|
fluid
|
||||||
|
icon='user'
|
||||||
|
iconPosition='left'
|
||||||
|
placeholder='用户名 / 邮箱地址'
|
||||||
|
name='username'
|
||||||
|
value={username}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ marginBottom: '1em' }}
|
||||||
|
/>
|
||||||
|
<Form.Input
|
||||||
|
fluid
|
||||||
|
icon='lock'
|
||||||
|
iconPosition='left'
|
||||||
|
placeholder='密码'
|
||||||
|
name='password'
|
||||||
|
type='password'
|
||||||
|
value={password}
|
||||||
|
onChange={handleChange}
|
||||||
|
style={{ marginBottom: '1.5em' }}
|
||||||
|
/>
|
||||||
|
<Button color='blue' fluid size='large' onClick={handleSubmit}>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
fontSize: '0.9em',
|
||||||
|
color: '#666',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
忘记密码？
|
||||||
|
<Link to='/reset' style={{ color: '#2185d0' }}>
|
||||||
|
点击重置
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
没有账户？
|
||||||
|
<Link to='/register' style={{ color: '#2185d0' }}>
|
||||||
|
点击注册
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Form size='large'>
|
</Message>
|
||||||
<Form.Input
|
|
||||||
fluid
|
{(status.github_oauth ||
|
||||||
placeholder='验证码'
|
status.wechat_login ||
|
||||||
name='wechat_verification_code'
|
status.lark_client_id) && (
|
||||||
value={inputs.wechat_verification_code}
|
<>
|
||||||
onChange={handleChange}
|
<Divider
|
||||||
/>
|
horizontal
|
||||||
<Button
|
style={{ color: '#666', fontSize: '0.9em' }}
|
||||||
color=''
|
|
||||||
fluid
|
|
||||||
size='large'
|
|
||||||
onClick={onSubmitWeChatVerificationCode}
|
|
||||||
>
|
>
|
||||||
登录
|
使用其他方式登录
|
||||||
</Button>
|
</Divider>
|
||||||
</Form>
|
<div
|
||||||
</Modal.Description>
|
style={{
|
||||||
</Modal.Content>
|
display: 'flex',
|
||||||
</Modal>
|
justifyContent: 'center',
|
||||||
|
gap: '1em',
|
||||||
|
marginTop: '1em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status.github_oauth && (
|
||||||
|
<Button
|
||||||
|
circular
|
||||||
|
color='black'
|
||||||
|
icon='github'
|
||||||
|
onClick={() =>
|
||||||
|
onGitHubOAuthClicked(status.github_client_id)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{status.wechat_login && (
|
||||||
|
<Button
|
||||||
|
circular
|
||||||
|
color='green'
|
||||||
|
icon='wechat'
|
||||||
|
onClick={onWeChatLoginClicked}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{status.lark_client_id && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
'radial-gradient(circle, #FFFFFF, #FFFFFF, #00D6B9, #2F73FF, #0a3A9C)',
|
||||||
|
width: '36px',
|
||||||
|
height: '36px',
|
||||||
|
borderRadius: '10em',
|
||||||
|
display: 'flex',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
onClick={() => onLarkOAuthClicked(status.lark_client_id)}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={larkIcon}
|
||||||
|
avatar
|
||||||
|
style={{
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
margin: 'auto',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
|
import {
|
||||||
|
Button,
|
||||||
|
Form,
|
||||||
|
Grid,
|
||||||
|
Header,
|
||||||
|
Image,
|
||||||
|
Message,
|
||||||
|
Segment,
|
||||||
|
Card,
|
||||||
|
Divider,
|
||||||
|
} from 'semantic-ui-react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
|
import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
|
||||||
import Turnstile from 'react-turnstile';
|
import Turnstile from 'react-turnstile';
|
||||||
@@ -10,7 +20,7 @@ const RegisterForm = () => {
|
|||||||
password: '',
|
password: '',
|
||||||
password2: '',
|
password2: '',
|
||||||
email: '',
|
email: '',
|
||||||
verification_code: ''
|
verification_code: '',
|
||||||
});
|
});
|
||||||
const { username, password, password2 } = inputs;
|
const { username, password, password2 } = inputs;
|
||||||
const [showEmailVerification, setShowEmailVerification] = useState(false);
|
const [showEmailVerification, setShowEmailVerification] = useState(false);
|
||||||
@@ -100,92 +110,131 @@ const RegisterForm = () => {
|
|||||||
return (
|
return (
|
||||||
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
||||||
<Grid.Column style={{ maxWidth: 450 }}>
|
<Grid.Column style={{ maxWidth: 450 }}>
|
||||||
<Header as='h2' color='' textAlign='center'>
|
<Card
|
||||||
<Image src={logo} /> 新用户注册
|
fluid
|
||||||
</Header>
|
className='chart-card'
|
||||||
<Form size='large'>
|
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
|
||||||
<Segment>
|
>
|
||||||
<Form.Input
|
<Card.Content>
|
||||||
fluid
|
<Card.Header>
|
||||||
icon='user'
|
<Header
|
||||||
iconPosition='left'
|
as='h2'
|
||||||
placeholder='输入用户名，最长 12 位'
|
textAlign='center'
|
||||||
onChange={handleChange}
|
style={{ marginBottom: '1.5em' }}
|
||||||
name='username'
|
>
|
||||||
/>
|
<Image src={logo} style={{ marginBottom: '10px' }} />
|
||||||
<Form.Input
|
<Header.Content>新用户注册</Header.Content>
|
||||||
fluid
|
</Header>
|
||||||
icon='lock'
|
</Card.Header>
|
||||||
iconPosition='left'
|
<Form size='large'>
|
||||||
placeholder='输入密码，最短 8 位，最长 20 位'
|
<Form.Input
|
||||||
onChange={handleChange}
|
fluid
|
||||||
name='password'
|
icon='user'
|
||||||
type='password'
|
iconPosition='left'
|
||||||
/>
|
placeholder='输入用户名，最长 12 位'
|
||||||
<Form.Input
|
onChange={handleChange}
|
||||||
fluid
|
name='username'
|
||||||
icon='lock'
|
style={{ marginBottom: '1em' }}
|
||||||
iconPosition='left'
|
|
||||||
placeholder='输入密码，最短 8 位，最长 20 位'
|
|
||||||
onChange={handleChange}
|
|
||||||
name='password2'
|
|
||||||
type='password'
|
|
||||||
/>
|
|
||||||
{showEmailVerification ? (
|
|
||||||
<>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
|
||||||
icon='mail'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='输入邮箱地址'
|
|
||||||
onChange={handleChange}
|
|
||||||
name='email'
|
|
||||||
type='email'
|
|
||||||
action={
|
|
||||||
<Button onClick={sendVerificationCode} disabled={loading}>
|
|
||||||
获取验证码
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
|
||||||
icon='lock'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='输入验证码'
|
|
||||||
onChange={handleChange}
|
|
||||||
name='verification_code'
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{turnstileEnabled ? (
|
|
||||||
<Turnstile
|
|
||||||
sitekey={turnstileSiteKey}
|
|
||||||
onVerify={(token) => {
|
|
||||||
setTurnstileToken(token);
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
<Form.Input
|
||||||
<></>
|
fluid
|
||||||
)}
|
icon='lock'
|
||||||
<Button
|
iconPosition='left'
|
||||||
color='green'
|
placeholder='输入密码，最短 8 位，最长 20 位'
|
||||||
fluid
|
onChange={handleChange}
|
||||||
size='large'
|
name='password'
|
||||||
onClick={handleSubmit}
|
type='password'
|
||||||
loading={loading}
|
style={{ marginBottom: '1em' }}
|
||||||
>
|
/>
|
||||||
注册
|
<Form.Input
|
||||||
</Button>
|
fluid
|
||||||
</Segment>
|
icon='lock'
|
||||||
</Form>
|
iconPosition='left'
|
||||||
<Message>
|
placeholder='再次输入密码'
|
||||||
已有账户？
|
onChange={handleChange}
|
||||||
<Link to='/login' className='btn btn-link'>
|
name='password2'
|
||||||
点击登录
|
type='password'
|
||||||
</Link>
|
style={{ marginBottom: '1em' }}
|
||||||
</Message>
|
/>
|
||||||
|
|
||||||
|
{showEmailVerification && (
|
||||||
|
<>
|
||||||
|
<Form.Input
|
||||||
|
fluid
|
||||||
|
icon='mail'
|
||||||
|
iconPosition='left'
|
||||||
|
placeholder='输入邮箱地址'
|
||||||
|
onChange={handleChange}
|
||||||
|
name='email'
|
||||||
|
type='email'
|
||||||
|
action={
|
||||||
|
<Button
|
||||||
|
onClick={sendVerificationCode}
|
||||||
|
disabled={loading}
|
||||||
|
style={{ backgroundColor: '#2185d0', color: 'white' }}
|
||||||
|
>
|
||||||
|
获取验证码
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
style={{ marginBottom: '1em' }}
|
||||||
|
/>
|
||||||
|
<Form.Input
|
||||||
|
fluid
|
||||||
|
icon='lock'
|
||||||
|
iconPosition='left'
|
||||||
|
placeholder='输入验证码'
|
||||||
|
onChange={handleChange}
|
||||||
|
name='verification_code'
|
||||||
|
style={{ marginBottom: '1em' }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{turnstileEnabled && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginBottom: '1em',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Turnstile
|
||||||
|
sitekey={turnstileSiteKey}
|
||||||
|
onVerify={(token) => {
|
||||||
|
setTurnstileToken(token);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
color='blue'
|
||||||
|
fluid
|
||||||
|
size='large'
|
||||||
|
onClick={handleSubmit}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
注册
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: '0.9em',
|
||||||
|
color: '#666',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
已有账户？
|
||||||
|
<Link to='/login' style={{ color: '#2185d0' }}>
|
||||||
|
点击登录
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Message>
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user