From 83050646f9c4de51cbeb33b1aa4e9caeb6c9e03c Mon Sep 17 00:00:00 2001 From: CaIon <1808837298@qq.com> Date: Tue, 7 Nov 2023 23:32:43 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/public/index.html | 2 +- web/src/components/HeaderBar.js | 85 +----- web/src/components/LoginForm.js | 438 ++++++++++++++++-------------- web/src/components/SiderBar.js | 2 +- web/src/components/TokensTable.js | 1 + web/src/helpers/utils.js | 2 +- 6 files changed, 237 insertions(+), 293 deletions(-) diff --git a/web/public/index.html b/web/public/index.html index 66afe1c..b2a842c 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -9,7 +9,7 @@ name="description" content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用" /> - MiaoKo API + New API diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js index c6f14be..63a174c 100644 --- a/web/src/components/HeaderBar.js +++ b/web/src/components/HeaderBar.js @@ -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 ( - // <> - // - // - // - // logo - //
- // {systemName} - //
- // - // - // - // - // - // - // - // - // - // {showSidebar ? ( - // - // - // {renderButtons(true)} - // - // {userState.user ? ( - // - // ) : ( - // <> - // - // - // - // )} - // - // - // - // - // ) : ( - // <> - // )} - // - // - // - // ); - // } 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 ( { }} selectedKeys={[]} // items={headerButtons} - onSelect={key => console.log(key)} + onSelect={key => { + + }} footer={ <> } /> diff --git a/web/src/components/LoginForm.js b/web/src/components/LoginForm.js index 1980c55..90b94e1 100644 --- a/web/src/components/LoginForm.js +++ b/web/src/components/LoginForm.js @@ -1,219 +1,237 @@ -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({ - 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(); + 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(() => { - 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 [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false); - - const onWeChatLoginClicked = () => { - setShowWeChatLoginModal(true); - }; - - const onSubmitWeChatVerificationCode = async () => { - if (turnstileEnabled && turnstileToken === '') { - 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 { name, value } = e.target; - setInputs((inputs) => ({ ...inputs, [name]: value })); - } - - async function handleSubmit(e) { - if (turnstileEnabled && turnstileToken === '') { - showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); - return; - } - setSubmitted(true); - if (username && password) { - const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, { - username, - password - }); - const { success, message, data } = res.data; - 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('登录成功！'); + useEffect(() => { + if (searchParams.get('expired')) { + showError('未登录或登录已过期，请重新登录！'); } - } else { - showError(message); - } - } - } + let status = localStorage.getItem('status'); + if (status) { + status = JSON.parse(status); + setStatus(status); + if (status.turnstile_check) { + setTurnstileEnabled(true); + setTurnstileSiteKey(status.turnstile_site_key); + } + } + }, []); - return ( - - -
- 用户登录 -
-
- - - - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} - - -
- - 忘记密码？ - - 点击重置 - - ； 没有账户？ - - 点击注册 - - - {status.github_oauth || status.wechat_login ? ( - <> - Or - {status.github_oauth ? ( - - - - - - - - ); + const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false); + + const onWeChatLoginClicked = () => { + setShowWeChatLoginModal(true); + }; + + const onSubmitWeChatVerificationCode = async () => { + if (turnstileEnabled && turnstileToken === '') { + 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(name, value) { + setInputs((inputs) => ({...inputs, [name]: value})); + } + + async function handleSubmit(e) { + if (turnstileEnabled && turnstileToken === '') { + showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); + return; + } + setSubmitted(true); + if (username && password) { + const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, { + username, + password + }); + const {success, message, data} = res.data; + 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 { + showError('请输入用户名和密码！'); + } + } + + return ( +
+ + + + +
+
+ + + 用户登录 + +
+ handleChange('username', value)} + /> + handleChange('password', value)} + /> + + + +
+ + 没有账号请先 注册账号 + + + 忘记密码 点击重置 + +
+ {status.github_oauth || status.wechat_login ? ( + <> + + 第三方登录 + +
+ {status.github_oauth ? ( +
+ + ) : ( + <> + )} + setShowWeChatLoginModal(false)} + onOpen={() => setShowWeChatLoginModal(true)} + open={showWeChatLoginModal} + size={'mini'} + > + + + +
+

+ 微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效） +

+
+
+ + + +
+ + +
+ {turnstileEnabled ? ( +
+ { + setTurnstileToken(token); + }} + /> +
+ ) : ( + <> + )} +
+
+ + + +
+ ); }; export default LoginForm; diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js index 2c68bfa..0bc66c5 100644 --- a/web/src/components/SiderBar.js +++ b/web/src/components/SiderBar.js @@ -179,7 +179,7 @@ const HeaderBar = () => { }} header={{ logo: logo, - text: 'MiaoKoAPI' + text: systemName, }} // footer={{ // text: '© 2021 NekoAPI', diff --git a/web/src/components/TokensTable.js b/web/src/components/TokensTable.js index b8e3aa6..d267660 100644 --- a/web/src/components/TokensTable.js +++ b/web/src/components/TokensTable.js @@ -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); diff --git a/web/src/helpers/utils.js b/web/src/helpers/utils.js index 8f8ac08..14efa97 100644 --- a/web/src/helpers/utils.js +++ b/web/src/helpers/utils.js @@ -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; }