fix: don't trigger countdown if failed to send verification code (#815 )

* feat: add countdown when no captcha provider found * fix: add countdown when sent code successfully
Fix bug and i18n issue in captcha provider edit page.
2025-08-26 09:10:22 +08:00 · 2022-06-22 22:22:40 +08:00 · 2022-06-22 21:54:25 +08:00 · 2022-06-22 18:31:18 +08:00 · 2022-06-22 00:08:46 +08:00 · 2022-06-22 00:03:55 +08:00
12 changed files with 89 additions and 70 deletions
--- a/object/init.go
+++ b/object/init.go
@@ -23,6 +23,7 @@ import (
 func InitDb() {
 	existed := initBuiltInOrganization()
 	if !existed {
+		initBuiltInProvider()
 		initBuiltInUser()
 		initBuiltInApplication()
 		initBuiltInCert()
@@ -127,7 +128,9 @@ func initBuiltInApplication() {
 		Cert:           "cert-built-in",
 		EnablePassword: true,
 		EnableSignUp:   true,
-		Providers:      []*ProviderItem{},
+		Providers: []*ProviderItem{
+			{Name: "provider_captcha_default", CanSignUp: false, CanSignIn: false, CanUnlink: false, Prompted: false, AlertType: "None", Provider: nil},
+		},
 		SignupItems: []*SignupItem{
 			{Name: "ID", Visible: false, Required: true, Prompted: false, Rule: "Random"},
 			{Name: "Username", Visible: true, Required: true, Prompted: false, Rule: "None"},
@@ -201,3 +204,20 @@ func initBuiltInLdap() {
 	}
 	AddLdap(ldap)
 }
+
+func initBuiltInProvider() {
+	provider := GetProvider("admin/provider_captcha_default")
+	if provider != nil {
+		return
+	}
+
+	provider = &Provider{
+		Owner:       "admin",
+		Name:        "provider_captcha_default",
+		CreatedTime: util.GetCurrentTime(),
+		DisplayName: "Captcha Default",
+		Category:    "Captcha",
+		Type:        "Default",
+	}
+	AddProvider(provider)
+}
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -23,7 +23,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class ApplicationListPage extends BaseListPage {
-
  newApplication() {
    const randomName = Setting.getRandomName();
    return {
@@ -36,7 +35,9 @@ class ApplicationListPage extends BaseListPage {
      enableSignUp: true,
      enableSigninSession: false,
      enableCodeSignin: false,
-      providers: [],
+      providers: [
+        {name: "provider_captcha_default", canSignUp: false, canSignIn: false, canUnlink: false, prompted: false, alertType: "None"},
+      ],
      signupItems: [
        {name: "ID", visible: false, required: true, rule: "Random"},
        {name: "Username", visible: true, required: true, rule: "None"},
--- a/web/src/CertListPage.js
+++ b/web/src/CertListPage.js
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class CertListPage extends BaseListPage {
-
  newCert() {
    const randomName = Setting.getRandomName();
    return {
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class OrganizationListPage extends BaseListPage {
-
  newOrganization() {
    const randomName = Setting.getRandomName();
    return {
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -350,29 +350,30 @@ class ProviderEditPage extends React.Component {
          )
        }
        {
-          this.state.provider.type !== "Default" && 
-          <>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-                {this.getClientIdLabel()}
-              </Col>
-              <Col span={22} >
-                <Input value={this.state.provider.clientId} onChange={e => {
-                  this.updateProviderField('clientId', e.target.value);
-                }} />
-              </Col>
-            </Row>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-                {this.getClientSecretLabel()}
-              </Col>
-              <Col span={22} >
-                <Input value={this.state.provider.clientSecret} onChange={e => {
-                  this.updateProviderField('clientSecret', e.target.value);
-                }} />
-              </Col>
-            </Row>
-          </>
+          this.state.provider.category === "Captcha" && this.state.provider.type === "Default" ? null : (
+            <React.Fragment>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {this.getClientIdLabel()}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.clientId} onChange={e => {
+                    this.updateProviderField('clientId', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: '20px'}} >
+                <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {this.getClientSecretLabel()}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.clientSecret} onChange={e => {
+                    this.updateProviderField('clientSecret', e.target.value);
+                  }} />
+                </Col>
+              </Row>
+            </React.Fragment>
+          )
        }
        {
          this.state.provider.type !== "WeChat" ? null : (
@@ -640,38 +641,36 @@ class ProviderEditPage extends React.Component {
          ) : null
        }
        {this.getAppIdRow()}
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Provider URL"), i18next.t("provider:Provider URL - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined/>} value={this.state.provider.providerUrl} onChange={e => {
+              this.updateProviderField('providerUrl', e.target.value);
+            }} />
+          </Col>
+        </Row>
        {
-          this.state.provider.type !== "Default" &&
-          <Row style={{marginTop: '20px'}} >
-            <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-              {Setting.getLabel(i18next.t("provider:Provider URL"), i18next.t("provider:Provider URL - Tooltip"))} :
-            </Col>
-            <Col span={22} >
-              <Input prefix={<LinkOutlined/>} value={this.state.provider.providerUrl} onChange={e => {
-                this.updateProviderField('providerUrl', e.target.value);
-              }} />
-            </Col>
-          </Row>
-        }
-        {
-          this.state.provider.category === "Captcha" && 
-          <Row style={{marginTop: '20px'}} >
-            <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-              {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
-            </Col>
-            <Col span={22} >
-              <CaptchaPreview 
-                provider={this.state.provider}
-                providerName={this.state.providerName}
-                clientSecret={this.state.provider.clientSecret}
-                captchaType={this.state.provider.type}
-                owner={this.state.provider.owner}
-                clientId={this.state.provider.clientId}
-                name={this.state.provider.name}
-                providerUrl={this.state.provider.providerUrl}
-              />
-            </Col>
-          </Row>
+          this.state.provider.category !== "Captcha" ? null : (
+            <Row style={{marginTop: '20px'}} >
+              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <CaptchaPreview
+                  provider={this.state.provider}
+                  providerName={this.state.providerName}
+                  clientSecret={this.state.provider.clientSecret}
+                  captchaType={this.state.provider.type}
+                  owner={this.state.provider.owner}
+                  clientId={this.state.provider.clientId}
+                  name={this.state.provider.name}
+                  providerUrl={this.state.provider.providerUrl}
+                />
+              </Col>
+            </Row>
+          )
        }
      </Card>
    )
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -23,7 +23,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class ProviderListPage extends BaseListPage {
-
  newProvider() {
    const randomName = Setting.getRandomName();
    return {
--- a/web/src/RecordListPage.js
+++ b/web/src/RecordListPage.js
@@ -22,7 +22,6 @@ import moment from "moment";
 import BaseListPage from "./BaseListPage";

 class RecordListPage extends BaseListPage {
-
  UNSAFE_componentWillMount() {
    this.state.pagination.pageSize = 20;
    const { pagination } = this.state;
--- a/web/src/SyncerListPage.js
+++ b/web/src/SyncerListPage.js
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class SyncerListPage extends BaseListPage {
-
  newSyncer() {
    const randomName = Setting.getRandomName();
    return {
--- a/web/src/TokenListPage.js
+++ b/web/src/TokenListPage.js
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";

 class TokenListPage extends BaseListPage {
-
  newToken() {
    const randomName = Setting.getRandomName();
    return {
--- a/web/src/common/CaptchaWidget.js
+++ b/web/src/common/CaptchaWidget.js
@@ -30,7 +30,7 @@ export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
          if (!window.grecaptcha) {
            loadScript("https://recaptcha.net/recaptcha/api.js");
          }
-          if (window.grecaptcha) {
+          if (window.grecaptcha && window.grecaptcha.render) {
            window.grecaptcha.render("captcha", {
              sitekey: siteKey,
              callback: onChange,
@@ -44,7 +44,7 @@ export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
          if (!window.hcaptcha) {
            loadScript("https://js.hcaptcha.com/1/api.js");
          }
-          if (window.hcaptcha) {
+          if (window.hcaptcha && window.hcaptcha.render) {
            window.hcaptcha.render("captcha", {
              sitekey: siteKey,
              callback: onChange,
@@ -56,6 +56,7 @@ export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
      default:
        break;
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [captchaType, siteKey]);

  return <div id="captcha"></div>;
--- a/web/src/common/CountDownInput.js
+++ b/web/src/common/CountDownInput.js
@@ -69,7 +69,11 @@ export const CountDownInput = (props) => {
  const loadCaptcha = () => {
    UserBackend.getCaptcha("admin", authConfig.appName, false).then(res => {
      if (res.type === "none") {
-        UserBackend.sendCode("none", "", "", ...onButtonClickArgs);
+        UserBackend.sendCode("none", "", "", ...onButtonClickArgs).then(res => {
+          if (res) {
+            handleCountDown(60);
+          }
+        });
      } else if (res.type === "Default") {
        setCheckId(res.captchaId);
        setCaptchaImg(res.captchaImage);
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -445,8 +445,8 @@
    "Scope": "Scope",
    "Scope - Tooltip": "Scope - 工具提示",
    "Secret access key": "秘密访问密钥",
-    "Secret key": "服务端密钥",
-    "Secret key - Tooltip": "服务端密钥",
+    "Secret key": "Secret key",
+    "Secret key - Tooltip": "用于服务端调用验证码提供商API进行验证",
    "SecretAccessKey - Tooltip": "访问密钥-工具提示",
    "Sign Name": "签名名称",
    "Sign Name - Tooltip": "签名名称",
@@ -458,8 +458,8 @@
    "Signup HTML": "注册页面HTML",
    "Signup HTML - Edit": "注册页面HTML - 编辑",
    "Signup HTML - Tooltip": "自定义HTML，用于替换默认的注册页面样式",
-    "Site key": "客户端密钥",
-    "Site key - Tooltip": "客户端密钥",
+    "Site key": "Site key",
+    "Site key - Tooltip": "用于前端嵌入页面",
    "Sub type": "子类型",
    "Sub type - Tooltip": "子类型",
    "Template Code": "模板代码",
Author	SHA1	Message	Date
Resulte Lee	f99c1f44e8	fix: don't trigger countdown if failed to send verification code (#815 ) * feat: add countdown when no captcha provider found * fix: add countdown when sent code successfully	2022-06-22 22:22:40 +08:00
Gucheng Wang	c8c4dfbfb8	Fix bug and i18n issue in captcha provider edit page.	2022-06-22 21:54:25 +08:00
Resulte Lee	d9c6ff2507	fix: captcha widget JS warnings (#820 )	2022-06-22 18:31:18 +08:00
Gucheng Wang	e1664f2f60	Fix newApplication() to add provider.	2022-06-22 00:08:46 +08:00
Resulte Lee	460a4d4969	fix: init default captcha provider (#810 ) * feat: init built in provider * Update built-in provider in application * Delete unnecessary judge * Update init.go Co-authored-by: Gucheng <85475922+nomeguy@users.noreply.github.com>	2022-06-22 00:03:55 +08:00