From 22b519f5bac2e8fe6881454a7fe21ee8ed202ee9 Mon Sep 17 00:00:00 2001 From: topjohncian <45138629+topjohncian@users.noreply.github.com> Date: Mon, 22 Mar 2021 18:28:14 +0800 Subject: [PATCH] Refactor: captcha (#64) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Refactor: captcha * Fix: 重复获取验证码 --- package.json | 1 + src/Admin.js | 5 + src/component/Admin/Dashboard.js | 6 + src/component/Admin/Setting/Access.js | 85 ------ src/component/Admin/Setting/Captcha.js | 406 +++++++++++++++++++++++++ src/component/Admin/Setting/Image.js | 70 ----- src/component/Login/LoginForm.js | 149 +++------ src/component/Login/Register.js | 137 ++------- src/component/Login/Reset.js | 119 ++------ src/hooks/normal.js | 115 +++++++ src/hooks/recaptcha.js | 68 +++++ src/hooks/tcaptcha.js | 81 +++++ src/hooks/useCaptcha.js | 42 +++ src/reducers/index.js | 3 +- 14 files changed, 818 insertions(+), 469 deletions(-) create mode 100644 src/component/Admin/Setting/Captcha.js create mode 100644 src/hooks/normal.js create mode 100644 src/hooks/recaptcha.js create mode 100644 src/hooks/tcaptcha.js create mode 100644 src/hooks/useCaptcha.js diff --git a/package.json b/package.json index 6fb1d0b..6aa57a9 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "react-dplayer": "^0.4.1", "react-hotkeys": "^2.0.0", "react-lazy-load-image-component": "^1.3.2", + "react-load-script": "^0.0.6", "react-monaco-editor": "^0.36.0", "react-pdf": "^4.1.0", "react-photo-view": "^0.4.0", diff --git a/src/Admin.js b/src/Admin.js index 7c467bb..8b50bd2 100644 --- a/src/Admin.js +++ b/src/Admin.js @@ -31,6 +31,7 @@ import Share from "./component/Admin/Share/Share"; import Download from "./component/Admin/Task/Download"; import Task from "./component/Admin/Task/Task"; import Import from "./component/Admin/File/Import"; +import Captcha from "./component/Admin/Setting/Captcha"; const useStyles = makeStyles((theme) => ({ root: { @@ -114,6 +115,10 @@ export default function Admin() { + + + + diff --git a/src/component/Admin/Dashboard.js b/src/component/Admin/Dashboard.js index 1f397cf..a83e184 100644 --- a/src/component/Admin/Dashboard.js +++ b/src/component/Admin/Dashboard.js @@ -10,6 +10,7 @@ import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemText from "@material-ui/core/ListItemText"; +import Code from "@material-ui/icons/Code"; import { lighten, makeStyles, useTheme } from "@material-ui/core/styles"; import Toolbar from "@material-ui/core/Toolbar"; import Typography from "@material-ui/core/Typography"; @@ -219,6 +220,11 @@ const items = [ path: "image", icon: , }, + { + title: "验证码", + path: "captcha", + icon: , + }, ], }, { diff --git a/src/component/Admin/Setting/Access.js b/src/component/Admin/Setting/Access.js index 5ce6eac..0abc148 100644 --- a/src/component/Admin/Setting/Access.js +++ b/src/component/Admin/Setting/Access.js @@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button"; import FormControl from "@material-ui/core/FormControl"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormHelperText from "@material-ui/core/FormHelperText"; -import Input from "@material-ui/core/Input"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; @@ -14,7 +13,6 @@ import { useDispatch } from "react-redux"; import { toggleSnackbar } from "../../../actions"; import API from "../../../middleware/Api"; import AlertDialog from "../Dialogs/Alert"; -import Link from "@material-ui/core/Link"; const useStyles = makeStyles((theme) => ({ root: { @@ -46,9 +44,6 @@ export default function Access() { reg_captcha: "0", forget_captcha: "0", authn_enabled: "0", - captcha_IsUseReCaptcha: "0", - captcha_ReCaptchaKey: "defaultKey", - captcha_ReCaptchaSecret: "defaultSecret", }); const [siteURL, setSiteURL] = useState(""); const [groups, setGroups] = useState([]); @@ -248,86 +243,6 @@ export default function Access() { -
- - - } - label="使用 reCaptcha V2 验证码" - /> - - 是否使用 reCaptcha V2 验证码 - - -
- - {options.captcha_IsUseReCaptcha === "1" && ( - <> -
- - - Site KEY - - - - - 应用管理页面 - {" "} - 获取到的的 网站密钥 - - -
- -
- - - Secret - - - - - 应用管理页面 - {" "} - 获取到的的 秘钥 - - -
- - )} -
({ + root: { + [theme.breakpoints.up("md")]: { + marginLeft: 100, + }, + marginBottom: 40, + }, + form: { + maxWidth: 400, + marginTop: 20, + marginBottom: 20, + }, + formContainer: { + [theme.breakpoints.up("md")]: { + padding: "0px 24px 0 24px", + }, + }, +})); + +export default function Captcha() { + const classes = useStyles(); + const [loading, setLoading] = useState(false); + const [options, setOptions] = useState({ + captcha_type: "normal", + captcha_height: "1", + captcha_width: "1", + captcha_mode: "3", + captcha_CaptchaLen: "", + captcha_ReCaptchaKey: "", + captcha_ReCaptchaSecret: "", + captcha_TCaptcha_CaptchaAppId: "", + captcha_TCaptcha_AppSecretKey: "", + captcha_TCaptcha_SecretId: "", + captcha_TCaptcha_SecretKey: "", + }); + + const handleChange = (name) => (event) => { + setOptions({ + ...options, + [name]: event.target.value, + }); + }; + + const dispatch = useDispatch(); + const ToggleSnackbar = useCallback( + (vertical, horizontal, msg, color) => + dispatch(toggleSnackbar(vertical, horizontal, msg, color)), + [dispatch] + ); + + useEffect(() => { + API.post("/admin/setting", { + keys: Object.keys(options), + }) + .then((response) => { + setOptions(response.data); + }) + .catch((error) => { + ToggleSnackbar("top", "right", error.message, "error"); + }); + // eslint-disable-next-line + }, []); + + const submit = (e) => { + e.preventDefault(); + setLoading(true); + const option = []; + Object.keys(options).forEach((k) => { + option.push({ + key: k, + value: options[k], + }); + }); + API.patch("/admin/setting", { + options: option, + }) + .then(() => { + ToggleSnackbar("top", "right", "设置已更改", "success"); + }) + .catch((error) => { + ToggleSnackbar("top", "right", error.message, "error"); + }) + .then(() => { + setLoading(false); + }); + }; + + return ( +
+
+
+ + 验证码 + +
+ + + 验证码类型 + + + + 验证码类型 + + +
+
+ + {options.captcha_type === "normal" && ( +
+ + 普通验证码 + +
+
+ + + 宽度 + + + +
+ +
+ + + 高度 + + + +
+ +
+ + + 模式 + + + + 验证码的形式 + + +
+
+
+ )} + + {options.captcha_type === "recaptcha" && ( +
+ + reCAPTCHA V2 + +
+
+
+ + + Site KEY + + + + + 应用管理页面 + {" "} + 获取到的的 网站密钥 + + +
+ +
+ + + Secret + + + + + 应用管理页面 + {" "} + 获取到的的 秘钥 + + +
+
+
+
+ )} + + {options.captcha_type === "tcaptcha" && ( +
+ + 腾讯云验证码 + +
+
+
+ + + SecretId + + + + + 访问密钥页面 + {" "} + 获取到的的 SecretId + + +
+ +
+ + + SecretKey + + + + + 访问密钥页面 + {" "} + 获取到的的 SecretKey + + +
+ +
+ + + APPID + + + + + 图形验证页面 + {" "} + 获取到的的 APPID + + +
+ +
+ + + App Secret Key + + + + + 图形验证页面 + {" "} + 获取到的的 App Secret Key + + +
+
+
+
+ )} + +
+ +
+
+
+ ); +} diff --git a/src/component/Admin/Setting/Image.js b/src/component/Admin/Setting/Image.js index 232c6fd..b8cac0d 100644 --- a/src/component/Admin/Setting/Image.js +++ b/src/component/Admin/Setting/Image.js @@ -3,8 +3,6 @@ import FormControl from "@material-ui/core/FormControl"; import FormHelperText from "@material-ui/core/FormHelperText"; import Input from "@material-ui/core/Input"; import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import Select from "@material-ui/core/Select"; import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React, { useCallback, useEffect, useState } from "react"; @@ -44,10 +42,6 @@ export default function ImageSetting() { avatar_size_s: "", thumb_width: "", thumb_height: "", - captcha_height: "1", - captcha_width: "1", - captcha_mode: "3", - captcha_CaptchaLen: "", }); const handleChange = (name) => (event) => { @@ -260,70 +254,6 @@ export default function ImageSetting() {
-
- - 验证码 - -
-
- - - 宽度 - - - -
- -
- - - 高度 - - - -
- -
- - - 模式 - - - - 验证码的形式 - - -
-
-
-