This is an automated email from the ASF dual-hosted git repository.
dengliming pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new ff0de95c Optimized the verification code function (#240)
ff0de95c is described below
commit ff0de95cb7430885d2144db6e445d77cd2d39257
Author: WeiS <[email protected]>
AuthorDate: Wed Sep 7 03:06:39 2022 +0800
Optimized the verification code function (#240)
* update SiderMenu
* Optimized the verification code function
---
src/components/Login/LoginCode.tsx | 28 +++++++---
.../{Login/LoginCode.tsx => _utils/utils.ts} | 65 +++++++++++++++-------
src/routes/User/Login.js | 8 ++-
3 files changed, 71 insertions(+), 30 deletions(-)
diff --git a/src/components/Login/LoginCode.tsx
b/src/components/Login/LoginCode.tsx
index 92a1295d..d1ffe935 100644
--- a/src/components/Login/LoginCode.tsx
+++ b/src/components/Login/LoginCode.tsx
@@ -14,26 +14,40 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-import React, { useCallback, useState, useRef } from "react";
+import React, { useCallback, useState, useRef, useImperativeHandle } from
"react";
import Captcha from "react-captcha-code";
+import { randomNum, originalCharacter } from "../_utils/utils";
interface childProps {
ChildGetCode: Function,
+ onRef: any,
}
const LoginCode: React.FC<childProps> = (props) => {
const { ChildGetCode } = props;
const captchaRef = useRef<any>();
- const [captcha, setCaptcha] = useState("");
- const handleChange = useCallback((code) => {
- setCaptcha(code);
- ChildGetCode(code)
+ const [code, setCode] = useState("");
+
+ const handleClick = useCallback(() => {
+ let str = "";
+ for (let i = 0; i < 4; i++) {
+ const temp =
+ originalCharacter[randomNum(0, originalCharacter.length - 1)];
+ str = `${str}${temp}`;
+ }
+ setCode(str);
+ ChildGetCode(str);
}, []);
+ useImperativeHandle(props.onRef, () => {
+ return {
+ handleChange: handleClick,
+ };
+ });
+
return (
<span style={{ cursor: 'pointer' }}>
- <Captcha onChange={handleChange} ref={captchaRef} />
+ <Captcha onClick={handleClick} code={code} />
</span>
);
}
diff --git a/src/components/Login/LoginCode.tsx b/src/components/_utils/utils.ts
similarity index 56%
copy from src/components/Login/LoginCode.tsx
copy to src/components/_utils/utils.ts
index 92a1295d..a8ac69d3 100644
--- a/src/components/Login/LoginCode.tsx
+++ b/src/components/_utils/utils.ts
@@ -15,27 +15,52 @@
* limitations under the License.
*/
-import React, { useCallback, useState, useRef } from "react";
-import Captcha from "react-captcha-code";
-
-interface childProps {
- ChildGetCode: Function,
+// 随机数字
+export function randomNum(m: number, n: number) {
+ return Math.floor(Math.random() * (n - m + 1) + m);
}
-const LoginCode: React.FC<childProps> = (props) => {
- const { ChildGetCode } = props;
- const captchaRef = useRef<any>();
- const [captcha, setCaptcha] = useState("");
- const handleChange = useCallback((code) => {
- setCaptcha(code);
- ChildGetCode(code)
- }, []);
-
- return (
- <span style={{ cursor: 'pointer' }}>
- <Captcha onChange={handleChange} ref={captchaRef} />
- </span>
- );
+// 随机颜色
+export function randomColor() {
+ return `rgb(${randomNum(0, 255)}, ${randomNum(0, 255)}, ${randomNum(
+ 0,
+ 255
+ )})`;
}
-export default LoginCode;
+export const originalCharacter = [
+ "1",
+ "2",
+ "3",
+ "4",
+ "5",
+ "6",
+ "7",
+ "8",
+ "9",
+ "a",
+ "b",
+ "c",
+ "d",
+ "e",
+ "f",
+ "g",
+ "h",
+ "i",
+ "j",
+ "k",
+ "l",
+ "m",
+ "n",
+ "p",
+ "q",
+ "r",
+ "s",
+ "t",
+ "u",
+ "v",
+ "w",
+ "x",
+ "y",
+ "z"
+];
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index 2d40d634..4ee349e6 100644
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@@ -32,7 +32,8 @@ export default class LoginPage extends Component {
this.state = {
VCode: "",
codeError: true
- }
+ };
+ this.ChildRef = React.createRef();
}
handleSubmit = (err, values) => {
@@ -40,7 +41,8 @@ export default class LoginPage extends Component {
const { dispatch } = this.props;
if (!err) {
if (values.verifyCode !== this.state.VCode) {
- this.setState({ codeError: false })
+ this.setState({ codeError: false });
+ this.ChildRef.current.handleChange();
return;
}
dispatch({
@@ -78,7 +80,7 @@ export default class LoginPage extends Component {
<VerifyCode name="verifyCode" placeholder="Verification Code" />
{this.codeError()}
</div>
- <LoginCode ChildGetCode={(code) => this.getCode(code)} />
+ <LoginCode onRef={this.ChildRef} ChildGetCode={(code) =>
this.getCode(code)} />
</div>
<Submit loading={submitting}>Login</Submit>
</Login>
