From ca314bbfb59917dccbf6018c24a59f02ee4fe225 Mon Sep 17 00:00:00 2001
From: Yaodong Yu <2814461814@qq.com>
Date: Tue, 6 Dec 2022 00:50:17 +0800
Subject: [PATCH] feat: refactor layout and fix footer CSS (#1370)

---
 web/src/App.js             | 147 ++++++++++++++++++-------------------
 web/src/App.less           |  30 ++------
 web/src/Setting.js         |   4 +-
 web/src/auth/ForgetPage.js |   2 +-
 web/src/auth/LoginPage.js  |   6 +-
 web/src/auth/SignupPage.js |  33 ++++-----
 6 files changed, 103 insertions(+), 119 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index 56093eef..1cd70912 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -76,7 +76,7 @@ import AdapterListPage from "./AdapterListPage";
 import AdapterEditPage from "./AdapterEditPage";
 import {withTranslation} from "react-i18next";
 
-const {Header, Footer} = Layout;
+const {Header, Footer, Content} = Layout;
 
 class App extends Component {
   constructor(props) {
@@ -537,44 +537,45 @@ class App extends Component {
   renderContent() {
     if (!Setting.isMobile()) {
       return (
-        <div style={{display: "flex", flex: "auto", width: "100%", flexDirection: "column"}}>
-          <Layout style={{display: "flex", alignItems: "stretch"}}>
-            <Header style={{padding: "0", marginBottom: "3px"}}>
+        <Layout id="parent-area">
+          <Header style={{marginBottom: "3px", paddingInline: 0}}>
+            {
+              Setting.isMobile() ? null : (
+                <Link to={"/"}>
+                  <div className="logo" />
+                </Link>
+              )
+            }
+            <div>
+              <Menu
+                // theme="dark"
+                items={this.renderMenu()}
+                mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+                selectedKeys={[`${this.state.selectedMenuKey}`]}
+                style={{lineHeight: "64px", position: "absolute", left: "145px", right: "200px"}}
+              >
+              </Menu>
               {
-                Setting.isMobile() ? null : (
-                  <Link to={"/"}>
-                    <div className="logo" />
-                  </Link>
-                )
+                this.renderAccount()
               }
-              <div>
-                <Menu
-                  // theme="dark"
-                  items={this.renderMenu()}
-                  mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
-                  selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: "64px", position: "absolute", left: "145px", right: "200px"}}
-                >
-                </Menu>
-                {
-                  this.renderAccount()
-                }
-                {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
-              </div>
-            </Header>
-            <Layout style={{backgroundColor: "#f5f5f5", alignItems: "stretch"}}>
-              <Card className="content-warp-card">
-                {
-                  this.renderRouter()
-                }
-              </Card>
-            </Layout>
-          </Layout>
-        </div>
+              {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
+            </div>
+          </Header>
+          <Content style={{backgroundColor: "#f5f5f5", alignItems: "stretch", display: "flex", flexDirection: "column"}}>
+            <Card className="content-warp-card">
+              {
+                this.renderRouter()
+              }
+            </Card>
+          </Content>
+          {
+            this.renderFooter()
+          }
+        </Layout>
       );
     } else {
       return (
-        <div>
+        <Layout>
           <Header style={{padding: "0", marginBottom: "3px"}}>
             {
               Setting.isMobile() ? null : (
@@ -604,10 +605,11 @@ class App extends Component {
               {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
             </div>
           </Header>
-          {
-            this.renderRouter()
-          }
-        </div>
+          <Content style={{display: "flex", flexDirection: "column"}} >{
+            this.renderRouter()}
+          </Content>
+          {this.renderFooter()}
+        </Layout>
       );
     }
   }
@@ -644,50 +646,47 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
-          <div id="login-content-wrap" style={{flexDirection: "column"}}>
-            <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>
-          </div>
-          {
-            this.renderFooter()
-          }
-        </div>
+        <>
+          <Layout id="parent-area">
+            <Content style={{display: "flex"}}>
+              <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>
+            </Content>
+            {
+              this.renderFooter()
+            }
+          </Layout>
+        </>
       );
     }
 
     return (
-      <div id="parent-area">
+      <>
         <FloatButton.BackTop />
         <CustomGithubCorner />
-        <div id="content-wrap" style={{flexDirection: "column"}}>
-          {
-            this.renderContent()
-          }
-        </div>
         {
-          this.renderFooter()
+          this.renderContent()
         }
-      </div>
+      </>
     );
   }
 
diff --git a/web/src/App.less b/web/src/App.less
index 5fd1f829..f6662b79 100644
--- a/web/src/App.less
+++ b/web/src/App.less
@@ -27,15 +27,15 @@
   color: #61dafb;
 }
 
-#root {
-  height: 100%;
-}
-
 img {
   border-style: none;
   vertical-align: middle;
 }
 
+#root {
+  height: 100%;
+}
+
 #parent-area {
   display: flex;
   flex-direction: column;
@@ -44,23 +44,8 @@ img {
   background-color: #f5f5f5;
 }
 
-#content-wrap {
-  display: flex;
-  flex: 1 1 0;
-  align-items: stretch;
-  width: 100%;
-}
-
-#login-content-wrap {
-  display: flex;
-  flex: 1 1 0;
-  width: 100%;
-}
-
-#footer {
-  bottom: 0;
-  width: 100%;
-  padding: 24px 50px;
+.panel-logo {
+  margin-bottom: 30px;
 }
 
 .language-box {
@@ -105,6 +90,7 @@ img {
 
 .forget-content {
   padding: 10px 100px 20px;
+  margin: 30px auto;
   border: 2px solid #fff;
   border-radius: 7px;
   background-color: rgb(255 255 255);
@@ -135,9 +121,9 @@ img {
 }
 
 .loginBackground {
+  flex: auto;
   display: flex;
   align-items: center;
-  flex: 1 1 0;
   background: #fff no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 9bd04a0f..1b8c6e2e 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -732,12 +732,12 @@ export function renderLogo(application) {
   if (application.homepageUrl !== "") {
     return (
       <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
-        <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: "10px"}} />
+        <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
       </a>
     );
   } else {
     return (
-      <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: "10px"}} />
+      <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
     );
   }
 }
