From ca1b5feb7870b1e30e959be61951849ad5e2661e Mon Sep 17 00:00:00 2001
From: Gucheng Wang <nomeguy@qq.com>
Date: Thu, 2 Mar 2023 21:40:27 +0800
Subject: [PATCH] Improve default captcha UI

---
 authz/authz.go                 |  2 +-
 web/src/common/CaptchaModal.js | 66 +++++++++++++++++++++-------------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/authz/authz.go b/authz/authz.go
index afebea32..8ff96c04 100644
--- a/authz/authz.go
+++ b/authz/authz.go
@@ -160,7 +160,7 @@ func IsAllowed(subOwner string, subName string, method string, urlPath string, o
 
 func isAllowedInDemoMode(subOwner string, subName string, method string, urlPath string, objOwner string, objName string) bool {
 	if method == "POST" {
-		if strings.HasPrefix(urlPath, "/api/login") || urlPath == "/api/logout" || urlPath == "/api/signup" || urlPath == "/api/send-verification-code" || urlPath == "/api/send-email" {
+		if strings.HasPrefix(urlPath, "/api/login") || urlPath == "/api/logout" || urlPath == "/api/signup" || urlPath == "/api/send-verification-code" || urlPath == "/api/send-email" || urlPath == "/api/verify-captcha" {
 			return true
 		} else if urlPath == "/api/update-user" {
 			// Allow ordinary users to update their own information
diff --git a/web/src/common/CaptchaModal.js b/web/src/common/CaptchaModal.js
index d073e899..180c822a 100644
--- a/web/src/common/CaptchaModal.js
+++ b/web/src/common/CaptchaModal.js
@@ -38,6 +38,7 @@ export const CaptchaModal = ({
   const [captchaToken, setCaptchaToken] = React.useState("");
   const [secret, setSecret] = React.useState(clientSecret);
   const [secret2, setSecret2] = React.useState(clientSecret2);
+  const defaultInputRef = React.useRef(null);
 
   useEffect(() => {
     setVisible(() => {
@@ -67,6 +68,8 @@ export const CaptchaModal = ({
       if (captchaType === "Default") {
         setSecret(res.captchaId);
         setCaptchaImg(res.captchaImage);
+
+        defaultInputRef.current?.focus();
       } else {
         setSecret(res.clientSecret);
         setSecret2(res.clientSecret2);
@@ -76,28 +79,31 @@ export const CaptchaModal = ({
 
   const renderDefaultCaptcha = () => {
     return (
-      <Col>
-        <Row
-          style={{
-            backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
-            backgroundRepeat: "no-repeat",
-            height: "80px",
-            width: "200px",
-            borderRadius: "5px",
-            border: "1px solid #ccc",
-            marginBottom: 10,
-          }}
-        />
-        <Row>
-          <Input
-            autoFocus
-            value={captchaToken}
-            prefix={<SafetyOutlined />}
-            placeholder={i18next.t("general:Captcha")}
-            onPressEnter={handleOk}
-            onChange={(e) => setCaptchaToken(e.target.value)}
+      <Col style={{textAlign: "center"}}>
+        <div style={{display: "inline-block"}}>
+          <Row
+            style={{
+              backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
+              backgroundRepeat: "no-repeat",
+              height: "80px",
+              width: "200px",
+              borderRadius: "5px",
+              border: "1px solid #ccc",
+              marginBottom: "20px",
+            }}
           />
-        </Row>
+          <Row>
+            <Input
+              ref={defaultInputRef}
+              style={{width: "200px"}}
+              value={captchaToken}
+              prefix={<SafetyOutlined />}
+              placeholder={i18next.t("general:Captcha")}
+              onPressEnter={handleOk}
+              onChange={(e) => setCaptchaToken(e.target.value)}
+            />
+          </Row>
+        </div>
       </Col>
     );
   };
@@ -129,14 +135,22 @@ export const CaptchaModal = ({
   };
 
   const renderFooter = () => {
+    let isOkDisabled = false;
+    if (captchaType === "Default") {
+      const regex = /^\d{5}$/;
+      if (!regex.test(captchaToken)) {
+        isOkDisabled = true;
+      }
+    }
+
     if (canCancel) {
       return [
         <Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>,
-        <Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
+        <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
       ];
     } else {
       return [
-        <Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
+        <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
       ];
     }
   };
@@ -152,7 +166,11 @@ export const CaptchaModal = ({
         width={348}
         footer={renderFooter()}
       >
-        {renderCheck()}
+        <div style={{marginTop: "20px", marginBottom: "50px"}}>
+          {
+            renderCheck()
+          }
+        </div>
       </Modal>
     </React.Fragment>
   );