feat: show language widget in signup and signin pages (#1180)

web/src/App.js

@@ -610,7 +610,7 @@ class App extends Component {
                   // theme="dark"
                   mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
                   selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: "64px", width: "80%", position: "absolute", left: "145px"}}
+                  style={{lineHeight: "64px", width: "78%", position: "absolute", left: "145px"}}
                 >
                   {
                     this.renderMenu()

web/src/App.less

@@ -59,6 +59,12 @@
   height: 70px; /* Footer height */
 }
 
+#language-box-corner {
+  position: absolute;
+  top: 75px;
+  right: 0;
+}
+
 .language_box {
   background: url("@{StaticBaseUrl}/img/muti_language.svg");
   background-size: 25px, 25px;
@@ -88,6 +94,16 @@
   align-items: stretch;
 }
 
+.login-content{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+}
+
 .loginBackground {
   height: 100%;
   background: #fff no-repeat;

web/src/SelectLanguageBox.js

@@ -49,7 +49,7 @@ class SelectLanguageBox extends React.Component {
 
     return (
       <Dropdown overlay={menu} >
-        <div className="language_box" />
+        <div className="language_box" id={this.props.id} style={this.props.style} />
       </Dropdown>
     );
   }

web/src/auth/LoginPage.js

@@ -28,6 +28,7 @@ import SelfLoginButton from "./SelfLoginButton";
 import i18next from "i18next";
 import CustomGithubCorner from "../CustomGithubCorner";
 import {CountDownInput} from "../common/CountDownInput";
+import SelectLanguageBox from "../SelectLanguageBox";
 
 const {TabPane} = Tabs;
 
@@ -700,23 +701,26 @@ class LoginPage extends React.Component {
         <CustomGithubCorner />
         <Row>
           <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
-            <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
+            <div className="login-content">
-              <div>
+              <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
-                {
+                <SelectLanguageBox id="language-box-corner" style={{top: "80px", right: "5px"}} />
-                  Setting.renderHelmet(application)
+                <div>
-                }
+                  {
-                {
+                    Setting.renderHelmet(application)
-                  Setting.renderLogo(application)
+                  }
-                }
+                  {
-                {/* {*/}
+                    Setting.renderLogo(application)
-                {/*  this.state.clientId !== null ? "Redirect" : null*/}
+                  }
-                {/* }*/}
+                  {/* {*/}
-                {
+                  {/*  this.state.clientId !== null ? "Redirect" : null*/}
-                  this.renderSignedInBox()
+                  {/* }*/}
-                }
+                  {
-                {
+                    this.renderSignedInBox()
-                  this.renderForm(application)
+                  }
-                }
+                  {
+                    this.renderForm(application)
+                  }
+                </div>
               </div>
             </div>
           </Col>

web/src/auth/SignupPage.js

@@ -25,6 +25,7 @@ import * as ApplicationBackend from "../backend/ApplicationBackend";
 import {CountDownInput} from "../common/CountDownInput";
 import SelectRegionBox from "../SelectRegionBox";
 import CustomGithubCorner from "../CustomGithubCorner";
+import SelectLanguageBox from "../SelectLanguageBox";
 
 const formItemLayout = {
   labelCol: {
@@ -622,16 +623,19 @@ class SignupPage extends React.Component {
          
         <Row>
           <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
-            <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
+            <div className="login-content">
-              {
+              <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
-                Setting.renderHelmet(application)
+                <SelectLanguageBox id="language-box-corner" style={{top: "3px", right: "5px"}} />
-              }
+                {
-              {
+                  Setting.renderHelmet(application)
-                Setting.renderLogo(application)
+                }
-              }
+                {
-              {
+                  Setting.renderLogo(application)
-                this.renderForm(application)
+                }
-              }
+                {
+                  this.renderForm(application)
+                }
+              </div>
             </div>
           </Col>
         </Row>