fix: forget password and sign up router (#1227)

* fix: forget password and sign up router

* fix: link

* fix: jump logic

* fix: signup link

* fix: signup link

* fix: login and signup router

* remove comments

* fix: normal router

* fix: link abstraction

* rename jump component

* fix: session storage

* fix: store signin url

* fix: jumplink props

* fix: simplify link

* fix: path join

* fix: remove unused functions

.github/workflows/build.yml

@@ -125,26 +125,36 @@ jobs:
               
           fi
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          version: latest
+
       - name: Log in to Docker Hub
         uses: docker/login-action@v1
-        if: github.repository == 'casdoor/casdoor' && github.event_name == 'push' &&steps.should_push.outputs.push=='true'
+        if: github.repository == 'casdoor/casdoor' && github.event_name == 'push' && steps.should_push.outputs.push=='true'
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}
 
-
       - name: Push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         if: github.repository == 'casdoor/casdoor' && github.event_name == 'push' && steps.should_push.outputs.push=='true'
         with:
           target: STANDARD
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: casbin/casdoor:${{steps.get-current-tag.outputs.tag }},casbin/casdoor:latest
 
       - name: Push All In One Version to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         if: github.repository == 'casdoor/casdoor' && github.event_name == 'push' && steps.should_push.outputs.push=='true'
         with:
           target: ALLINONE
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: casbin/casdoor-all-in-one:${{steps.get-current-tag.outputs.tag }},casbin/casdoor-all-in-one:latest

.gitignore

@@ -27,3 +27,6 @@ logs/
 files/
 lastupdate.tmp
 commentsRouter*.go
+
+# ignore build result
+casdoor

Dockerfile

@@ -2,7 +2,7 @@ FROM node:16.13.0 AS FRONT
 WORKDIR /web
 COPY ./web .
 RUN yarn config set registry https://registry.npmmirror.com
-RUN yarn install && yarn run build
+RUN yarn install --frozen-lockfile --network-timeout 1000000 && yarn run build
 
 
 FROM golang:1.17.5 AS BACK
@@ -13,16 +13,26 @@ RUN ./build.sh
 
 FROM alpine:latest AS STANDARD
 LABEL MAINTAINER="https://casdoor.org/"
+ARG USER=casdoor
 
 RUN sed -i 's/https/http/' /etc/apk/repositories
+RUN apk add --update sudo
 RUN apk add curl
 RUN apk add ca-certificates && update-ca-certificates
 
+RUN adduser -D $USER -u 1000 \
+    && echo "$USER ALL=(ALL) NOPASSWD: ALL" > /etc/sudoers.d/$USER \
+    && chmod 0440 /etc/sudoers.d/$USER \
+    && mkdir logs \
+    && chown -R $USER:$USER logs
+
+USER 1000
 WORKDIR /
-COPY --from=BACK /go/src/casdoor/server ./server
-COPY --from=BACK /go/src/casdoor/swagger ./swagger
-COPY --from=BACK /go/src/casdoor/conf/app.conf ./conf/app.conf
-COPY --from=FRONT /web/build ./web/build
+COPY --from=BACK --chown=$USER:$USER /go/src/casdoor/server ./server
+COPY --from=BACK --chown=$USER:$USER /go/src/casdoor/swagger ./swagger
+COPY --from=BACK --chown=$USER:$USER /go/src/casdoor/conf/app.conf ./conf/app.conf
+COPY --from=FRONT --chown=$USER:$USER /web/build ./web/build
+
 ENTRYPOINT ["/server"]
 
 

controllers/user.go

@@ -183,6 +183,12 @@ func (c *ApiController) AddUser() {
 		return
 	}
 
+	msg := object.CheckUsername(user.Name)
+	if msg != "" {
+		c.ResponseError(msg)
+		return
+	}
+
 	c.Data["json"] = wrapActionResponse(object.AddUser(&user))
 	c.ServeJSON()
 }

idp/goth.go

@@ -282,7 +282,7 @@ func getUser(gothUser goth.User, provider string) *UserInfo {
 		}
 	}
 	if provider == "steam" {
-		user.Username = user.DisplayName
+		user.Username = user.Id
 		user.Email = ""
 	}
 	return &user

