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,7 +701,9 @@ 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 className="login-content">
               <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
+                <SelectLanguageBox id="language-box-corner" style={{top: "80px", right: "5px"}} />
                 <div>
                   {
                     Setting.renderHelmet(application)
@@ -719,6 +722,7 @@ class LoginPage extends React.Component {
                   }
                 </div>
               </div>
+            </div>
           </Col>
         </Row>
       </div>

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,7 +623,9 @@ 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 className="login-content">
               <div style={{marginBottom: "10px", textAlign: "center", ...formStyle}}>
+                <SelectLanguageBox id="language-box-corner" style={{top: "3px", right: "5px"}} />
                 {
                   Setting.renderHelmet(application)
                 }
@@ -633,6 +636,7 @@ class SignupPage extends React.Component {
                   this.renderForm(application)
                 }
               </div>
+            </div>
           </Col>
         </Row>
         {