feat: fix the bug that autoSignin generates two callback AJAX calls (#1682)

web/src/auth/ForgetPage.js

@@ -32,7 +32,6 @@ class ForgetPage extends React.Component {
     this.state = {
       classes: props,
       applicationName: props.applicationName ?? props.match.params?.applicationName,
-      application: null,
       msg: null,
       userId: "",
       username: "",
@@ -49,7 +48,7 @@ class ForgetPage extends React.Component {
   }
 
   componentDidMount() {
-    if (this.getApplicationObj() === null) {
+    if (this.getApplicationObj() === undefined) {
       if (this.state.applicationName !== undefined) {
         this.getApplication();
       } else {
@@ -66,14 +65,11 @@ class ForgetPage extends React.Component {
     ApplicationBackend.getApplication("admin", this.state.applicationName)
       .then((application) => {
         this.onUpdateApplication(application);
-        this.setState({
-          application: application,
-        });
       });
   }
 
   getApplicationObj() {
-    return this.props.application ?? this.state.application;
+    return this.props.application;
   }
 
   onUpdateApplication(application) {
@@ -436,6 +432,9 @@ class ForgetPage extends React.Component {
 
   render() {
     const application = this.getApplicationObj();
+    if (application === undefined) {
+      return null;
+    }
     if (application === null) {
       return Util.renderMessageLarge(this, this.state.msg);
     }

web/src/auth/LoginPage.js

@@ -38,10 +38,9 @@ class LoginPage extends React.Component {
     this.state = {
       classes: props,
       type: props.type,
-      applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
+      applicationName: props.applicationName ?? (props.match?.params?.applicationName ?? null),
-      owner: props.owner !== undefined ? props.owner : (props.match === undefined ? null : props.match.params.owner),
+      owner: props.owner ?? (props.match?.params?.owner ?? null),
-      application: null,
+      mode: props.mode ?? (props.match?.params?.mode ?? null), // "signup" or "signin"
-      mode: props.mode !== undefined ? props.mode : (props.match === undefined ? null : props.match.params.mode), // "signup" or "signin"
       msg: null,
       username: null,
       validEmailOrPhone: false,
@@ -58,21 +57,19 @@ class LoginPage extends React.Component {
     };
 
     if (this.state.type === "cas" && props.match?.params.casApplicationName !== undefined) {
-      this.state.owner = props.match?.params.owner;
+      this.state.owner = props.match?.params?.owner;
-      this.state.applicationName = props.match?.params.casApplicationName;
+      this.state.applicationName = props.match?.params?.casApplicationName;
     }
 
     this.form = React.createRef();
   }
 
   componentDidMount() {
-    if (this.getApplicationObj() === null) {
+    if (this.getApplicationObj() === undefined) {
-      if (this.state.type === "login" || this.state.type === "cas") {
+      if (this.state.type === "login" || this.state.type === "cas" || this.state.type === "saml") {
         this.getApplication();
       } else if (this.state.type === "code") {
         this.getApplicationLogin();
-      } else if (this.state.type === "saml") {
-        this.getSamlApplication();
       } else {
         Setting.showMessage("error", `Unknown authentication type: ${this.state.type}`);
       }
@@ -80,14 +77,35 @@ class LoginPage extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.state.application && !prevState.application) {
+    if (prevProps.application !== this.props.application) {
-      const captchaProviderItems = this.getCaptchaProviderItems(this.state.application);
+      const captchaProviderItems = this.getCaptchaProviderItems(this.props.application);
-
+      if (captchaProviderItems) {
-      if (!captchaProviderItems) {
+        this.setState({enableCaptchaModal: captchaProviderItems.some(providerItem => providerItem.rule === "Always")});
-        return;
       }
 
-      this.setState({enableCaptchaModal: captchaProviderItems.some(providerItem => providerItem.rule === "Always")});
+      if (this.props.account && this.props.account.owner === this.props.application?.organization) {
+        const params = new URLSearchParams(this.props.location.search);
+        const silentSignin = params.get("silentSignin");
+        if (silentSignin !== null) {
+          this.sendSilentSigninData("signing-in");
+
+          const values = {};
+          values["application"] = this.props.application.name;
+          this.login(values);
+        }
+
+        if (params.get("popup") === "1") {
+          window.addEventListener("beforeunload", () => {
+            this.sendPopupData({type: "windowClosed"}, params.get("redirect_uri"));
+          });
+        }
+
+        if (this.props.application.enableAutoSignin) {
+          const values = {};
+          values["application"] = this.props.application.name;
+          this.login(values);
+        }
+      }
     }
   }
 
@@ -96,46 +114,49 @@ class LoginPage extends React.Component {
     AuthBackend.getApplicationLogin(oAuthParams)
       .then((res) => {
         if (res.status === "ok") {
-          this.onUpdateApplication(res.data);
+          const application = res.data;
-          this.setState({
+          this.onUpdateApplication(application);
-            application: res.data,
-          });
         } else {
           this.onUpdateApplication(null);
           this.setState({
-            application: res.data,
             msg: res.msg,
           });
         }
       });
+    return null;
   }
 
   getApplication() {
     if (this.state.applicationName === null) {
-      return;
+      return null;
     }
 
-    if (this.state.owner === null || this.state.owner === undefined || this.state.owner === "") {
+    if (this.state.owner === null || this.state.type === "saml") {
       ApplicationBackend.getApplication("admin", this.state.applicationName)
         .then((application) => {
           this.onUpdateApplication(application);
-          this.setState({
+
-            application: application,
+          if (application !== null && application !== undefined) {
-          }, () => Setting.getTermsOfUseContent(this.state.application.termsOfUse, res => {
+            Setting.getTermsOfUseContent(application.termsOfUse, res => {
-            this.setState({termsOfUseContent: res});
+              this.setState({termsOfUseContent: res});
-          }));
+            });
+          }
         });
     } else {
       OrganizationBackend.getDefaultApplication("admin", this.state.owner)
         .then((res) => {
           if (res.status === "ok") {
-            this.onUpdateApplication(res.data);
+            const application = res.data;
+            this.onUpdateApplication(application);
             this.setState({
-              application: res.data,
               applicationName: res.data.name,
-            }, () => Setting.getTermsOfUseContent(this.state.application.termsOfUse, res => {
+            });
-              this.setState({termsOfUseContent: res});
+
-            }));
+            if (application !== null && application !== undefined) {
+              Setting.getTermsOfUseContent(application.termsOfUse, res => {
+                this.setState({termsOfUseContent: res});
+              });
+            }
           } else {
             this.onUpdateApplication(null);
             Setting.showMessage("error", res.msg);
@@ -144,21 +165,8 @@ class LoginPage extends React.Component {
     }
   }
 
-  getSamlApplication() {
-    if (this.state.applicationName === null) {
-      return;
-    }
-    ApplicationBackend.getApplication(this.state.owner, this.state.applicationName)
-      .then((application) => {
-        this.onUpdateApplication(application);
-        this.setState({
-          application: application,
-        });
-      });
-  }
-
   getApplicationObj() {
-    return this.props.application ?? this.state.application;
+    return this.props.application;
   }
 
   onUpdateAccount(account) {
@@ -310,7 +318,6 @@ class LoginPage extends React.Component {
               Setting.goToLink(link);
             } else if (responseType === "code") {
               this.postCodeLoginAction(res);
-              // Setting.showMessage("success", `Authorization code: ${res.data}`);
             } else if (responseType === "token" || responseType === "id_token") {
               const accessToken = res.data;
               Setting.goToLink(`${oAuthParams.redirectUri}#${responseType}=${accessToken}?state=${oAuthParams.state}&token_type=bearer`);
@@ -626,32 +633,10 @@ class LoginPage extends React.Component {
     }
 
     const application = this.getApplicationObj();
-    if (this.props.account.owner !== application.organization) {
+    if (this.props.account.owner !== application?.organization) {
       return null;
     }
 
-    const params = new URLSearchParams(this.props.location.search);
-    const silentSignin = params.get("silentSignin");
-    if (silentSignin !== null) {
-      this.sendSilentSigninData("signing-in");
-
-      const values = {};
-      values["application"] = application.name;
-      this.onFinish(values);
-    }
-
-    if (params.get("popup") === "1") {
-      window.addEventListener("beforeunload", () => {
-        this.sendPopupData({type: "windowClosed"}, params.get("redirect_uri"));
-      });
-    }
-
-    if (application.enableAutoSignin) {
-      const values = {};
-      values["application"] = application.name;
-      this.onFinish(values);
-    }
-
     return (
       <div>
         <div style={{fontSize: 16, textAlign: "left"}}>
@@ -661,7 +646,7 @@ class LoginPage extends React.Component {
         <SelfLoginButton account={this.props.account} onClick={() => {
           const values = {};
           values["application"] = application.name;
-          this.onFinish(values);
+          this.login(values);
         }} />
         <br />
         <br />
@@ -803,6 +788,9 @@ class LoginPage extends React.Component {
 
   render() {
     const application = this.getApplicationObj();
+    if (application === undefined) {
+      return null;
+    }
     if (application === null) {
       return Util.renderMessageLarge(this, this.state.msg);
     }

web/src/auth/SelfLoginButton.js

@@ -40,7 +40,7 @@ class SelfLoginButton extends React.Component {
     };
 
     const SelfLoginButton = createButton(config);
-    return <SelfLoginButton text={this.getAccountShowName()} onClick={() => this.props.onClick()} align={"center"} />;
+    return <SelfLoginButton text={this.getAccountShowName()} onClick={this.props.onClick} align={"center"} />;
   }
 }
 

web/src/auth/SignupPage.js

@@ -65,8 +65,7 @@ class SignupPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      applicationName: props.match.params?.applicationName ?? authConfig.appName,
+      applicationName: props.match?.params?.applicationName ?? authConfig.appName,
-      application: null,
       email: "",
       phone: "",
       countryCode: "",
@@ -83,20 +82,17 @@ class SignupPage extends React.Component {
   }
 
   componentDidMount() {
-    let applicationName = this.state.applicationName;
     const oAuthParams = Util.getOAuthGetParameters();
     if (oAuthParams !== null) {
-      applicationName = oAuthParams.state;
-      this.setState({applicationName: oAuthParams.state});
       const signinUrl = window.location.href.replace("/signup/oauth/authorize", "/login/oauth/authorize");
       sessionStorage.setItem("signinUrl", signinUrl);
     }
 
-    if (this.getApplicationObj() === null) {
+    if (this.getApplicationObj() === undefined) {
-      if (applicationName !== undefined) {
+      if (this.state.applicationName !== null) {
-        this.getApplication(applicationName);
+        this.getApplication(this.state.applicationName);
       } else {
-        Setting.showMessage("error", `Unknown application name: ${applicationName}`);
+        Setting.showMessage("error", `Unknown application name: ${this.state.applicationName}`);
       }
     }
   }
@@ -109,9 +105,6 @@ class SignupPage extends React.Component {
     ApplicationBackend.getApplication("admin", applicationName)
       .then((application) => {
         this.onUpdateApplication(application);
-        this.setState({
-          application: application,
-        });
 
         if (application !== null && application !== undefined) {
           Setting.getTermsOfUseContent(application.termsOfUse, res => {
@@ -134,7 +127,7 @@ class SignupPage extends React.Component {
   }
 
   getApplicationObj() {
-    return this.props.application ?? this.state.application;
+    return this.props.application;
   }
 
   onUpdateAccount(account) {
@@ -596,7 +589,7 @@ class SignupPage extends React.Component {
 
   render() {
     const application = this.getApplicationObj();
-    if (application === null) {
+    if (application === undefined || application === null) {
       return null;
     }