object/adapter.go

@@ -19,11 +19,13 @@ import (
 	"runtime"
 
 	"github.com/beego/beego"
+	xormadapter "github.com/casbin/xorm-adapter/v3"
 	"github.com/casdoor/casdoor/conf"
 	"github.com/casdoor/casdoor/util"
 	_ "github.com/denisenkom/go-mssqldb" // db = mssql
 	_ "github.com/go-sql-driver/mysql"   // db = mysql
 	_ "github.com/lib/pq"                // db = postgres
+	"xorm.io/xorm/migrate"
 	//_ "github.com/mattn/go-sqlite3"    // db = sqlite3
 	"xorm.io/core"
 	"xorm.io/xorm"
@@ -40,6 +42,7 @@ func InitConfig() {
 	beego.BConfig.WebConfig.Session.SessionOn = true
 
 	InitAdapter(true)
+	initMigrations()
 }
 
 func InitAdapter(createDatabase bool) {
@@ -214,6 +217,11 @@ func (a *Adapter) createTable() {
 	if err != nil {
 		panic(err)
 	}
+
+	err = a.Engine.Sync2(new(xormadapter.CasbinRule))
+	if err != nil {
+		panic(err)
+	}
 }
 
 func GetSession(owner string, offset, limit int, field, value, sortField, sortOrder string) *xorm.Session {
@@ -239,3 +247,22 @@ func GetSession(owner string, offset, limit int, field, value, sortField, sortOr
 	}
 	return session
 }
+
+func initMigrations() {
+	migrations := []*migrate.Migration{
+		{
+			ID: "20221015CasbinRule--fill ptype field with p",
+			Migrate: func(tx *xorm.Engine) error {
+				_, err := tx.Cols("ptype").Update(&xormadapter.CasbinRule{
+					Ptype: "p",
+				})
+				return err
+			},
+			Rollback: func(tx *xorm.Engine) error {
+				return tx.DropTables(&xormadapter.CasbinRule{})
+			},
+		},
+	}
+	m := migrate.New(adapter.Engine, migrate.DefaultOptions, migrations)
+	m.Migrate()
+}

object/application.go

@@ -70,6 +70,7 @@ type Application struct {
 	SigninHtml           string   `xorm:"mediumtext" json:"signinHtml"`
 	FormCss              string   `xorm:"text" json:"formCss"`
 	FormOffset           int      `json:"formOffset"`
+	FormSideHtml         string   `xorm:"mediumtext" json:"formSideHtml"`
 	FormBackgroundUrl    string   `xorm:"varchar(200)" json:"formBackgroundUrl"`
 }
 

object/avatar.go

@@ -50,7 +50,7 @@ func downloadFile(url string) (*bytes.Buffer, error) {
 	return fileBuffer, nil
 }
 
-func getPermanentAvatarUrl(organization string, username string, url string) string {
+func getPermanentAvatarUrl(organization string, username string, url string, upload bool) string {
 	if url == "" {
 		return ""
 	}
@@ -62,6 +62,14 @@ func getPermanentAvatarUrl(organization string, username string, url string) str
 	fullFilePath := fmt.Sprintf("/avatar/%s/%s.png", organization, username)
 	uploadedFileUrl, _ := getUploadFileUrl(defaultStorageProvider, fullFilePath, false)
 
+	if upload {
+		DownloadAndUpload(url, fullFilePath)
+	}
+
+	return uploadedFileUrl
+}
+
+func DownloadAndUpload(url string, fullFilePath string) {
 	fileBuffer, err := downloadFile(url)
 	if err != nil {
 		panic(err)
@@ -71,6 +79,4 @@ func getPermanentAvatarUrl(organization string, username string, url string) str
 	if err != nil {
 		panic(err)
 	}
-
-	return uploadedFileUrl
 }

object/avatar_test.go

@@ -32,7 +32,7 @@ func TestSyncPermanentAvatars(t *testing.T) {
 			continue
 		}
 
-		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, true)
 		updateUserColumn("permanent_avatar", user)
 		fmt.Printf("[%d/%d]: Update user: [%s]'s permanent avatar: %s\n", i, len(users), user.GetId(), user.PermanentAvatar)
 	}

object/check.go

@@ -59,6 +59,11 @@ func CheckUserSignup(application *Application, organization *Organization, usern
 		if reWhiteSpace.MatchString(username) {
 			return "username cannot contain white spaces"
 		}
+		msg := CheckUsername(username)
+		if msg != "" {
+			return msg
+		}
+
 		if HasUserByField(organization.Name, "name", username) {
 			return "username already exists"
 		}
@@ -313,3 +318,24 @@ func CheckAccessPermission(userId string, application *Application) (bool, error
 	}
 	return allowed, err
 }
+
+func CheckUsername(username string) string {
+	if username == "" {
+		return "Empty username."
+	} else if len(username) > 39 {
+		return "Username is too long (maximum is 39 characters)."
+	}
+
+	exclude, _ := regexp.Compile("^[\u0021-\u007E]+$")
+	if !exclude.MatchString(username) {
+		return ""
+	}
+
+	// https://stackoverflow.com/questions/58726546/github-username-convention-using-regex
+	re, _ := regexp.Compile("^[a-zA-Z0-9]+((?:-[a-zA-Z0-9]+)|(?:_[a-zA-Z0-9]+))*$")
+	if !re.MatchString(username) {
+		return "The username may only contain alphanumeric characters, underlines or hyphens, cannot have consecutive hyphens or underlines, and cannot begin or end with a hyphen or underline."
+	}
+
+	return ""
+}

object/ldap.go

@@ -409,6 +409,7 @@ func SyncLdapUsers(owner string, users []LdapRespUser, ldapId string) (*[]LdapRe
 				}
 			}
 		}
