From a0dc6e06cd12be4f7331ac64c0c693c51f986ad6 Mon Sep 17 00:00:00 2001
From: Yaodong Yu <2814461814@qq.com>
Date: Thu, 22 Dec 2022 23:39:02 +0800
Subject: [PATCH] feat: add EntryPage for login, signup pages to fix background
 flashing issue (#1416)

* feat: fix flush in login Pages

* fix: code format

* fix: improve code

* Update App.js

* Update EntryPage.js

* fix: optimize api request

* Update App.js

* Update App.js

* fix: fix css

* fix: css and getApllicationObj

Co-authored-by: hsluoyz <hsluoyz@qq.com>
---
 web/src/App.js                 | 62 ++++++++++---------------
 web/src/EntryPage.js           | 84 ++++++++++++++++++++++++++++++++++
 web/src/auth/AuthCallback.js   |  2 +-
 web/src/auth/CasLogout.js      | 16 ++++---
 web/src/auth/ForgetPage.js     | 53 ++++++++++-----------
 web/src/auth/LoginPage.js      | 54 +++++++++++-----------
 web/src/auth/PromptPage.js     | 35 +++++++-------
 web/src/auth/SamlCallback.js   |  2 +-
 web/src/auth/SelfForgetPage.js |  1 -
 web/src/auth/SelfLoginPage.js  |  2 +-
 web/src/auth/SignupPage.js     | 27 ++++++-----
 web/src/common/OAuthWidget.js  |  2 +-
 web/src/common/PoliciyTable.js | 17 +++----
 web/src/common/RedirectForm.js | 36 ++++++++-------
 web/src/locales/de/data.json   |  2 +
 web/src/locales/en/data.json   |  2 +
 web/src/locales/fr/data.json   |  2 +
 web/src/locales/ja/data.json   |  2 +
 web/src/locales/ko/data.json   |  2 +
 web/src/locales/ru/data.json   |  2 +
 web/src/locales/zh/data.json   |  2 +
 21 files changed, 249 insertions(+), 158 deletions(-)
 create mode 100644 web/src/EntryPage.js

diff --git a/web/src/App.js b/web/src/App.js
index ff0c5979..c6ca541c 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -55,20 +55,14 @@ import CustomGithubCorner from "./CustomGithubCorner";
 import * as Conf from "./Conf";
 
 import * as Auth from "./auth/Auth";
-import SignupPage from "./auth/SignupPage";
+import EntryPage from "./EntryPage";
 import ResultPage from "./auth/ResultPage";
-import LoginPage from "./auth/LoginPage";
-import SelfLoginPage from "./auth/SelfLoginPage";
-import SelfForgetPage from "./auth/SelfForgetPage";
-import ForgetPage from "./auth/ForgetPage";
 import * as AuthBackend from "./auth/AuthBackend";
 import AuthCallback from "./auth/AuthCallback";
 import SelectLanguageBox from "./SelectLanguageBox";
 import i18next from "i18next";
-import PromptPage from "./auth/PromptPage";
 import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
 import SamlCallback from "./auth/SamlCallback";
-import CasLogout from "./auth/CasLogout";
 import ModelListPage from "./ModelListPage";
 import ModelEditPage from "./ModelEditPage";
 import SystemInfo from "./SystemInfo";
@@ -619,7 +613,7 @@ class App extends Component {
     // https://www.freecodecamp.org/neyarnws/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
 
     return (
-      <>
+      <React.Fragment>
         {!this.state.account ? null : <div style={{display: "none"}} id="CasdoorApplicationName" value={this.state.account.signupApplication} />}
         <Footer id="footer" style={
           {
@@ -630,63 +624,57 @@ class App extends Component {
         }>
           Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={`${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`} /></a>
         </Footer>
-      </>
+      </React.Fragment>
     );
   }
 
   isDoorPages() {
+    return this.isEntryPages() || window.location.pathname.startsWith("/callback");
+  }
+
+  isEntryPages() {
     return window.location.pathname.startsWith("/signup") ||
       window.location.pathname.startsWith("/login") ||
-      window.location.pathname.startsWith("/callback") ||
-      window.location.pathname.startsWith("/prompt") ||
       window.location.pathname.startsWith("/forget") ||
-      window.location.pathname.startsWith("/cas");
+      window.location.pathname.startsWith("/prompt") ||
+      window.location.pathname.startsWith("/cas") ||
+      window.location.pathname.startsWith("/auto-signup");
   }
 
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <>
+        <React.Fragment>
           <Layout id="parent-area">
             <Content style={{display: "flex", justifyContent: "center"}}>
-              <Switch>
-                <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} />
-                <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />
-                <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)} />
-                <Route exact path="/login/:owner" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)} />
-                <Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
-                <Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
-                <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
-                <Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage account={this.state.account} type={"saml"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
-                <Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout clearAccount={() => this.setState({account: null})} {...props} />)} />
-                <Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage type={"cas"} mode={"signup"} account={this.state.account} {...props} />);}} />
-                <Route exact path="/callback" component={AuthCallback} />
-                <Route exact path="/callback/saml" component={SamlCallback} />
-                <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)} />
-                <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)} />
-                <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)} />
-                <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} {...props} />)} />
-                <Route exact path="/sysinfo" render={(props) => this.renderLoginIfNotLoggedIn(<SystemInfo {...props} />)} />
-                <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
-                  extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
-              </Switch>
+              {
+                this.isEntryPages() ?
+                  <EntryPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />
+                  :
+                  <Switch>
+                    <Route exact path="/callback" component={AuthCallback} />
+                    <Route exact path="/callback/saml" component={SamlCallback} />
+                    <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
+                      extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
+                  </Switch>
+              }
             </Content>
             {
               this.renderFooter()
             }
           </Layout>