diff --git a/web/src/auth/ForgetPage.js b/web/src/auth/ForgetPage.js
index c8811ce6..e17faf84 100644
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@@ -492,7 +492,7 @@ class ForgetPage extends React.Component {
     return (
       <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <div className="login-content forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
+        <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
           <Row>
             <Col span={24} style={{justifyContent: "center"}}>
               <Row>
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 8477dae4..b1f5c141 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -361,7 +361,7 @@ class LoginPage extends React.Component {
           size="large"
         >
           <Form.Item
-            style={{height: 0, visibility: "hidden"}}
+            hidden={true}
             name="application"
             rules={[
               {
@@ -372,7 +372,7 @@ class LoginPage extends React.Component {
           >
           </Form.Item>
           <Form.Item
-            style={{height: 0, visibility: "hidden"}}
+            hidden={true}
             name="organization"
             rules={[
               {
@@ -479,7 +479,7 @@ class LoginPage extends React.Component {
                 {application.displayName}
               </span>
             </a>
-            :
+              :
           </div>
           <br />
           {
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 27ab3f5c..bc9c8f1b 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -42,7 +42,7 @@ const formItemLayout = {
       span: 24,
     },
     sm: {
-      span: 18,
+      span: 16,
     },
   },
 };
@@ -563,12 +563,13 @@ class SignupPage extends React.Component {
           application: application.name,
           organization: application.organization,
         }}
-        style={{width: !Setting.isMobile() ? "400px" : "300px"}}
         size="large"
+        layout={Setting.isMobile() ? "vertical" : "horizontal"}
+        style={{width: Setting.isMobile() ? "300px" : "400px"}}
       >
         <Form.Item
-          style={{height: 0, visibility: "hidden"}}
           name="application"
+          hidden={true}
           rules={[
             {
               required: true,
@@ -578,8 +579,8 @@ class SignupPage extends React.Component {
         >
         </Form.Item>
         <Form.Item
-          style={{height: 0, visibility: "hidden"}}
           name="organization"
+          hidden={true}
           rules={[
             {
               required: true,
@@ -595,7 +596,7 @@ class SignupPage extends React.Component {
           <Button type="primary" htmlType="submit">
             {i18next.t("account:Sign Up")}
           </Button>
-          &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
+            &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
           <a onClick={() => {
             const linkInStorage = sessionStorage.getItem("signinUrl");
             if (linkInStorage !== null && linkInStorage !== "") {
@@ -638,18 +639,16 @@ class SignupPage extends React.Component {
               <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
             </div>
             <div className="login-form">
-              <div >
-                {
-                  Setting.renderHelmet(application)
-                }
-                {
-                  Setting.renderLogo(application)
-                }
-                <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
-                {
-                  this.renderForm(application)
-                }
-              </div>
+              {
+                Setting.renderHelmet(application)
+              }
+              {
+                Setting.renderLogo(application)
+              }
+              <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
+              {
+                this.renderForm(application)
+              }
             </div>
           </div>
         </div>