feat: allow non-ASCII characters in username (#1235)

Signed-off-by: abingcbc <abingcbc626@gmail.com>

Signed-off-by: abingcbc <abingcbc626@gmail.com>

.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 --chown=$USER:$USER /go/src/casdoor/server ./server
-COPY --from=BACK /go/src/casdoor/swagger ./swagger
+COPY --from=BACK --chown=$USER:$USER /go/src/casdoor/swagger ./swagger
-COPY --from=BACK /go/src/casdoor/conf/app.conf ./conf/app.conf
+COPY --from=BACK --chown=$USER:$USER /go/src/casdoor/conf/app.conf ./conf/app.conf
-COPY --from=FRONT /web/build ./web/build
+COPY --from=FRONT --chown=$USER:$USER /web/build ./web/build
+
 ENTRYPOINT ["/server"]
 
 

README.md

@@ -51,7 +51,7 @@
 ## Documentation
 
 - International: https://casdoor.org
-- Asian mirror: https://docs.casdoor.cn
+- Asian mirror: https://casdoor.cn
 
 ## Install
 
@@ -69,7 +69,7 @@ https://casdoor.org/docs/how-to-connect/overview
 
 ## Integrations
 
-https://casdoor.org/docs/integration/apisix
+https://casdoor.org/docs/category/integrations
 
 ## How to contact?
 

SECURITY.md

@@ -0,0 +1,9 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+We are grateful for security researchers and users reporting a vulnerability to us first. To ensure that your request is handled in a timely manner and we can keep users safe, please follow the below guidelines.
+
+- **Please do not report security vulnerabilities directly on GitHub.**
+
+- To report a vulnerability, please email [admin@casdoor.org](admin@casdoor.org).

authz/authz.go

@@ -15,12 +15,14 @@
 package authz
 
 import (
+	"fmt"
 	"strings"
 
 	"github.com/casbin/casbin/v2"
 	"github.com/casbin/casbin/v2/model"
 	xormadapter "github.com/casbin/xorm-adapter/v3"
 	"github.com/casdoor/casdoor/conf"
+	"github.com/casdoor/casdoor/object"
 	stringadapter "github.com/qiangmzsx/string-adapter/v2"
 )
 
@@ -138,6 +140,12 @@ func IsAllowed(subOwner string, subName string, method string, urlPath string, o
 		}
 	}
 