-        </>
+        </React.Fragment>
       );
     }
 
     return (
-      <>
+      <React.Fragment>
         <FloatButton.BackTop />
         <CustomGithubCorner />
         {
           this.renderContent()
         }
-      </>
+      </React.Fragment>
     );
   }
 
diff --git a/web/src/EntryPage.js b/web/src/EntryPage.js
new file mode 100644
index 00000000..872b5c71
--- /dev/null
+++ b/web/src/EntryPage.js
@@ -0,0 +1,84 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Redirect, Route, Switch} from "react-router-dom";
+import {Spin} from "antd";
+import i18next from "i18next";
+import * as Setting from "./Setting";
+import SignupPage from "./auth/SignupPage";
+import SelfLoginPage from "./auth/SelfLoginPage";
+import LoginPage from "./auth/LoginPage";
+import SelfForgetPage from "./auth/SelfForgetPage";
+import ForgetPage from "./auth/ForgetPage";
+import PromptPage from "./auth/PromptPage";
+import CasLogout from "./auth/CasLogout";
+
+class EntryPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      application: undefined,
+    };
+  }
+
+  renderHomeIfLoggedIn(component) {
+    if (this.props.account !== null && this.props.account !== undefined) {
+      return <Redirect to="/" />;
+    } else {
+      return component;
+    }
+  }
+
+  renderLoginIfNotLoggedIn(component) {
+    if (this.props.account === null) {
+      sessionStorage.setItem("from", window.location.pathname);
+      return <Redirect to="/login" />;
+    } else if (this.props.account === undefined) {
+      return null;
+    } else {
+      return component;
+    }
+  }
+
+  render() {
+    const onUpdateApplication = (application) => {
+      this.setState({
+        application: application,
+      });
+    };
+
+    return <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
+      <Spin spinning={this.state.application === undefined} tip={i18next.t("login:Loading")} style={{margin: "0 auto"}} />
+      <Switch>
+        <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/login/:owner" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signup"} onUpdateApplication={onUpdateApplication}{...props} />} />
+        <Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />} />
+        <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
+        <Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"saml"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
+        <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+        <Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout {...this.props} application={this.state.application} {...props} />)} />
+        <Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage {...this.props} application={this.state.application} type={"cas"} mode={"signup"} {...props} />);}} />
+      </Switch>
+    </div>;
+  }
+}
+
+export default EntryPage;
diff --git a/web/src/auth/AuthCallback.js b/web/src/auth/AuthCallback.js
index b6608a5f..c7962c9f 100644
--- a/web/src/auth/AuthCallback.js
+++ b/web/src/auth/AuthCallback.js
@@ -178,7 +178,7 @@ class AuthCallback extends React.Component {
 
   render() {
     return (
-      <div style={{textAlign: "center"}}>
+      <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
         {
           (this.state.msg === null) ? (
             <Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />
diff --git a/web/src/auth/CasLogout.js b/web/src/auth/CasLogout.js
index 4d9b2ba8..262841d3 100644
--- a/web/src/auth/CasLogout.js
+++ b/web/src/auth/CasLogout.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Spin} from "antd";
+import {Card, Spin} from "antd";
 import {withRouter} from "react-router-dom";
 import * as AuthBackend from "./AuthBackend";
 import * as Setting from "../Setting";
@@ -39,7 +39,7 @@ class CasLogout extends React.Component {
       .then((res) => {
         if (res.status === "ok") {
           Setting.showMessage("success", "Logged out successfully");
-          this.props.clearAccount();
+          this.props.onUpdateAccount(null);
           const redirectUri = res.data2;
           if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
             Setting.goToLink(redirectUri);
@@ -57,11 +57,13 @@ class CasLogout extends React.Component {
 
   render() {
     return (
-      <div style={{textAlign: "center"}}>
-        {
-          <Spin size="large" tip={i18next.t("login:Logging out...")} style={{paddingTop: "10%"}} />
-        }
-      </div>
+      <Card>
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          {
+            <Spin size="large" tip={i18next.t("login:Logging out...")} style={{paddingTop: "10%"}} />
+          }
+        </div>
+      </Card>
     );
   }
 }
diff --git a/web/src/auth/ForgetPage.js b/web/src/auth/ForgetPage.js
index 9ba36352..bcf1fd00 100644
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@@ -34,12 +34,7 @@ class ForgetPage extends React.Component {
     this.state = {
       classes: props,
       account: props.account,
-      applicationName:
-          props.applicationName !== undefined
-            ? props.applicationName
-            : props.match === undefined
-              ? null
-              : props.match.params.applicationName,
+      applicationName: props.applicationName ?? props.match.params?.applicationName,
       application: null,
       msg: null,
       userId: "",
@@ -57,34 +52,36 @@ class ForgetPage extends React.Component {
     };
   }
 
-  UNSAFE_componentWillMount() {
-    if (this.state.applicationName !== undefined) {
-      this.getApplication();
-    } else {
-      Setting.showMessage("error", i18next.t("forget:Unknown forget type: ") + this.state.type);
+  componentDidMount() {
+    if (this.getApplicationObj() === null) {
+      if (this.state.applicationName !== undefined) {
+        this.getApplication();
+      } else {
+        Setting.showMessage("error", i18next.t("forget:Unknown forget type: ") + this.state.type);
+      }
     }
   }
 
   getApplication() {
-    if (this.state.applicationName === null) {
+    if (this.state.applicationName === undefined) {
       return;
     }
 
-    ApplicationBackend.getApplication("admin", this.state.applicationName).then(
-      (application) => {
+    ApplicationBackend.getApplication("admin", this.state.applicationName)
+      .then((application) => {
+        this.onUpdateApplication(application);
         this.setState({
           application: application,
         });
-      }
-    );
+      });
   }
 
   getApplicationObj() {
-    if (this.props.application !== undefined) {
-      return this.props.application;
-    } else {
-      return this.state.application;
-    }
+    return this.props.application ?? this.state.application;
+  }
+
+  onUpdateApplication(application) {
+    this.props.onUpdateApplication(application);
   }
 
   onFormFinish(name, info, forms) {
@@ -143,7 +140,7 @@ class ForgetPage extends React.Component {
           username: this.state.username,
           name: this.state.name,
           code: forms.step2.getFieldValue("emailCode"),
-          phonePrefix: this.state.application?.organizationObj.phonePrefix,
+          phonePrefix: this.getApplicationObj()?.organizationObj.phonePrefix,
           type: "login",
         }, oAuthParams).then(res => {
           if (res.status === "ok") {
@@ -166,10 +163,10 @@ class ForgetPage extends React.Component {
 
   onFinish(values) {
     values.username = this.state.username;
-    values.userOwner = this.state.application?.organizationObj.name;
+    values.userOwner = this.getApplicationObj()?.organizationObj.name;
     UserBackend.setPassword(values.userOwner, values.username, "", values?.newPassword).then(res => {
       if (res.status === "ok") {
-        Setting.redirectToLoginPage(this.state.application, this.props.history);
+        Setting.redirectToLoginPage(this.getApplicationObj(), this.props.history);
       } else {
         Setting.showMessage("error", i18next.t(`signup:${res.msg}`));
       }
@@ -356,14 +353,14 @@ class ForgetPage extends React.Component {
               <CountDownInput
                 disabled={this.state.username === "" || this.state.verifyType === ""}
                 method={"forget"}
-                onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(this.state.application), this.state.name]}
+                onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(this.getApplicationObj()), this.state.name]}
                 application={application}
               />
             ) : (
               <CountDownInput
                 disabled={this.state.username === "" || this.state.verifyType === ""}
                 method={"forget"}
-                onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(this.state.application), this.state.name]}
+                onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(this.getApplicationObj()), this.state.name]}
                 application={application}
               />
             )}
@@ -492,7 +489,7 @@ class ForgetPage extends React.Component {
     }
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
+      <React.Fragment>
         <CustomGithubCorner />
         <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
           <Row>
@@ -550,7 +547,7 @@ class ForgetPage extends React.Component {
             </Col>
           </Row>
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 68351366..0a7ed84d 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -61,19 +61,19 @@ class LoginPage extends React.Component {
     }
   }
 
-  UNSAFE_componentWillMount() {
-    if (this.state.type === "login" || this.state.type === "cas") {
-      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}`);
-    }
-  }
-
   componentDidMount() {
+    if (this.getApplicationObj() === null) {
+      if (this.state.type === "login" || this.state.type === "cas") {
+        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}`);
+      }
+    }
+
     Setting.Countries.forEach((country) => {
       new Image().src = `${Setting.StaticBaseUrl}/flag-icons/${country.country}.svg`;
     });
@@ -117,6 +117,7 @@ class LoginPage extends React.Component {
     if (this.state.owner === null || this.state.owner === undefined || this.state.owner === "") {
       ApplicationBackend.getApplication("admin", this.state.applicationName)
         .then((application) => {
+          this.onUpdateApplication(application);
           this.setState({
             application: application,
           });
@@ -125,6 +126,7 @@ class LoginPage extends React.Component {
       OrganizationBackend.getDefaultApplication("admin", this.state.owner)
         .then((res) => {
           if (res.status === "ok") {
+            this.onUpdateApplication(res.data);
             this.setState({
               application: res.data,
               applicationName: res.data.name,
@@ -142,25 +144,25 @@ class LoginPage extends React.Component {
     }
     ApplicationBackend.getApplication(this.state.owner, this.state.applicationName)
       .then((application) => {
+        this.onUpdateApplication(application);
         this.setState({
           application: application,
         });
-      }
-      );
+      });
   }
 
   getApplicationObj() {
-    if (this.props.application !== undefined) {
-      return this.props.application;
-    } else {
-      return this.state.application;
-    }
+    return this.props.application ?? this.state.application;
   }
 
   onUpdateAccount(account) {
     this.props.onUpdateAccount(account);
   }
 
+  onUpdateApplication(application) {
+    this.props.onUpdateApplication(application);
+  }
+
   parseOffset(offset) {
     if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
       return "0 auto";
@@ -191,8 +193,8 @@ class LoginPage extends React.Component {
       values["relayState"] = oAuthParams.relayState;
     }
 
-    if (this.state.application.organization !== null && this.state.application.organization !== undefined) {
-      values["organization"] = this.state.application.organization;
+    if (this.getApplicationObj()?.organization) {
+      values["organization"] = this.getApplicationObj().organization;
     }
   }
   postCodeLoginAction(res) {
@@ -573,12 +575,12 @@ class LoginPage extends React.Component {
           <span style={{float: "right"}}>
             {
               !application.enableSignUp ? null : (
-                <>
+                <React.Fragment>
                   {i18next.t("login:No account?")}&nbsp;
                   {
                     Setting.renderSignupLink(application, i18next.t("login:sign up now"))
                   }
-                </>
+                </React.Fragment>
               )
             }
           </span>
@@ -788,14 +790,14 @@ class LoginPage extends React.Component {
     if (this.props.application === undefined && !application.enablePassword && visibleOAuthProviderItems.length === 1) {
       Setting.goToLink(Provider.getAuthUrl(application, visibleOAuthProviderItems[0].provider, "signup"));
       return (
-        <div style={{textAlign: "center"}}>
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
           <Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />
         </div>
       );
     }
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
+      <React.Fragment>
         <CustomGithubCorner />
         <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
           {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
@@ -827,7 +829,7 @@ class LoginPage extends React.Component {
             </div>
           </div>
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/web/src/auth/PromptPage.js b/web/src/auth/PromptPage.js
index 35347472..2833fe1e 100644
--- a/web/src/auth/PromptPage.js
+++ b/web/src/auth/PromptPage.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Col, Result, Row} from "antd";
+import {Button, Card, Col, Result, Row} from "antd";
 import * as ApplicationBackend from "../backend/ApplicationBackend";
 import * as UserBackend from "../backend/UserBackend";
 import * as AuthBackend from "./AuthBackend";
@@ -30,7 +30,7 @@ class PromptPage 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 === undefined ? null : props.match.params.applicationName),
       application: null,
       user: null,
     };
@@ -38,7 +38,9 @@ class PromptPage extends React.Component {
 
   UNSAFE_componentWillMount() {
     this.getUser();
-    this.getApplication();
+    if (this.getApplicationObj() === null) {
+      this.getApplication();
+    }
   }
 
   getUser() {
@@ -59,6 +61,7 @@ class PromptPage extends React.Component {
 
     ApplicationBackend.getApplication("admin", this.state.applicationName)
       .then((application) => {
+        this.onUpdateApplication(application);
         this.setState({
           application: application,
         });
@@ -66,11 +69,11 @@ class PromptPage extends React.Component {
   }
 
   getApplicationObj() {
-    if (this.props.application !== undefined) {
-      return this.props.application;
-    } else {
-      return this.state.application;
-    }
+    return this.props.application ?? this.state.application;
+  }
+
+  onUpdateApplication(application) {
+    this.props.onUpdateApplication(application);
   }
 
   parseUserField(key, value) {
@@ -122,7 +125,7 @@ class PromptPage extends React.Component {
 
   renderContent(application) {
     return (
-      <div style={{width: "400px"}}>
+      <div style={{width: "500px"}}>
         {
           this.renderAffiliation(application)
         }
@@ -247,9 +250,9 @@ class PromptPage extends React.Component {
     }
 
     return (
-      <Row>
-        <Col span={24} style={{display: "flex", justifyContent: "center"}}>
-          <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center"}}>
+      <div style={{display: "flex", flex: "1", justifyContent: "center"}}>
+        <Card>
+          <div style={{marginTop: "30px", marginBottom: "30px", textAlign: "center"}}>
             {
               Setting.renderHelmet(application)
             }
@@ -259,16 +262,12 @@ class PromptPage extends React.Component {
             {
               this.renderContent(application)
             }
-            <Row style={{margin: 10}}>
-              <Col span={18}>
-              </Col>
-            </Row>
             <div style={{marginTop: "50px"}}>
               <Button disabled={!Setting.isPromptAnswered(this.state.user, application)} type="primary" size="large" onClick={() => {this.submitUserEdit(true);}}>{i18next.t("code:Submit and complete")}</Button>
             </div>
           </div>
-        </Col>
-      </Row>
+        </Card>
+      </div>
     );
   }
 }
diff --git a/web/src/auth/SamlCallback.js b/web/src/auth/SamlCallback.js
index 8b21995b..240d4181 100644
--- a/web/src/auth/SamlCallback.js
+++ b/web/src/auth/SamlCallback.js
@@ -95,7 +95,7 @@ class SamlCallback extends React.Component {
 
   render() {
     return (
-      <div style={{textAlign: "center"}}>
+      <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
         {
           (this.state.msg === null) ? (
             <Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />
diff --git a/web/src/auth/SelfForgetPage.js b/web/src/auth/SelfForgetPage.js
index 1999d728..e7a25210 100644
--- a/web/src/auth/SelfForgetPage.js
+++ b/web/src/auth/SelfForgetPage.js
@@ -22,7 +22,6 @@ class SelfForgetPage extends React.Component {
       <ForgetPage
         type={"forgotPassword"}
         applicationName={authConfig.appName}
-        account={this.props.account}
         {...this.props}
       />
     );
diff --git a/web/src/auth/SelfLoginPage.js b/web/src/auth/SelfLoginPage.js
index c50f2f95..7f4fbdd3 100644
--- a/web/src/auth/SelfLoginPage.js
+++ b/web/src/auth/SelfLoginPage.js
@@ -19,7 +19,7 @@ import {authConfig} from "./Auth";
 class SelfLoginPage extends React.Component {
   render() {
     return (
-      <LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} account={this.props.account} {...this.props} />
+      <LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} {...this.props} />
     );
   }
 }
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index a7e550ab..56718dae 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -65,7 +65,7 @@ class SignupPage extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      applicationName: props.match?.params.applicationName !== undefined ? props.match.params.applicationName : authConfig.appName,
+      applicationName: props.match.params?.applicationName ?? authConfig.appName,
       application: null,
       email: "",
       phone: "",
@@ -91,10 +91,12 @@ class SignupPage extends React.Component {
       sessionStorage.setItem("signinUrl", signinUrl);
     }
 
-    if (applicationName !== undefined) {
-      this.getApplication(applicationName);
-    } else {
-      Setting.showMessage("error", `Unknown application name: ${applicationName}`);
+    if (this.getApplicationObj() === null) {
+      if (applicationName !== undefined) {
+        this.getApplication(applicationName);
+      } else {
+        Setting.showMessage("error", `Unknown application name: ${applicationName}`);
+      }
     }
   }
 
@@ -105,6 +107,7 @@ class SignupPage extends React.Component {
 
     ApplicationBackend.getApplication("admin", applicationName)
       .then((application) => {
+        this.onUpdateApplication(application);
         this.setState({
           application: application,
         });
@@ -128,11 +131,7 @@ class SignupPage extends React.Component {
   }
 
   getApplicationObj() {
-    if (this.props.application !== undefined) {
-      return this.props.application;
-    } else {
-      return this.state.application;
-    }
+    return this.props.application ?? this.state.application;
   }
 
   getTermsofuseContent(url) {
@@ -149,6 +148,10 @@ class SignupPage extends React.Component {
     this.props.onUpdateAccount(account);
   }
 
+  onUpdateApplication(application) {
+    this.props.onUpdateApplication(application);
+  }
+
   parseOffset(offset) {
     if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
       return "0 auto";
@@ -632,7 +635,7 @@ class SignupPage extends React.Component {
     }
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
+      <React.Fragment>
         <CustomGithubCorner />
         <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
           {Setting.inIframe() || Setting.isMobile() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
@@ -657,7 +660,7 @@ class SignupPage extends React.Component {
         {
           this.renderModal()
         }
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/web/src/common/OAuthWidget.js b/web/src/common/OAuthWidget.js
index 2e0e5db3..1500d499 100644
--- a/web/src/common/OAuthWidget.js
+++ b/web/src/common/OAuthWidget.js
@@ -147,7 +147,7 @@ class OAuthWidget extends React.Component {
         </Col>
         <Col span={24 - this.props.labelSpan} >
           <img style={{marginRight: "10px"}} width={30} height={30} src={avatarUrl} alt={name} referrerPolicy="no-referrer" />
-          <span style={{width: this.props.labelSpan === 3 ? "300px" : "130px", display: (Setting.isMobile()) ? "inline" : "inline-block"}}>
+          <span style={{width: this.props.labelSpan === 3 ? "300px" : "200px", display: (Setting.isMobile()) ? "inline" : "inline-block"}}>
             {
               linkedValue === "" ? (
                 "(empty)"
diff --git a/web/src/common/PoliciyTable.js b/web/src/common/PoliciyTable.js
index 46340fc8..f5f5ed78 100644
--- a/web/src/common/PoliciyTable.js
+++ b/web/src/common/PoliciyTable.js
@@ -293,14 +293,15 @@ class PolicyTable extends React.Component {
   }
 
   render() {
-    return (<>
-      <Button type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.synPolicies();}}>
-        {i18next.t("adapter:Sync")}
-      </Button>
-      {
-        this.renderTable(this.state.policyLists)
-      }
-    </>
+    return (
+      <React.Fragment>
+        <Button type="primary" disabled={this.state.editingIndex !== ""} onClick={() => {this.synPolicies();}}>
+          {i18next.t("adapter:Sync")}
+        </Button>
+        {
+          this.renderTable(this.state.policyLists)
+        }
+      </React.Fragment>
     );
   }
 }
diff --git a/web/src/common/RedirectForm.js b/web/src/common/RedirectForm.js
index 0be2cb93..03e1b213 100644
--- a/web/src/common/RedirectForm.js
+++ b/web/src/common/RedirectForm.js
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import React, {useEffect} from "react";
+import i18next from "i18next";
 
 export const RedirectForm = (props) => {
 
@@ -20,23 +21,24 @@ export const RedirectForm = (props) => {
     document.getElementById("saml").submit();
   }, []);
 
-  return (<>
-    <p>Redirecting, please wait.</p>
-    <form id="saml" method="post" action={props.redirectUrl}>
-      <input
-        type="hidden"
-        name="SAMLResponse"
-        id="samlResponse"
-        value={props.samlResponse}
-      />
-      <input
-        type="hidden"
-        name="RelayState"
-        id="relayState"
-        value={props.relayState}
-      />
-    </form>
-  </>
+  return (
+    <React.Fragment>
+      <p>{i18next.t("login:Redirecting, please wait.")}</p>
+      <form id="saml" method="post" action={props.redirectUrl}>
+        <input
+          type="hidden"
+          name="SAMLResponse"
+          id="samlResponse"
+          value={props.samlResponse}
+        />
+        <input
+          type="hidden"
+          name="RelayState"
+          id="relayState"
+          value={props.relayState}
+        />
+      </form>
+    </React.Fragment>
   );
 };
 
diff --git a/web/src/locales/de/data.json b/web/src/locales/de/data.json
index 5e409b01..8b06d2f9 100644
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@@ -299,6 +299,7 @@
     "Continue with": "Weiter mit",
     "Email or phone": "E-Mail oder Telefon",
     "Forgot password?": "Passwort vergessen?",
+    "Loading": "Loading",
     "Logging out...": "Logging out...",
     "No account?": "Kein Konto?",
     "Or sign in with another account": "Oder melden Sie sich mit einem anderen Konto an",
@@ -308,6 +309,7 @@
     "Please input your password!": "Bitte geben Sie Ihr Passwort ein!",
     "Please input your password, at least 6 characters!": "Bitte geben Sie Ihr Passwort ein, mindestens 6 Zeichen!",
     "Please input your username, Email or phone!": "Bitte geben Sie Ihren Benutzernamen, E-Mail oder Telefon ein!",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "Anmelden",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "Mit {type} anmelden",
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
index 3b1ea0cb..c717b548 100644
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@@ -299,6 +299,7 @@
     "Continue with": "Continue with",
     "Email or phone": "Email or phone",
     "Forgot password?": "Forgot password?",
+    "Loading": "Loading",
     "Logging out...": "Logging out...",
     "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
@@ -308,6 +309,7 @@
     "Please input your password!": "Please input your password!",
     "Please input your password, at least 6 characters!": "Please input your password, at least 6 characters!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "Sign in with {type}",
diff --git a/web/src/locales/fr/data.json b/web/src/locales/fr/data.json
index d4715594..1896d5f7 100644
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@@ -299,6 +299,7 @@
     "Continue with": "Continuer avec",
     "Email or phone": "Courriel ou téléphone",
     "Forgot password?": "Mot de passe oublié ?",
+    "Loading": "Loading",
     "Logging out...": "Logging out...",
     "No account?": "Pas de compte ?",
     "Or sign in with another account": "Ou connectez-vous avec un autre compte",
@@ -308,6 +309,7 @@
     "Please input your password!": "Veuillez saisir votre mot de passe !",
     "Please input your password, at least 6 characters!": "Veuillez entrer votre mot de passe, au moins 6 caractères !",
     "Please input your username, Email or phone!": "Veuillez entrer votre nom d'utilisateur, votre e-mail ou votre téléphone!",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "Se connecter",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "Se connecter avec {type}",
diff --git a/web/src/locales/ja/data.json b/web/src/locales/ja/data.json
index 55c53f1f..19a22812 100644
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@@ -299,6 +299,7 @@
     "Continue with": "次で続ける",
     "Email or phone": "Eメールまたは電話番号",
     "Forgot password?": "パスワードを忘れましたか？",
+    "Loading": "Loading",
     "Logging out...": "Logging out...",
     "No account?": "アカウントがありませんか？",
     "Or sign in with another account": "または別のアカウントでサインイン",
@@ -308,6 +309,7 @@
     "Please input your password!": "パスワードを入力してください！",
     "Please input your password, at least 6 characters!": "6文字以上でパスワードを入力してください！",
     "Please input your username, Email or phone!": "ユーザー名、メールアドレスまたは電話番号を入力してください。",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "サインイン",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "{type} でサインイン",
diff --git a/web/src/locales/ko/data.json b/web/src/locales/ko/data.json
index 1191a473..4576bf80 100644
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@@ -299,6 +299,7 @@
     "Continue with": "Continue with",
     "Email or phone": "Email or phone",
     "Forgot password?": "Forgot password?",
+    "Loading": "Loading",
     "Logging out...": "Logging out...",
     "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
@@ -308,6 +309,7 @@
     "Please input your password!": "Please input your password!",
     "Please input your password, at least 6 characters!": "Please input your password, at least 6 characters!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "Sign in with {type}",
diff --git a/web/src/locales/ru/data.json b/web/src/locales/ru/data.json
index 037a417e..ca03b82f 100644
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@@ -299,6 +299,7 @@
     "Continue with": "Продолжить с",
     "Email or phone": "Электронная почта или телефон",
     "Forgot password?": "Забыли пароль?",
+    "Loading": "Loading",
     "Logging out...": "Выход...",
     "No account?": "Нет учетной записи?",
     "Or sign in with another account": "Или войти с помощью другой учетной записи",
@@ -308,6 +309,7 @@
     "Please input your password!": "Пожалуйста, введите ваш пароль!",
     "Please input your password, at least 6 characters!": "Пожалуйста, введите ваш пароль, по крайней мере 6 символов!",
     "Please input your username, Email or phone!": "Пожалуйста, введите ваше имя пользователя, адрес электронной почты или телефон!",
+    "Redirecting, please wait.": "Redirecting, please wait.",
     "Sign In": "Войти",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
     "Sign in with {type}": "Войти с помощью {type}",
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
index 371bafeb..330c682e 100644
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -299,6 +299,7 @@
     "Continue with": "使用以下账号继续",
     "Email or phone": "Email或手机号",
     "Forgot password?": "忘记密码？",
+    "Loading": "加载中",
     "Logging out...": "正在退出登录...",
     "No account?": "没有账号？",
     "Or sign in with another account": "或者，登录其他账号",
@@ -308,6 +309,7 @@
     "Please input your password!": "请输入您的密码！",
     "Please input your password, at least 6 characters!": "请输入您的密码，不少于6位",
     "Please input your username, Email or phone!": "请输入您的用户名、Email或手机号！",
+    "Redirecting, please wait.": "正在跳转, 请稍等.",
     "Sign In": "登录",
     "Sign in with WebAuthn": "WebAuthn登录",
     "Sign in with {type}": "{type}登录",