feat: add left-side image and improve login page (#1226)

2025-07-04 13:20:19 +08:00 · 2022-10-22 21:43:41 +08:00
parent 19d351d157
commit b0f572c51a
13 changed files with 271 additions and 90 deletions
--- a/web/src/App.less
+++ b/web/src/App.less
@ -94,6 +94,37 @@
  align-items: stretch;
 }

+.side-image {
+  display: none;
+  @media screen and (min-width: 1100px){
+    display: block;
+    position: relative;
+    width: 500px;
+    border-right: 0.5px solid rgb(196, 203, 215);
+  }
+}
+
+.forget-content{
+  padding: 10px 100px 20px;
+  border: 2px solid #ffffff;
+  border-radius: 7px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+}
+
+.login-panel{
+  margin-top: 50px;
+  margin-bottom: 50px;
+  display: flex;
+  background-color: rgb(255, 255, 255);
+  overflow: hidden;
+}
+
+.login-form{
+  text-align: center;
+  padding: 30px;
+}
+
 .login-content {
  display: flex;
  flex-direction: row;
@ -105,7 +136,9 @@
 }

 .loginBackground {
-  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
  background: #fff no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@ -32,6 +32,7 @@ import copy from "copy-to-clipboard";

 import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
+
 require("codemirror/theme/material-darker.css");
 require("codemirror/mode/htmlmixed/htmlmixed");
 require("codemirror/mode/xml/xml");
@ -39,13 +40,52 @@ require("codemirror/mode/css/css");

 const {Option} = Select;

-const template = {
-  padding: "30px",
-  border: "2px solid #ffffff",
-  borderRadius: "7px",
-  backgroundColor: "#ffffff",
-  boxShadow: " 0px 0px 20px rgba(0, 0, 0, 0.20)",
-};
+const template = `<!--template: please copy and paste-->
+<style>
+   .login-panel{
+    border-radius: 10px;
+    background-color: #ffffff;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
+}
+</style>
+`;
+const sideTemplate = `<!--template: please copy and paste-->
+<style>
+  .left-model{
+    text-align: center;
+    padding: 30px;
+    background-color: #8ca0ed;
+    position: absolute;
+    transform: none;
+    width: 100%;
+    height: 100%;
+  }
+  .side-logo{
+    display: flex;
+    align-items: center;
+  }
+  .side-logo span {
+    font-family: Montserrat, sans-serif;
+    font-weight: 900;
+    font-size: 2.4rem;
+    line-height: 1.3;
+    margin-left: 16px;
+    color: #404040;
+  }
+  .img{
+    max-width: none;
+    margin: 41px 0 13px;
+  }
+</style>
+<div class="left-model">
+  <span class="side-logo"> <img src="https://cdn.casbin.org/img/casdoor-logo_1185x256.png" alt="Casdoor" style="width: 120px"> 
+    <span>SSO</span> 
+  </span>
+  <div class="img">
+    <img src="https://cdn.casbin.org/img/casbin.svg" alt="Casdoor"/>
+  </div>
+</div>
+`;

 class ApplicationEditPage extends React.Component {
  constructor(props) {
@ -157,7 +197,6 @@ class ApplicationEditPage extends React.Component {
  }

  renderApplication() {
-    const preview = JSON.stringify(template, null, 2);
    return (
      <Card size="small" title={
        <div>
@ -562,10 +601,10 @@ class ApplicationEditPage extends React.Component {
          </Col>
          <Col span={22} style={(Setting.isMobile()) ? {maxWidth: "100%"} : {}}>
            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
              </Col>
-              <Col span={23} >
+              <Col span={22} >
                <Input prefix={<LinkOutlined />} value={this.state.application.formBackgroundUrl} onChange={e => {
                  this.updateApplicationField("formBackgroundUrl", e.target.value);
                }} />
@ -590,8 +629,8 @@ class ApplicationEditPage extends React.Component {
          <Col span={22}>
            <Popover placement="right" content={
              <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror value={this.state.application.formCss === "" ? preview : this.state.application.formCss}
-                  options={{mode: "css", theme: "material-darker"}}
+                <CodeMirror value={this.state.application.formCss === "" ? template : this.state.application.formCss}
+                  options={{mode: "htmlmixed", theme: "material-darker"}}
                  onBeforeChange={(editor, data, value) => {
                    this.updateApplicationField("formCss", value);
                  }}
@ -609,11 +648,39 @@ class ApplicationEditPage extends React.Component {
            {Setting.getLabel(i18next.t("application:From position"), i18next.t("application:From position - Tooltip"))} :
          </Col>
          <Col span={22} >
-            <Radio.Group onChange={e => {this.updateApplicationField("formOffset", e.target.value);}} value={this.state.application.formOffset !== 0 ? this.state.application.formOffset : 8}>
-              <Radio.Button value={2}>left</Radio.Button>
-              <Radio.Button value={8}>center</Radio.Button>
-              <Radio.Button value={14}>right</Radio.Button>
-            </Radio.Group>
+            <Row style={{marginTop: "20px"}} >
+              <Radio.Group onChange={e => {this.updateApplicationField("formOffset", e.target.value);}} value={this.state.application.formOffset}>
+                <Radio.Button value={1}>{i18next.t("application:Left")}</Radio.Button>
+                <Radio.Button value={2}>{i18next.t("application:Center")}</Radio.Button>
+                <Radio.Button value={3}>{i18next.t("application:Right")}</Radio.Button>
+                <Radio.Button value={4}>
+                  {i18next.t("application:Enable side panel")}
+                </Radio.Button>
+              </Radio.Group>
+            </Row>
+            {this.state.application.formOffset === 4 ?
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 3}>
+                  {Setting.getLabel(i18next.t("application:Side panel HTML"), i18next.t("application:Side panel HTML - Tooltip"))} :
+                </Col>
+                <Col span={21} >
+                  <Popover placement="right" content={
+                    <div style={{width: "900px", height: "300px"}} >
+                      <CodeMirror value={this.state.application.formSideHtml === "" ? sideTemplate : this.state.application.formSideHtml}
+                        options={{mode: "htmlmixed", theme: "material-darker"}}
+                        onBeforeChange={(editor, data, value) => {
+                          this.updateApplicationField("formSideHtml", value);
+                        }}
+                      />
+                    </div>
+                  } title={i18next.t("application:Side panel HTML - Edit")} trigger="click">
+                    <Input value={this.state.application.formSideHtml} style={{marginBottom: "10px"}} onChange={e => {
+                      this.updateApplicationField("formSideHtml", e.target.value);
+                    }} />
+                  </Popover>
+                </Col>
+              </Row>
+              : null}
          </Col>
        </Row>
        {
@ -707,7 +774,7 @@ class ApplicationEditPage extends React.Component {
        <br />
        <div style={{position: "relative", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", flexDirection: "column", flex: "auto"}}>
          <PromptPage application={this.state.application} account={this.props.account} />
-          <div style={maskStyle}></div>
+          <div style={maskStyle} />
        </div>
      </Col>
    );
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@ -487,61 +487,65 @@ class ForgetPage extends React.Component {
    }

    return (
-      <Row>
-        <Col span={24} style={{justifyContent: "center"}}>
+      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
+        <CustomGithubCorner />
+        <div className="login-content forget-content">
          <Row>
-            <Col span={24}>
-              <div style={{marginTop: "80px", marginBottom: "10px", textAlign: "center"}}>
-                {
-                  Setting.renderHelmet(application)
-                }
-                <CustomGithubCorner />
-                {
-                  Setting.renderLogo(application)
-                }
+            <Col span={24} style={{justifyContent: "center"}}>
+              <Row>
+                <Col span={24}>
+                  <div style={{marginTop: "80px", marginBottom: "10px", textAlign: "center"}}>
+                    {
+                      Setting.renderHelmet(application)
+                    }
+                    {
+                      Setting.renderLogo(application)
+                    }
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={24}>
+                  <div style={{textAlign: "center", fontSize: "28px"}}>
+                    {i18next.t("forget:Retrieve password")}
+                  </div>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={24}>
+                  <Steps
+                    current={this.state.current}
+                    style={{
+                      width: "90%",
+                      maxWidth: "500px",
+                      margin: "auto",
+                      marginTop: "80px",
+                    }}
+                  >
+                    <Step
+                      title={i18next.t("forget:Account")}
+                      icon={<UserOutlined />}
+                    />
+                    <Step
+                      title={i18next.t("forget:Verify")}
+                      icon={<SolutionOutlined />}
+                    />
+                    <Step
+                      title={i18next.t("forget:Reset")}
+                      icon={<KeyOutlined />}
+                    />
+                  </Steps>
+                </Col>
+              </Row>
+            </Col>
+            <Col span={24} style={{display: "flex", justifyContent: "center"}}>
+              <div style={{marginTop: "10px", textAlign: "center"}}>
+                {this.renderForm(application)}
              </div>
            </Col>
          </Row>
-          <Row>
-            <Col span={24}>
-              <div style={{textAlign: "center", fontSize: "28px"}}>
-                {i18next.t("forget:Retrieve password")}
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              <Steps
-                current={this.state.current}
-                style={{
-                  width: "90%",
-                  maxWidth: "500px",
-                  margin: "auto",
-                  marginTop: "80px",
-                }}
-              >
-                <Step
-                  title={i18next.t("forget:Account")}
-                  icon={<UserOutlined />}
-                />
-                <Step
-                  title={i18next.t("forget:Verify")}
-                  icon={<SolutionOutlined />}
-                />
-                <Step
-                  title={i18next.t("forget:Reset")}
-                  icon={<KeyOutlined />}
-                />
-              </Steps>
-            </Col>
-          </Row>
-        </Col>
-        <Col span={24} style={{display: "flex", justifyContent: "center"}}>
-          <div style={{marginTop: "10px", textAlign: "center"}}>
-            {this.renderForm(application)}
-          </div>
-        </Col>
-      </Row>
+        </div>
+      </div>
    );
  }
 }
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -139,6 +139,18 @@ class LoginPage extends React.Component {
    this.props.onUpdateAccount(account);
  }

+  parseOffset(offset) {
+    if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
+      return "0 auto";
+    }
+    if (offset === 1) {
+      return "0 10%";
+    }
+    if (offset === 3) {
+      return "0 60%";
+    }
+  }
+
  populateOauthValues(values) {
    const oAuthParams = Util.getOAuthGetParameters();
    if (oAuthParams !== null && oAuthParams.responseType !== null && oAuthParams.responseType !== "") {
@ -695,16 +707,18 @@ class LoginPage extends React.Component {
      );
    }

-    const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
-
    return (
      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
        <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: formStyle !== null ? "80px" : "45px", right: formStyle !== null ? "5px" : "-45px"}} />
+        <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
+          {Setting.inIframe() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
+          <div className="login-panel">
+            <SelectLanguageBox id="language-box-corner" style={{top: "50px"}} />
+            <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>
+              <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
+            </div>
+            <div className="login-form">
+              <div >
                <div>
                  {
                    Setting.renderHelmet(application)
@ -724,8 +738,8 @@ class LoginPage extends React.Component {
                </div>
              </div>
            </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
      </div>
    );
  }
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@ -14,7 +14,7 @@

 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Checkbox, Col, Form, Input, Modal, Result, Row} from "antd";
+import {Button, Checkbox, Form, Input, Modal, Result} from "antd";
 import * as Setting from "../Setting";
 import * as AuthBackend from "./AuthBackend";
 import * as ProviderButton from "./ProviderButton";
@ -148,6 +148,18 @@ class SignupPage extends React.Component {
    this.props.onUpdateAccount(account);
  }

+  parseOffset(offset) {
+    if (offset === 2 || offset === 4 || Setting.inIframe() || Setting.isMobile()) {
+      return "0 auto";
+    }
+    if (offset === 1) {
+      return "0 10%";
+    }
+    if (offset === 3) {
+      return "0 60%";
+    }
+  }
+
  onFinish(values) {
    const application = this.getApplicationObj();
    values.phonePrefix = application.organizationObj.phonePrefix;
@ -615,17 +627,18 @@ class SignupPage extends React.Component {
      );
    }

-    const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
-
    return (
      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
        <CustomGithubCorner />
-        &nbsp;
-        <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: formStyle !== null ? "3px" : "-20px", right: formStyle !== null ? "5px" : "-45px"}} />
+        <div className="login-content" style={{margin: this.parseOffset(application.formOffset)}}>
+          {Setting.inIframe() ? null : <div dangerouslySetInnerHTML={{__html: application.formCss}} />}
+          <div className="login-panel" >
+            <SelectLanguageBox id="language-box-corner" style={{top: "50px"}} />
+            <div className="side-image" style={{display: application.formOffset !== 4 ? "none" : null}}>
+              <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
+            </div>
+            <div className="login-form">
+              <div >
                {
                  Setting.renderHelmet(application)
                }
@ -637,8 +650,8 @@ class SignupPage extends React.Component {
                }
              </div>
            </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
        {
          this.renderModal()
        }
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Enable WebAuthn signin - Tooltip",
    "Enable code signin": "Code-Anmeldung aktivieren",
    "Enable code signin - Tooltip": "Aktiviere Codeanmeldung - Tooltip",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Aktiviere Anmeldesession - Tooltip",
    "Enable signup": "Anmeldung aktivieren",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
+    "Left": "Left",
    "New Application": "New Application",
    "Password ON": "Passwort AN",
    "Password ON - Tooltip": "Whether to allow password login",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "List of redirect addresses after successful login",
    "Refresh token expire": "Aktualisierungs-Token läuft ab",
    "Refresh token expire - Tooltip": "Aktualisierungs-Token läuft ab - Tooltip",
+    "Right": "Right",
    "SAML metadata": "SAML metadata",
    "SAML metadata - Tooltip": "SAML metadata - Tooltip",
    "SAML metadata URL copied to clipboard successfully": "SAML metadata URL copied to clipboard successfully",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
    "Signin session": "Anmeldesitzung",
    "Signup items": "Artikel registrieren",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Enable WebAuthn signin - Tooltip",
    "Enable code signin": "Enable code signin",
    "Enable code signin - Tooltip": "Enable code signin - Tooltip",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Enable signin session - Tooltip",
    "Enable signup": "Enable signup",
    "Enable signup - Tooltip": "Enable signup - Tooltip",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
+    "Left": "Left",
    "New Application": "New Application",
    "Password ON": "Password ON",
    "Password ON - Tooltip": "Password ON - Tooltip",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "Redirect URLs - Tooltip",
    "Refresh token expire": "Refresh token expire",
    "Refresh token expire - Tooltip": "Refresh token expire - Tooltip",
+    "Right": "Right",
    "SAML metadata": "SAML metadata",
    "SAML metadata - Tooltip": "SAML metadata - Tooltip",
    "SAML metadata URL copied to clipboard successfully": "SAML metadata URL copied to clipboard successfully",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
    "Signin session": "Signin session",
    "Signup items": "Signup items",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Enable WebAuthn signin - Tooltip",
    "Enable code signin": "Activer la connexion au code",
    "Enable code signin - Tooltip": "Activer la connexion au code - infobulle",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Activer la session de connexion - infobulle",
    "Enable signup": "Activer l'inscription",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
+    "Left": "Left",
    "New Application": "New Application",
    "Password ON": "Mot de passe activé",
    "Password ON - Tooltip": "Whether to allow password login",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "List of redirect addresses after successful login",
    "Refresh token expire": "Expiration du jeton d'actualisation",
    "Refresh token expire - Tooltip": "Expiration du jeton d'actualisation - infobulle",
+    "Right": "Right",
    "SAML metadata": "SAML metadata",
    "SAML metadata - Tooltip": "SAML metadata - Tooltip",
    "SAML metadata URL copied to clipboard successfully": "SAML metadata URL copied to clipboard successfully",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
    "Signin session": "Connexion à la session",
    "Signup items": "Inscrire des éléments",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Enable WebAuthn signin - Tooltip",
    "Enable code signin": "コードサインインを有効にする",
    "Enable code signin - Tooltip": "Enable code signin - Tooltip",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Enable signin session - Tooltip",
    "Enable signup": "サインアップを有効にする",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
+    "Left": "Left",
    "New Application": "New Application",
    "Password ON": "パスワードON",
    "Password ON - Tooltip": "Whether to allow password login",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "List of redirect addresses after successful login",
    "Refresh token expire": "トークンの更新の期限が切れます",
    "Refresh token expire - Tooltip": "トークンの有効期限を更新する - ツールチップ",
+    "Right": "Right",
    "SAML metadata": "SAML metadata",
    "SAML metadata - Tooltip": "SAML metadata - Tooltip",
    "SAML metadata URL copied to clipboard successfully": "SAML metadata URL copied to clipboard successfully",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
    "Signin session": "サインインセッション",
    "Signup items": "アイテムの登録",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Copy SAML metadata URL",
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Enable WebAuthn signin - Tooltip",
    "Enable code signin": "Enable code signin",
    "Enable code signin - Tooltip": "Enable code signin - Tooltip",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Enable signin session - Tooltip",
    "Enable signup": "Enable signup",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Grant types",
    "Grant types - Tooltip": "Grant types - Tooltip",
+    "Left": "Left",
    "New Application": "New Application",
    "Password ON": "Password ON",
    "Password ON - Tooltip": "Whether to allow password login",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "List of redirect addresses after successful login",
    "Refresh token expire": "Refresh token expire",
    "Refresh token expire - Tooltip": "Refresh token expire - Tooltip",
+    "Right": "Right",
    "SAML metadata": "SAML metadata",
    "SAML metadata - Tooltip": "SAML metadata - Tooltip",
    "SAML metadata URL copied to clipboard successfully": "SAML metadata URL copied to clipboard successfully",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
    "Signin session": "Signin session",
    "Signup items": "Signup items",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "Auto signin - Tooltip",
    "Background URL": "Background URL",
    "Background URL - Tooltip": "Background URL - Tooltip",
+    "Center": "Center",
    "Copy SAML metadata URL": "Копировать адрес метаданных SAML",
    "Copy prompt page URL": "Скопировать URL-адрес страницы запроса",
    "Copy signin page URL": "Скопировать URL-адрес страницы входа",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "Включить вход с WebAuthn - Подсказка",
    "Enable code signin": "Включить кодовый вход",
    "Enable code signin - Tooltip": "Включить вход с кодом - Tooltip",
+    "Enable side panel": "Enable side panel",
    "Enable signin session - Tooltip": "Включить сеанс входа - Подсказка",
    "Enable signup": "Включить регистрацию",
    "Enable signup - Tooltip": "Whether to allow users to sign up",
@ -39,6 +41,7 @@
    "From position - Tooltip": "From position - Tooltip",
    "Grant types": "Виды грантов",
    "Grant types - Tooltip": "Виды грантов - Подсказка",
+    "Left": "Left",
    "New Application": "Новое приложение",
    "Password ON": "Пароль ВКЛ",
    "Password ON - Tooltip": "Whether to allow password login",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "List of redirect addresses after successful login",
    "Refresh token expire": "Срок действия обновления токена истекает",
    "Refresh token expire - Tooltip": "Срок обновления токена истекает - Подсказка",
+    "Right": "Right",
    "SAML metadata": "Метаданные SAML",
    "SAML metadata - Tooltip": "Метаданные SAML - Подсказка",
    "SAML metadata URL copied to clipboard successfully": "Адрес метаданных SAML скопирован в буфер обмена",
+    "Side panel HTML": "Side panel HTML",
+    "Side panel HTML - Edit": "Side panel HTML - Edit",
+    "Side panel HTML - Tooltip": "Side panel HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL страницы входа успешно скопирован в буфер обмена, пожалуйста, вставьте его в окно инкогнито или другой браузер",
    "Signin session": "Сессия входа",
    "Signup items": "Элементы регистрации",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -17,6 +17,7 @@
    "Auto signin - Tooltip": "当Casdoor存在已登录会话时，自动采用该会话进行应用端的登录",
    "Background URL": "背景图URL",
    "Background URL - Tooltip": "登录页背景图的链接",
+    "Center": "居中",
    "Copy SAML metadata URL": "复制SAML元数据URL",
    "Copy prompt page URL": "复制提醒页面URL",
    "Copy signin page URL": "复制登录页面URL",
@ -28,6 +29,7 @@
    "Enable WebAuthn signin - Tooltip": "是否支持用户在登录页面通过WebAuthn方式登录",
    "Enable code signin": "启用验证码登录",
    "Enable code signin - Tooltip": "是否允许用手机或邮箱验证码登录",
+    "Enable side panel": "启用侧面板",
    "Enable signin session - Tooltip": "从应用登录Casdoor后，Casdoor是否保持会话",
    "Enable signup": "启用注册",
    "Enable signup - Tooltip": "是否允许用户注册",
@ -39,6 +41,7 @@
    "From position - Tooltip": "登录和注册面板的位置",
    "Grant types": "OAuth授权类型",
    "Grant types - Tooltip": "选择允许哪些OAuth协议中的Grant types",
+    "Left": "居左",
    "New Application": "添加应用",
    "Password ON": "开启密码",
    "Password ON - Tooltip": "是否允许密码登录",
@ -49,9 +52,13 @@
    "Redirect URLs - Tooltip": "登录成功后重定向地址列表",
    "Refresh token expire": "Refresh Token过期",
    "Refresh token expire - Tooltip": "Refresh Token过期时间",
+    "Right": "居右",
    "SAML metadata": "SAML元数据",
    "SAML metadata - Tooltip": "SAML协议的元数据（Metadata）信息",
    "SAML metadata URL copied to clipboard successfully": "SAML元数据URL已成功复制到剪贴板",
+    "Side panel HTML": "侧面板 HTML",
+    "Side panel HTML - Edit": "侧面板 HTML - 编辑",
+    "Side panel HTML - Tooltip": "侧面板 HTML - Tooltip",
    "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "登录页面URL已成功复制到剪贴板，请粘贴到当前浏览器的隐身模式窗口或另一个浏览器访问",
    "Signin session": "保持登录会话",
    "Signup items": "注册项",