+	userId := fmt.Sprintf("%s/%s", subOwner, subName)
+	user := object.GetUser(userId)
+	if user != nil && user.IsAdmin && subOwner == objOwner {
+		return true
+	}
+
 	res, err := Enforcer.Enforce(subOwner, subName, method, urlPath, objOwner, objName)
 	if err != nil {
 		panic(err)

controllers/organization.go

@@ -133,11 +133,12 @@ func (c *ApiController) GetDefaultApplication() {
 	userId := c.GetSessionUsername()
 	id := c.Input().Get("id")
 
-	application := object.GetMaskedApplication(object.GetDefaultApplication(id), userId)
+	application, err := object.GetDefaultApplication(id)
-	if application == nil {
+	if err != nil {
-		c.ResponseError("Please set a default application for this organization")
+		c.ResponseError(err.Error())
 		return
 	}
 
-	c.ResponseOk(application)
+	maskedApplication := object.GetMaskedApplication(application, userId)
+	c.ResponseOk(maskedApplication)
 }

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

controllers/webauthn.go

@@ -16,6 +16,7 @@ package controllers
 
 import (
 	"bytes"
+	"fmt"
 	"io"
 
 	"github.com/casdoor/casdoor/object"
@@ -100,7 +101,7 @@ func (c *ApiController) WebAuthnSigninBegin() {
 	userName := c.Input().Get("name")
 	user := object.GetUserByFields(userOwner, userName)
 	if user == nil {
-		c.ResponseError("Please Giveout Owner and Username.")
+		c.ResponseError(fmt.Sprintf("The user: %s/%s doesn't exist", userOwner, userName))
 		return
 	}
 	options, sessionData, err := webauthnObj.BeginLogin(user)
@@ -121,6 +122,7 @@ func (c *ApiController) WebAuthnSigninBegin() {
 // @Success 200 {object} Response "The Response object"
 // @router /webauthn/signin/finish [post]
 func (c *ApiController) WebAuthnSigninFinish() {
+	responseType := c.Input().Get("responseType")
 	webauthnObj := object.GetWebAuthnObject(c.Ctx.Request.Host)
 	sessionObj := c.GetSession("authentication")
 	sessionData, ok := sessionObj.(webauthn.SessionData)
@@ -138,5 +140,11 @@ func (c *ApiController) WebAuthnSigninFinish() {
 	}
 	c.SetSessionUsername(userId)
 	util.LogInfo(c.Ctx, "API: [%s] signed in", userId)
-	c.ResponseOk(userId)
+
+	application := object.GetApplicationByUser(user)
+	var form RequestForm
+	form.Type = responseType
+	resp := c.HandleLoggedIn(application, user, &form)
+	c.Data["json"] = resp
+	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/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/organization.go

@@ -218,14 +218,14 @@ func CheckAccountItemModifyRule(accountItem *AccountItem, user *User) (bool, str
 	return true, ""
 }
 
-func GetDefaultApplication(id string) *Application {
+func GetDefaultApplication(id string) (*Application, error) {
 	organization := GetOrganization(id)
 	if organization == nil {
-		return nil
+		return nil, fmt.Errorf("The organization: %s does not exist", id)
 	}
 
 	if organization.DefaultApplication != "" {
-		return getApplication("admin", organization.DefaultApplication)
+		return getApplication("admin", organization.DefaultApplication), fmt.Errorf("The default application: %s does not exist", organization.DefaultApplication)
 	}
 
 	applications := []*Application{}
@@ -235,7 +235,7 @@ func GetDefaultApplication(id string) *Application {
 	}
 
 	if len(applications) == 0 {
-		return nil
+		return nil, fmt.Errorf("The application does not exist")
 	}
 
 	defaultApplication := applications[0]
@@ -249,5 +249,5 @@ func GetDefaultApplication(id string) *Application {
 	extendApplicationWithProviders(defaultApplication)
 	extendApplicationWithOrg(defaultApplication)
 
-	return defaultApplication
+	return defaultApplication, nil
 }

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 == "" {
+		if id != "" {
-			return "", ""
+			return util.GetOwnerAndNameFromId(id)
 		}
 
-		return util.GetOwnerAndNameFromId(id)
+		owner := ctx.Input.Query("owner")
+		if owner != "" {
+			return owner, ""
+		}
+
+		return "", ""
 	} else {
 		body := ctx.Input.RequestBody
 

web/craco.config.js

@@ -43,7 +43,7 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: {"@primary-color": "rgb(45,120,213)"},
+            modifyVars: {"@primary-color": "rgb(89,54,213)", "@border-radius-base": "5px"},
             javascriptEnabled: true,
           },
         },

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 {BarsOutlined, DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
-import {Avatar, BackTop, Button, Card, Dropdown, Layout, Menu, Result} from "antd";
+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>
@@ -378,6 +380,9 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+    }
+
+    if (Setting.isLocalAdminUser(this.state.account)) {
       res.push(
         <Menu.Item key="/users">
           <Link to="/users">
@@ -592,6 +597,18 @@ class App extends Component {
     );
   }
 
+  onClose = () => {
+    this.setState({
+      menuVisible: false,
+    });
+  };
+
+  showMenu = () => {
+    this.setState({
+      menuVisible: true,
+    });
+  };
+
   renderContent() {
     if (!Setting.isMobile()) {
       return (
@@ -610,7 +627,7 @@ class App extends Component {
                   // theme="dark"
                   mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
                   selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: "64px", width: "80%", position: "absolute", left: "145px"}}
+                  style={{lineHeight: "64px", position: "absolute", left: "145px", right: "200px"}}
                 >
                   {
                     this.renderMenu()
@@ -643,22 +660,28 @@ class App extends Component {
                 </Link>
               )
             }
-            <Menu
+            <Drawer title={i18next.t("general:Close")} placement="left" visible={this.state.menuVisible} onClose={this.onClose}>
-            // theme="dark"
+              <Menu
-              mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+                // theme="dark"
-              selectedKeys={[`${this.state.selectedMenuKey}`]}
+                mode={(Setting.isMobile()) ? "inline" : "horizontal"}
-              style={{lineHeight: "64px"}}
+                selectedKeys={[`${this.state.selectedMenuKey}`]}
-            >
+                style={{lineHeight: "64px"}}
-              {
+                onClick={this.onClose}
-                this.renderMenu()
+              >
-              }
-              <div style = {{float: "right"}}>
                 {
-                  this.renderAccount()
+                  this.renderMenu()
                 }
-                <SelectLanguageBox />
+              </Menu>
-              </div>
+            </Drawer>
-            </Menu>
+            <Button icon={<BarsOutlined />} onClick={this.showMenu} type="text">
+              {i18next.t("general:Menu")}
+            </Button>
+            <div style = {{float: "right"}}>
+              {
+                this.renderAccount()
+              }
+              <SelectLanguageBox />
+            </div>
           </Header>
           {
             this.renderRouter()
@@ -682,7 +705,7 @@ class App extends Component {
             textAlign: "center",
           }
         }>
-          Made with <span style={{color: "rgb(255, 255, 255)"}}>❤️</span> by <a style={{fontWeight: "bold", color: "black"}} target="_blank" href="https://casdoor.org" rel="noreferrer">Casdoor</a>
+          Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={`${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`} /></a>
         </Footer>
       </>
     );
@@ -776,4 +799,4 @@ class App extends Component {
   }
 }
 
-export default withRouter(App);
+export default withRouter(withTranslation()(App));

web/src/App.less

@@ -28,7 +28,7 @@
   color: #61dafb;
 }
 
-#root{
+#root {
   height: 100%;
 }
 
@@ -59,11 +59,18 @@
   height: 70px; /* Footer height */
 }
 
-.language_box {
+#language-box-corner {
+  position: absolute;
+  top: 75px;
+  right: 0;
+}
+
+.language-box {
   background: url("@{StaticBaseUrl}/img/muti_language.svg");
   background-size: 25px, 25px;
   background-position: center;
   background-repeat: no-repeat;
+  border-radius: 5px;
   width: 45px;
   height: 65px;
   float: right;
@@ -87,9 +94,19 @@
   align-items: stretch;
 }
 
+.login-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+}
+
 .loginBackground {
   height: 100%;
-  background: #ffffff no-repeat;
+  background: #fff no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;
 }

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 [visible, setVisible] = useState(false);
-  const [confirmLoading, setConfirmLoading] = React.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/PermissionEditPage.js

@@ -35,6 +35,7 @@ class PermissionEditPage extends React.Component {
       permissionName: props.match.params.permissionName,
       permission: null,
       organizations: [],
+      model: null,
       users: [],
       roles: [],
       models: [],
@@ -59,6 +60,7 @@ class PermissionEditPage extends React.Component {
         this.getRoles(permission.owner);
         this.getModels(permission.owner);
         this.getResources(permission.owner);
+        this.getModel(permission.owner, permission.model);
       });
   }
 
@@ -98,6 +100,15 @@ class PermissionEditPage extends React.Component {
       });
   }
 
+  getModel(organizationName, modelName) {
+    ModelBackend.getModel(organizationName, modelName)
+      .then((res) => {
+        this.setState({
+          model: res,
+        });
+      });
+  }
+
   getResources(organizationName) {
     ApplicationBackend.getApplicationsByOrganization("admin", organizationName)
       .then((res) => {
@@ -115,6 +126,10 @@ class PermissionEditPage extends React.Component {
   }
 
   updatePermissionField(key, value) {
+    if (key === "model") {
+      this.getModel(this.state.permission.owner, value);
+    }
+
     value = this.parsePermissionField(key, value);
 
     const permission = this.state.permission;
@@ -124,6 +139,13 @@ class PermissionEditPage extends React.Component {
     });
   }
 
+  hasRoleDefinition(model) {
+    if (model !== null) {
+      return model.modelText.includes("role_definition");
+    }
+    return false;
+  }
+
   renderPermission() {
     return (
       <Card size="small" title={
@@ -214,7 +236,7 @@ class PermissionEditPage extends React.Component {
             {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.roles} onChange={(value => {this.updatePermissionField("roles", value);})}>
+            <Select virtual={false} disabled={!this.hasRoleDefinition(this.state.model)} mode="tags" style={{width: "100%"}} value={this.state.permission.roles} onChange={(value => {this.updatePermissionField("roles", value);})}>
               {
                 this.state.roles.filter(roles => (roles.owner !== this.state.roles.owner || roles.name !== this.state.roles.name)).map((permission, index) => <Option key={index} value={`${permission.owner}/${permission.name}`}>{`${permission.owner}/${permission.name}`}</Option>)
               }

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/SelectLanguageBox.js

@@ -37,8 +37,8 @@ class SelectLanguageBox extends React.Component {
         Setting.changeLanguage(e.key);
       }}>
         <Menu.Item key="en" icon={flagIcon("US", "English")}>English</Menu.Item>
-        <Menu.Item key="es" icon={flagIcon("ES", "Español")}>Español</Menu.Item>
         <Menu.Item key="zh" icon={flagIcon("CN", "简体中文")}>简体中文</Menu.Item>
+        <Menu.Item key="es" icon={flagIcon("ES", "Español")}>Español</Menu.Item>
         <Menu.Item key="fr" icon={flagIcon("FR", "Français")}>Français</Menu.Item>
         <Menu.Item key="de" icon={flagIcon("DE", "Deutsch")}>Deutsch</Menu.Item>
         <Menu.Item key="ja" icon={flagIcon("JP", "日本語")}>日本語</Menu.Item>
@@ -49,7 +49,7 @@ class SelectLanguageBox extends React.Component {
 
     return (
       <Dropdown overlay={menu} >
-        <div className="language_box" />
+        <div className="language-box" id={this.props.id} style={this.props.style} />
       </Dropdown>
     );
   }

web/src/Setting.js

@@ -554,7 +554,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) {

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/UserListPage.js

@@ -374,7 +374,7 @@ class UserListPage extends BaseListPage {
     const sortField = params.sortField, sortOrder = params.sortOrder;
     this.setState({loading: true});
     if (this.state.organizationName === undefined) {
-      UserBackend.getGlobalUsers(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      (Setting.isAdminUser(this.props.account) ? UserBackend.getGlobalUsers(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder) : UserBackend.getUsers(this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder))
         .then((res) => {
           if (res.status === "ok") {
             this.setState({

web/src/WebauthnCredentialTable.js

@@ -19,40 +19,6 @@ import * as UserWebauthnBackend from "./backend/UserWebauthnBackend";
 import * as Setting from "./Setting";
 
 class WebAuthnCredentialTable extends React.Component {
-  render() {
-    const columns = [
-      {
-        title: i18next.t("user:WebAuthn credentials"),
-        dataIndex: "ID",
-        key: "ID",
-      },
-      {
-        title: i18next.t("general:Action"),
-        key: "action",
-        render: (text, record, index) => {
-          return (
-            <Button style={{marginTop: "5px", marginBottom: "5px", marginRight: "5px"}} type="danger" onClick={() => {this.deleteRow(this.props.table, index);}}>
-              {i18next.t("general:Delete")}
-            </Button>
-          );
-        },
-      },
-    ];
-
-    return (
-      <Table scroll={{x: "max-content"}} rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
-        title={() => (
-          <div>
-            {i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button disabled={!this.props.isSelf} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn();}}>
-              {i18next.t("general:Add")}
-            </Button>
-          </div>
-        )}
-      />
-    );
-  }
-
   deleteRow(table, i) {
     table = Setting.deleteRow(table, i);
     this.props.updateTable(table);
@@ -71,6 +37,41 @@ class WebAuthnCredentialTable extends React.Component {
       Setting.showMessage("error", `Failed to connect to server: ${error}`);
     });
   }
+
+  render() {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "ID",
+        key: "ID",
+      },
+      {
+        title: i18next.t("general:Action"),
+        key: "action",
+        width: "170px",
+        render: (text, record, index) => {
+          return (
+            <Button style={{marginTop: "5px", marginBottom: "5px", marginRight: "5px"}} type="danger" onClick={() => {this.deleteRow(this.props.table, index);}}>
+              {i18next.t("general:Delete")}
+            </Button>
+          );
+        },
+      },
+    ];
+
+    return (
+      <Table rowKey={"ID"} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
+        title={() => (
+          <div>
+            {i18next.t("user:WebAuthn credentials")}&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button disabled={!this.props.isSelf} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => {this.registerWebAuthn();}}>
+              {i18next.t("general:Add")}
+            </Button>
+          </div>
+        )}
+      />
+    );
+  }
 }
 
 export default WebAuthnCredentialTable;

web/src/auth/AuthBackend.js

@@ -37,7 +37,7 @@ export function getEmailAndPhone(values) {
   }).then((res) => res.json());
 }
 
-function oAuthParamsToQuery(oAuthParams) {
+export function oAuthParamsToQuery(oAuthParams) {
   // login
   if (oAuthParams === null) {
     return "";

web/src/auth/LoginPage.js

@@ -28,6 +28,8 @@ import SelfLoginButton from "./SelfLoginButton";
 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;
 
@@ -41,7 +43,6 @@ class LoginPage extends React.Component {
       owner: props.owner !== undefined ? props.owner : (props.match === undefined ? null : props.match.params.owner),
       application: null,
       mode: props.mode !== undefined ? props.mode : (props.match === undefined ? null : props.match.params.mode), // "signup" or "signin"
-      isCodeSignin: false,
       msg: null,
       username: null,
       validEmailOrPhone: false,
@@ -155,8 +156,8 @@ class LoginPage extends React.Component {
       values["type"] = "saml";
     }
 
-    if (this.state.owner !== null && this.state.owner !== undefined) {
+    if (this.state.application.organization !== null && this.state.application.organization !== undefined) {
-      values["organization"] = this.state.owner;
+      values["organization"] = this.state.application.organization;
     }
   }
   postCodeLoginAction(res) {
@@ -349,7 +350,7 @@ class LoginPage extends React.Component {
                   },
                   {
                     validator: (_, value) => {
-                      if (this.state.isCodeSignin) {
+                      if (this.state.loginMethod === "verificationCode") {
                         if (this.state.email !== "" && !Setting.isValidEmail(this.state.username) && !Setting.isValidPhone(this.state.username)) {
                           this.setState({validEmailOrPhone: false});
                           return Promise.reject(i18next.t("login:The input is not valid Email or Phone!"));
@@ -372,7 +373,7 @@ class LoginPage extends React.Component {
                 <Input
                   id = "input"
                   prefix={<UserOutlined className="site-form-item-icon" />}
-                  placeholder={this.state.isCodeSignin ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
+                  placeholder={(this.state.loginMethod === "verificationCode") ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
                   disabled={!application.enablePassword}
                   onChange={e => {
                     this.setState({
@@ -399,29 +400,17 @@ class LoginPage extends React.Component {
             </a>
           </Form.Item>
           <Form.Item>
-            {
+            <Button
-              this.state.loginMethod === "password" ?
+              type="primary"
-                (
+              htmlType="submit"
-                  <Button
+              style={{width: "100%", marginBottom: "5px"}}
-                    type="primary"
+              disabled={!application.enablePassword}
-                    htmlType="submit"
+            >
-                    style={{width: "100%", marginBottom: "5px"}}
+              {
-                    disabled={!application.enablePassword}
+                this.state.loginMethod === "webAuthn" ? i18next.t("login:Sign in with WebAuthn") :
-                  >
+                  i18next.t("login:Sign In")
-                    {i18next.t("login:Sign In")}
+              }
-                  </Button>
+            </Button>
-                ) :
-                (
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    style={{width: "100%", marginBottom: "5px"}}
-                    disabled={!application.enablePassword}
-                  >
-                    {i18next.t("login:Sign in with WebAuthn")}
-                  </Button>
-                )
-            }
             {
               this.renderFooter(application)
             }
@@ -479,19 +468,6 @@ class LoginPage extends React.Component {
     } else {
       return (
         <React.Fragment>
-          <span style={{float: "left"}}>
-            {
-              !application.enableCodeSignin ? null : (
-                <a onClick={() => {
-                  this.setState({
-                    isCodeSignin: !this.state.isCodeSignin,
-                  });
-                }}>
-                  {this.state.isCodeSignin ? i18next.t("login:Sign in with password") : i18next.t("login:Sign in with code")}
-                </a>
-              )
-            }
-          </span>
           <span style={{float: "right"}}>
             {
               !application.enableSignUp ? null : (
@@ -599,7 +575,7 @@ class LoginPage extends React.Component {
         const rawId = assertion.rawId;
         const sig = assertion.response.signature;
         const userHandle = assertion.response.userHandle;
-        return fetch(`${Setting.ServerUrl}/api/webauthn/signin/finish`, {
+        return fetch(`${Setting.ServerUrl}/api/webauthn/signin/finish${AuthBackend.oAuthParamsToQuery(oAuthParams)}`, {
           method: "POST",
           credentials: "include",
           body: JSON.stringify({
@@ -639,7 +615,23 @@ class LoginPage extends React.Component {
   renderPasswordOrCodeInput() {
     const application = this.getApplicationObj();
     if (this.state.loginMethod === "password") {
-      return this.state.isCodeSignin ? (
+      return (
+        <Col span={24}>
+          <Form.Item
+            name="password"
+            rules={[{required: true, message: i18next.t("login:Please input your password!")}]}
+          >
+            <Input.Password
+              prefix={<LockOutlined className="site-form-item-icon" />}
+              type="password"
+              placeholder={i18next.t("login:Password")}
+              disabled={!application.enablePassword}
+            />
+          </Form.Item>
+        </Col>
+      );
+    } else if (this.state.loginMethod === "verificationCode") {
+      return (
         <Col span={24}>
           <Form.Item
             name="code"
@@ -652,32 +644,29 @@ class LoginPage extends React.Component {
             />
           </Form.Item>
         </Col>
-      ) : (
-        <Col span={24}>
-          <Form.Item
-            name="password"
-            rules={[{required: true, message: i18next.t("login:Please input your password!")}]}
-          >
-            <Input
-              prefix={<LockOutlined className="site-form-item-icon" />}
-              type="password"
-              placeholder={i18next.t("login:Password")}
-              disabled={!application.enablePassword}
-            />
-          </Form.Item>
-        </Col>
       );
+    } else {
+      return null;
     }
   }
 
   renderMethodChoiceBox() {
     const application = this.getApplicationObj();
-    if (application.enableWebAuthn) {
+    if (application.enableCodeSignin || application.enableWebAuthn) {
       return (
         <div>
-          <Tabs defaultActiveKey="password" onChange={(key) => {this.setState({loginMethod: key});}} centered>
+          <Tabs size={"small"} defaultActiveKey="password" onChange={(key) => {this.setState({loginMethod: key});}} centered>
             <TabPane tab={i18next.t("login:Password")} key="password" />
-            <TabPane tab={"WebAuthn"} key="webAuthn" />
+            {
+              !application.enableCodeSignin ? null : (
+                <TabPane tab={i18next.t("login:Verification Code")} key="verificationCode" />
+              )
+            }
+            {
+              !application.enableWebAuthn ? null : (
+                <TabPane tab={i18next.t("login:WebAuthn")} key="webAuthn" />
+              )
+            }
           </Tabs>
         </div>
       );
@@ -711,27 +700,29 @@ class LoginPage extends React.Component {
     return (
       <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <Row >
+        <Row>
           <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() || Setting.isMobile() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
-            <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
+            <div className="login-content">
-              <div>
+              <div style={{marginTop: "80px", marginBottom: "50px", textAlign: "center", ...formStyle}}>
-                {
+                <SelectLanguageBox id="language-box-corner" style={{top: formStyle !== null ? "80px" : "45px", right: formStyle !== null ? "5px" : "-45px"}} />
-                  Setting.renderHelmet(application)
+                <div>
-                }
+                  {
-                {
+                    Setting.renderHelmet(application)
-                  Setting.renderLogo(application)
+                  }
-                }
+                  {
-                {/* {*/}
+                    Setting.renderLogo(application)
-                {/*  this.state.clientId !== null ? "Redirect" : null*/}
+                  }
-                {/* }*/}
+                  {/* {*/}
-                {
+                  {/*  this.state.clientId !== null ? "Redirect" : null*/}
-                  this.renderSignedInBox()
+                  {/* }*/}
-                }
+                  {
-                {
+                    this.renderSignedInBox()
-                  this.renderForm(application)
+                  }
-                }
+                  {
+                    this.renderForm(application)
+                  }
+                </div>
               </div>
-
             </div>
           </Col>
         </Row>
@@ -740,4 +731,4 @@ class LoginPage extends React.Component {
   }
 }
 
-export default LoginPage;
+export default withTranslation()(LoginPage);

web/src/auth/ProviderButton.js

@@ -129,6 +129,32 @@ export function renderProviderLogo(provider, application, width, margin, size, l
       );
     }
 
+  } else if (provider.type === "Custom") {
+    // style definition
+    const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.displayName);
+    const customAStyle = {display: "block", height: "55px", color: "#000"};
+    const customButtonStyle = {display: "flex", alignItems: "center", width: "calc(100% - 10px)", height: "50px", margin: "5px", padding: "0 10px", backgroundColor: "transparent", boxShadow: "0px 1px 3px rgba(0,0,0,0.5)", border: "0px", borderRadius: "3px", cursor: "pointer"};
+    const customImgStyle = {justfyContent: "space-between"};
+    const customSpanStyle = {textAlign: "center", lineHeight: "50px", width: "100%", fontSize: "19px"};
+    if (provider.category === "OAuth") {
+      return (
+        <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")} style={customAStyle}>
+          <button style={customButtonStyle}>
+            <img width={26} src={getProviderLogoURL(provider)} alt={provider.displayName} style={customImgStyle} />
+            <span style={customSpanStyle}>{text}</span>
+          </button>
+        </a>
+      );
+    } else if (provider.category === "SAML") {
+      return (
+        <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)} style={customAStyle}>
+          <button style={customButtonStyle}>
+            <img width={26} src={getProviderLogoURL(provider)} alt={provider.displayName} style={customImgStyle} />
+            <span style={customSpanStyle}>{text}</span>
+          </button>
+        </a>
+      );
+    }
   } else {
     return (
       <div key={provider.displayName} style={{marginBottom: "10px"}}>

web/src/auth/SignupPage.js

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

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/common/CaptchaPreview.js

@@ -87,7 +87,7 @@ export const CaptchaPreview = ({
             backgroundRepeat: "no-repeat",
             height: "80px",
             width: "200px",
-            borderRadius: "3px",
+            borderRadius: "5px",
             border: "1px solid #ccc",
             marginBottom: 10,
           }}

web/src/common/CountDownInput.js

@@ -101,7 +101,7 @@ export const CountDownInput = (props) => {
             backgroundRepeat: "no-repeat",
             height: "80px",
             width: "200px",
-            borderRadius: "3px",
+            borderRadius: "5px",
             border: "1px solid #ccc",
             marginBottom: 10,
           }}

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

@@ -133,6 +133,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 +166,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",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "Bitte geben Sie Ihren Benutzernamen, E-Mail oder Telefon ein!",
     "Sign In": "Anmelden",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Mit Code anmelden",
-    "Sign in with password": "Mit Passwort anmelden",
     "Sign in with {type}": "Mit {type} anmelden",
     "Signing in...": "Anmelden...",
     "The input is not valid Email or Phone!": "Die Eingabe ist keine gültige E-Mail oder Telefon!",
     "To access": "Zu Zugriff",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "jetzt anmelden",
     "username, Email or phone": "Benutzername, E-Mail oder Telefon"
   },

web/src/locales/en/data.json

@@ -133,6 +133,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 +166,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",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Sign in with code",
-    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "The input is not valid Email or Phone!": "The input is not valid Email or Phone!",
     "To access": "To access",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "sign up now",
     "username, Email or phone": "username, Email or phone"
   },

web/src/locales/fr/data.json

@@ -133,6 +133,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 +166,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",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "Veuillez entrer votre nom d'utilisateur, votre e-mail ou votre téléphone!",
     "Sign In": "Se connecter",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Se connecter avec le code",
-    "Sign in with password": "Se connecter avec le mot de passe",
     "Sign in with {type}": "Se connecter avec {type}",
     "Signing in...": "Connexion en cours...",
     "The input is not valid Email or Phone!": "L'entrée n'est pas valide Email ou Téléphone !",
     "To access": "Pour accéder à",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "inscrivez-vous maintenant",
     "username, Email or phone": "nom d'utilisateur, e-mail ou téléphone"
   },

web/src/locales/ja/data.json

@@ -133,6 +133,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 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "マスターパスワード",
     "Master password - Tooltip": "マスターパスワード - ツールチップ",
+    "Menu": "Menu",
     "Method": "方法",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "ユーザー名、メールアドレスまたは電話番号を入力してください。",
     "Sign In": "サインイン",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "コードでサインイン",
-    "Sign in with password": "パスワードでサインイン",
     "Sign in with {type}": "{type} でサインイン",
     "Signing in...": "サインイン中...",
     "The input is not valid Email or Phone!": "入力されたメールアドレスまたは電話番号が正しくありません。",
     "To access": "アクセスするには",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "今すぐサインアップ",
     "username, Email or phone": "ユーザー名、メールアドレスまたは電話番号"
   },

web/src/locales/ko/data.json

@@ -133,6 +133,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 +166,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",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Sign in with code",
-    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "The input is not valid Email or Phone!": "The input is not valid Email or Phone!",
     "To access": "To access",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "sign up now",
     "username, Email or phone": "username, Email or phone"
   },

web/src/locales/ru/data.json

@@ -133,6 +133,7 @@
     "Certs": "Сертификаты",
     "Click to Upload": "Нажмите здесь, чтобы загрузить",
     "Client IP": "IP клиента",
+    "Close": "Close",
     "Created time": "Время создания",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Мастер-пароль",
     "Master password - Tooltip": "Мастер-пароль - Tooltip",
+    "Menu": "Menu",
     "Method": "Метод",
     "Model": "Модель",
     "Model - Tooltip": "Модель - Подсказка",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "Пожалуйста, введите ваше имя пользователя, адрес электронной почты или телефон!",
     "Sign In": "Войти",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Войти с помощью кода",
-    "Sign in with password": "Войти с помощью пароля",
     "Sign in with {type}": "Войти с помощью {type}",
     "Signing in...": "Вход...",
     "The input is not valid Email or Phone!": "Введен неверный адрес электронной почты или телефон!",
     "To access": "На доступ",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "зарегистрироваться",
     "username, Email or phone": "имя пользователя, адрес электронной почты или телефон"
   },

web/src/locales/zh/data.json

@@ -133,6 +133,7 @@
     "Certs": "证书",
     "Click to Upload": "点击上传",
     "Client IP": "客户端IP",
+    "Close": "关闭",
     "Created time": "创建时间",
     "Default application": "默认应用",
     "Default application - Tooltip": "默认应用",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "应用程序向外展示的图标",
     "Master password": "万能密码",
     "Master password - Tooltip": "可用来登录该组织下的所有用户，方便管理员以该用户身份登录，以解决技术问题",
+    "Menu": "目录",
     "Method": "方法",
     "Model": "模型",
     "Model - Tooltip": "Casbin模型",
@@ -277,12 +279,12 @@
     "Please input your username, Email or phone!": "请输入您的用户名、Email或手机号！",
     "Sign In": "登录",
     "Sign in with WebAuthn": "WebAuthn登录",
-    "Sign in with code": "验证码登录",
-    "Sign in with password": "密码登录",
     "Sign in with {type}": "{type}登录",
     "Signing in...": "正在登录...",
     "The input is not valid Email or Phone!": "您输入的电子邮箱格式或手机号有误！",
     "To access": "访问",
+    "Verification Code": "验证码",
+    "WebAuthn": "Web身份验证",
     "sign up now": "立即注册",
     "username, Email or phone": "用户名、Email或手机号"
   },
@@ -702,7 +704,7 @@
     "Unlink": "解绑",
     "Upload (.xlsx)": "上传（.xlsx）",
     "Upload a photo": "上传头像",
-    "WebAuthn credentials": "WebAuthn credentials",
+    "WebAuthn credentials": "WebAuthn凭据",
     "input password": "输入密码"
   },
   "webhook": {