feat: fix the bug that spin is always showing when response error (#1424)

web/src/ApplicationEditPage.js

@@ -726,7 +726,7 @@ class ApplicationEditPage extends React.Component {
   renderSignupSigninPreview() {
     let signUpUrl = `/signup/${this.state.application.name}`;
     const signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
-    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
+    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "97%", width: "100%", background: "rgba(0,0,0,0.4)"};
     if (!this.state.application.enablePassword) {
       signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
     }
@@ -742,15 +742,19 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Copy signup page URL")}
           </Button>
           <br />
-          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems: "center", overflow: "auto", flexDirection: "column", flex: "auto"}}>
+          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
             {
               this.state.application.enablePassword ? (
-                <SignupPage application={this.state.application} />
+                <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                  <SignupPage application={this.state.application} preview = "auto" />
+                </div>
               ) : (
-                <LoginPage type={"login"} mode={"signup"} application={this.state.application} />
+                <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                  <LoginPage type={"login"} mode={"signup"} application={this.state.application} preview = "auto" />
+                </div>
               )
             }
-            <div style={maskStyle} />
+            <div style={{overflow: "auto", ...maskStyle}} />
           </div>
         </Col>
         <Col span={previewGrid}>
@@ -762,9 +766,11 @@ class ApplicationEditPage extends React.Component {
             {i18next.t("application:Copy signin page URL")}
           </Button>
           <br />
-          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems: "center", overflow: "auto", flexDirection: "column", flex: "auto"}}>
-            <LoginPage type={"login"} mode={"signin"} application={this.state.application} />
-            <div style={maskStyle} />
+          <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
+            <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+              <LoginPage type={"login"} mode={"signin"} application={this.state.application} preview = "auto" />
+            </div>
+            <div style={{overflow: "auto", ...maskStyle}} />
           </div>
         </Col>
       </React.Fragment>

web/src/Setting.js

@@ -800,7 +800,7 @@ export function renderLoginLink(application, text) {
 export function redirectToLoginPage(application, history) {
   const loginLink = getLoginLink(application);
   if (loginLink.indexOf("http") === 0 || loginLink.indexOf("https") === 0) {
-    openLink(loginLink);
+    window.location.replace(loginLink);
   }
   history.push(loginLink);
 }

web/src/auth/CasLogout.js

@@ -40,6 +40,7 @@ class CasLogout extends React.Component {
         if (res.status === "ok") {
           Setting.showMessage("success", "Logged out successfully");
           this.props.onUpdateAccount(null);
+          this.onUpdateApplication(null);
           const redirectUri = res.data2;
           if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
             Setting.goToLink(redirectUri);
@@ -49,6 +50,7 @@ class CasLogout extends React.Component {
             Setting.goToLinkSoft(this, `/cas/${this.state.owner}/${this.state.applicationName}/login`);
           }
         } else {
+          this.onUpdateApplication(null);
           Setting.showMessage("error", `Failed to log out: ${res.msg}`);
         }
       });

web/src/auth/LoginPage.js

@@ -102,6 +102,7 @@ class LoginPage extends React.Component {
           });
         } else {
           // Setting.showMessage("error", res.msg);
+          this.onUpdateApplication(null);
           this.setState({
             application: res.data,
             msg: res.msg,
@@ -133,6 +134,7 @@ class LoginPage extends React.Component {
               applicationName: res.data.name,
             });
           } else {
+            this.onUpdateApplication(null);
             Setting.showMessage("error", res.msg);
           }
         });
@@ -800,7 +802,7 @@ class LoginPage extends React.Component {
     return (
       <React.Fragment>
         <CustomGithubCorner />
-        <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
+        <div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}>
           {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
           <div className="login-panel">
             <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>

web/src/auth/SignupPage.js

@@ -637,7 +637,7 @@ class SignupPage extends React.Component {
     return (
       <React.Fragment>
         <CustomGithubCorner />
-        <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
+        <div className="login-content" style={{margin: this.props.preview ?? this.parseOffset(application.formOffset)}}>
           {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
           <div className="login-panel" >
             <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>