feat: support all captcha for login (#1619)

* refactor: captcha modal * feat: support all captcha when login * chore: improve i18 in loginPage.js
2025-07-04 05:10:19 +08:00 · 2023-03-05 20:31:46 +08:00
parent f8bc87eb4e
commit e8a7b7ee9c
19 changed files with 160 additions and 247 deletions
--- a/web/src/common/CaptchaModal.js
+++ b/web/src/common/CaptchaModal.js
@ -19,60 +19,57 @@ import * as UserBackend from "../backend/UserBackend";
 import {CaptchaWidget} from "./CaptchaWidget";
 import {SafetyOutlined} from "@ant-design/icons";

-export const CaptchaModal = ({
-  owner,
-  name,
-  captchaType,
-  subType,
-  clientId,
-  clientId2,
-  clientSecret,
-  clientSecret2,
-  open,
-  onOk,
-  onCancel,
-  canCancel,
-}) => {
-  const [visible, setVisible] = React.useState(false);
+export const CaptchaModal = (props) => {
+  const {owner, name, visible, onOk, onCancel, isCurrentProvider} = props;
+
+  const [captchaType, setCaptchaType] = React.useState("none");
+  const [clientId, setClientId] = React.useState("");
+  const [clientSecret, setClientSecret] = React.useState("");
+  const [subType, setSubType] = React.useState("");
+  const [clientId2, setClientId2] = React.useState("");
+  const [clientSecret2, setClientSecret2] = React.useState("");
+
+  const [open, setOpen] = React.useState(false);
  const [captchaImg, setCaptchaImg] = React.useState("");
  const [captchaToken, setCaptchaToken] = React.useState("");
-  const [secret, setSecret] = React.useState(clientSecret);
-  const [secret2, setSecret2] = React.useState(clientSecret2);
+
  const defaultInputRef = React.useRef(null);

  useEffect(() => {
-    setVisible(() => {
-      if (open) {
-        getCaptchaFromBackend();
-      } else {
-        cleanUp();
-      }
-      return open;
-    });
-  }, [open]);
+    if (visible) {
+      loadCaptcha();
+    } else {
+      handleCancel();
+      setOpen(false);
+    }
+  }, [visible]);

  const handleOk = () => {
-    onOk?.(captchaType, captchaToken, secret);
+    onOk?.(captchaType, captchaToken, clientSecret);
  };

  const handleCancel = () => {
+    setCaptchaToken("");
    onCancel?.();
  };

-  const cleanUp = () => {
-    setCaptchaToken("");
-  };
-
-  const getCaptchaFromBackend = () => {
-    UserBackend.getCaptcha(owner, name, true).then((res) => {
-      if (captchaType === "Default") {
-        setSecret(res.captchaId);
+  const loadCaptcha = () => {
+    UserBackend.getCaptcha(owner, name, isCurrentProvider).then((res) => {
+      if (res.type === "none") {
+        handleOk();
+      } else if (res.type === "Default") {
+        setOpen(true);
+        setClientSecret(res.captchaId);
        setCaptchaImg(res.captchaImage);
-
-        defaultInputRef.current?.focus();
+        setCaptchaType("Default");
      } else {
-        setSecret(res.clientSecret);
-        setSecret2(res.clientSecret2);
+        setOpen(true);
+        setCaptchaType(res.type);
+        setClientId(res.clientId);
+        setClientSecret(res.clientSecret);
+        setSubType(res.subType);
+        setClientId2(res.clientId2);
+        setClientSecret2(res.clientSecret2);
      }
    });
  };
@ -108,11 +105,11 @@ export const CaptchaModal = ({
    );
  };

-  const onSubmit = (token) => {
+  const onChange = (token) => {
    setCaptchaToken(token);
  };

-  const renderCheck = () => {
+  const renderCaptcha = () => {
    if (captchaType === "Default") {
      return renderDefaultCaptcha();
    } else {
@ -123,10 +120,10 @@ export const CaptchaModal = ({
              captchaType={captchaType}
              subType={subType}
              siteKey={clientId}
-              clientSecret={secret}
-              onChange={onSubmit}
+              clientSecret={clientSecret}
+              onChange={onChange}
              clientId2={clientId2}
-              clientSecret2={secret2}
+              clientSecret2={clientSecret2}
            />
          </Row>
        </Col>
@ -141,37 +138,35 @@ export const CaptchaModal = ({
      if (!regex.test(captchaToken)) {
        isOkDisabled = true;
      }
+    } else if (captchaToken === "") {
+      isOkDisabled = true;
    }

-    if (canCancel) {
-      return [
-        <Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>,
-        <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
-      ];
-    } else {
-      return [
-        <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
-      ];
-    }
+    return [
+      <Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>,
+      <Button key="ok" disabled={isOkDisabled} onClick={handleOk}>{i18next.t("user:OK")}</Button>,
+    ];
  };

  return (
-    <React.Fragment>
-      <Modal
-        closable={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        title={i18next.t("general:Captcha")}
-        open={visible}
-        width={348}
-        footer={renderFooter()}
-      >
-        <div style={{marginTop: "20px", marginBottom: "50px"}}>
-          {
-            renderCheck()
-          }
-        </div>
-      </Modal>
-    </React.Fragment>
+    <Modal
+      closable={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      title={i18next.t("general:Captcha")}
+      open={open}
+      okText={i18next.t("user:OK")}
+      cancelText={i18next.t("user:Cancel")}
+      width={350}
+      footer={renderFooter()}
+      onCancel={handleCancel}
+      onOk={handleOk}
+    >
+      <div style={{marginTop: "20px", marginBottom: "50px"}}>
+        {
+          renderCaptcha()
+        }
+      </div>
+    </Modal>
  );
 };
--- a/web/src/common/CaptchaPreview.js
+++ b/web/src/common/CaptchaPreview.js
@ -18,19 +18,9 @@ import i18next from "i18next";
 import {CaptchaModal} from "./CaptchaModal";
 import * as UserBackend from "../backend/UserBackend";

-export const CaptchaPreview = ({
-  provider,
-  clientSecret,
-  captchaType,
-  subType,
-  owner,
-  clientId,
-  name,
-  providerUrl,
-  clientId2,
-  clientSecret2,
-}) => {
-  const [open, setOpen] = React.useState(false);
+export const CaptchaPreview = (props) => {
+  const {owner, name, provider, captchaType, subType, clientId, clientSecret, clientId2, clientSecret2, providerUrl} = props;
+  const [visible, setVisible] = React.useState(false);

  const clickPreview = () => {
    provider.name = name;
@ -42,13 +32,13 @@ export const CaptchaPreview = ({
      // ProviderBackend.updateProvider(owner, providerName, provider).then(() => {
      //   setOpen(true);
      // });
-      setOpen(true);
+      setVisible(true);
    } else {
-      setOpen(true);
+      setVisible(true);
    }
  };

-  const getButtonDisabled = () => {
+  const isButtonDisabled = () => {
    if (captchaType !== "Default") {
      if (!clientId || !clientSecret) {
        return true;
@ -62,14 +52,14 @@ export const CaptchaPreview = ({
    return false;
  };

-  const onOk = (captchaType, captchaToken, secret) => {
-    UserBackend.verifyCaptcha(captchaType, captchaToken, secret).then(() => {
-      setOpen(false);
+  const onOk = (captchaType, captchaToken, clientSecret) => {
+    UserBackend.verifyCaptcha(captchaType, captchaToken, clientSecret).then(() => {
+      setVisible(false);
    });
  };

  const onCancel = () => {
-    setOpen(false);
+    setVisible(false);
  };

  return (
@ -78,23 +68,17 @@ export const CaptchaPreview = ({
        style={{fontSize: 14}}
        type={"primary"}
        onClick={clickPreview}
-        disabled={getButtonDisabled()}
+        disabled={isButtonDisabled()}
      >
        {i18next.t("general:Preview")}
      </Button>
      <CaptchaModal
        owner={owner}
        name={name}
-        captchaType={captchaType}
-        subType={subType}
-        clientId={clientId}
-        clientId2={clientId2}
-        clientSecret={clientSecret}
-        clientSecret2={clientSecret2}
-        open={open}
+        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
-        canCancel={true}
+        isCurrentProvider={true}
      />
    </React.Fragment>
  );
--- a/web/src/common/CaptchaWidget.js
+++ b/web/src/common/CaptchaWidget.js
@ -14,7 +14,9 @@

 import React, {useEffect} from "react";

-export const CaptchaWidget = ({captchaType, subType, siteKey, clientSecret, onChange, clientId2, clientSecret2}) => {
+export const CaptchaWidget = (props) => {
+  const {captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2, onChange} = props;
+
  const loadScript = (src) => {
    const tag = document.createElement("script");
    tag.async = false;
--- a/web/src/common/SendCodeInput.js
+++ b/web/src/common/SendCodeInput.js
@ -12,29 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import {Button, Col, Input, Modal, Row} from "antd";
+import {Button, Input} from "antd";
 import React from "react";
 import i18next from "i18next";
 import * as UserBackend from "../backend/UserBackend";
 import {SafetyOutlined} from "@ant-design/icons";
-import {CaptchaWidget} from "./CaptchaWidget";
+import {CaptchaModal} from "./CaptchaModal";

 const {Search} = Input;

 export const SendCodeInput = (props) => {
  const {disabled, textBefore, onChange, onButtonClickArgs, application, method, countryCode} = props;
  const [visible, setVisible] = React.useState(false);
-  const [key, setKey] = React.useState("");
-  const [captchaImg, setCaptchaImg] = React.useState("");
-  const [checkType, setCheckType] = React.useState("");
-  const [checkId, setCheckId] = React.useState("");
+
  const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
  const [buttonLoading, setButtonLoading] = React.useState(false);
-  const [buttonDisabled, setButtonDisabled] = React.useState(true);
-  const [clientId, setClientId] = React.useState("");
-  const [subType, setSubType] = React.useState("");
-  const [clientId2, setClientId2] = React.useState("");
-  const [clientSecret2, setClientSecret2] = React.useState("");

  const handleCountDown = (leftTime = 60) => {
    let leftTimeSecond = leftTime;
@ -50,11 +42,10 @@ export const SendCodeInput = (props) => {
    setTimeout(countDown, 1000);
  };

-  const handleOk = () => {
+  const handleOk = (captchaType, captchaToken, clintSecret) => {
    setVisible(false);
    setButtonLoading(true);
-    UserBackend.sendCode(checkType, checkId, key, method, countryCode, ...onButtonClickArgs).then(res => {
-      setKey("");
+    UserBackend.sendCode(captchaType, captchaToken, clintSecret, method, countryCode, ...onButtonClickArgs).then(res => {
      setButtonLoading(false);
      if (res) {
        handleCountDown(60);
@ -64,76 +55,6 @@ export const SendCodeInput = (props) => {

  const handleCancel = () => {
    setVisible(false);
-    setKey("");
-  };
-
-  const loadCaptcha = () => {
-    UserBackend.getCaptcha(application.owner, application.name, false).then(res => {
-      if (res.type === "none") {
-        UserBackend.sendCode("none", "", "", method, countryCode, ...onButtonClickArgs).then(res => {
-          if (res) {
-            handleCountDown(60);
-          }
-        });
-      } else if (res.type === "Default") {
-        setCheckId(res.captchaId);
-        setCaptchaImg(res.captchaImage);
-        setCheckType("Default");
-        setVisible(true);
-      } else {
-        setCheckType(res.type);
-        setClientId(res.clientId);
-        setCheckId(res.clientSecret);
-        setVisible(true);
-        setSubType(res.subType);
-        setClientId2(res.clientId2);
-        setClientSecret2(res.clientSecret2);
-      }
-    });
-  };
-
-  const renderCaptcha = () => {
-    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={key} prefix={<SafetyOutlined />} placeholder={i18next.t("general:Captcha")} onPressEnter={handleOk} onChange={e => setKey(e.target.value)} />
-        </Row>
-      </Col>
-    );
-  };
-
-  const onSubmit = (token) => {
-    setButtonDisabled(false);
-    setKey(token);
-  };
-
-  const renderCheck = () => {
-    if (checkType === "Default") {
-      return renderCaptcha();
-    } else {
-      return (
-        <CaptchaWidget
-          captchaType={checkType}
-          subType={subType}
-          siteKey={clientId}
-          clientSecret={checkId}
-          onChange={onSubmit}
-          clientId2={clientId2}
-          clientSecret2={clientSecret2}
-        />
-      );
-    }
  };

  return (
@ -149,25 +70,16 @@ export const SendCodeInput = (props) => {
            {buttonLeftTime > 0 ? `${buttonLeftTime} s` : buttonLoading ? i18next.t("code:Sending Code") : i18next.t("code:Send Code")}
          </Button>
        }
-        onSearch={loadCaptcha}
+        onSearch={() => setVisible(true)}
      />
-      <Modal
-        closable={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        title={i18next.t("general:Captcha")}
-        open={visible}
-        okText={i18next.t("user:OK")}
-        cancelText={i18next.t("user:Cancel")}
+      <CaptchaModal
+        owner={application.owner}
+        name={application.name}
+        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
-        okButtonProps={{disabled: key.length !== 5 && buttonDisabled}}
-        width={348}
-      >
-        {
-          renderCheck()
-        }
-      </Modal>
+        isCurrentProvider={false}
+      />
    </React.Fragment>
  );
 };