feat: login background image display (#1145)

* feat: use Casdoor to manage Casbin DB table

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: remove trivial codes

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* chore: go fmt

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* feat: support role definition

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: i18n

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: i18n

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

.github/workflows/build.yml

@@ -34,7 +34,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14.17.0'
+          node-version: 16
       # cache
       - uses: c-hive/gha-yarn-cache@v2
         with:
@@ -89,7 +89,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Fetch Previous version
         id: get-previous-tag

authz/authz.go

@@ -89,6 +89,7 @@ p, *, *, GET, /api/get-organization-applications, *, *
 p, *, *, GET, /api/get-user, *, *
 p, *, *, GET, /api/get-user-application, *, *
 p, *, *, GET, /api/get-resources, *, *
+p, *, *, GET, /api/get-records, *, *
 p, *, *, GET, /api/get-product, *, *
 p, *, *, POST, /api/buy-product, *, *
 p, *, *, GET, /api/get-payment, *, *

controllers/account.go

@@ -258,17 +258,11 @@ func (c *ApiController) Logout() {
 // @Success 200 {object} controllers.Response The Response object
 // @router /get-account [get]
 func (c *ApiController) GetAccount() {
-	userId, ok := c.RequireSignedIn()
+	user, ok := c.RequireSignedInUser()
 	if !ok {
 		return
 	}
 
-	user := object.GetUser(userId)
-	if user == nil {
-		c.ResponseError(fmt.Sprintf("The user: %s doesn't exist", userId))
-		return
-	}
-
 	managedAccounts := c.Input().Get("managedAccounts")
 	if managedAccounts == "1" {
 		user = object.ExtendManagedAccountsWithUser(user)
@@ -294,18 +288,16 @@ func (c *ApiController) GetAccount() {
 // @Success 200 {object} object.Userinfo The Response object
 // @router /userinfo [get]
 func (c *ApiController) GetUserinfo() {
-	userId, ok := c.RequireSignedIn()
+	user, ok := c.RequireSignedInUser()
 	if !ok {
 		return
 	}
+
 	scope, aud := c.GetSessionOidc()
 	host := c.Ctx.Request.Host
-	resp, err := object.GetUserInfo(userId, scope, aud, host)
-	if err != nil {
-		c.ResponseError(err.Error())
-		return
-	}
-	c.Data["json"] = resp
+	userInfo := object.GetUserInfo(user, scope, aud, host)
+
+	c.Data["json"] = userInfo
 	c.ServeJSON()
 }
 

controllers/casbin_adapter.go

@@ -0,0 +1,94 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package controllers
+
+import (
+	"encoding/json"
+
+	"github.com/astaxie/beego/utils/pagination"
+	"github.com/casdoor/casdoor/object"
+	"github.com/casdoor/casdoor/util"
+)
+
+func (c *ApiController) GetCasbinAdapters() {
+	owner := c.Input().Get("owner")
+	limit := c.Input().Get("pageSize")
+	page := c.Input().Get("p")
+	field := c.Input().Get("field")
+	value := c.Input().Get("value")
+	sortField := c.Input().Get("sortField")
+	sortOrder := c.Input().Get("sortOrder")
+	if limit == "" || page == "" {
+		c.Data["json"] = object.GetCasbinAdapters(owner)
+		c.ServeJSON()
+	} else {
+		limit := util.ParseInt(limit)
+		paginator := pagination.SetPaginator(c.Ctx, limit, int64(object.GetCasbinAdapterCount(owner, field, value)))
+		adapters := object.GetPaginationCasbinAdapters(owner, paginator.Offset(), limit, field, value, sortField, sortOrder)
+		c.ResponseOk(adapters, paginator.Nums())
+	}
+}
+
+func (c *ApiController) GetCasbinAdapter() {
+	id := c.Input().Get("id")
+	c.Data["json"] = object.GetCasbinAdapter(id)
+	c.ServeJSON()
+}
+
+func (c *ApiController) UpdateCasbinAdapter() {
+	id := c.Input().Get("id")
+
+	var casbinAdapter object.CasbinAdapter
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &casbinAdapter)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.Data["json"] = wrapActionResponse(object.UpdateCasbinAdapter(id, &casbinAdapter))
+	c.ServeJSON()
+}
+
+func (c *ApiController) AddCasbinAdapter() {
+	var casbinAdapter object.CasbinAdapter
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &casbinAdapter)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.Data["json"] = wrapActionResponse(object.AddCasbinAdapter(&casbinAdapter))
+	c.ServeJSON()
+}
+
+func (c *ApiController) DeleteCasbinAdapter() {
+	var casbinAdapter object.CasbinAdapter
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &casbinAdapter)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.Data["json"] = wrapActionResponse(object.DeleteCasbinAdapter(&casbinAdapter))
+	c.ServeJSON()
+}
+
+func (c *ApiController) SyncPolicies() {
+	id := c.Input().Get("id")
+	adapter := object.GetCasbinAdapter(id)
+
+	c.Data["json"] = object.SyncPolicies(adapter)
+	c.ServeJSON()
+}

controllers/link.go

@@ -29,7 +29,7 @@ type LinkForm struct {
 // @router /unlink [post]
 // @Tag Login API
 func (c *ApiController) Unlink() {
-	userId, ok := c.RequireSignedIn()
+	user, ok := c.RequireSignedInUser()
 	if !ok {
 		return
 	}
@@ -44,7 +44,6 @@ func (c *ApiController) Unlink() {
 
 	// the user will be unlinked from the provider
 	unlinkedUser := form.User
-	user := object.GetUser(userId)
 
 	if user.Id != unlinkedUser.Id && !user.IsGlobalAdmin {
 		// if the user is not the same as the one we are unlinking, we need to make sure the user is the global admin.

controllers/permission.go

@@ -55,13 +55,12 @@ func (c *ApiController) GetPermissions() {
 // @Success 200 {array} object.Permission The Response object
 // @router /get-permissions-by-submitter [get]
 func (c *ApiController) GetPermissionsBySubmitter() {
-	userId, ok := c.RequireSignedIn()
+	user, ok := c.RequireSignedInUser()
 	if !ok {
 		return
 	}
 
-	owner, username := util.GetOwnerAndNameFromId(userId)
-	permissions := object.GetPermissionsBySubmitter(owner, username)
+	permissions := object.GetPermissionsBySubmitter(user.Owner, user.Name)
 	c.ResponseOk(permissions, len(permissions))
 	return
 }

controllers/record.go

@@ -15,6 +15,8 @@
 package controllers
 
 import (
+	"encoding/json"
+
 	"github.com/astaxie/beego/utils/pagination"
 	"github.com/casdoor/casdoor/object"
 	"github.com/casdoor/casdoor/util"
@@ -29,6 +31,11 @@ import (
 // @Success 200 {object} object.Record The Response object
 // @router /get-records [get]
 func (c *ApiController) GetRecords() {
+	organization, ok := c.RequireAdmin()
+	if !ok {
+		return
+	}
+
 	limit := c.Input().Get("pageSize")
 	page := c.Input().Get("p")
 	field := c.Input().Get("field")
@@ -40,8 +47,9 @@ func (c *ApiController) GetRecords() {
 		c.ServeJSON()
 	} else {
 		limit := util.ParseInt(limit)
-		paginator := pagination.SetPaginator(c.Ctx, limit, int64(object.GetRecordCount(field, value)))
-		records := object.GetPaginationRecords(paginator.Offset(), limit, field, value, sortField, sortOrder)
+		filterRecord := &object.Record{Organization: organization}
+		paginator := pagination.SetPaginator(c.Ctx, limit, int64(object.GetRecordCount(field, value, filterRecord)))
+		records := object.GetPaginationRecords(paginator.Offset(), limit, field, value, sortField, sortOrder, filterRecord)
 		c.ResponseOk(records, paginator.Nums())
 	}
 }
@@ -66,3 +74,22 @@ func (c *ApiController) GetRecordsByFilter() {
 	c.Data["json"] = object.GetRecordsByField(record)
 	c.ServeJSON()
 }
+
+// AddRecord
+// @Title AddRecord
+// @Tag Record API
+// @Description add a record
+// @Param   body    body   object.Record  true        "The details of the record"
+// @Success 200 {object} controllers.Response The Response object
+// @router /add-record [post]
+func (c *ApiController) AddRecord() {
+	var record object.Record
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &record)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.Data["json"] = wrapActionResponse(object.AddRecord(&record))
+	c.ServeJSON()
+}

controllers/util.go

@@ -75,6 +75,34 @@ func (c *ApiController) RequireSignedIn() (string, bool) {
 	return userId, true
 }
 
+// RequireSignedInUser ...
+func (c *ApiController) RequireSignedInUser() (*object.User, bool) {
+	userId, ok := c.RequireSignedIn()
+	if !ok {
+		return nil, false
+	}
+
+	user := object.GetUser(userId)
+	if user == nil {
+		c.ResponseError(fmt.Sprintf("The user: %s doesn't exist", userId))
+		return nil, false
+	}
+	return user, true
+}
+
+// RequireAdmin ...
+func (c *ApiController) RequireAdmin() (string, bool) {
+	user, ok := c.RequireSignedInUser()
+	if !ok {
+		return "", false
+	}
+
+	if user.Owner == "built-in" {
+		return "", true
+	}
+	return user.Owner, true
+}
+
 func getInitScore() (int, error) {
 	return strconv.Atoi(conf.GetConfigString("initScore"))
 }

controllers/verification.go

@@ -148,17 +148,11 @@ func (c *ApiController) SendVerificationCode() {
 // @Title ResetEmailOrPhone
 // @router /api/reset-email-or-phone [post]
 func (c *ApiController) ResetEmailOrPhone() {
-	userId, ok := c.RequireSignedIn()
+	user, ok := c.RequireSignedInUser()
 	if !ok {
 		return
 	}
 
-	user := object.GetUser(userId)
-	if user == nil {
-		c.ResponseError(fmt.Sprintf("The user: %s doesn't exist", userId))
-		return
-	}
-
 	destType := c.Ctx.Request.Form.Get("type")
 	dest := c.Ctx.Request.Form.Get("dest")
 	code := c.Ctx.Request.Form.Get("code")

object/adapter.go

@@ -145,6 +145,11 @@ func (a *Adapter) createTable() {
 		panic(err)
 	}
 
+	err = a.Engine.Sync2(new(CasbinAdapter))
+	if err != nil {
+		panic(err)
+	}
+
 	err = a.Engine.Sync2(new(Provider))
 	if err != nil {
 		panic(err)

object/casbin_adapter.go

@@ -0,0 +1,217 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package object
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/casbin/casbin/v2"
+	"github.com/casbin/casbin/v2/model"
+	xormadapter "github.com/casbin/xorm-adapter/v2"
+	"github.com/casdoor/casdoor/util"
+
+	"xorm.io/core"
+)
+
+type CasbinAdapter struct {
+	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
+	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
+	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
+
+	Organization string `xorm:"varchar(100)" json:"organization"`
+	Type         string `xorm:"varchar(100)" json:"type"`
+	Model        string `xorm:"varchar(100)" json:"model"`
+
+	Host         string `xorm:"varchar(100)" json:"host"`
+	Port         int    `json:"port"`
+	User         string `xorm:"varchar(100)" json:"user"`
+	Password     string `xorm:"varchar(100)" json:"password"`
+	DatabaseType string `xorm:"varchar(100)" json:"databaseType"`
+	Database     string `xorm:"varchar(100)" json:"database"`
+	Table        string `xorm:"varchar(100)" json:"table"`
+	IsEnabled    bool   `json:"isEnabled"`
+
+	Adapter *xormadapter.Adapter `xorm:"-" json:"-"`
+}
+
+func GetCasbinAdapterCount(owner, field, value string) int {
+	session := GetSession(owner, -1, -1, field, value, "", "")
+	count, err := session.Count(&CasbinAdapter{})
+	if err != nil {
+		panic(err)
+	}
+
+	return int(count)
+}
+
+func GetCasbinAdapters(owner string) []*CasbinAdapter {
+	adapters := []*CasbinAdapter{}
+	err := adapter.Engine.Where("owner = ?", owner).Find(&adapters)
+	if err != nil {
+		panic(err)
+	}
+
+	return adapters
+}
+
+func GetPaginationCasbinAdapters(owner string, page, limit int, field, value, sort, order string) []*CasbinAdapter {
+	session := GetSession(owner, page, limit, field, value, sort, order)
+	adapters := []*CasbinAdapter{}
+	err := session.Find(&adapters)
+	if err != nil {
+		panic(err)
+	}
+
+	return adapters
+}
+
+func getCasbinAdapter(owner, name string) *CasbinAdapter {
+	if owner == "" || name == "" {
+		return nil
+	}
+
+	casbinAdapter := CasbinAdapter{Owner: owner, Name: name}
+	existed, err := adapter.Engine.Get(&casbinAdapter)
+	if err != nil {
+		panic(err)
+	}
+
+	if existed {
+		return &casbinAdapter
+	} else {
+		return nil
+	}
+}
+
+func GetCasbinAdapter(id string) *CasbinAdapter {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	return getCasbinAdapter(owner, name)
+}
+
+func UpdateCasbinAdapter(id string, casbinAdapter *CasbinAdapter) bool {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	if getCasbinAdapter(owner, name) == nil {
+		return false
+	}
+
+	session := adapter.Engine.ID(core.PK{owner, name}).AllCols()
+	if casbinAdapter.Password == "***" {
+		session.Omit("password")
+	}
+	affected, err := session.Update(casbinAdapter)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func AddCasbinAdapter(casbinAdapter *CasbinAdapter) bool {
+	affected, err := adapter.Engine.Insert(casbinAdapter)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func DeleteCasbinAdapter(casbinAdapter *CasbinAdapter) bool {
+	affected, err := adapter.Engine.ID(core.PK{casbinAdapter.Owner, casbinAdapter.Name}).Delete(&CasbinAdapter{})
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func (casbinAdapter *CasbinAdapter) GetId() string {
+	return fmt.Sprintf("%s/%s", casbinAdapter.Owner, casbinAdapter.Name)
+}
+
+func (casbinAdapter *CasbinAdapter) getTable() string {
+	if casbinAdapter.DatabaseType == "mssql" {
+		return fmt.Sprintf("[%s]", casbinAdapter.Table)
+	} else {
+		return casbinAdapter.Table
+	}
+}
+
+func safeReturn(policy []string, i int) string {
+	if len(policy) > i {
+		return policy[i]
+	} else {
+		return ""
+	}
+}
+
+func matrixToCasbinRules(pType string, policies [][]string) []*xormadapter.CasbinRule {
+	res := []*xormadapter.CasbinRule{}
+
+	for _, policy := range policies {
+		line := xormadapter.CasbinRule{
+			PType: pType,
+			V0:    safeReturn(policy, 0),
+			V1:    safeReturn(policy, 1),
+			V2:    safeReturn(policy, 2),
+			V3:    safeReturn(policy, 3),
+			V4:    safeReturn(policy, 4),
+			V5:    safeReturn(policy, 5),
+		}
+		res = append(res, &line)
+	}
+
+	return res
+}
+
+func SyncPolicies(casbinAdapter *CasbinAdapter) []*xormadapter.CasbinRule {
+	// init Adapter
+	if casbinAdapter.Adapter == nil {
+		var dataSourceName string
+		if casbinAdapter.DatabaseType == "mssql" {
+			dataSourceName = fmt.Sprintf("sqlserver://%s:%s@%s:%d?database=%s", casbinAdapter.User, casbinAdapter.Password, casbinAdapter.Host, casbinAdapter.Port, casbinAdapter.Database)
+		} else if casbinAdapter.DatabaseType == "postgres" {
+			dataSourceName = fmt.Sprintf("user=%s password=%s host=%s port=%d sslmode=disable dbname=%s", casbinAdapter.User, casbinAdapter.Password, casbinAdapter.Host, casbinAdapter.Port, casbinAdapter.Database)
+		} else {
+			dataSourceName = fmt.Sprintf("%s:%s@tcp(%s:%d)/", casbinAdapter.User, casbinAdapter.Password, casbinAdapter.Host, casbinAdapter.Port)
+		}
+
+		if !isCloudIntranet {
+			dataSourceName = strings.ReplaceAll(dataSourceName, "dbi.", "db.")
+		}
+
+		casbinAdapter.Adapter, _ = xormadapter.NewAdapterByEngineWithTableName(NewAdapter(casbinAdapter.DatabaseType, dataSourceName, casbinAdapter.Database).Engine, casbinAdapter.getTable(), "")
+	}
+
+	// init Model
+	modelObj := getModel(casbinAdapter.Owner, casbinAdapter.Model)
+	m, err := model.NewModelFromString(modelObj.ModelText)
+	if err != nil {
+		panic(err)
+	}
+
+	// init Enforcer
+	enforcer, err := casbin.NewEnforcer(m, casbinAdapter.Adapter)
+	if err != nil {
+		panic(err)
+	}
+
+	policies := matrixToCasbinRules("p", enforcer.GetPolicy())
+	if strings.Contains(modelObj.ModelText, "[role_definition]") {
+		policies = append(policies, matrixToCasbinRules("g", enforcer.GetGroupingPolicy())...)
+	}
+
+	return policies
+}

object/record.go

@@ -101,9 +101,9 @@ func AddRecord(record *Record) bool {
 	return affected != 0
 }
 
-func GetRecordCount(field, value string) int {
+func GetRecordCount(field, value string, filterRecord *Record) int {
 	session := GetSession("", -1, -1, field, value, "", "")
-	count, err := session.Count(&Record{})
+	count, err := session.Count(filterRecord)
 	if err != nil {
 		panic(err)
 	}
@@ -121,10 +121,10 @@ func GetRecords() []*Record {
 	return records
 }
 
-func GetPaginationRecords(offset, limit int, field, value, sortField, sortOrder string) []*Record {
+func GetPaginationRecords(offset, limit int, field, value, sortField, sortOrder string, filterRecord *Record) []*Record {
 	records := []*Record{}
 	session := GetSession("", offset, limit, field, value, sortField, sortOrder)
-	err := session.Find(&records)
+	err := session.Find(&records, filterRecord)
 	if err != nil {
 		panic(err)
 	}

object/user.go

@@ -522,12 +522,7 @@ func DeleteUser(user *User) bool {
 	return affected != 0
 }
 
-func GetUserInfo(userId string, scope string, aud string, host string) (*Userinfo, error) {
-	user := GetUser(userId)
-	if user == nil {
-		return nil, fmt.Errorf("the user: %s doesn't exist", userId)
-	}
-
+func GetUserInfo(user *User, scope string, aud string, host string) *Userinfo {
 	_, originBackend := getOriginFromHost(host)
 
 	resp := Userinfo{
@@ -549,7 +544,7 @@ func GetUserInfo(userId string, scope string, aud string, host string) (*Userinf
 	if strings.Contains(scope, "phone") {
 		resp.Phone = user.Phone
 	}
-	return &resp, nil
+	return &resp
 }
 
 func LinkUserAccount(user *User, field string, value string) bool {

routers/router.go

@@ -97,6 +97,13 @@ func initAPI() {
 	beego.Router("/api/add-model", &controllers.ApiController{}, "POST:AddModel")
 	beego.Router("/api/delete-model", &controllers.ApiController{}, "POST:DeleteModel")
 
+	beego.Router("/api/get-adapters", &controllers.ApiController{}, "GET:GetCasbinAdapters")
+	beego.Router("/api/get-adapter", &controllers.ApiController{}, "GET:GetCasbinAdapter")
+	beego.Router("/api/update-adapter", &controllers.ApiController{}, "POST:UpdateCasbinAdapter")
+	beego.Router("/api/add-adapter", &controllers.ApiController{}, "POST:AddCasbinAdapter")
+	beego.Router("/api/delete-adapter", &controllers.ApiController{}, "POST:DeleteCasbinAdapter")
+	beego.Router("/api/sync-policies", &controllers.ApiController{}, "GET:SyncPolicies")
+
 	beego.Router("/api/set-password", &controllers.ApiController{}, "POST:SetPassword")
 	beego.Router("/api/check-user-password", &controllers.ApiController{}, "POST:CheckUserPassword")
 	beego.Router("/api/get-email-and-phone", &controllers.ApiController{}, "POST:GetEmailAndPhone")
@@ -148,6 +155,7 @@ func initAPI() {
 
 	beego.Router("/api/get-records", &controllers.ApiController{}, "GET:GetRecords")
 	beego.Router("/api/get-records-filter", &controllers.ApiController{}, "POST:GetRecordsByFilter")
+	beego.Router("/api/add-record", &controllers.ApiController{}, "POST:AddRecord")
 
 	beego.Router("/api/get-webhooks", &controllers.ApiController{}, "GET:GetWebhooks")
 	beego.Router("/api/get-webhook", &controllers.ApiController{}, "GET:GetWebhook")

web/src/AdapterEditPage.js

@@ -0,0 +1,412 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Card, Col, Input, InputNumber, Row, Select, Switch, Table, Tooltip} from "antd";
+import * as AdapterBackend from "./backend/AdapterBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+import "codemirror/lib/codemirror.css";
+import * as ModelBackend from "./backend/ModelBackend";
+import {EditOutlined, MinusOutlined} from "@ant-design/icons";
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/javascript/javascript");
+
+const {Option} = Select;
+
+class AdapterEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      adapterName: props.match.params.adapterName,
+      adapter: null,
+      organizations: [],
+      models: [],
+      policyLists: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getAdapter();
+    this.getOrganizations();
+  }
+
+  getAdapter() {
+    AdapterBackend.getAdapter(this.state.organizationName, this.state.adapterName)
+      .then((adapter) => {
+        this.setState({
+          adapter: adapter,
+        });
+
+        this.getModels(adapter.owner);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations(this.state.organizationName)
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getModels(organizationName) {
+    ModelBackend.getModels(organizationName)
+      .then((res) => {
+        this.setState({
+          models: res,
+        });
+      });
+  }
+
+  parseAdapterField(key, value) {
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateAdapterField(key, value) {
+    value = this.parseAdapterField(key, value);
+
+    const adapter = this.state.adapter;
+    adapter[key] = value;
+    this.setState({
+      adapter: adapter,
+    });
+  }
+
+  synPolicies() {
+    this.setState({loading: true});
+    AdapterBackend.syncPolicies(this.state.adapter.owner, this.state.adapter.name)
+      .then((res) => {
+        this.setState({loading: false, policyLists: res});
+      })
+      .catch(error => {
+        this.setState({loading: false});
+        Setting.showMessage("error", `Adapter failed to get policies: ${error}`);
+      });
+  }
+
+  renderTable(table) {
+    const columns = [
+      {
+        title: "Rule Type",
+        dataIndex: "PType",
+        key: "PType",
+        width: "100px",
+      },
+      {
+        title: "V0",
+        dataIndex: "V0",
+        key: "V0",
+        width: "100px",
+      },
+      {
+        title: "V1",
+        dataIndex: "V1",
+        key: "V1",
+        width: "100px",
+      },
+      {
+        title: "V2",
+        dataIndex: "V2",
+        key: "V2",
+        width: "100px",
+      },
+      {
+        title: "V3",
+        dataIndex: "V3",
+        key: "V3",
+        width: "100px",
+      },
+      {
+        title: "V4",
+        dataIndex: "V4",
+        key: "V4",
+        width: "100px",
+      },
+      {
+        title: "V5",
+        dataIndex: "V5",
+        key: "V5",
+        width: "100px",
+      },
+      {
+        title: "Option",
+        key: "option",
+        width: "100px",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Tooltip placement="topLeft" title="Edit">
+                <Button style={{marginRight: "0.5rem"}} icon={<EditOutlined />} size="small" />
+              </Tooltip>
+              <Tooltip placement="topLeft" title="Delete">
+                <Button icon={<MinusOutlined />} size="small" />
+              </Tooltip>
+            </div>
+          );
+        },
+      }];
+
+    return (
+      <div>
+        <Table
+          pagination={{
+            defaultPageSize: 10,
+          }}
+          columns={columns} dataSource={table} rowKey="name" size="middle" bordered
+          loading={this.state.loading}
+        />
+      </div>
+    );
+  }
+
+  renderAdapter() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("adapter:New Adapter") : i18next.t("adapter:Edit Adapter")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitAdapterEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitAdapterEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteAdapter()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      } style={(Setting.isMobile()) ? {margin: "5px"} : {}} type="inner">
+        <Row style={{marginTop: "10px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.organization} onChange={(value => {this.updateadapterField("organization", value);})}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.name} onChange={e => {
+              this.updateAdapterField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Type"), i18next.t("provider:Type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.type} onChange={(value => {
+              this.updateAdapterField("type", value);
+              const adapter = this.state.adapter;
+              // adapter["tableColumns"] = Setting.getAdapterTableColumns(this.state.adapter);
+              this.setState({
+                adapter: adapter,
+              });
+            })}>
+              {
+                ["Database"]
+                  .map((item, index) => <Option key={index} value={item}>{item}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Host"), i18next.t("provider:Host - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.host} onChange={e => {
+              this.updateAdapterField("host", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Port"), i18next.t("provider:Port - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.adapter.port} onChange={value => {
+              this.updateAdapterField("port", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:User"), i18next.t("general:User - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.user} onChange={e => {
+              this.updateAdapterField("user", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Password"), i18next.t("general:Password - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.password} onChange={e => {
+              this.updateAdapterField("password", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Database type"), i18next.t("syncer:Database type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.databaseType} onChange={(value => {this.updateAdapterField("databaseType", value);})}>
+              {
+                [
+                  {id: "mysql", name: "MySQL"},
+                  {id: "postgres", name: "PostgreSQL"},
+                  {id: "mssql", name: "SQL Server"},
+                  {id: "oracle", name: "Oracle"},
+                  {id: "sqlite3", name: "Sqlite 3"},
+                ].map((databaseType, index) => <Option key={index} value={databaseType.id}>{databaseType.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Database"), i18next.t("syncer:Database - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.database} onChange={e => {
+              this.updateAdapterField("database", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Table"), i18next.t("syncer:Table - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.adapter.table}
+              disabled={this.state.adapter.type === "Keycloak"} onChange={e => {
+                this.updateAdapterField("table", e.target.value);
+              }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Model"), i18next.t("general:Model - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.model} onChange={(model => {
+              this.updateAdapterField("model", model);
+            })}>
+              {
+                this.state.models.map((model, index) => <Option key={index} value={model.name}>{model.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("adapter:Policies"), i18next.t("adapter:Policies - Tooltip"))} :
+          </Col>
+          <Col span={2}>
+            <Button type="primary" onClick={() => {this.synPolicies();}}>
+              {i18next.t("adapter:Sync")}
+            </Button>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          </Col>
+          <Col span={22} >
+            {
+              this.renderTable(this.state.policyLists)
+            }
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("general:Is enabled"), i18next.t("general:Is enabled - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.adapter.isEnabled} onChange={checked => {
+              this.updateAdapterField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitAdapterEdit(willExist) {
+    const adapter = Setting.deepCopy(this.state.adapter);
+    AdapterBackend.updateAdapter(this.state.adapter.owner, this.state.adapterName, adapter)
+      .then((res) => {
+        if (res.msg === "") {
+          Setting.showMessage("success", "Successfully saved");
+          this.setState({
+            adapterName: this.state.adapter.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/adapters");
+          } else {
+            this.props.history.push(`/adapters/${this.state.adapter.name}`);
+          }
+        } else {
+          Setting.showMessage("error", res.msg);
+          this.updateAdapterField("name", this.state.adapterName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
+  }
+
+  deleteAdapter() {
+    AdapterBackend.deleteAdapter(this.state.adapter)
+      .then(() => {
+        this.props.history.push("/adapters");
+      })
+      .catch(error => {
+        Setting.showMessage("error", `adapter failed to delete: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.adapter !== null ? this.renderAdapter() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitAdapterEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitAdapterEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteAdapter()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AdapterEditPage;

web/src/AdapterListPage.js

@@ -0,0 +1,261 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Link} from "react-router-dom";
+import {Button, Popconfirm, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as AdapterBackend from "./backend/AdapterBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+
+class AdapterListPage extends BaseListPage {
+  newAdapter() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "built-in",
+      name: `adapter_${randomName}`,
+      createdTime: moment().format(),
+      organization: "built-in",
+      type: "Database",
+      host: "localhost",
+      port: 3306,
+      user: "root",
+      password: "123456",
+      databaseType: "mysql",
+      database: "dbName",
+      table: "tableName",
+      isEnabled: false,
+    };
+  }
+
+  addAdapter() {
+    const newAdapter = this.newAdapter();
+    AdapterBackend.addAdapter(newAdapter)
+      .then((res) => {
+        this.props.history.push({pathname: `/adapters/${newAdapter.owner}/${newAdapter.name}`, mode: "add"});
+      }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Adapter failed to add: ${error}`);
+      });
+  }
+
+  deleteAdapter(i) {
+    AdapterBackend.deleteAdapter(this.state.data[i])
+      .then((res) => {
+        Setting.showMessage("success", "Adapter deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Adapter failed to delete: ${error}`);
+      });
+  }
+
+  renderTable(adapters) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "150px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/adapters/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "160px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "100px",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {text: "Database", value: "Database"},
+        ],
+      },
+      {
+        title: i18next.t("provider:Host"),
+        dataIndex: "host",
+        key: "host",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("host"),
+      },
+      {
+        title: i18next.t("provider:Port"),
+        dataIndex: "port",
+        key: "port",
+        width: "100px",
+        sorter: true,
+        ...this.getColumnSearchProps("port"),
+      },
+      {
+        title: i18next.t("general:User"),
+        dataIndex: "user",
+        key: "user",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+      },
+      {
+        title: i18next.t("general:Password"),
+        dataIndex: "password",
+        key: "password",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("password"),
+      },
+      {
+        title: i18next.t("syncer:Database type"),
+        dataIndex: "databaseType",
+        key: "databaseType",
+        width: "120px",
+        sorter: (a, b) => a.databaseType.localeCompare(b.databaseType),
+      },
+      {
+        title: i18next.t("syncer:Database"),
+        dataIndex: "database",
+        key: "database",
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("syncer:Table"),
+        dataIndex: "table",
+        key: "table",
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("general:Is enabled"),
+        dataIndex: "isEnabled",
+        key: "isEnabled",
+        width: "120px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "170px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/adapters/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Popconfirm
+                title={`Sure to delete adapter: ${record.name} ?`}
+                onConfirm={() => this.deleteAdapter(index)}
+              >
+                <Button style={{marginBottom: "10px"}} type="danger">{i18next.t("general:Delete")}</Button>
+              </Popconfirm>
+            </div>
+          );
+        },
+      },
+    ];
+
+    const paginationProps = {
+      total: this.state.pagination.total,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
+    };
+
+    return (
+      <div>
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={adapters} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Adapters")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addAdapter.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    AdapterBackend.getAdapters("", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            loading: false,
+            data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
+            searchText: params.searchText,
+            searchedColumn: params.searchedColumn,
+          });
+        }
+      });
+  };
+}
+
+export default AdapterListPage;

web/src/App.js

@@ -72,6 +72,8 @@ import CasLogout from "./auth/CasLogout";
 import ModelListPage from "./ModelListPage";
 import ModelEditPage from "./ModelEditPage";
 import SystemInfo from "./SystemInfo";
+import AdapterListPage from "./AdapterListPage";
+import AdapterEditPage from "./AdapterEditPage";
 
 const {Header, Footer} = Layout;
 
@@ -123,6 +125,8 @@ class App extends Component {
       this.setState({selectedMenuKey: "/permissions"});
     } else if (uri.includes("/models")) {
       this.setState({selectedMenuKey: "/models"});
+    } else if (uri.includes("/adapters")) {
+      this.setState({selectedMenuKey: "/adapters"});
     } else if (uri.includes("/providers")) {
       this.setState({selectedMenuKey: "/providers"});
     } else if (uri.includes("/applications")) {
@@ -405,6 +409,13 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+      res.push(
+        <Menu.Item key="/adapters">
+          <Link to="/adapters">
+            {i18next.t("general:Adapters")}
+          </Link>
+        </Menu.Item>
+      );
       res.push(
         <Menu.Item key="/providers">
           <Link to="/providers">
@@ -421,7 +432,7 @@ class App extends Component {
       );
     }
 
-    if (Setting.isAdminUser(this.state.account)) {
+    if (Setting.isLocalAdminUser(this.state.account)) {
       res.push(
         <Menu.Item key="/resources">
           <Link to="/resources">
@@ -429,13 +440,6 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
-      res.push(
-        <Menu.Item key="/tokens">
-          <Link to="/tokens">
-            {i18next.t("general:Tokens")}
-          </Link>
-        </Menu.Item>
-      );
       res.push(
         <Menu.Item key="/records">
           <Link to="/records">
@@ -443,6 +447,16 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+    }
+
+    if (Setting.isAdminUser(this.state.account)) {
+      res.push(
+        <Menu.Item key="/tokens">
+          <Link to="/tokens">
+            {i18next.t("general:Tokens")}
+          </Link>
+        </Menu.Item>
+      );
       res.push(
         <Menu.Item key="/webhooks">
           <Link to="/webhooks">
@@ -544,6 +558,8 @@ class App extends Component {
           <Route exact path="/permissions/:organizationName/:permissionName" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/models" render={(props) => this.renderLoginIfNotLoggedIn(<ModelListPage account={this.state.account} {...props} />)} />
           <Route exact path="/models/:organizationName/:modelName" render={(props) => this.renderLoginIfNotLoggedIn(<ModelEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/adapters" render={(props) => this.renderLoginIfNotLoggedIn(<AdapterListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/adapters/:organizationName/:adapterName" render={(props) => this.renderLoginIfNotLoggedIn(<AdapterEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)} />
           <Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)} />
           <Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)} />
@@ -681,8 +697,8 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <div style={{position: "relative", minHeight: "100vh"}}>
-          <div id="content-wrap" style={{flexDirection: "column"}}>
+        <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
+          <div id="login-content-wrap" style={{flexDirection: "column"}}>
             <Switch>
               <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} />
               <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />

web/src/App.less

@@ -28,22 +28,32 @@
   color: #61dafb;
 }
 
+#root{
+  height: 100%;
+}
+
 #parent-area {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   min-height: 100vh;
   background-color: #f5f5f5;
-  display: flex;
 }
 
 #content-wrap {
-  padding-bottom: 70px; /* Footer height */
   display: flex;
+  flex: 1 1 0;
   align-items: stretch;
   width: 100%;
 }
 
+#login-content-wrap {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+}
+
 #footer {
-  position: absolute;
   bottom: 0;
   width: 100%;
   height: 70px; /* Footer height */
@@ -78,6 +88,8 @@
 }
 
 .loginBackground {
+  height: 100%;
   background: #ffffff no-repeat;
   background-size: 100% 100%;
+  background-attachment: fixed;
 }

web/src/RecordListPage.js

@@ -44,7 +44,7 @@ class RecordListPage extends BaseListPage {
   }
 
   renderTable(records) {
-    const columns = [
+    let columns = [
       {
         title: i18next.t("general:Name"),
         dataIndex: "name",
@@ -174,6 +174,10 @@ class RecordListPage extends BaseListPage {
       },
     ];
 
+    if (Setting.isLocalAdminUser(this.props.account)) {
+      columns = columns.filter(column => column.key !== "name" && column.key !== "organization");
+    }
+
     const paginationProps = {
       total: this.state.pagination.total,
       pageSize: this.state.pagination.pageSize,

web/src/auth/LoginPage.js

@@ -707,10 +707,10 @@ class LoginPage extends React.Component {
     const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
+      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <Row>
-          <Col span={8} offset={application.formOffset === 0 || Setting.inIframe() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}}>
+        <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>
                 {

web/src/auth/SignupPage.js

@@ -617,11 +617,11 @@ class SignupPage extends React.Component {
     const formStyle = Setting.inIframe() ? null : Setting.parseObject(application.formCss);
 
     return (
-      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() ? null : `url(${application.formBackgroundUrl})`}}>
+      <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() ? 8 : application.formOffset} style={{display: "flex", justifyContent: "center"}} >
+          <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}}>
               {
                 Setting.renderHelmet(application)

web/src/backend/AdapterBackend.js

@@ -0,0 +1,63 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as Setting from "../Setting";
+
+export function getAdapters(owner, page = "", pageSize = "", field = "", value = "", sortField = "", sortOrder = "") {
+  return fetch(`${Setting.ServerUrl}/api/get-adapters?owner=${owner}&p=${page}&pageSize=${pageSize}&field=${field}&value=${value}&sortField=${sortField}&sortOrder=${sortOrder}`, {
+    method: "GET",
+    credentials: "include",
+  }).then(res => res.json());
+}
+
+export function getAdapter(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/get-adapter?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include",
+  }).then(res => res.json());
+}
+
+export function updateAdapter(owner, name, Adapter) {
+  const newAdapter = Setting.deepCopy(Adapter);
+  return fetch(`${Setting.ServerUrl}/api/update-adapter?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(newAdapter),
+  }).then(res => res.json());
+}
+
+export function addAdapter(Adapter) {
+  const newAdapter = Setting.deepCopy(Adapter);
+  return fetch(`${Setting.ServerUrl}/api/add-adapter`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(newAdapter),
+  }).then(res => res.json());
+}
+
+export function deleteAdapter(Adapter) {
+  const newAdapter = Setting.deepCopy(Adapter);
+  return fetch(`${Setting.ServerUrl}/api/delete-adapter`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(newAdapter),
+  }).then(res => res.json());
+}
+
+export function syncPolicies(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/sync-policies?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "GET",
+    credentials: "include",
+  }).then(res => res.json());
+}

web/src/locales/de/data.json

@@ -5,6 +5,13 @@
     "My Account": "Mein Konto",
     "Sign Up": "Registrieren"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "Aktion",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "Neu",
     "Affiliation URL": "Affiliation-URL",
     "Affiliation URL - Tooltip": "Unique string-style identifier",

web/src/locales/en/data.json

@@ -5,6 +5,13 @@
     "My Account": "My Account",
     "Sign Up": "Sign Up"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "Action",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "Add",
     "Affiliation URL": "Affiliation URL",
     "Affiliation URL - Tooltip": "Affiliation URL - Tooltip",

web/src/locales/fr/data.json

@@ -5,6 +5,13 @@
     "My Account": "Mon Compte",
     "Sign Up": "S'inscrire"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "Action",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "Ajouter",
     "Affiliation URL": "URL d'affiliation",
     "Affiliation URL - Tooltip": "Unique string-style identifier",

web/src/locales/ja/data.json

@@ -5,6 +5,13 @@
     "My Account": "マイアカウント",
     "Sign Up": "新規登録"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "アクション",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "追加",
     "Affiliation URL": "アフィリエイトURL",
     "Affiliation URL - Tooltip": "Unique string-style identifier",

web/src/locales/ko/data.json

@@ -5,6 +5,13 @@
     "My Account": "My Account",
     "Sign Up": "Sign Up"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "Action",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "Add",
     "Affiliation URL": "Affiliation URL",
     "Affiliation URL - Tooltip": "Unique string-style identifier",

web/src/locales/ru/data.json

@@ -5,6 +5,13 @@
     "My Account": "Мой аккаунт",
     "Sign Up": "Регистрация"
   },
+  "adapter": {
+    "Edit Adapter": "Edit Adapter",
+    "New Adapter": "New Adapter",
+    "Policies": "Policies",
+    "Policies - Tooltip": "Policies - Tooltip",
+    "Sync": "Sync"
+  },
   "application": {
     "Background URL": "Background URL",
     "Background URL - Tooltip": "Background URL - Tooltip",
@@ -107,6 +114,7 @@
     "Action": "Действие",
     "Adapter": "Adapter",
     "Adapter - Tooltip": "Adapter - Tooltip",
+    "Adapters": "Adapters",
     "Add": "Добавить",
     "Affiliation URL": "URL-адрес партнёра",
     "Affiliation URL - Tooltip": "Unique string-style identifier",

web/src/locales/zh/data.json

@@ -5,6 +5,13 @@
     "My Account": "我的账户",
     "Sign Up": "注册"
   },
+  "adapter": {
+    "Edit Adapter": "编辑适配器",
+    "New Adapter": "添加适配器",
+    "Policies": "策略",
+    "Policies - Tooltip": "策略",
+    "Sync": "同步"
+  },
   "application": {
     "Background URL": "背景图URL",
     "Background URL - Tooltip": "登录页背景图的链接",
@@ -107,6 +114,7 @@
     "Action": "操作",
     "Adapter": "适配器",
     "Adapter - Tooltip": "策略存储的表名",
+    "Adapters": "适配器",
     "Add": "添加",
     "Affiliation URL": "工作单位URL",
     "Affiliation URL - Tooltip": "工作单位URL",