|
|
@@ -2,8 +2,9 @@ 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, showSuccess, showWarning } from '../helpers';
|
|
|
+import {API, getLogo, showError, showInfo, showSuccess, showWarning} from '../helpers';
|
|
|
import { onGitHubOAuthClicked } from './utils';
|
|
|
+import Turnstile from "react-turnstile";
|
|
|
|
|
|
const LoginForm = () => {
|
|
|
const [inputs, setInputs] = useState({
|
|
|
@@ -15,6 +16,9 @@ const LoginForm = () => {
|
|
|
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();
|
|
|
@@ -27,6 +31,10 @@ const LoginForm = () => {
|
|
|
if (status) {
|
|
|
status = JSON.parse(status);
|
|
|
setStatus(status);
|
|
|
+ if (status.turnstile_check) {
|
|
|
+ setTurnstileEnabled(true);
|
|
|
+ setTurnstileSiteKey(status.turnstile_site_key);
|
|
|
+ }
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
@@ -37,6 +45,10 @@ const LoginForm = () => {
|
|
|
};
|
|
|
|
|
|
const onSubmitWeChatVerificationCode = async () => {
|
|
|
+ if (turnstileEnabled && turnstileToken === '') {
|
|
|
+ showInfo('请稍后几秒重试,Turnstile 正在检查用户环境!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
const res = await API.get(
|
|
|
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
|
|
|
);
|
|
|
@@ -58,9 +70,13 @@ const LoginForm = () => {
|
|
|
}
|
|
|
|
|
|
async function handleSubmit(e) {
|
|
|
+ if (turnstileEnabled && turnstileToken === '') {
|
|
|
+ showInfo('请稍后几秒重试,Turnstile 正在检查用户环境!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
setSubmitted(true);
|
|
|
if (username && password) {
|
|
|
- const res = await API.post(`/api/user/login`, {
|
|
|
+ const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
|
|
|
username,
|
|
|
password
|
|
|
});
|
|
|
@@ -109,6 +125,16 @@ const LoginForm = () => {
|
|
|
value={password}
|
|
|
onChange={handleChange}
|
|
|
/>
|
|
|
+ {turnstileEnabled ? (
|
|
|
+ <Turnstile
|
|
|
+ sitekey={turnstileSiteKey}
|
|
|
+ onVerify={(token) => {
|
|
|
+ setTurnstileToken(token);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <></>
|
|
|
+ )}
|
|
|
<Button color='green' fluid size='large' onClick={handleSubmit}>
|
|
|
登录
|
|
|
</Button>
|