Skip to content

phsl / new-api

Go to a project
Commit 767c7e3e by CaIon
Options

登录页完善

parent f0ba2fec
Showing with 230 additions and 286 deletions
web/public/index.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
name="description" name="description"
content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用" content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
/> />
<title>MiaoKo API</title> <title>New API</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
web/src/components/HeaderBar.js
...@@ -57,9 +57,6 @@ const HeaderBar = () => { ...@@ -57,9 +57,6 @@ const HeaderBar = () => {
navigate('/login'); navigate('/login');
} }
const toggleSidebar = () => {
setShowSidebar(!showSidebar);
};
const renderButtons = (isMobile) => { const renderButtons = (isMobile) => {
return headerButtons.map((button) => { return headerButtons.map((button) => {
...@@ -84,82 +81,6 @@ const HeaderBar = () => { ...@@ -84,82 +81,6 @@ const HeaderBar = () => {
); );
}); });
}; };
// if (isMobile()) {
// return (
// <>
// <Menu
// borderless
// size='large'
// style={
// showSidebar
// ? {
// borderBottom: 'none',
// marginBottom: '0',
// borderTop: 'none',
// height: '51px'
// }
// : {borderTop: 'none', height: '52px'}
// }
// >
// <Container>
// <Menu.Item as={Link} to='/'>
// <img
// src={logo}
// alt='logo'
// style={{marginRight: '0.75em'}}
// />
// <div style={{fontSize: '20px'}}>
// <b>{systemName}</b>
// </div>
// </Menu.Item>
// <Menu.Menu position='right'>
// <Menu.Item onClick={toggleSidebar}>
// <Icon name={showSidebar ? 'close' : 'sidebar'}/>
// </Menu.Item>
// </Menu.Menu>
// </Container>
// </Menu>
//
// {showSidebar ? (
// <Segment style={{marginTop: 0, borderTop: '0'}}>
// <Menu secondary vertical style={{ width: '100%', margin: 0 }}>
// {renderButtons(true)}
// <Menu.Item>
// {userState.user ? (
// <Button onClick={logout}>注销</Button>
// ) : (
// <>
// <Button
// onClick={() => {
// setShowSidebar(false);
// navigate('/login');
// }}
// >
// 登录
// </Button>
// <Button
// onClick={() => {
// setShowSidebar(false);
// navigate('/register');
// }}
// >
// 注册
// </Button>
// </>
// )}
// </Menu.Item>
// </Menu>
//
// </Segment>
// ) : (
// <></>
// )}
//
//
// </>
// );
// }
const switchMode = (model) => { const switchMode = (model) => {
const body = document.body; const body = document.body;
if (!model) { if (!model) {
...@@ -178,6 +99,8 @@ const HeaderBar = () => { ...@@ -178,6 +99,8 @@ const HeaderBar = () => {
renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => { renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => {
const routerMap = { const routerMap = {
about: "/about", about: "/about",
login: "/login",
register: "/register",
}; };
return ( return (
<Link <Link
...@@ -190,7 +113,9 @@ const HeaderBar = () => { ...@@ -190,7 +113,9 @@ const HeaderBar = () => {
}} }}
selectedKeys={[]} selectedKeys={[]}
// items={headerButtons} // items={headerButtons}
onSelect={key => console.log(key)} onSelect={key => {
}}
footer={ footer={
<> <>
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} /> <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
......
web/src/components/LoginForm.js
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 {
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; Modal,
import { UserContext } from '../context/User'; } from 'semantic-ui-react';
import {API, getLogo, showError, showInfo, showSuccess, showWarning} from '../helpers'; import {Link, useNavigate, useSearchParams} from 'react-router-dom';
import { onGitHubOAuthClicked } from './utils'; import {UserContext} from '../context/User';
import {API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning} from '../helpers';
import {onGitHubOAuthClicked} from './utils';
import Turnstile from "react-turnstile"; import Turnstile from "react-turnstile";
import {Layout, Card, Image, Form, Button, Divider} from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import Text from "@douyinfe/semi-ui/lib/es/typography/text";
const LoginForm = () => { import {IconGithubLogo} from '@douyinfe/semi-icons';
const [inputs, setInputs] = useState({
username: '',
password: '',
wechat_verification_code: ''
});
const [searchParams, setSearchParams] = useSearchParams();
const [submitted, setSubmitted] = useState(false);
const { username, password } = inputs;
const [userState, userDispatch] = useContext(UserContext);
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
const [turnstileToken, setTurnstileToken] = useState('');
let navigate = useNavigate();
const [status, setStatus] = useState({});
const logo = getLogo();
useEffect(() => { const LoginForm = () => {
if (searchParams.get('expired')) { const [inputs, setInputs] = useState({
showError('未登录或登录已过期，请重新登录！'); username: '',
} password: '',
let status = localStorage.getItem('status'); wechat_verification_code: ''
if (status) { });
status = JSON.parse(status); const [searchParams, setSearchParams] = useSearchParams();
setStatus(status); const [submitted, setSubmitted] = useState(false);
if (status.turnstile_check) { const {username, password} = inputs;
setTurnstileEnabled(true); const [userState, userDispatch] = useContext(UserContext);
setTurnstileSiteKey(status.turnstile_site_key); const [turnstileEnabled, setTurnstileEnabled] = useState(false);
} const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
} const [turnstileToken, setTurnstileToken] = useState('');
}, []); let navigate = useNavigate();
const [status, setStatus] = useState({});
const logo = getLogo();
const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false); useEffect(() => {
if (searchParams.get('expired')) {
showError('未登录或登录已过期，请重新登录！');
}
let status = localStorage.getItem('status');
if (status) {
status = JSON.parse(status);
setStatus(status);
if (status.turnstile_check) {
setTurnstileEnabled(true);
setTurnstileSiteKey(status.turnstile_site_key);
}
}
}, []);
const onWeChatLoginClicked = () => { const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
setShowWeChatLoginModal(true);
};
const onSubmitWeChatVerificationCode = async () => { const onWeChatLoginClicked = () => {
if (turnstileEnabled && turnstileToken === '') { setShowWeChatLoginModal(true);
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); };
return;
}
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const { success, message, data } = res.data;
if (success) {
userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
setShowWeChatLoginModal(false);
} else {
showError(message);
}
};
function handleChange(e) { const onSubmitWeChatVerificationCode = async () => {
const { name, value } = e.target; if (turnstileEnabled && turnstileToken === '') {
setInputs((inputs) => ({ ...inputs, [name]: value })); showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
} return;
}
const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
);
const {success, message, data} = res.data;
if (success) {
userDispatch({type: 'login', payload: data});
localStorage.setItem('user', JSON.stringify(data));
navigate('/');
showSuccess('登录成功！');
setShowWeChatLoginModal(false);
} else {
showError(message);
}
};
async function handleSubmit(e) { function handleChange(name, value) {
if (turnstileEnabled && turnstileToken === '') { setInputs((inputs) => ({...inputs, [name]: value}));
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
return;
} }
setSubmitted(true);
if (username && password) { async function handleSubmit(e) {
const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, { if (turnstileEnabled && turnstileToken === '') {
username, showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
password return;
}); }
const { success, message, data } = res.data; setSubmitted(true);
if (success) { if (username && password) {
userDispatch({ type: 'login', payload: data }); const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
localStorage.setItem('user', JSON.stringify(data)); username,
if (username === 'root' && password === '123456') { password
navigate('/user/edit'); });
showSuccess('登录成功！'); const {success, message, data} = res.data;
showWarning('请立刻修改默认密码！'); if (success) {
userDispatch({type: 'login', payload: data});
localStorage.setItem('user', JSON.stringify(data));
if (username === 'root' && password === '123456') {
navigate('/user/edit');
showSuccess('登录成功！');
showWarning('请立刻修改默认密码！');
} else {
navigate('/token');
showSuccess('登录成功！');
}
} else {
showError(message);
}
} else { } else {
navigate('/token'); showError('请输入用户名和密码！');
showSuccess('登录成功！');
} }
} else {
showError(message);
}
} }
}
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <div>
<Grid.Column style={{ maxWidth: 450 }}> <Layout>
<Header as='h2' color='' textAlign='center'> <Layout.Header>
<Image src={logo} /> 用户登录 </Layout.Header>
</Header> <Layout.Content>
<Form size='large'> <div style={{justifyContent: 'center', display: "flex", marginTop: 120}}>
<Segment> <div style={{width: 500}}>
<Form.Input <Card>
fluid <Title heading={2} style={{textAlign: 'center'}}>
icon='user' 用户登录
iconPosition='left' </Title>
placeholder='用户名' <Form>
name='username' <Form.Input
value={username} field={'username'}
onChange={handleChange} label={'用户名'}
/> placeholder='用户名'
<Form.Input name='username'
fluid onChange={(value) => handleChange('username', value)}
icon='lock' />
iconPosition='left' <Form.Input
placeholder='密码' field={'password'}
name='password' label={'密码'}
type='password' placeholder='密码'
value={password} name='password'
onChange={handleChange} type='password'
/> onChange={(value) => handleChange('password', value)}
{turnstileEnabled ? ( />
<Turnstile
sitekey={turnstileSiteKey} <Button theme='solid' style={{width: '100%'}} type={'primary'} size='large'
onVerify={(token) => { htmlType={'submit'} onClick={handleSubmit}>
setTurnstileToken(token); 登录
}} </Button>
/> </Form>
) : ( <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}>
<></> <Text>
)} 没有账号请先 <Link to='/register'>注册账号</Link>
<Button color='green' fluid size='large' onClick={handleSubmit}> </Text>
登录 <Text>
</Button> 忘记密码 <Link to='/reset'>点击重置</Link>
</Segment> </Text>
</Form> </div>
<Message> {status.github_oauth || status.wechat_login ? (
忘记密码？ <>
<Link to='/reset' className='btn btn-link'> <Divider margin='12px' align='center'>
点击重置 第三方登录
</Link> </Divider>
； 没有账户？ <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
<Link to='/register' className='btn btn-link'> {status.github_oauth ? (
点击注册 <Button
</Link> type='primary'
</Message> icon={<IconGithubLogo/>}
{status.github_oauth || status.wechat_login ? ( onClick={() => onGitHubOAuthClicked(status.github_client_id)}
<> />
<Divider horizontal>Or</Divider> ) : (
{status.github_oauth ? ( <></>
<Button )}
circular {status.wechat_login ? (
color='black' <Button
icon='github' circular
onClick={() => onGitHubOAuthClicked(status.github_client_id)} color='green'
/> icon='wechat'
) : ( onClick={onWeChatLoginClicked}
<></> />
)} ) : (
{status.wechat_login ? ( <></>
<Button )}
circular </div>
color='green' </>
icon='wechat' ) : (
onClick={onWeChatLoginClicked} <></>
/> )}
) : ( <Modal
<></> onClose={() => setShowWeChatLoginModal(false)}
)} onOpen={() => setShowWeChatLoginModal(true)}
</> open={showWeChatLoginModal}
) : ( size={'mini'}
<></> >
)} <Modal.Content>
<Modal <Modal.Description>
onClose={() => setShowWeChatLoginModal(false)} <Image src={status.wechat_qrcode} fluid/>
onOpen={() => setShowWeChatLoginModal(true)} <div style={{textAlign: 'center'}}>
open={showWeChatLoginModal} <p>
size={'mini'} 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
> </p>
<Modal.Content> </div>
<Modal.Description> <Form size='large'>
<Image src={status.wechat_qrcode} fluid /> <Form.Input
<div style={{ textAlign: 'center' }}> field={'wechat_verification_code'}
<p> placeholder='验证码'
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） name='wechat_verification_code'
</p> value={inputs.wechat_verification_code}
</div> onChange={handleChange}
<Form size='large'> />
<Form.Input <Button
fluid color=''
placeholder='验证码' fluid
name='wechat_verification_code' size='large'
value={inputs.wechat_verification_code} onClick={onSubmitWeChatVerificationCode}
onChange={handleChange} >
/> 登录
<Button </Button>
color='' </Form>
fluid </Modal.Description>
size='large' </Modal.Content>
onClick={onSubmitWeChatVerificationCode} </Modal>
> </Card>
登录 {turnstileEnabled ? (
</Button> <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
</Form> <Turnstile
</Modal.Description> sitekey={turnstileSiteKey}
</Modal.Content> onVerify={(token) => {
</Modal> setTurnstileToken(token);
</Grid.Column> }}
</Grid> />
); </div>
) : (
<></>
)}
</div>
</div>
</Layout.Content>
</Layout>
</div>
);
}; };
export default LoginForm; export default LoginForm;
web/src/components/SiderBar.js
...@@ -179,7 +179,7 @@ const HeaderBar = () => { ...@@ -179,7 +179,7 @@ const HeaderBar = () => {
}} }}
header={{ header={{
logo: <img src={logo} alt='logo' style={{marginRight: '0.75em'}}/>, logo: <img src={logo} alt='logo' style={{marginRight: '0.75em'}}/>,
text: 'MiaoKoAPI' text: systemName,
}} }}
// footer={{ // footer={{
// text: '© 2021 NekoAPI', // text: '© 2021 NekoAPI',
......
web/src/components/TokensTable.js
...@@ -457,6 +457,7 @@ const TokensTable = () => { ...@@ -457,6 +457,7 @@ const TokensTable = () => {
total: tokenCount, total: tokenCount,
showSizeChanger: true, showSizeChanger: true,
pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
onPageSizeChange: (size) => { onPageSizeChange: (size) => {
setPageSize(size); setPageSize(size);
setActivePage(1); setActivePage(1);
......
web/src/helpers/utils.js
...@@ -23,7 +23,7 @@ export function isRoot() { ...@@ -23,7 +23,7 @@ export function isRoot() {
export function getSystemName() { export function getSystemName() {
let system_name = localStorage.getItem('system_name'); let system_name = localStorage.getItem('system_name');
if (!system_name) return 'Neko API'; if (!system_name) return 'New API';
return system_name; return system_name;
} }
......
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