+
 		if !found && !AddUser(&User{
 			Owner:       owner,
 			Name:        buildLdapUserName(user.Uid, user.UidNumber),

object/syncer_user.go

@@ -120,7 +120,7 @@ func (syncer *Syncer) updateUserForOriginalFields(user *User) (bool, error) {
 	}
 
 	if user.Avatar != oldUser.Avatar && user.Avatar != "" {
-		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, true)
 	}
 
 	columns := syncer.getCasdoorColumns()

object/token.go

@@ -703,7 +703,7 @@ func GetWechatMiniProgramToken(application *Application, code string, host strin
 		}
 		// Add new user
 		var name string
-		if username != "" {
+		if CheckUsername(username) == "" {
 			name = username
 		} else {
 			name = fmt.Sprintf("wechat-%s", openId)

object/user.go

@@ -386,7 +386,7 @@ func UpdateUser(id string, user *User, columns []string, isGlobalAdmin bool) boo
 	user.UpdateUserHash()
 
 	if user.Avatar != oldUser.Avatar && user.Avatar != "" && user.PermanentAvatar != "*" {
-		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, false)
 	}
 
 	if len(columns) == 0 {
@@ -419,7 +419,7 @@ func UpdateUserForAllFields(id string, user *User) bool {
 	user.UpdateUserHash()
 
 	if user.Avatar != oldUser.Avatar && user.Avatar != "" {
-		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, false)
 	}
 
 	affected, err := adapter.Engine.ID(core.PK{owner, name}).AllCols().Update(user)
@@ -449,7 +449,7 @@ func AddUser(user *User) bool {
 	user.UpdateUserHash()
 	user.PreHash = user.Hash
 
-	user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+	user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, false)
 
 	user.Ranking = GetUserCount(user.Owner, "", "") + 1
 
@@ -474,7 +474,7 @@ func AddUsers(users []*User) bool {
 		user.UpdateUserHash()
 		user.PreHash = user.Hash
 
-		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar)
+		user.PermanentAvatar = getPermanentAvatarUrl(user.Owner, user.Name, user.Avatar, true)
 	}
 
 	affected, err := adapter.Engine.Insert(users)

object/verification.go

@@ -159,7 +159,7 @@ func DisableVerificationCode(dest string) {
 	}
 }
 
-// from Casnode/object/validateCode.go line 116
+// From Casnode/object/validateCode.go line 116
 var stdNums = []byte("0123456789")
 
 func getRandomCode(length int) string {

routers/authz_filter.go

@@ -63,11 +63,16 @@ func getObject(ctx *context.Context) (string, string) {
 	if method == http.MethodGet {
 		// query == "?id=built-in/admin"
 		id := ctx.Input.Query("id")
-		if id == "" {
-			return "", ""
+		if id != "" {
+			return util.GetOwnerAndNameFromId(id)
 		}
 
-		return util.GetOwnerAndNameFromId(id)
+		owner := ctx.Input.Query("owner")
+		if owner != "" {
+			return owner, ""
+		}
+
+		return "", ""
 	} else {
 		body := ctx.Input.RequestBody
 

web/package.json

@@ -70,6 +70,7 @@
     "eslint-plugin-react": "^7.31.1",
     "husky": "^4.3.8",
     "lint-staged": "^13.0.3",
+    "path-browserify": "^1.0.1",
     "stylelint": "^14.11.0",
     "stylelint-config-recommended-less": "^1.0.4",
     "stylelint-config-standard": "^28.0.0"

web/src/App.js

@@ -16,8 +16,8 @@ import React, {Component} from "react";
 import "./App.less";
 import {Helmet} from "react-helmet";
 import * as Setting from "./Setting";
-import {DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
-import {Avatar, BackTop, Button, Card, Dropdown, Layout, Menu, Result} from "antd";
+import {BarsOutlined, DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
+import {Avatar, BackTop, Button, Card, Drawer, Dropdown, Layout, Menu, Result} from "antd";
 import {Link, Redirect, Route, Switch, withRouter} from "react-router-dom";
 import OrganizationListPage from "./OrganizationListPage";
 import OrganizationEditPage from "./OrganizationEditPage";
@@ -74,6 +74,7 @@ import ModelEditPage from "./ModelEditPage";
 import SystemInfo from "./SystemInfo";
 import AdapterListPage from "./AdapterListPage";
 import AdapterEditPage from "./AdapterEditPage";
+import {withTranslation} from "react-i18next";
 
 const {Header, Footer} = Layout;
 
@@ -85,6 +86,7 @@ class App extends Component {
       selectedMenuKey: 0,
       account: undefined,
       uri: null,
+      menuVisible: false,
     };
 
     Setting.initServerUrl();
@@ -298,12 +300,12 @@ class App extends Component {
       <Menu onClick={this.handleRightDropdownClick.bind(this)}>
         <Menu.Item key="/account">
           <SettingOutlined />
-          &nbsp;
+          &nbsp;&nbsp;
           {i18next.t("account:My Account")}
         </Menu.Item>
         <Menu.Item key="/logout">
           <LogoutOutlined />
-          &nbsp;
+          &nbsp;&nbsp;
           {i18next.t("account:Logout")}
         </Menu.Item>
       </Menu>
@@ -388,9 +390,6 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
-    }
-
-    if (Setting.isAdminUser(this.state.account)) {
       res.push(
         <Menu.Item key="/roles">
           <Link to="/roles">
@@ -598,6 +597,18 @@ class App extends Component {
     );
   }
 
+  onClose = () => {
+    this.setState({
+      menuVisible: false,
+    });
+  };
+
+  showMenu = () => {
+    this.setState({
+      menuVisible: true,
+    });
+  };
+
   renderContent() {
     if (!Setting.isMobile()) {
       return (
@@ -616,7 +627,7 @@ class App extends Component {
                   // theme="dark"
                   mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
                   selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: "64px", width: "78%", position: "absolute", left: "145px"}}
+                  style={{lineHeight: "64px", position: "absolute", left: "145px", right: "200px"}}
                 >
                   {
                     this.renderMenu()
@@ -649,22 +660,28 @@ class App extends Component {
                 </Link>
               )
             }
-            <Menu
-            // theme="dark"
-              mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
-              selectedKeys={[`${this.state.selectedMenuKey}`]}
-              style={{lineHeight: "64px"}}
-            >
-              {
-                this.renderMenu()
-              }
-              <div style = {{float: "right"}}>
+            <Drawer title={i18next.t("general:Close")} placement="left" visible={this.state.menuVisible} onClose={this.onClose}>
+              <Menu
+                // theme="dark"
+                mode={(Setting.isMobile()) ? "inline" : "horizontal"}
+                selectedKeys={[`${this.state.selectedMenuKey}`]}
+                style={{lineHeight: "64px"}}
+                onClick={this.onClose}
+              >
                 {
-                  this.renderAccount()
+                  this.renderMenu()
                 }
-                <SelectLanguageBox />
-              </div>
-            </Menu>
+              </Menu>
+            </Drawer>
+            <Button icon={<BarsOutlined />} onClick={this.showMenu} type="text">
+              {i18next.t("general:Menu")}
+            </Button>
+            <div style = {{float: "right"}}>
+              {
+                this.renderAccount()
+              }
+              <SelectLanguageBox />
+            </div>
           </Header>
           {
             this.renderRouter()
@@ -782,4 +799,4 @@ class App extends Component {
   }
 }
 
-export default withRouter(App);
+export default withRouter(withTranslation()(App));

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;

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>
     );

web/src/CropperDiv.js

@@ -12,19 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import Cropper from "react-cropper";
 import "cropperjs/dist/cropper.css";
 import * as Setting from "./Setting";
-import {Button, Col, Modal, Row} from "antd";
+import {Button, Col, Modal, Row, Select} from "antd";
 import i18next from "i18next";
 import * as ResourceBackend from "./backend/ResourceBackend";
 
 export const CropperDiv = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [options, setOptions] = useState([]);
   const [image, setImage] = useState("");
   const [cropper, setCropper] = useState();
-  const [visible, setVisible] = React.useState(false);
-  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [visible, setVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
   const {title} = props;
   const {user} = props;
   const {buttonText} = props;
@@ -60,7 +62,7 @@ export const CropperDiv = (props) => {
       ResourceBackend.uploadResource(user.owner, user.name, "avatar", "CropperDiv", fullFilePath, blob)
         .then((res) => {
           if (res.status === "ok") {
-            window.location.href = "/account";
+            window.location.href = window.location.pathname;
           } else {
             Setting.showMessage("error", res.msg);
           }
@@ -88,6 +90,48 @@ export const CropperDiv = (props) => {
     uploadButton.click();
   };
 
+  const getOptions = (data) => {
+    const options = [];
+    if (props.account.organization.defaultAvatar !== null) {
+      options.push({value: props.account.organization.defaultAvatar});
+    }
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].fileType === "image") {
+        const url = `${data[i].url}`;
+        options.push({
+          value: url,
+        });
+      }
+    }
+    return options;
+  };
+
+  const getBase64Image = (src) => {
+    return new Promise((resolve) => {
+      const image = new Image();
+      image.src = src;
+      image.setAttribute("crossOrigin", "anonymous");
+      image.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        const dataURL = canvas.toDataURL("image/png");
+        resolve(dataURL);
+      };
+    });
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    ResourceBackend.getResources(props.account.owner, props.account.name, "", "", "", "", "", "")
+      .then((res) => {
+        setLoading(false);
+        setOptions(getOptions(res));
+      });
+  }, []);
+
   return (
     <div>
       <Button type="default" onClick={showModal}>
@@ -105,10 +149,20 @@ export const CropperDiv = (props) => {
           [<Button block key="submit" type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
         }
       >
-        <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
+        <Col style={{margin: "0px auto 60px auto", width: 1000, height: 350}}>
           <Row style={{width: "100%", marginBottom: "20px"}}>
             <input style={{display: "none"}} ref={input => uploadButton = input} type="file" accept="image/*" onChange={onChange} />
             <Button block onClick={selectFile}>{i18next.t("user:Select a photo...")}</Button>
+            <Select
+              style={{width: "100%"}}
+              loading={loading}
+              placeholder={i18next.t("user:Please select avatar from resources")}
+              onChange={(async value => {
+                setImage(await getBase64Image(value));
+              })}
+              options={options}
+              allowClear={true}
+            />
           </Row>
           <Cropper
             style={{height: "100%"}}

web/src/PermissionListPage.js

@@ -341,7 +341,7 @@ class PermissionListPage extends BaseListPage {
     this.setState({loading: true});
 
     const getPermissions = Setting.isLocalAdminUser(this.props.account) ? PermissionBackend.getPermissions : PermissionBackend.getPermissionsBySubmitter;
-    getPermissions("", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+    getPermissions(Setting.isAdminUser(this.props.account) ? "" : this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {
           this.setState({

web/src/RoleListPage.js

@@ -25,7 +25,7 @@ class RoleListPage extends BaseListPage {
   newRole() {
     const randomName = Setting.getRandomName();
     return {
-      owner: "built-in",
+      owner: this.props.account.owner,
       name: `role_${randomName}`,
       createdTime: moment().format(),
       displayName: `New Role - ${randomName}`,
@@ -211,7 +211,7 @@ class RoleListPage extends BaseListPage {
       value = params.type;
     }
     this.setState({loading: true});
-    RoleBackend.getRoles("", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+    RoleBackend.getRoles(Setting.isAdminUser(this.props.account) ? "" : this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {
           this.setState({

web/src/Setting.js

@@ -22,6 +22,8 @@ import copy from "copy-to-clipboard";
 import {authConfig} from "./auth/Auth";
 import {Helmet} from "react-helmet";
 import * as Conf from "./Conf";
+import {Link} from "react-router-dom";
+import * as path from "path-browserify";
 
 export const ServerUrl = "";
 
@@ -554,7 +556,7 @@ export function changeLanguage(language) {
   localStorage.setItem("language", language);
   changeMomentLanguage(language);
   i18next.changeLanguage(language);
-  window.location.reload(true);
+  // window.location.reload(true);
 }
 
 export function changeMomentLanguage(language) {
@@ -752,49 +754,64 @@ export function goToLogin(ths, application) {
     goToLinkSoft(ths, "/login");
   } else {
     if (application.signinUrl === "") {
-      goToLink(`${application.homepageUrl}/login`);
+      goToLink(path.join(application.homepageUrl, "login"));
     } else {
       goToLink(application.signinUrl);
     }
   }
 }
 
-export function goToSignup(ths, application) {
-  if (application === null) {
-    return;
+function JumpLink({url, children, onClick}) {
+  if (url === null) {
+    return <Link style={{float: "right"}} onClick={onClick} to={""}>{children}</Link>;
   }
-
-  if (!application.enablePassword && window.location.pathname.includes("/login/oauth/authorize")) {
-    const link = window.location.href.replace("/login/oauth/authorize", "/auto-signup/oauth/authorize");
-    goToLink(link);
-    return;
-  }
-
-  if (authConfig.appName === application.name) {
-    goToLinkSoft(ths, "/signup");
+  if (url.startsWith("/")) {
+    return <Link to={url} style={{float: "right"}} onClick={onClick}>{children}</Link>;
+  } else if (url.startsWith("http")) {
+    return <a href={url} target="_blank" rel="noopener noreferrer" style={{float: "right"}} onClick={onClick}>{children}</a>;
   } else {
-    if (application.signupUrl === "") {
-      goToLinkSoft(ths, `/signup/${application.name}`);
-    } else {
-      goToLink(application.signupUrl);
-    }
+    return <Link style={{float: "right"}} onClick={onClick} to={""}>{children}</Link>;
   }
 }
 
-export function goToForget(ths, application) {
-  if (application === null) {
-    return;
-  }
+function storeSigninUrl() {
+  sessionStorage.setItem("signinUrl", window.location.href);
+}
 
-  if (authConfig.appName === application.name) {
-    goToLinkSoft(ths, "/forget");
+export function renderSignupLink(application, text) {
+  let link;
+
+  if (application === null) {
+    link = null;
+  } else if (!application.enablePassword && window.location.pathname.includes("/login/oauth/authorize")) {
+    link = window.location.href.replace("/login/oauth/authorize", "/auto-signup/oauth/authorize");
+  } else if (authConfig.appName === application.name) {
+    link = "/signup";
   } else {
-    if (application.forgetUrl === "") {
-      goToLinkSoft(ths, `/forget/${application.name}`);
+    if (application.signupUrl === "") {
+      link = `/signup/${application.name}`;
     } else {
-      goToLink(application.forgetUrl);
+      link = application.signupUrl;
     }
   }
+
+  return <JumpLink url={link} onClick={storeSigninUrl}>{text}</JumpLink>;
+}
+
+export function renderForgetLink(application, text) {
+  let link;
+  if (application === null) {
+    link = null;
+  } else if (authConfig.appName === application.name) {
+    link = "/forget";
+  } else {
+    if (application.forgetUrl === "") {
+      link = `/forget/${application.name}`;
+    } else {
+      link = application.forgetUrl;
+    }
+  }
+  return <JumpLink url={link}>{text}</JumpLink>;
 }
 
 export function renderHelmet(application) {

web/src/UserEditPage.js

@@ -17,7 +17,6 @@ import {Button, Card, Col, Input, Result, Row, Select, Spin, Switch} from "antd"
 import * as UserBackend from "./backend/UserBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
-import {LinkOutlined} from "@ant-design/icons";
 import i18next from "i18next";
 import CropperDiv from "./CropperDiv.js";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
@@ -232,16 +231,6 @@ class UserEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Avatar"), i18next.t("general:Avatar - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {i18next.t("general:URL")}:
-              </Col>
-              <Col span={22} >
-                <Input prefix={<LinkOutlined />} value={this.state.user.avatar} onChange={e => {
-                  this.updateUserField("avatar", e.target.value);
-                }} />
-              </Col>
-            </Row>
             <Row style={{marginTop: "20px"}} >
               <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                 {i18next.t("general:Preview")}:
@@ -661,7 +650,7 @@ class UserEditPage extends React.Component {
     return (
       <div>
         {
-          this.state.loading ? <Spin size="large" /> : (
+          this.state.loading ? <Spin size="large" style={{marginLeft: "50%", marginTop: "10%"}} /> : (
             this.state.user !== null ? this.renderUser() :
               <Result
                 status="404"

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>
     );
   }
 }

web/src/auth/LoginPage.js

@@ -29,6 +29,7 @@ import i18next from "i18next";
 import CustomGithubCorner from "../CustomGithubCorner";
 import {CountDownInput} from "../common/CountDownInput";
 import SelectLanguageBox from "../SelectLanguageBox";
+import {withTranslation} from "react-i18next";
 
 const {TabPane} = Tabs;
 
@@ -138,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 !== "") {
@@ -155,8 +168,8 @@ class LoginPage extends React.Component {
       values["type"] = "saml";
     }
 
-    if (this.state.owner !== null && this.state.owner !== undefined) {
-      values["organization"] = this.state.owner;
+    if (this.state.application.organization !== null && this.state.application.organization !== undefined) {
+      values["organization"] = this.state.application.organization;
     }
   }
   postCodeLoginAction(res) {
@@ -392,11 +405,9 @@ class LoginPage extends React.Component {
                 {i18next.t("login:Auto sign in")}
               </Checkbox>
             </Form.Item>
-            <a style={{float: "right"}} onClick={() => {
-              Setting.goToForget(this, application);
-            }}>
-              {i18next.t("login:Forgot password?")}
-            </a>
+            {
+              Setting.renderForgetLink(application, i18next.t("login:Forgot password?"))
+            }
           </Form.Item>
           <Form.Item>
             <Button
@@ -472,12 +483,9 @@ class LoginPage extends React.Component {
               !application.enableSignUp ? null : (
                 <>
                   {i18next.t("login:No account?")}&nbsp;
-                  <a onClick={() => {
-                    sessionStorage.setItem("signinUrl", window.location.href);
-                    Setting.goToSignup(this, application);
-                  }}>
-                    {i18next.t("login:sign up now")}
-                  </a>
+                  {
+                    Setting.renderSignupLink(application, i18next.t("login:sign up now"))
+                  }
                 </>
               )
             }
@@ -694,16 +702,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)
@@ -723,11 +733,11 @@ class LoginPage extends React.Component {
                 </div>
               </div>
             </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
       </div>
     );
   }
 }
 
-export default LoginPage;
+export default withTranslation()(LoginPage);

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()
         }

web/src/basic/SingleCard.js

@@ -44,10 +44,11 @@ class SingleCard extends React.Component {
 
     return (
       <Card.Grid style={gridStyle} onClick={() => Setting.goToLinkSoft(this, silentSigninLink)}>
-        <img src={logo} alt="logo" height={60} style={{marginBottom: "20px"}} />
+        <img src={logo} alt="logo" width={"100%"} style={{marginBottom: "20px"}} />
         <Meta
           title={title}
           description={desc}
+          style={{justifyContent: "center"}}
         />
       </Card.Grid>
     );
@@ -61,7 +62,7 @@ class SingleCard extends React.Component {
         <Card
           hoverable
           cover={
-            <img alt="logo" src={logo} style={{width: "100%", height: "210px", objectFit: "scale-down"}} />
+            <img alt="logo" src={logo} style={{width: "100%", objectFit: "scale-down"}} />
           }
           onClick={() => Setting.goToLinkSoft(this, silentSigninLink)}
           style={isSingle ? {width: "320px"} : {width: "100%"}}

web/src/i18n.js

@@ -23,6 +23,7 @@ import ja from "./locales/ja/data.json";
 import es from "./locales/es/data.json";
 import * as Conf from "./Conf";
 import * as Setting from "./Setting";
+import {initReactI18next} from "react-i18next";
 
 const resources = {
   en: en,
@@ -80,7 +81,7 @@ function initLanguage() {
   return language;
 }
 
-i18n.init({
+i18n.use(initReactI18next).init({
   lng: initLanguage(),
 
   resources: resources,

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",
@@ -133,6 +140,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client-IP",
+    "Close": "Close",
     "Created time": "Erstellte Zeit",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Master-Passwort",
     "Master password - Tooltip": "Masterpasswort - Tooltip",
+    "Menu": "Menu",
     "Method": "Methode",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

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",
@@ -133,6 +140,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client IP",
+    "Close": "Close",
     "Created time": "Created time",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "Logo - Tooltip",
     "Master password": "Master password",
     "Master password - Tooltip": "Master password - Tooltip",
+    "Menu": "Menu",
     "Method": "Method",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

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",
@@ -133,6 +140,7 @@
     "Certs": "Certes",
     "Click to Upload": "Click to Upload",
     "Client IP": "IP du client",
+    "Close": "Close",
     "Created time": "Date de création",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Mot de passe maître",
     "Master password - Tooltip": "Mot de passe maître - Infobulle",
+    "Menu": "Menu",
     "Method": "Méthode",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

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": "アイテムの登録",
@@ -133,6 +140,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "クライアント IP",
+    "Close": "Close",
     "Created time": "作成日時",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "マスターパスワード",
     "Master password - Tooltip": "マスターパスワード - ツールチップ",
+    "Menu": "Menu",
     "Method": "方法",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

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",
@@ -133,6 +140,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client IP",
+    "Close": "Close",
     "Created time": "Created time",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Master password",
     "Master password - Tooltip": "Master password - Tooltip",
+    "Menu": "Menu",
     "Method": "Method",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

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": "Элементы регистрации",
@@ -133,6 +140,7 @@
     "Certs": "Сертификаты",
     "Click to Upload": "Нажмите здесь, чтобы загрузить",
     "Client IP": "IP клиента",
+    "Close": "Close",
     "Created time": "Время создания",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Мастер-пароль",
     "Master password - Tooltip": "Мастер-пароль - Tooltip",
+    "Menu": "Menu",
     "Method": "Метод",
     "Model": "Модель",
     "Model - Tooltip": "Модель - Подсказка",

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": "注册项",
@@ -133,6 +140,7 @@
     "Certs": "证书",
     "Click to Upload": "点击上传",
     "Client IP": "客户端IP",
+    "Close": "关闭",
     "Created time": "创建时间",
     "Default application": "默认应用",
     "Default application - Tooltip": "默认应用",
@@ -165,6 +173,7 @@
     "Logo - Tooltip": "应用程序向外展示的图标",
     "Master password": "万能密码",
     "Master password - Tooltip": "可用来登录该组织下的所有用户，方便管理员以该用户身份登录，以解决技术问题",
+    "Menu": "目录",
     "Method": "方法",
     "Model": "模型",
     "Model - Tooltip": "Casbin模型",

web/yarn.lock

@@ -7918,6 +7918,11 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"