From f50683e75f28425a217f8559203d0e7a334f5177 Mon Sep 17 00:00:00 2001
From: ckt1031 <65409152+ckt1031@users.noreply.github.com>
Date: Mon, 24 Jul 2023 10:54:04 +0800
Subject: [PATCH] feat: add turnstile in login form

---
 router/api-router.go            |  2 +-
 web/src/components/LoginForm.js | 28 ++++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/router/api-router.go b/router/api-router.go
index 383133fa..efc7da49 100644
--- a/router/api-router.go
+++ b/router/api-router.go
@@ -28,7 +28,7 @@ func SetApiRouter(router *gin.Engine) {
 		userRoute := apiRouter.Group("/user")
 		{
 			userRoute.POST("/register", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Register)
-			userRoute.POST("/login", middleware.CriticalRateLimit(), controller.Login)
+			userRoute.POST("/login", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Login)
 			userRoute.GET("/logout", controller.Logout)
 
 			selfRoute := userRoute.Group("/")
diff --git a/web/src/components/LoginForm.js b/web/src/components/LoginForm.js
index 110dad46..7ac3500e 100644
--- a/web/src/components/LoginForm.js
+++ b/web/src/components/LoginForm.js
@@ -2,7 +2,8 @@ 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 } from '../helpers';
+import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -14,6 +15,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();
@@ -26,6 +30,11 @@ const LoginForm = () => {
     if (status) {
       status = JSON.parse(status);
       setStatus(status);
+
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
     }
   }, []);
 
@@ -65,7 +74,12 @@ const LoginForm = () => {
   async function handleSubmit(e) {
     setSubmitted(true);
     if (username && password) {
-      const res = await API.post(`/api/user/login`, {
+      if (turnstileEnabled && turnstileToken === '') {
+        showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+        return;
+      }
+
+      const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
         username,
         password
       });
@@ -108,6 +122,16 @@ const LoginForm = () => {
               value={password}
               onChange={handleChange}
             />
+            {turnstileEnabled ? (
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            ) : (
+              <></>
+            )}
             <Button color='green' fluid size='large' onClick={handleSubmit}>
               登录
             </Button>