fix: spin will squeeze login panel (#3509)

routers/theme_filter.go

@@ -30,7 +30,7 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 			return err
 		}
 		if application.ThemeData != nil {
-			return setThemeDataCookie(ctx, application.ThemeData)
+			return setThemeDataCookie(ctx, application.ThemeData, application.Logo, application.FooterHtml)
 		}
 		organization := application.OrganizationObj
 		if organization == nil {
@@ -40,7 +40,7 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 			}
 		}
 		if organization != nil {
-			return setThemeDataCookie(ctx, organization.ThemeData)
+			return setThemeDataCookie(ctx, organization.ThemeData, organization.Logo, application.FooterHtml)
 		}
 	} else if strings.HasPrefix(urlPath, "/login/oauth/authorize") {
 		clientId := ctx.Input.Query("client_id")
@@ -57,10 +57,10 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 				return err
 			}
 			if application.ThemeData != nil {
-				return setThemeDataCookie(ctx, application.ThemeData)
+				return setThemeDataCookie(ctx, application.ThemeData, application.Logo, application.FooterHtml)
 			}
 			if organization != nil {
-				return setThemeDataCookie(ctx, organization.ThemeData)
+				return setThemeDataCookie(ctx, organization.ThemeData, organization.Logo, application.FooterHtml)
 			}
 		}
 	} else if strings.HasPrefix(urlPath, "/login/") {
@@ -71,7 +71,7 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 				return err
 			}
 			if application.ThemeData != nil {
-				return setThemeDataCookie(ctx, application.ThemeData)
+				return setThemeDataCookie(ctx, application.ThemeData, application.Logo, application.FooterHtml)
 			}
 			organization := application.OrganizationObj
 			if organization == nil {
@@ -81,7 +81,7 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 				}
 			}
 			if organization != nil {
-				return setThemeDataCookie(ctx, organization.ThemeData)
+				return setThemeDataCookie(ctx, organization.ThemeData, organization.Logo, application.FooterHtml)
 			}
 		}
 	}
@@ -89,11 +89,13 @@ func appendThemeCookie(ctx *context.Context, urlPath string) error {
 	return nil
 }
 
-func setThemeDataCookie(ctx *context.Context, themeData *object.ThemeData) error {
+func setThemeDataCookie(ctx *context.Context, themeData *object.ThemeData, logoUrl string, footerHtml string) error {
 	themeDataString, err := json.Marshal(themeData)
 	if err != nil {
 		return err
 	}
 	ctx.SetCookie("organizationTheme", string(themeDataString))
+	ctx.SetCookie("organizationLogo", logoUrl)
+	ctx.SetCookie("organizationFootHtml", footerHtml)
 	return nil
 }

web/src/App.js

@@ -270,7 +270,9 @@ class App extends Component {
     });
   }
 
-  renderFooter() {
+  renderFooter(logo, footerHtml) {
+    logo = logo ?? this.state.logo;
+    footerHtml = footerHtml ?? this.state.application?.footerHtml;
     return (
       <React.Fragment>
         {!this.state.account ? null : <div style={{display: "none"}} id="CasdoorApplicationName" value={this.state.account.signupApplication} />}
@@ -281,14 +283,14 @@ class App extends Component {
           }
         }>
           {
-            this.state.application?.footerHtml && this.state.application.footerHtml !== "" ?
+            footerHtml && footerHtml !== "" ?
               <React.Fragment>
-                <div dangerouslySetInnerHTML={{__html: this.state.application.footerHtml}} />
+                <div dangerouslySetInnerHTML={{__html: footerHtml}} />logo
               </React.Fragment>
               : (
                 Conf.CustomFooter !== null ? Conf.CustomFooter : (
                   <React.Fragment>
-                  Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={this.state.logo} /></a>
+                  Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={logo} /></a>
                   </React.Fragment>
                 )
               )
@@ -362,11 +364,19 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       let themeData = this.state.themeData;
+      let logo = this.state.logo;
+      let footerHtml = null;
       if (this.state.organization === undefined) {
         const curCookie = Cookie.parse(document.cookie);
         if (curCookie["organizationTheme"] && curCookie["organizationTheme"] !== "null") {
           themeData = JSON.parse(curCookie["organizationTheme"]);
         }
+        if (curCookie["organizationLogo"] && curCookie["organizationLogo"] !== "") {
+          logo = curCookie["organizationLogo"];
+        }
+        if (curCookie["organizationFootHtml"] && curCookie["organizationFootHtml"] !== "") {
+          footerHtml = curCookie["organizationFootHtml"];
+        }
       }
 
       return (
@@ -410,7 +420,7 @@ class App extends Component {
                 }
               </Content>
               {
-                this.renderFooter()
+                this.renderFooter(logo, footerHtml)
               }
               {
                 this.renderAiAssistant()

web/src/EntryPage.js

@@ -111,7 +111,7 @@ class EntryPage extends React.Component {
         <div className={`${isDarkMode ? "loginBackgroundDark" : "loginBackground"}`}
           style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
           <Spin size="large" spinning={this.state.application === undefined && this.state.pricing === undefined} tip={i18next.t("login:Loading")}
-            style={{margin: "0 auto"}} />
+            style={{width: "100%", margin: "0 auto", position: "absolute"}} />
           <Switch>
             <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} applicationName={authConfig.appName} onUpdateApplication={onUpdateApplication} {...props} />)} />
             <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />