mirror of
https://github.com/linux-do/new-api.git
synced 2025-09-18 00:16:37 +08:00
登录页完善
This commit is contained in:
CaIon
parent
a0b975fc3d
commit
83050646f9
@ -9,7 +9,7 @@
|
||||
name="description"
|
||||
content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
|
||||
/>
|
||||
<title>MiaoKo API</title>
|
||||
<title>New API</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -57,9 +57,6 @@ const HeaderBar = () => {
|
||||
navigate('/login');
|
||||
}
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setShowSidebar(!showSidebar);
|
||||
};
|
||||
|
||||
const renderButtons = (isMobile) => {
|
||||
return headerButtons.map((button) => {
|
||||
@ -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 body = document.body;
|
||||
if (!model) {
|
||||
@ -178,6 +99,8 @@ const HeaderBar = () => {
|
||||
renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => {
|
||||
const routerMap = {
|
||||
about: "/about",
|
||||
login: "/login",
|
||||
register: "/register",
|
||||
};
|
||||
return (
|
||||
<Link
|
||||
@ -190,7 +113,9 @@ const HeaderBar = () => {
|
||||
}}
|
||||
selectedKeys={[]}
|
||||
// items={headerButtons}
|
||||
onSelect={key => console.log(key)}
|
||||
onSelect={key => {
|
||||
|
||||
}}
|
||||
footer={
|
||||
<>
|
||||
<Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { UserContext } from '../context/User';
|
||||
import {API, getLogo, showError, showInfo, showSuccess, showWarning} from '../helpers';
|
||||
import { onGitHubOAuthClicked } from './utils';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import {
|
||||
Modal,
|
||||
} from 'semantic-ui-react';
|
||||
import {Link, useNavigate, useSearchParams} from 'react-router-dom';
|
||||
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 {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";
|
||||
|
||||
import {IconGithubLogo} from '@douyinfe/semi-icons';
|
||||
|
||||
const LoginForm = () => {
|
||||
const [inputs, setInputs] = useState({
|
||||
@ -14,7 +21,7 @@ const LoginForm = () => {
|
||||
});
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const { username, password } = inputs;
|
||||
const {username, password} = inputs;
|
||||
const [userState, userDispatch] = useContext(UserContext);
|
||||
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
|
||||
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
|
||||
@ -52,9 +59,9 @@ const LoginForm = () => {
|
||||
const res = await API.get(
|
||||
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
|
||||
);
|
||||
const { success, message, data } = res.data;
|
||||
const {success, message, data} = res.data;
|
||||
if (success) {
|
||||
userDispatch({ type: 'login', payload: data });
|
||||
userDispatch({type: 'login', payload: data});
|
||||
localStorage.setItem('user', JSON.stringify(data));
|
||||
navigate('/');
|
||||
showSuccess('登录成功！');
|
||||
@ -64,9 +71,8 @@ const LoginForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
function handleChange(e) {
|
||||
const { name, value } = e.target;
|
||||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||||
function handleChange(name, value) {
|
||||
setInputs((inputs) => ({...inputs, [name]: value}));
|
||||
}
|
||||
|
||||
async function handleSubmit(e) {
|
||||
@ -80,9 +86,9 @@ const LoginForm = () => {
|
||||
username,
|
||||
password
|
||||
});
|
||||
const { success, message, data } = res.data;
|
||||
const {success, message, data} = res.data;
|
||||
if (success) {
|
||||
userDispatch({ type: 'login', payload: data });
|
||||
userDispatch({type: 'login', payload: data});
|
||||
localStorage.setItem('user', JSON.stringify(data));
|
||||
if (username === 'root' && password === '123456') {
|
||||
navigate('/user/edit');
|
||||
@ -95,69 +101,63 @@ const LoginForm = () => {
|
||||
} else {
|
||||
showError(message);
|
||||
}
|
||||
} else {
|
||||
showError('请输入用户名和密码！');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as='h2' color='' textAlign='center'>
|
||||
<Image src={logo} /> 用户登录
|
||||
</Header>
|
||||
<Form size='large'>
|
||||
<Segment>
|
||||
<div>
|
||||
<Layout>
|
||||
<Layout.Header>
|
||||
</Layout.Header>
|
||||
<Layout.Content>
|
||||
<div style={{justifyContent: 'center', display: "flex", marginTop: 120}}>
|
||||
<div style={{width: 500}}>
|
||||
<Card>
|
||||
<Title heading={2} style={{textAlign: 'center'}}>
|
||||
用户登录
|
||||
</Title>
|
||||
<Form>
|
||||
<Form.Input
|
||||
fluid
|
||||
icon='user'
|
||||
iconPosition='left'
|
||||
field={'username'}
|
||||
label={'用户名'}
|
||||
placeholder='用户名'
|
||||
name='username'
|
||||
value={username}
|
||||
onChange={handleChange}
|
||||
onChange={(value) => handleChange('username', value)}
|
||||
/>
|
||||
<Form.Input
|
||||
fluid
|
||||
icon='lock'
|
||||
iconPosition='left'
|
||||
field={'password'}
|
||||
label={'密码'}
|
||||
placeholder='密码'
|
||||
name='password'
|
||||
type='password'
|
||||
value={password}
|
||||
onChange={handleChange}
|
||||
onChange={(value) => handleChange('password', value)}
|
||||
/>
|
||||
{turnstileEnabled ? (
|
||||
<Turnstile
|
||||
sitekey={turnstileSiteKey}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Button color='green' fluid size='large' onClick={handleSubmit}>
|
||||
|
||||
<Button theme='solid' style={{width: '100%'}} type={'primary'} size='large'
|
||||
htmlType={'submit'} onClick={handleSubmit}>
|
||||
登录
|
||||
</Button>
|
||||
</Segment>
|
||||
</Form>
|
||||
<Message>
|
||||
忘记密码？
|
||||
<Link to='/reset' className='btn btn-link'>
|
||||
点击重置
|
||||
</Link>
|
||||
； 没有账户？
|
||||
<Link to='/register' className='btn btn-link'>
|
||||
点击注册
|
||||
</Link>
|
||||
</Message>
|
||||
<div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}>
|
||||
<Text>
|
||||
没有账号请先 <Link to='/register'>注册账号</Link>
|
||||
</Text>
|
||||
<Text>
|
||||
忘记密码 <Link to='/reset'>点击重置</Link>
|
||||
</Text>
|
||||
</div>
|
||||
{status.github_oauth || status.wechat_login ? (
|
||||
<>
|
||||
<Divider horizontal>Or</Divider>
|
||||
<Divider margin='12px' align='center'>
|
||||
第三方登录
|
||||
</Divider>
|
||||
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
|
||||
{status.github_oauth ? (
|
||||
<Button
|
||||
circular
|
||||
color='black'
|
||||
icon='github'
|
||||
type='primary'
|
||||
icon={<IconGithubLogo/>}
|
||||
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
|
||||
/>
|
||||
) : (
|
||||
@ -173,6 +173,7 @@ const LoginForm = () => {
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
@ -185,15 +186,15 @@ const LoginForm = () => {
|
||||
>
|
||||
<Modal.Content>
|
||||
<Modal.Description>
|
||||
<Image src={status.wechat_qrcode} fluid />
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Image src={status.wechat_qrcode} fluid/>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<p>
|
||||
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
||||
</p>
|
||||
</div>
|
||||
<Form size='large'>
|
||||
<Form.Input
|
||||
fluid
|
||||
field={'wechat_verification_code'}
|
||||
placeholder='验证码'
|
||||
name='wechat_verification_code'
|
||||
value={inputs.wechat_verification_code}
|
||||
@ -211,8 +212,25 @@ const LoginForm = () => {
|
||||
</Modal.Description>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Card>
|
||||
{turnstileEnabled ? (
|
||||
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
|
||||
<Turnstile
|
||||
sitekey={turnstileSiteKey}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -179,7 +179,7 @@ const HeaderBar = () => {
|
||||
}}
|
||||
header={{
|
||||
logo: <img src={logo} alt='logo' style={{marginRight: '0.75em'}}/>,
|
||||
text: 'MiaoKoAPI'
|
||||
text: systemName,
|
||||
}}
|
||||
// footer={{
|
||||
// text: '© 2021 NekoAPI',
|
||||
|
||||
@ -457,6 +457,7 @@ const TokensTable = () => {
|
||||
total: tokenCount,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
|
||||
onPageSizeChange: (size) => {
|
||||
setPageSize(size);
|
||||
setActivePage(1);
|
||||
|
||||
@ -23,7 +23,7 @@ export function isRoot() {
|
||||
|
||||
export function getSystemName() {
|
||||
let system_name = localStorage.getItem('system_name');
|
||||
if (!system_name) return 'Neko API';
|
||||
if (!system_name) return 'New API';
|
||||
return system_name;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user