feat: rename all publicKey occurrences to certificate (#894)

* fix:The certs page is displayed incorrectly

* Translations for each language are added

* Replace the variables certificat with Certificat with certificate and Certificate

* Replace the variables certificat with Certificat with certificate and Certificate

* Variable names are more accurate

* Variable names are more accurate

* Modify the variable name

.github/workflows/build.yml

@@ -114,6 +114,7 @@ jobs:
         uses: docker/build-push-action@v2
         if: github.repository == 'casdoor/casdoor' && github.event_name == 'push' && steps.should_push.outputs.push=='true'
         with:
+          target: STANDARD
           push: true
           tags: casbin/casdoor:${{steps.get-current-tag.outputs.tag }},casbin/casdoor:latest
 

Dockerfile

@@ -1,8 +1,3 @@
-FROM golang:1.17.5 AS BACK
-WORKDIR /go/src/casdoor
-COPY . .
-RUN ./build.sh && apt update && apt install wait-for-it && chmod +x /usr/bin/wait-for-it
-
 FROM node:16.13.0 AS FRONT
 WORKDIR /web
 COPY ./web .
@@ -10,28 +5,47 @@ RUN yarn config set registry https://registry.npmmirror.com
 RUN yarn install && yarn run build
 
 
-FROM debian:latest AS ALLINONE
-RUN apt update
-RUN apt install -y ca-certificates && update-ca-certificates
-RUN apt install -y mariadb-server mariadb-client && mkdir -p web/build && chmod 777 /tmp
+FROM golang:1.17.5 AS BACK
+WORKDIR /go/src/casdoor
+COPY . .
+RUN ./build.sh
+
+
+FROM alpine:latest AS STANDARD
 LABEL MAINTAINER="https://casdoor.org/"
-COPY --from=BACK /go/src/casdoor/ ./
-COPY --from=BACK /usr/bin/wait-for-it ./
-COPY --from=FRONT /web/build /web/build
-CMD chmod 777 /tmp && service mariadb start&&\
-if [ "${MYSQL_ROOT_PASSWORD}" = "" ] ;then MYSQL_ROOT_PASSWORD=123456 ; fi&&\
-mysqladmin -u root password ${MYSQL_ROOT_PASSWORD} &&\
-./wait-for-it localhost:3306 -- ./server --createDatabase=true
 
-
-FROM alpine:latest
 RUN sed -i 's/https/http/' /etc/apk/repositories
 RUN apk add curl
 RUN apk add ca-certificates && update-ca-certificates
+
+WORKDIR /
+COPY --from=BACK /go/src/casdoor/server ./server
+COPY --from=BACK /go/src/casdoor/swagger ./swagger
+COPY --from=BACK /go/src/casdoor/conf/app.conf ./conf/app.conf
+COPY --from=FRONT /web/build ./web/build
+ENTRYPOINT ["/server"]
+
+
+FROM debian:latest AS db
+RUN apt update \
+    && apt install -y \
+        mariadb-server \
+        mariadb-client \
+    && rm -rf /var/lib/apt/lists/*
+
+
+FROM db AS ALLINONE
 LABEL MAINTAINER="https://casdoor.org/"
 
-COPY --from=BACK /go/src/casdoor/ ./
-COPY --from=BACK /usr/bin/wait-for-it ./
-RUN mkdir -p web/build && apk add --no-cache bash coreutils
-COPY --from=FRONT /web/build /web/build
-CMD  ./server
+RUN apt update
+RUN apt install -y ca-certificates && update-ca-certificates
+
+WORKDIR /
+COPY --from=BACK /go/src/casdoor/server ./server
+COPY --from=BACK /go/src/casdoor/swagger ./swagger
+COPY --from=BACK /go/src/casdoor/docker-entrypoint.sh /docker-entrypoint.sh
+COPY --from=BACK /go/src/casdoor/conf/app.conf ./conf/app.conf
+COPY --from=FRONT /web/build ./web/build
+
+ENTRYPOINT ["/bin/bash"]
+CMD ["/docker-entrypoint.sh"]

README.md

@@ -42,166 +42,66 @@
   </a>
 </p>
 
+
+
 ## Online demo
 
-Deployed site: https://door.casdoor.com/
+- International: https://door.casdoor.org (read-only)
+- Asian mirror: https://door.casdoor.com (read-only)
+- Asian mirror: https://demo.casdoor.com (read-write, will restore for every 5 minutes)
 
-## Quick Start
-Run your own casdoor program in a few minutes.
 
-### Download
 
-There are two methods, get code via go subcommand `get`:
+## Documentation
 
-```shell
-go get github.com/casdoor/casdoor
-```
+- International: https://casdoor.org
+- Asian mirror: https://docs.casdoor.cn
 
-  or `git`:
 
-```bash
-git clone https://github.com/casdoor/casdoor
-```
 
-Finally, change directory:
+## Install
 
-```bash
-cd casdoor/
-```
+- By source code: https://casdoor.org/docs/basic/server-installation
+- By Docker: https://casdoor.org/docs/basic/try-with-docker
 
-We provide two start up methods for all kinds of users.
 
-### Manual
 
-#### Simple configuration
-Casdoor requires a running Relational database to be operational.Thus you need to modify configuration to point out the location of database.
+## How to connect to Casdoor?
 
-Edit `conf/app.conf`, modify `dataSourceName` to correct database info, which follows this format:
+https://casdoor.org/docs/how-to-connect/overview
 
-```bash
-username:password@tcp(database_ip:database_port)/
-```
 
-Then create an empty schema (database) named `casdoor` in your relational database. After the program runs for the first time, it will automatically create tables in this schema.
 
-You can also edit `main.go`, modify `false` to `true`. It will automatically create the schema (database) named `casdoor` in this database.
+## Casdoor Public API
 
-```bash
-createDatabase := flag.Bool("createDatabase", false, "true if you need casdoor to create database")
-```
+- Docs: https://casdoor.org/docs/basic/public-api
+- Swagger: https://door.casdoor.com/swagger
 
-#### Run
 
-Casdoor provides two run modes, the difference is binary size and user prompt.
 
-##### Dev Mode
+## Integrations
 
-Edit `conf/app.conf`, set `runmode=dev`. Firstly build front-end files:
+https://casdoor.org/docs/integration/apisix
 
-```bash
-cd web/ && yarn && yarn run start
-```
-*❗ A word of caution ❗: Casdoor's front-end is built using yarn. You should use `yarn` instead of `npm`. It has a potential failure during building the files if you use `npm`.*
 
-Then build back-end binary file, change directory to root(Relative to casdoor):
+## How to contact?
 
-```bash
-go run main.go
-```
+- Gitter: https://gitter.im/casbin/casdoor
+- Forum: https://forum.casbin.com
+- Contact: https://tawk.to/chat/623352fea34c2456412b8c51/1fuc7od6e
 
-That's it! Try to visit http://127.0.0.1:7001/. :small_airplane:  
-**But make sure you always request the backend port 8000 when you are using SDKs.**
 
-##### Production Mode
-
-Edit `conf/app.conf`, set `runmode=prod`. Firstly build front-end files:
-
-```bash
-cd web/ && yarn && yarn run build
-```
-
-Then build back-end binary file, change directory to root(Relative to casdoor):
-
-```bash
-go build main.go && sudo ./main
-```
-
-> Notice, you should visit back-end port, default 8000. Now try to visit **http://SERVER_IP:8000/**
-
-### Docker
-
-Casdoor provide 2 kinds of image: 
-- casbin/casdoor-all-in-one, in which casdoor binary, a mysql database and all necessary configurations are packed up. This image is for new user to have a trial on casdoor quickly. **With this image you can start a casdoor immediately with one single command (or two) without any complex configuration**. **Note: we DO NOT recommend you to use this image in productive environment**
-
-- casbin/casdoor: normal & graceful casdoor image with only casdoor and environment installed. 
-
-This method requires [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/) to be installed first.
-
-### Start casdoor with casbin/casdoor-all-in-one
-if the image is not pulled, pull it from dockerhub
-```shell
-docker pull casbin/casdoor-all-in-one
-```
-Start it with
-```shell
-docker run -p 8000:8000 casbin/casdoor-all-in-one
-```
-Now you can visit http://localhost:8000 and have a try. Default account and password is 'admin' and '123'. Go for it!
-
-### Start casdoor with casbin/casdoor
-#### modify the configurations
-For the convenience of your first attempt, docker-compose.yml contains commands to start a database via docker.
-
-Thus edit `conf/app.conf` to point out the location of database(db:3306), modify `dataSourceName` to the fixed content:
-
-```bash
-dataSourceName = root:123456@tcp(db:3306)/
-```
-
-> If you need to modify `conf/app.conf`, you need to re-run `docker-compose up`.
-
-#### Run
-
-```bash
-docker-compose up
-```
-
-### K8S
-You could use helm to deploy casdoor in k8s. At first, you should modify the [configmap](./manifests/casdoor/templates/configmap.yaml) for your application.
-And then run bellow command to deploy it.
-
-```bash
-IMG_TAG=latest make deploy 
-```
-
-And undeploy it with:
-```bash
-make undeploy
-```
-
-That's it! Try to visit http://localhost:8000/. :small_airplane:
-
-## Detailed documentation
-
-We also provide a complete [document](https://casdoor.org/) as a reference.
-
-## Other examples
-
-These all use casdoor as a centralized authentication platform.
-
-- [Casnode](https://github.com/casbin/casnode): Next-generation forum software based on React + Golang.
-- [Casbin-OA](https://github.com/casbin/casbin-oa): A full-featured OA(Office Assistant) system.
-- ......
 
 ## Contribute
 
 For casdoor, if you have any questions, you can give Issues, or you can also directly start Pull Requests(but we recommend giving issues first to communicate with the community).
 
-### I18n notice
+### I18n translation
+
+If you are contributing to casdoor, please note that we use [Crowdin](https://crowdin.com/project/casdoor-site) as translating platform and i18next as translating tool. When you add some words using i18next in the ```web/``` directory, please remember to add what you have added to the ```web/src/locales/en/data.json``` file.
+
 
-If you are contributing to casdoor, please note that we use [Crowdin](https://crowdin.com/project/casdoor-web) as translating platform and i18next as translating tool. When you add some words using i18next in the ```web/``` directory, please remember to add what you have added to the ```web/src/locales/en/data.json``` file.
 
 ## License
 
- [Apache-2.0](https://github.com/casdoor/casdoor/blob/master/LICENSE)
-
+[Apache-2.0](https://github.com/casdoor/casdoor/blob/master/LICENSE)

authz/authz.go

@@ -78,6 +78,7 @@ p, *, *, POST, /api/get-email-and-phone, *, *
 p, *, *, POST, /api/login, *, *
 p, *, *, GET, /api/get-app-login, *, *
 p, *, *, POST, /api/logout, *, *
+p, *, *, GET, /api/logout, *, *
 p, *, *, GET, /api/get-account, *, *
 p, *, *, GET, /api/userinfo, *, *
 p, *, *, *, /api/login/oauth, *, *
@@ -92,10 +93,12 @@ p, *, *, GET, /api/get-payment, *, *
 p, *, *, POST, /api/update-payment, *, *
 p, *, *, POST, /api/invoice-payment, *, *
 p, *, *, GET, /api/get-providers, *, *
+p, *, *, POST, /api/notify-payment, *, *
 p, *, *, POST, /api/unlink, *, *
 p, *, *, POST, /api/set-password, *, *
 p, *, *, POST, /api/send-verification-code, *, *
-p, *, *, GET, /api/get-human-check, *, *
+p, *, *, GET, /api/get-captcha, *, *
+p, *, *, POST, /api/verify-captcha, *, *
 p, *, *, POST, /api/reset-email-or-phone, *, *
 p, *, *, POST, /api/upload-resource, *, *
 p, *, *, GET, /.well-known/openid-configuration, *, *
@@ -104,6 +107,7 @@ p, *, *, GET, /api/get-saml-login, *, *
 p, *, *, POST, /api/acs, *, *
 p, *, *, GET, /api/saml/metadata, *, *
 p, *, *, *, /cas, *, *
+p, *, *, *, /api/webauthn, *, *
 `
 
 		sa := stringadapter.NewAdapter(ruleText)

captcha/aliyun.go

@@ -0,0 +1,105 @@
+// 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 captcha
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"net/url"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/casdoor/casdoor/util"
+)
+
+const AliyunCaptchaVerifyUrl = "http://afs.aliyuncs.com"
+
+type AliyunCaptchaProvider struct {
+}
+
+func NewAliyunCaptchaProvider() *AliyunCaptchaProvider {
+	captcha := &AliyunCaptchaProvider{}
+	return captcha
+}
+
+func contentEscape(str string) string {
+	str = strings.Replace(str, " ", "%20", -1)
+	str = url.QueryEscape(str)
+	return str
+}
+
+func (captcha *AliyunCaptchaProvider) VerifyCaptcha(token, clientSecret string) (bool, error) {
+	pathData, err := url.ParseQuery(token)
+	if err != nil {
+		return false, err
+	}
+
+	pathData["Action"] = []string{"AuthenticateSig"}
+	pathData["Format"] = []string{"json"}
+	pathData["SignatureMethod"] = []string{"HMAC-SHA1"}
+	pathData["SignatureNonce"] = []string{strconv.FormatInt(time.Now().UnixNano(), 10)}
+	pathData["SignatureVersion"] = []string{"1.0"}
+	pathData["Timestamp"] = []string{time.Now().UTC().Format("2006-01-02T15:04:05Z")}
+	pathData["Version"] = []string{"2018-01-12"}
+
+	var keys []string
+	for k := range pathData {
+		keys = append(keys, k)
+	}
+	sort.Strings(keys)
+
+	sortQuery := ""
+	for _, k := range keys {
+		sortQuery += k + "=" + contentEscape(pathData[k][0]) + "&"
+	}
+	sortQuery = strings.TrimSuffix(sortQuery, "&")
+
+	stringToSign := fmt.Sprintf("GET&%s&%s", url.QueryEscape("/"), url.QueryEscape(sortQuery))
+
+	signature := util.GetHmacSha1(clientSecret+"&", stringToSign)
+
+	resp, err := http.Get(fmt.Sprintf("%s?%s&Signature=%s", AliyunCaptchaVerifyUrl, sortQuery, url.QueryEscape(signature)))
+	if err != nil {
+		return false, err
+	}
+
+	defer resp.Body.Close()
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return false, err
+	}
+
+	type captchaResponse struct {
+		Code int    `json:"Code"`
+		Msg  string `json:"Msg"`
+	}
+	captchaResp := &captchaResponse{}
+
+	err = json.Unmarshal(body, captchaResp)
+	if err != nil {
+		return false, err
+	}
+
+	if captchaResp.Code != 100 {
+		return false, errors.New(captchaResp.Msg)
+	}
+
+	return true, nil
+}

captcha/default.go

@@ -0,0 +1,29 @@
+// 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 captcha
+
+import "github.com/casdoor/casdoor/object"
+
+type DefaultCaptchaProvider struct {
+}
+
+func NewDefaultCaptchaProvider() *DefaultCaptchaProvider {
+	captcha := &DefaultCaptchaProvider{}
+	return captcha
+}
+
+func (captcha *DefaultCaptchaProvider) VerifyCaptcha(token, clientSecret string) (bool, error) {
+	return object.VerifyCaptcha(clientSecret, token), nil
+}

captcha/hcaptcha.go

@@ -0,0 +1,67 @@
+// 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 captcha
+
+import (
+	"encoding/json"
+	"errors"
+	"io/ioutil"
+	"net/http"
+	"net/url"
+	"strings"
+)
+
+const HCaptchaVerifyUrl = "https://hcaptcha.com/siteverify"
+
+type HCaptchaProvider struct {
+}
+
+func NewHCaptchaProvider() *HCaptchaProvider {
+	captcha := &HCaptchaProvider{}
+	return captcha
+}
+
+func (captcha *HCaptchaProvider) VerifyCaptcha(token, clientSecret string) (bool, error) {
+	reqData := url.Values{
+		"secret":   {clientSecret},
+		"response": {token},
+	}
+	resp, err := http.PostForm(HCaptchaVerifyUrl, reqData)
+	if err != nil {
+		return false, err
+	}
+
+	defer resp.Body.Close()
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return false, err
+	}
+
+	type captchaResponse struct {
+		Success    bool     `json:"success"`
+		ErrorCodes []string `json:"error-codes"`
+	}
+	captchaResp := &captchaResponse{}
+	err = json.Unmarshal(body, captchaResp)
+	if err != nil {
+		return false, err
+	}
+
+	if len(captchaResp.ErrorCodes) > 0 {
+		return false, errors.New(strings.Join(captchaResp.ErrorCodes, ","))
+	}
+
+	return captchaResp.Success, nil
+}

captcha/provider.go

@@ -0,0 +1,32 @@
+// 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 captcha
+
+type CaptchaProvider interface {
+	VerifyCaptcha(token, clientSecret string) (bool, error)
+}
+
+func GetCaptchaProvider(captchaType string) CaptchaProvider {
+	if captchaType == "Default" {
+		return NewDefaultCaptchaProvider()
+	} else if captchaType == "reCAPTCHA" {
+		return NewReCaptchaProvider()
+	} else if captchaType == "hCaptcha" {
+		return NewHCaptchaProvider()
+	} else if captchaType == "Aliyun Captcha" {
+		return NewAliyunCaptchaProvider()
+	}
+	return nil
+}

captcha/recaptcha.go

@@ -0,0 +1,67 @@
+// 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 captcha
+
+import (
+	"encoding/json"
+	"errors"
+	"io/ioutil"
+	"net/http"
+	"net/url"
+	"strings"
+)
+
+const ReCaptchaVerifyUrl = "https://recaptcha.net/recaptcha/api/siteverify"
+
+type ReCaptchaProvider struct {
+}
+
+func NewReCaptchaProvider() *ReCaptchaProvider {
+	captcha := &ReCaptchaProvider{}
+	return captcha
+}
+
+func (captcha *ReCaptchaProvider) VerifyCaptcha(token, clientSecret string) (bool, error) {
+	reqData := url.Values{
+		"secret":   {clientSecret},
+		"response": {token},
+	}
+	resp, err := http.PostForm(ReCaptchaVerifyUrl, reqData)
+	if err != nil {
+		return false, err
+	}
+
+	defer resp.Body.Close()
+	body, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return false, err
+	}
+
+	type captchaResponse struct {
+		Success    bool     `json:"success"`
+		ErrorCodes []string `json:"error-codes"`
+	}
+	captchaResp := &captchaResponse{}
+	err = json.Unmarshal(body, captchaResp)
+	if err != nil {
+		return false, err
+	}
+
+	if len(captchaResp.ErrorCodes) > 0 {
+		return false, errors.New(strings.Join(captchaResp.ErrorCodes, ","))
+	}
+
+	return captchaResp.Success, nil
+}

conf/app.conf

@@ -1,7 +1,6 @@
 appname = casdoor
 httpport = 8000
 runmode = dev
-SessionOn = true
 copyrequestbody = true
 driverName = mysql
 dataSourceName = root:123456@tcp(localhost:3306)/
@@ -12,7 +11,7 @@ redisEndpoint =
 defaultStorageProvider = 
 isCloudIntranet = false
 authState = "casdoor"
-sock5Proxy = "127.0.0.1:10808"
+socks5Proxy = "127.0.0.1:10808"
 verificationCodeTimeout = 10
 initScore = 2000
 logPostOnly = true

conf/conf.go

@@ -17,6 +17,7 @@ package conf
 import (
 	"fmt"
 	"os"
+	"runtime"
 	"strconv"
 	"strings"
 
@@ -61,7 +62,12 @@ func GetBeegoConfDataSourceName() string {
 
 	runningInDocker := os.Getenv("RUNNING_IN_DOCKER")
 	if runningInDocker == "true" {
-		dataSourceName = strings.ReplaceAll(dataSourceName, "localhost", "host.docker.internal")
+		// https://stackoverflow.com/questions/48546124/what-is-linux-equivalent-of-host-docker-internal
+		if runtime.GOOS == "linux" {
+			dataSourceName = strings.ReplaceAll(dataSourceName, "localhost", "172.17.0.1")
+		} else {
+			dataSourceName = strings.ReplaceAll(dataSourceName, "localhost", "host.docker.internal")
+		}
 	}
 
 	return dataSourceName

conf/conf_test.go

@@ -79,13 +79,9 @@ func TestGetConfBool(t *testing.T) {
 		input       string
 		expected    interface{}
 	}{
-		{"Should be return false", "SessionOn", false},
 		{"Should be return false", "copyrequestbody", true},
 	}
 
-	//do some set up job
-	os.Setenv("SessionOn", "false")
-
 	err := beego.LoadAppConfig("ini", "app.conf")
 	assert.Nil(t, err)
 	for _, scenery := range scenarios {

controllers/account.go

@@ -75,12 +75,17 @@ type Response struct {
 	Data2  interface{} `json:"data2"`
 }
 
-type HumanCheck struct {
-	Type         string      `json:"type"`
-	AppKey       string      `json:"appKey"`
-	Scene        string      `json:"scene"`
-	CaptchaId    string      `json:"captchaId"`
-	CaptchaImage interface{} `json:"captchaImage"`
+type Captcha struct {
+	Type          string `json:"type"`
+	AppKey        string `json:"appKey"`
+	Scene         string `json:"scene"`
+	CaptchaId     string `json:"captchaId"`
+	CaptchaImage  []byte `json:"captchaImage"`
+	ClientId      string `json:"clientId"`
+	ClientSecret  string `json:"clientSecret"`
+	ClientId2     string `json:"clientId2"`
+	ClientSecret2 string `json:"clientSecret2"`
+	SubType       string `json:"subType"`
 }
 
 // Signup
@@ -223,7 +228,7 @@ func (c *ApiController) Signup() {
 // @Tag Login API
 // @Description logout the current user
 // @Success 200 {object} controllers.Response The Response object
-// @router /logout [post]
+// @router /logout [get,post]
 func (c *ApiController) Logout() {
 	user := c.GetSessionUsername()
 	util.LogInfo(c.Ctx, "API: [%s] logged out", user)
@@ -291,20 +296,37 @@ func (c *ApiController) GetUserinfo() {
 	c.ServeJSON()
 }
 
-// GetHumanCheck ...
+// GetCaptcha ...
 // @Tag Login API
-// @Title GetHumancheck
-// @router /api/get-human-check [get]
-func (c *ApiController) GetHumanCheck() {
-	c.Data["json"] = HumanCheck{Type: "none"}
+// @Title GetCaptcha
+// @router /api/get-captcha [get]
+func (c *ApiController) GetCaptcha() {
+	applicationId := c.Input().Get("applicationId")
+	isCurrentProvider := c.Input().Get("isCurrentProvider")
 
-	provider := object.GetDefaultHumanCheckProvider()
-	if provider == nil {
-		id, img := object.GetCaptcha()
-		c.Data["json"] = HumanCheck{Type: "captcha", CaptchaId: id, CaptchaImage: img}
-		c.ServeJSON()
+	captchaProvider, err := object.GetCaptchaProviderByApplication(applicationId, isCurrentProvider)
+	if err != nil {
+		c.ResponseError(err.Error())
 		return
 	}
 
-	c.ServeJSON()
+	if captchaProvider != nil {
+		if captchaProvider.Type == "Default" {
+			id, img := object.GetCaptcha()
+			c.ResponseOk(Captcha{Type: captchaProvider.Type, CaptchaId: id, CaptchaImage: img})
+			return
+		} else if captchaProvider.Type != "" {
+			c.ResponseOk(Captcha{
+				Type:          captchaProvider.Type,
+				SubType:       captchaProvider.SubType,
+				ClientId:      captchaProvider.ClientId,
+				ClientSecret:  captchaProvider.ClientSecret,
+				ClientId2:     captchaProvider.ClientId2,
+				ClientSecret2: captchaProvider.ClientSecret2,
+			})
+			return
+		}
+	}
+
+	c.ResponseOk(Captcha{Type: "none"})
 }

controllers/auth.go

@@ -28,6 +28,7 @@ import (
 	"github.com/casdoor/casdoor/object"
 	"github.com/casdoor/casdoor/proxy"
 	"github.com/casdoor/casdoor/util"
+	"github.com/google/uuid"
 )
 
 func codeToResponse(code *object.Code) *Response {
@@ -49,6 +50,17 @@ func tokenToResponse(token *object.Token) *Response {
 // HandleLoggedIn ...
 func (c *ApiController) HandleLoggedIn(application *object.Application, user *object.User, form *RequestForm) (resp *Response) {
 	userId := user.GetId()
+
+	allowed, err := object.CheckAccessPermission(userId, application)
+	if err != nil {
+		c.ResponseError(err.Error(), nil)
+		return
+	}
+	if !allowed {
+		c.ResponseError("Unauthorized operation")
+		return
+	}
+
 	if form.Type == ResponseTypeLogin {
 		c.SetSessionUsername(userId)
 		util.LogInfo(c.Ctx, "API: [%s] signed in", userId)
@@ -132,7 +144,7 @@ func (c *ApiController) HandleLoggedIn(application *object.Application, user *ob
 // @Param   redirectUri    query    string  true        "redirect uri"
 // @Param   scope    query    string  true        "scope"
 // @Param   state    query    string  true        "state"
-// @Success 200 {object} controllers.api_controller.Response The Response object
+// @Success 200 {object}  Response The Response object
 // @router /get-app-login [get]
 func (c *ApiController) GetApplicationLogin() {
 	clientId := c.Input().Get("clientId")
@@ -162,9 +174,16 @@ func setHttpClient(idProvider idp.IdProvider, providerType string) {
 // @Title Login
 // @Tag Login API
 // @Description login
-// @Param   oAuthParams     query    string  true        "oAuth parameters"
-// @Param   body    body   RequestForm  true        "Login information"
-// @Success 200 {object} controllers.api_controller.Response The Response object
+// @Param clientId        query    string  true clientId
+// @Param responseType    query    string  true responseType
+// @Param redirectUri     query    string  true redirectUri
+// @Param scope     query    string  false  scope
+// @Param state     query    string  false  state
+// @Param nonce     query    string  false nonce
+// @Param code_challenge_method   query    string  false code_challenge_method
+// @Param code_challenge          query    string  false code_challenge
+// @Param   form   body   controllers.RequestForm  true        "Login information"
+// @Success 200 {object} Response The Response object
 // @router /login [post]
 func (c *ApiController) Login() {
 	resp := &Response{}
@@ -222,7 +241,11 @@ func (c *ApiController) Login() {
 			}
 
 			// disable the verification code
-			object.DisableVerificationCode(form.Username)
+			if strings.Contains(form.Username, "@") {
+				object.DisableVerificationCode(form.Username)
+			} else {
+				object.DisableVerificationCode(fmt.Sprintf("+%s%s", form.PhonePrefix, form.Username))
+			}
 
 			user = object.GetUserByFields(form.Organization, form.Username)
 			if user == nil {
@@ -248,7 +271,7 @@ func (c *ApiController) Login() {
 			record := object.NewRecord(c.Ctx)
 			record.Organization = application.Organization
 			record.User = user.Name
-			util.SafeGoroutine(func() {object.AddRecord(record)})
+			util.SafeGoroutine(func() { object.AddRecord(record) })
 		}
 	} else if form.Provider != "" {
 		application := object.GetApplication(fmt.Sprintf("admin/%s", form.Application))
@@ -321,12 +344,6 @@ func (c *ApiController) Login() {
 				user = object.GetUser(fmt.Sprintf("%s/%s", application.Organization, userInfo.Id))
 			} else if provider.Category == "OAuth" {
 				user = object.GetUserByField(application.Organization, provider.Type, userInfo.Id)
-				if user == nil {
-					user = object.GetUserByField(application.Organization, provider.Type, userInfo.Username)
-				}
-				if user == nil {
-					user = object.GetUserByField(application.Organization, "name", userInfo.Username)
-				}
 			}
 
 			if user != nil && user.IsDeleted == false {
@@ -341,7 +358,7 @@ func (c *ApiController) Login() {
 				record := object.NewRecord(c.Ctx)
 				record.Organization = application.Organization
 				record.User = user.Name
-				util.SafeGoroutine(func() {object.AddRecord(record)})
+				util.SafeGoroutine(func() { object.AddRecord(record) })
 			} else if provider.Category == "OAuth" {
 				// Sign up via OAuth
 				if !application.EnableSignUp {
@@ -354,6 +371,19 @@ func (c *ApiController) Login() {
 					return
 				}
 
+				// Handle username conflicts
+				tmpUser := object.GetUser(fmt.Sprintf("%s/%s", application.Organization, userInfo.Username))
+				if tmpUser != nil {
+					uid, err := uuid.NewRandom()
+					if err != nil {
+						c.ResponseError(err.Error())
+						return
+					}
+
+					uidStr := strings.Split(uid.String(), "-")
+					userInfo.Username = fmt.Sprintf("%s_%s", userInfo.Username, uidStr[1])
+				}
+
 				properties := map[string]string{}
 				properties["no"] = strconv.Itoa(len(object.GetUsers(application.Organization)) + 2)
 				user = &object.User{
@@ -390,7 +420,13 @@ func (c *ApiController) Login() {
 				record := object.NewRecord(c.Ctx)
 				record.Organization = application.Organization
 				record.User = user.Name
-				util.SafeGoroutine(func() {object.AddRecord(record)})
+				util.SafeGoroutine(func() { object.AddRecord(record) })
+
+				record2 := object.NewRecord(c.Ctx)
+				record2.Action = "signup"
+				record2.Organization = application.Organization
+				record2.User = user.Name
+				util.SafeGoroutine(func() { object.AddRecord(record2) })
 			} else if provider.Category == "SAML" {
 				resp = &Response{Status: "error", Msg: "The account does not exist"}
 			}
@@ -403,9 +439,6 @@ func (c *ApiController) Login() {
 			}
 
 			oldUser := object.GetUserByField(application.Organization, provider.Type, userInfo.Id)
-			if oldUser == nil {
-				oldUser = object.GetUserByField(application.Organization, provider.Type, userInfo.Username)
-			}
 			if oldUser != nil {
 				c.ResponseError(fmt.Sprintf("The account for provider: %s and username: %s (%s) is already linked to another account: %s (%s)", provider.Type, userInfo.Username, userInfo.DisplayName, oldUser.Name, oldUser.DisplayName))
 				return
@@ -434,6 +467,11 @@ func (c *ApiController) Login() {
 
 			user := c.getCurrentUser()
 			resp = c.HandleLoggedIn(application, user, &form)
+
+			record := object.NewRecord(c.Ctx)
+			record.Organization = application.Organization
+			record.User = user.Name
+			util.SafeGoroutine(func() { object.AddRecord(record) })
 		} else {
 			c.ResponseError(fmt.Sprintf("unknown authentication type (not password or provider), form = %s", util.StructToJson(form)))
 			return

controllers/model.go

@@ -0,0 +1,120 @@
+// Copyright 2021 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"
+)
+
+// GetModels
+// @Title GetModels
+// @Tag Model API
+// @Description get models
+// @Param   owner     query    string  true        "The owner of models"
+// @Success 200 {array} object.Model The Response object
+// @router /get-models [get]
+func (c *ApiController) GetModels() {
+	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.GetModels(owner)
+		c.ServeJSON()
+	} else {
+		limit := util.ParseInt(limit)
+		paginator := pagination.SetPaginator(c.Ctx, limit, int64(object.GetModelCount(owner, field, value)))
+		models := object.GetPaginationModels(owner, paginator.Offset(), limit, field, value, sortField, sortOrder)
+		c.ResponseOk(models, paginator.Nums())
+	}
+}
+
+// GetModel
+// @Title GetModel
+// @Tag Model API
+// @Description get model
+// @Param   id    query    string  true        "The id of the model"
+// @Success 200 {object} object.Model The Response object
+// @router /get-model [get]
+func (c *ApiController) GetModel() {
+	id := c.Input().Get("id")
+
+	c.Data["json"] = object.GetModel(id)
+	c.ServeJSON()
+}
+
+// UpdateModel
+// @Title UpdateModel
+// @Tag Model API
+// @Description update model
+// @Param   id    query    string  true        "The id of the model"
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /update-model [post]
+func (c *ApiController) UpdateModel() {
+	id := c.Input().Get("id")
+
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.UpdateModel(id, &model))
+	c.ServeJSON()
+}
+
+// AddModel
+// @Title AddModel
+// @Tag Model API
+// @Description add model
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /add-model [post]
+func (c *ApiController) AddModel() {
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.AddModel(&model))
+	c.ServeJSON()
+}
+
+// DeleteModel
+// @Title DeleteModel
+// @Tag Model API
+// @Description delete model
+// @Param   body    body   object.Model  true        "The details of the model"
+// @Success 200 {object} controllers.Response The Response object
+// @router /delete-model [post]
+func (c *ApiController) DeleteModel() {
+	var model object.Model
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &model)
+	if err != nil {
+		panic(err)
+	}
+
+	c.Data["json"] = wrapActionResponse(object.DeleteModel(&model))
+	c.ServeJSON()
+}

controllers/oidc_discovery.go

@@ -18,6 +18,8 @@ import "github.com/casdoor/casdoor/object"
 
 // @Title GetOidcDiscovery
 // @Tag OIDC API
+// @Description Get Oidc Discovery
+// @Success 200 {object} object.OidcDiscovery
 // @router /.well-known/openid-configuration [get]
 func (c *RootController) GetOidcDiscovery() {
 	host := c.Ctx.Request.Host
@@ -27,6 +29,7 @@ func (c *RootController) GetOidcDiscovery() {
 
 // @Title GetJwks
 // @Tag OIDC API
+// @Success 200 {object} jose.JSONWebKey
 // @router /.well-known/jwks [get]
 func (c *RootController) GetJwks() {
 	jwks, err := object.GetJsonWebKeySet()

controllers/record.go

@@ -26,7 +26,7 @@ import (
 // @Description get all records
 // @Param   pageSize     query    string  true        "The size of each page"
 // @Param   p     query    string  true        "The number of the page"
-// @Success 200 {array} object.Records The Response object
+// @Success 200 {object} object.Record The Response object
 // @router /get-records [get]
 func (c *ApiController) GetRecords() {
 	limit := c.Input().Get("pageSize")
@@ -50,8 +50,8 @@ func (c *ApiController) GetRecords() {
 // @Tag Record API
 // @Title GetRecordsByFilter
 // @Description get records by filter
-// @Param   body    body   object.Records  true  "filter Record message"
-// @Success 200 {array} object.Records The Response object
+// @Param   filter  body string     true  "filter Record message"
+// @Success 200 {object} object.Record The Response object
 // @router /get-records-filter [post]
 func (c *ApiController) GetRecordsByFilter() {
 	body := string(c.Ctx.Input.RequestBody)

controllers/saml.go

@@ -26,6 +26,7 @@ func (c *ApiController) GetSamlMeta() {
 	application := object.GetApplication(paramApp)
 	if application == nil {
 		c.ResponseError(fmt.Sprintf("err: application %s not found", paramApp))
+		return
 	}
 	metadata, _ := object.GetSamlMeta(application, host)
 	c.Data["xml"] = metadata

controllers/service.go

@@ -25,33 +25,61 @@ import (
 	"github.com/casdoor/casdoor/util"
 )
 
+type EmailForm struct {
+	Title     string   `json:"title"`
+	Content   string   `json:"content"`
+	Sender    string   `json:"sender"`
+	Receivers []string `json:"receivers"`
+	Provider  string   `json:"provider"`
+}
+
+type SmsForm struct {
+	Content   string   `json:"content"`
+	Receivers []string `json:"receivers"`
+	OrgId     string   `json:"organizationId"` // e.g. "admin/built-in"
+}
+
 // SendEmail
 // @Title SendEmail
 // @Tag Service API
 // @Description This API is not for Casdoor frontend to call, it is for Casdoor SDKs.
 // @Param   clientId    query    string  true        "The clientId of the application"
 // @Param   clientSecret    query    string  true    "The clientSecret of the application"
-// @Param   body    body   emailForm    true         "Details of the email request"
+// @Param   from    body   controllers.EmailForm    true         "Details of the email request"
 // @Success 200 {object}  Response object
 // @router /api/send-email [post]
 func (c *ApiController) SendEmail() {
-	provider, _, ok := c.GetProviderFromContext("Email")
-	if !ok {
-		return
-	}
+	var emailForm EmailForm
 
-	var emailForm struct {
-		Title     string   `json:"title"`
-		Content   string   `json:"content"`
-		Sender    string   `json:"sender"`
-		Receivers []string `json:"receivers"`
-	}
 	err := json.Unmarshal(c.Ctx.Input.RequestBody, &emailForm)
 	if err != nil {
 		c.ResponseError(err.Error())
 		return
 	}
 
+	var provider *object.Provider
+	if emailForm.Provider != "" {
+		// called by frontend's TestEmailWidget, provider name is set by frontend
+		provider = object.GetProvider(fmt.Sprintf("admin/%s", emailForm.Provider))
+	} else {
+		// called by Casdoor SDK via Client ID & Client Secret, so the used Email provider will be the application' Email provider or the default Email provider
+		var ok bool
+		provider, _, ok = c.GetProviderFromContext("Email")
+		if !ok {
+			return
+		}
+	}
+
+	// when receiver is the reserved keyword: "TestSmtpServer", it means to test the SMTP server instead of sending a real Email
+	if len(emailForm.Receivers) == 1 && emailForm.Receivers[0] == "TestSmtpServer" {
+		err := object.DailSmtpServer(provider)
+		if err != nil {
+			c.ResponseError(err.Error())
+			return
+		}
+		c.ResponseOk()
+	}
+
 	if util.IsStrsEmpty(emailForm.Title, emailForm.Content, emailForm.Sender) {
 		c.ResponseError(fmt.Sprintf("Empty parameters for emailForm: %v", emailForm))
 		return
@@ -86,7 +114,7 @@ func (c *ApiController) SendEmail() {
 // @Description This API is not for Casdoor frontend to call, it is for Casdoor SDKs.
 // @Param   clientId    query    string  true        "The clientId of the application"
 // @Param   clientSecret    query    string  true    "The clientSecret of the application"
-// @Param   body    body   smsForm    true           "Details of the sms request"
+// @Param   from    body   controllers.SmsForm    true           "Details of the sms request"
 // @Success 200 {object}  Response object
 // @router /api/send-sms [post]
 func (c *ApiController) SendSms() {
@@ -95,11 +123,7 @@ func (c *ApiController) SendSms() {
 		return
 	}
 
-	var smsForm struct {
-		Content   string   `json:"content"`
-		Receivers []string `json:"receivers"`
-		OrgId     string   `json:"organizationId"` // e.g. "admin/built-in"
-	}
+	var smsForm SmsForm
 	err := json.Unmarshal(c.Ctx.Input.RequestBody, &smsForm)
 	if err != nil {
 		c.ResponseError(err.Error())

controllers/token.go

@@ -165,6 +165,8 @@ func (c *ApiController) GetOAuthCode() {
 // @Param   client_secret     query    string  true        "OAuth client secret"
 // @Param   code     query    string  true        "OAuth code"
 // @Success 200 {object} object.TokenWrapper The Response object
+// @Success 400 {object} object.TokenError The Response object
+// @Success 401 {object} object.TokenError The Response object
 // @router /login/oauth/access_token [post]
 func (c *ApiController) GetOAuthToken() {
 	grantType := c.Input().Get("grant_type")
@@ -200,6 +202,7 @@ func (c *ApiController) GetOAuthToken() {
 	host := c.Ctx.Request.Host
 
 	c.Data["json"] = object.GetOAuthToken(grantType, clientId, clientSecret, code, verifier, scope, username, password, host, tag, avatar)
+	c.SetTokenErrorHttpStatus()
 	c.ServeJSON()
 }
 
@@ -213,6 +216,8 @@ func (c *ApiController) GetOAuthToken() {
 // @Param   client_id     query    string  true        "OAuth client id"
 // @Param   client_secret     query    string  false        "OAuth client secret"
 // @Success 200 {object} object.TokenWrapper The Response object
+// @Success 400 {object} object.TokenError The Response object
+// @Success 401 {object} object.TokenError The Response object
 // @router /login/oauth/refresh_token [post]
 func (c *ApiController) RefreshToken() {
 	grantType := c.Input().Get("grant_type")
@@ -235,6 +240,7 @@ func (c *ApiController) RefreshToken() {
 	}
 
 	c.Data["json"] = object.RefreshToken(grantType, refreshToken, scope, clientId, clientSecret, host)
+	c.SetTokenErrorHttpStatus()
 	c.ServeJSON()
 }
 
@@ -270,6 +276,8 @@ func (c *ApiController) TokenLogout() {
 // @Param token formData string true "access_token's value or refresh_token's value"
 // @Param token_type_hint formData string true "the token type access_token or refresh_token"
 // @Success 200 {object} object.IntrospectionResponse The Response object
+// @Success 400 {object} object.TokenError The Response object
+// @Success 401 {object} object.TokenError The Response object
 // @router /login/oauth/introspect [post]
 func (c *ApiController) IntrospectToken() {
 	tokenValue := c.Input().Get("token")
@@ -279,12 +287,21 @@ func (c *ApiController) IntrospectToken() {
 		clientSecret = c.Input().Get("client_secret")
 		if clientId == "" || clientSecret == "" {
 			c.ResponseError("empty clientId or clientSecret")
+			c.Data["json"] = &object.TokenError{
+				Error: object.INVALID_REQUEST,
+			}
+			c.SetTokenErrorHttpStatus()
+			c.ServeJSON()
 			return
 		}
 	}
 	application := object.GetApplicationByClientId(clientId)
 	if application == nil || application.ClientSecret != clientSecret {
 		c.ResponseError("invalid application or wrong clientSecret")
+		c.Data["json"] = &object.TokenError{
+			Error: object.INVALID_CLIENT,
+		}
+		c.SetTokenErrorHttpStatus()
 		return
 	}
 	token := object.GetTokenByTokenAndApplication(tokenValue, application.Name)

controllers/user.go

@@ -85,11 +85,15 @@ func (c *ApiController) GetUsers() {
 // @router /get-user [get]
 func (c *ApiController) GetUser() {
 	id := c.Input().Get("id")
-	owner := c.Input().Get("owner")
 	email := c.Input().Get("email")
-	userOwner, _ := util.GetOwnerAndNameFromId(id)
-	organization := object.GetOrganization(fmt.Sprintf("%s/%s", "admin", userOwner))
+	userId := c.Input().Get("userId")
 
+	owner := c.Input().Get("owner")
+	if owner == "" {
+		owner, _ = util.GetOwnerAndNameFromId(id)
+	}
+
+	organization := object.GetOrganization(fmt.Sprintf("%s/%s", "admin", owner))
 	if !organization.IsProfilePublic {
 		requestUserId := c.GetSessionUsername()
 		hasPermission, err := object.CheckUserPermission(requestUserId, id, false)
@@ -100,10 +104,12 @@ func (c *ApiController) GetUser() {
 	}
 
 	var user *object.User
-	if email == "" {
-		user = object.GetUser(id)
-	} else {
+	if email != "" {
 		user = object.GetUserByEmail(owner, email)
+	} else if userId != "" {
+		user = object.GetUserByUserId(owner, userId)
+	} else {
+		user = object.GetUser(id)
 	}
 
 	c.Data["json"] = object.GetMaskedUser(user)

controllers/util.go

@@ -51,6 +51,23 @@ func (c *ApiController) ResponseError(error string, data ...interface{}) {
 	c.ServeJSON()
 }
 
+// SetTokenErrorHttpStatus ...
+func (c *ApiController) SetTokenErrorHttpStatus() {
+	_, ok := c.Data["json"].(*object.TokenError)
+	if ok {
+		if c.Data["json"].(*object.TokenError).Error == object.INVALID_CLIENT {
+			c.Ctx.Output.SetStatus(401)
+			c.Ctx.Output.Header("WWW-Authenticate", "Basic realm=\"OAuth2\"")
+		} else {
+			c.Ctx.Output.SetStatus(400)
+		}
+	}
+	_, ok = c.Data["json"].(*object.TokenWrapper)
+	if ok {
+		c.Ctx.Output.SetStatus(200)
+	}
+}
+
 // RequireSignedIn ...
 func (c *ApiController) RequireSignedIn() (string, bool) {
 	userId := c.GetSessionUsername()

controllers/verification.go

@@ -19,6 +19,7 @@ import (
 	"fmt"
 	"strings"
 
+	"github.com/casdoor/casdoor/captcha"
 	"github.com/casdoor/casdoor/object"
 	"github.com/casdoor/casdoor/util"
 )
@@ -41,32 +42,40 @@ func (c *ApiController) getCurrentUser() *object.User {
 func (c *ApiController) SendVerificationCode() {
 	destType := c.Ctx.Request.Form.Get("type")
 	dest := c.Ctx.Request.Form.Get("dest")
-	orgId := c.Ctx.Request.Form.Get("organizationId")
 	checkType := c.Ctx.Request.Form.Get("checkType")
 	checkId := c.Ctx.Request.Form.Get("checkId")
 	checkKey := c.Ctx.Request.Form.Get("checkKey")
 	checkUser := c.Ctx.Request.Form.Get("checkUser")
+	applicationId := c.Ctx.Request.Form.Get("applicationId")
 	remoteAddr := util.GetIPFromRequest(c.Ctx.Request)
 
-	if len(destType) == 0 || len(dest) == 0 || len(orgId) == 0 || !strings.Contains(orgId, "/") || len(checkType) == 0 || len(checkId) == 0 || len(checkKey) == 0 {
+	if destType == "" || dest == "" || applicationId == "" || !strings.Contains(applicationId, "/") || checkType == "" {
 		c.ResponseError("Missing parameter.")
 		return
 	}
 
-	isHuman := false
-	captchaProvider := object.GetDefaultHumanCheckProvider()
-	if captchaProvider == nil {
-		isHuman = object.VerifyCaptcha(checkId, checkKey)
-	}
+	captchaProvider := captcha.GetCaptchaProvider(checkType)
 
-	if !isHuman {
-		c.ResponseError("Turing test failed.")
-		return
+	if captchaProvider != nil {
+		if checkKey == "" {
+			c.ResponseError("Missing parameter: checkKey.")
+			return
+		}
+		isHuman, err := captchaProvider.VerifyCaptcha(checkKey, checkId)
+		if err != nil {
+			c.ResponseError(err.Error())
+			return
+		}
+
+		if !isHuman {
+			c.ResponseError("Turing test failed.")
+			return
+		}
 	}
 
 	user := c.getCurrentUser()
-	organization := object.GetOrganization(orgId)
-	application := object.GetApplicationByOrganizationName(organization.Name)
+	application := object.GetApplication(applicationId)
+	organization := object.GetOrganization(fmt.Sprintf("%s/%s", application.Owner, application.Organization))
 
 	if checkUser == "true" && user == nil && object.GetUserByFields(organization.Name, dest) == nil {
 		c.ResponseError("Please login first")
@@ -76,7 +85,7 @@ func (c *ApiController) SendVerificationCode() {
 	sendResp := errors.New("Invalid dest type")
 
 	if user == nil && checkUser != "" && checkUser != "true" {
-		_, name := util.GetOwnerAndNameFromId(orgId)
+		name := application.Organization
 		user = object.GetUser(fmt.Sprintf("%s/%s", name, checkUser))
 	}
 	switch destType {
@@ -99,13 +108,12 @@ func (c *ApiController) SendVerificationCode() {
 			c.ResponseError("Invalid phone number")
 			return
 		}
-		org := object.GetOrganization(orgId)
-		if org == nil {
-			c.ResponseError("Missing parameter.")
+		if organization == nil {
+			c.ResponseError("The organization doesn't exist.")
 			return
 		}
 
-		dest = fmt.Sprintf("+%s%s", org.PhonePrefix, dest)
+		dest = fmt.Sprintf("+%s%s", organization.PhonePrefix, dest)
 		provider := application.GetSmsProvider()
 		sendResp = object.SendVerificationCodeToPhone(organization, user, provider, remoteAddr, dest)
 	}
@@ -173,3 +181,36 @@ func (c *ApiController) ResetEmailOrPhone() {
 	c.Data["json"] = Response{Status: "ok"}
 	c.ServeJSON()
 }
+
+// VerifyCaptcha ...
+// @Title VerifyCaptcha
+// @Tag Verification API
+// @router /verify-captcha [post]
+func (c *ApiController) VerifyCaptcha() {
+	captchaType := c.Ctx.Request.Form.Get("captchaType")
+
+	captchaToken := c.Ctx.Request.Form.Get("captchaToken")
+	clientSecret := c.Ctx.Request.Form.Get("clientSecret")
+	if captchaToken == "" {
+		c.ResponseError("Missing parameter: captchaToken.")
+		return
+	}
+	if clientSecret == "" {
+		c.ResponseError("Missing parameter: clientSecret.")
+		return
+	}
+
+	provider := captcha.GetCaptchaProvider(captchaType)
+	if provider == nil {
+		c.ResponseError("Invalid captcha provider.")
+		return
+	}
+
+	isValid, err := provider.VerifyCaptcha(captchaToken, clientSecret)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+
+	c.ResponseOk(isValid)
+}

controllers/webauthn.go

@@ -0,0 +1,138 @@
+// 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 (
+	"bytes"
+	"io/ioutil"
+
+	"github.com/casdoor/casdoor/object"
+	"github.com/casdoor/casdoor/util"
+	"github.com/duo-labs/webauthn/protocol"
+	"github.com/duo-labs/webauthn/webauthn"
+)
+
+// @Title WebAuthnSignupBegin
+// @Tag User API
+// @Description WebAuthn Registration Flow 1st stage
+// @Success 200 {object} protocol.CredentialCreation The CredentialCreationOptions object
+// @router /webauthn/signup/begin [get]
+func (c *ApiController) WebAuthnSignupBegin() {
+	webauthnObj := object.GetWebAuthnObject(c.Ctx.Request.Host)
+	user := c.getCurrentUser()
+	if user == nil {
+		c.ResponseError("Please login first.")
+		return
+	}
+
+	registerOptions := func(credCreationOpts *protocol.PublicKeyCredentialCreationOptions) {
+		credCreationOpts.CredentialExcludeList = user.CredentialExcludeList()
+	}
+	options, sessionData, err := webauthnObj.BeginRegistration(
+		user,
+		registerOptions,
+	)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+	c.SetSession("registration", *sessionData)
+	c.Data["json"] = options
+	c.ServeJSON()
+}
+
+// @Title WebAuthnSignupFinish
+// @Tag User API
+// @Description WebAuthn Registration Flow 2nd stage
+// @Param   body    body   protocol.CredentialCreationResponse  true        "authenticator attestation Response"
+// @Success 200 {object} Response "The Response object"
+// @router /webauthn/signup/finish [post]
+func (c *ApiController) WebAuthnSignupFinish() {
+	webauthnObj := object.GetWebAuthnObject(c.Ctx.Request.Host)
+	user := c.getCurrentUser()
+	if user == nil {
+		c.ResponseError("Please login first.")
+		return
+	}
+	sessionObj := c.GetSession("registration")
+	sessionData, ok := sessionObj.(webauthn.SessionData)
+	if !ok {
+		c.ResponseError("Please call WebAuthnSignupBegin first")
+		return
+	}
+	c.Ctx.Request.Body = ioutil.NopCloser(bytes.NewBuffer(c.Ctx.Input.RequestBody))
+
+	credential, err := webauthnObj.FinishRegistration(user, sessionData, c.Ctx.Request)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+	isGlobalAdmin := c.IsGlobalAdmin()
+	user.AddCredentials(*credential, isGlobalAdmin)
+	c.ResponseOk()
+}
+
+// @Title WebAuthnSigninBegin
+// @Tag Login API
+// @Description WebAuthn Login Flow 1st stage
+// @Param   owner     query    string  true        "owner"
+// @Param   name     query    string  true        "name"
+// @Success 200 {object} protocol.CredentialAssertion The CredentialAssertion object
+// @router /webauthn/signin/begin [get]
+func (c *ApiController) WebAuthnSigninBegin() {
+	webauthnObj := object.GetWebAuthnObject(c.Ctx.Request.Host)
+	userOwner := c.Input().Get("owner")
+	userName := c.Input().Get("name")
+	user := object.GetUserByFields(userOwner, userName)
+	if user == nil {
+		c.ResponseError("Please Giveout Owner and Username.")
+		return
+	}
+	options, sessionData, err := webauthnObj.BeginLogin(user)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+	c.SetSession("authentication", *sessionData)
+	c.Data["json"] = options
+	c.ServeJSON()
+}
+
+// @Title WebAuthnSigninBegin
+// @Tag Login API
+// @Description WebAuthn Login Flow 2nd stage
+// @Param   body    body   protocol.CredentialAssertionResponse  true        "authenticator assertion Response"
+// @Success 200 {object} Response "The Response object"
+// @router /webauthn/signin/finish [post]
+func (c *ApiController) WebAuthnSigninFinish() {
+	webauthnObj := object.GetWebAuthnObject(c.Ctx.Request.Host)
+	sessionObj := c.GetSession("authentication")
+	sessionData, ok := sessionObj.(webauthn.SessionData)
+	if !ok {
+		c.ResponseError("Please call WebAuthnSigninBegin first")
+		return
+	}
+	c.Ctx.Request.Body = ioutil.NopCloser(bytes.NewBuffer(c.Ctx.Input.RequestBody))
+	userId := string(sessionData.UserID)
+	user := object.GetUser(userId)
+	_, err := webauthnObj.FinishLogin(user, sessionData, c.Ctx.Request)
+	if err != nil {
+		c.ResponseError(err.Error())
+		return
+	}
+	c.SetSessionUsername(userId)
+	util.LogInfo(c.Ctx, "API: [%s] signed in", userId)
+	c.ResponseOk(userId)
+}

cred/md5-user-salt.go

@@ -38,8 +38,10 @@ func NewMd5UserSaltCredManager() *Md5UserSaltCredManager {
 }
 
 func (cm *Md5UserSaltCredManager) GetHashedPassword(password string, userSalt string, organizationSalt string) string {
-	hash := getMd5HexDigest(password)
-	res := getMd5HexDigest(hash + userSalt)
+	res := getMd5HexDigest(password)
+	if userSalt != "" {
+		res = getMd5HexDigest(res + userSalt)
+	}
 	return res
 }
 

cred/sha256-salt.go

@@ -38,8 +38,10 @@ func NewSha256SaltCredManager() *Sha256SaltCredManager {
 }
 
 func (cm *Sha256SaltCredManager) GetHashedPassword(password string, userSalt string, organizationSalt string) string {
-	hash := getSha256HexDigest(password)
-	res := getSha256HexDigest(hash + organizationSalt)
+	res := getSha256HexDigest(password)
+	if organizationSalt != "" {
+		res = getSha256HexDigest(res + organizationSalt)
+	}
 	return res
 }
 

cred/sha256-salt_test.go

@@ -25,3 +25,10 @@ func TestGetSaltedPassword(t *testing.T) {
 	cm := NewSha256SaltCredManager()
 	fmt.Printf("%s -> %s\n", password, cm.GetHashedPassword(password, "", salt))
 }
+
+func TestGetPassword(t *testing.T) {
+	password := "123456"
+	cm := NewSha256SaltCredManager()
+	// https://passwordsgenerator.net/sha256-hash-generator/
+	fmt.Printf("%s -> %s\n", "8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92", cm.GetHashedPassword(password, "", ""))
+}

docker-compose.yml

@@ -5,6 +5,7 @@ services:
     build:
       context: ./
       dockerfile: Dockerfile
+      target: STANDARD
     entrypoint: /bin/sh -c './server --createDatabase=true'
     ports:
       - "8000:8000"
@@ -12,8 +13,6 @@ services:
       - db
     environment:
       RUNNING_IN_DOCKER: "true"
-    extra_hosts:
-      - "host.docker.internal:host-gateway"
     volumes:
       - ./conf:/conf/
   db:

docker-entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+if [ "${MYSQL_ROOT_PASSWORD}" = "" ] ;then MYSQL_ROOT_PASSWORD=123456 ;fi
+
+service mariadb start
+
+mysqladmin -u root password ${MYSQL_ROOT_PASSWORD}
+
+exec /server --createDatabase=true

go.mod

@@ -11,9 +11,10 @@ require (
 	github.com/casbin/casbin/v2 v2.30.1
 	github.com/casbin/xorm-adapter/v2 v2.5.1
 	github.com/casdoor/go-sms-sender v0.2.0
-	github.com/casdoor/goth v1.69.0-FIX1
+	github.com/casdoor/goth v1.69.0-FIX2
 	github.com/casdoor/oss v1.2.0
 	github.com/dchest/captcha v0.0.0-20200903113550-03f5f0333e1f
+	github.com/duo-labs/webauthn v0.0.0-20211221191814-a22482edaa3b
 	github.com/go-gomail/gomail v0.0.0-20160411212932-81ebce5c23df
 	github.com/go-ldap/ldap/v3 v3.3.0
 	github.com/go-pay/gopay v1.5.72

go.sum

@@ -100,8 +100,8 @@ github.com/casbin/xorm-adapter/v2 v2.5.1 h1:BkpIxRHKa0s3bSMx173PpuU7oTs+Zw7XmD0B
 github.com/casbin/xorm-adapter/v2 v2.5.1/go.mod h1:AeH4dBKHC9/zYxzdPVHhPDzF8LYLqjDdb767CWJoV54=
 github.com/casdoor/go-sms-sender v0.2.0 h1:52bin4EBOPzOee64s9UK7jxd22FODvT9/+Y/Z+PSHpg=
 github.com/casdoor/go-sms-sender v0.2.0/go.mod h1:fsZsNnALvFIo+HFcE1U/oCQv4ZT42FdglXKMsEm3WSk=
-github.com/casdoor/goth v1.69.0-FIX1 h1:24Y3tfaJxWGJbxickGe3F9y2c8X1PgsQynhxGXV1f9Q=
-github.com/casdoor/goth v1.69.0-FIX1/go.mod h1:Om55nRo8CkeDkPSNBbzXW4G5uI28ZUkSk5S69dPek3s=
+github.com/casdoor/goth v1.69.0-FIX2 h1:RgfIMkL9kekylgxHHK2ZY8ASAwOGns2HVlaBwLu7Bcs=
+github.com/casdoor/goth v1.69.0-FIX2/go.mod h1:Om55nRo8CkeDkPSNBbzXW4G5uI28ZUkSk5S69dPek3s=
 github.com/casdoor/oss v1.2.0 h1:ozLAE+nnNdFQBWbzH8U9spzaO8h8NrB57lBcdyMUUQ8=
 github.com/casdoor/oss v1.2.0/go.mod h1:qii35VBuxnR/uEuYSKpS0aJ8htQFOcCVsZ4FHgHLuss=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
@@ -111,6 +111,8 @@ github.com/chzyer/logex v1.1.10/go.mod h1:+Ywpsq7O8HXn0nuIou7OrIPyXbp3wmkHB+jjWR
 github.com/chzyer/readline v0.0.0-20180603132655-2972be24d48e/go.mod h1:nSuG5e5PlCu98SY8svDHJxuZscDgtXS6KTTbou5AhLI=
 github.com/chzyer/test v0.0.0-20180213035817-a1ea475d72b1/go.mod h1:Q3SI9o4m/ZMnBNeIyt5eFwwo7qiLfzFZmjNmxjkiQlU=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/cloudflare/cfssl v0.0.0-20190726000631-633726f6bcb7 h1:Puu1hUwfps3+1CUzYdAZXijuvLuRMirgiXdf3zsM2Ig=
+github.com/cloudflare/cfssl v0.0.0-20190726000631-633726f6bcb7/go.mod h1:yMWuSON2oQp+43nFtAV/uvKQIFpSPerB57DCt9t8sSA=
 github.com/cloudflare/golz4 v0.0.0-20150217214814-ef862a3cdc58/go.mod h1:EOBUe0h4xcZ5GoxqC5SDxFQ8gwyZPKQoEzownBlhI80=
 github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
 github.com/couchbase/go-couchbase v0.0.0-20200519150804-63f3cdb75e0d/go.mod h1:TWI8EKQMs5u5jLKW/tsb9VwauIrMIxQG1r5fMsswK5U=
@@ -124,6 +126,8 @@ github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/dchest/captcha v0.0.0-20200903113550-03f5f0333e1f h1:q/DpyjJjZs94bziQ7YkBmIlpqbVP7yw179rnzoNVX1M=
 github.com/dchest/captcha v0.0.0-20200903113550-03f5f0333e1f/go.mod h1:QGrK8vMWWHQYQ3QU9bw9Y9OPNfxccGzfb41qjvVeXtY=
 github.com/denisenkom/go-mssqldb v0.0.0-20200428022330-06a60b6afbbc/go.mod h1:xbL0rPBG9cCiLr28tMa8zpbdarY27NDyej4t/EjAShU=
+github.com/duo-labs/webauthn v0.0.0-20211221191814-a22482edaa3b h1:L63RATZFZuFMXy6ixnKmv3eNAXwYQF6HW1vd4IYsQqQ=
+github.com/duo-labs/webauthn v0.0.0-20211221191814-a22482edaa3b/go.mod h1:EYSpSkwoEcryMmQGfhol2IiB3IMN9IIIaNd/wcAQMGQ=
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712/go.mod h1:YO35OhQPt3KJa3ryjFM5Bs14WD66h8eGKpfaBNrHW5M=
 github.com/elastic/go-elasticsearch/v6 v6.8.5/go.mod h1:UwaDJsD3rWLM5rKNFzv9hgox93HoX8utj1kxD9aFUcI=
 github.com/elazarl/go-bindata-assetfs v1.0.0 h1:G/bYguwHIzWq9ZoyUQqrjTmJbbYn3j3CKKpKinvZLFk=
@@ -135,6 +139,8 @@ github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7
 github.com/form3tech-oss/jwt-go v3.2.2+incompatible h1:TcekIExNqud5crz4xD2pavyTgWiPvpYe4Xau31I0PRk=
 github.com/form3tech-oss/jwt-go v3.2.2+incompatible/go.mod h1:pbq4aXjuKjdthFRnoDwaVPLA+WlJuPGy+QneDUgJi2k=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
+github.com/fxamacker/cbor/v2 v2.2.0 h1:6eXqdDDe588rSYAi1HfZKbx6YYQO4mxQ9eC6xYpU/JQ=
+github.com/fxamacker/cbor/v2 v2.2.0/go.mod h1:TA1xS00nchWmaBnEIxPSE5oHLuJBAVvqrtAnWBwBCVo=
 github.com/glendc/gopher-json v0.0.0-20170414221815-dc4743023d0c/go.mod h1:Gja1A+xZ9BoviGJNA2E9vFkPjjsl+CoJxSXiQM1UXtw=
 github.com/go-asn1-ber/asn1-ber v1.5.1 h1:pDbRAunXzIUXfx4CB2QJFv5IuPiuoW+sWvr/Us009o8=
 github.com/go-asn1-ber/asn1-ber v1.5.1/go.mod h1:hEBeB/ic+5LoWskz+yKT7vGhhPYkProFKoKdwZRWMe0=
@@ -164,6 +170,7 @@ github.com/go-sql-driver/mysql v1.5.0/go.mod h1:DCzpHaOWr8IXmIStZouvnhqoel9Qv2LB
 github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/melR3HDY=
 github.com/gogo/protobuf v1.1.1/go.mod h1:r8qH/GZQm5c6nD/R0oafs1akxWv10x8SbQlK7atdtwQ=
 github.com/goji/httpauth v0.0.0-20160601135302-2da839ab0f4d/go.mod h1:nnjvkQ9ptGaCkuDUx6wNykzzlUixGxvkme+H/lnzb+A=
+github.com/golang-jwt/jwt/v4 v4.1.0/go.mod h1:/xlHOz8bRuivTWchD4jCa+NbatV+wEUSzwAxVc6locg=
 github.com/golang-jwt/jwt/v4 v4.2.0 h1:besgBTC8w8HjP6NzQdxwKH9Z5oQMZ24ThTrHp3cZ8eU=
 github.com/golang-jwt/jwt/v4 v4.2.0/go.mod h1:/xlHOz8bRuivTWchD4jCa+NbatV+wEUSzwAxVc6locg=
 github.com/golang-sql/civil v0.0.0-20190719163853-cb61b32ac6fe/go.mod h1:8vg3r2VgvsThLBIFL93Qb5yWzgyZWhEmBwUJWevAkK0=
@@ -201,6 +208,8 @@ github.com/gomodule/redigo v2.0.0+incompatible h1:K/R+8tc58AaqLkqG2Ol3Qk+DR/TlNu
 github.com/gomodule/redigo v2.0.0+incompatible/go.mod h1:B4C85qUVwatsJoIUNIfCRsp7qO0iAmpGFZ4EELWSbC4=
 github.com/google/btree v0.0.0-20180813153112-4030bb1f1f0c/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
 github.com/google/btree v1.0.0/go.mod h1:lNA+9X1NB3Zf8V7Ke586lFgjr2dZNuvo3lPJSGZ5JPQ=
+github.com/google/certificate-transparency-go v1.0.21 h1:Yf1aXowfZ2nuboBsg7iYGLmwsOARdV86pfH3g95wXmE=
+github.com/google/certificate-transparency-go v1.0.21/go.mod h1:QeJfpSbVSfYc7RgB3gJFj9cbuQMMchQxrWXz8Ruopmg=
 github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
 github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
 github.com/google/go-cmp v0.3.1/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
@@ -298,6 +307,8 @@ github.com/mattn/go-sqlite3 v2.0.3+incompatible h1:gXHsfypPkaMZrKbD5209QV9jbUTJK
 github.com/mattn/go-sqlite3 v2.0.3+incompatible/go.mod h1:FPy6KqzDD04eiIsT53CuJW3U88zkxoIYsOqkbpncsNc=
 github.com/matttproud/golang_protobuf_extensions v1.0.1 h1:4hp9jkHxhMHkqkrB3Ix0jegS5sx/RkqARlsWZ6pIwiU=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
+github.com/mitchellh/mapstructure v1.1.2 h1:fmNYVwqnSfB9mZU6OS2O6GsXM+wcskZDuKQzvN1EDeE=
+github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -397,6 +408,8 @@ github.com/ugorji/go v0.0.0-20171122102828-84cb69a8af83/go.mod h1:hnLbHMwcvSihnD
 github.com/volcengine/volc-sdk-golang v1.0.19 h1:jJp+aJgK0e//rZ9I0K2Y7ufJwvuZRo/AQsYDynXMNgA=
 github.com/volcengine/volc-sdk-golang v1.0.19/go.mod h1:+GGi447k4p1I5PNdbpG2GLaF0Ui9vIInTojMM0IfSS4=
 github.com/wendal/errors v0.0.0-20130201093226-f66c77a7882b/go.mod h1:Q12BUT7DqIlHRmgv3RskH+UCM/4eqVMgI0EMmlSpAXc=
+github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
+github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@@ -413,6 +426,7 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20190325154230-a5d413f7728c/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20190701094942-4def268fd1a4/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200604202706-70a84ac30bf9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=

i18n/util.go

@@ -39,6 +39,7 @@ func readI18nFile(language string) *I18nData {
 func writeI18nFile(language string, data *I18nData) {
 	s := util.StructToJsonFormatted(data)
 	s = strings.ReplaceAll(s, "\\u0026", "&")
+	s += "\n"
 	println(s)
 
 	util.WriteStringToPath(s, getI18nFilePath(language))

idp/bilibili.go

@@ -144,7 +144,7 @@ func (idp *BilibiliIdProvider) GetToken(code string) (*oauth2.Token, error) {
 type BilibiliUserInfo struct {
 	Name   string `json:"name"`
 	Face   string `json:"face"`
-	OpenId string `json:"openid`
+	OpenId string `json:"openid"`
 }
 
 type BilibiliUserInfoResponse struct {
@@ -187,9 +187,10 @@ func (idp *BilibiliIdProvider) GetUserInfo(token *oauth2.Token) (*UserInfo, erro
 	}
 
 	userInfo := &UserInfo{
-		Id:        bUserInfoResponse.Data.OpenId,
-		Username:  bUserInfoResponse.Data.Name,
-		AvatarUrl: bUserInfoResponse.Data.Face,
+		Id:          bUserInfoResponse.Data.OpenId,
+		Username:    bUserInfoResponse.Data.Name,
+		DisplayName: bUserInfoResponse.Data.Name,
+		AvatarUrl:   bUserInfoResponse.Data.Face,
 	}
 
 	return userInfo, nil

idp/douyin.go

@@ -0,0 +1,198 @@
+// 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 idp
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"net/url"
+	"time"
+
+	"golang.org/x/oauth2"
+)
+
+type DouyinIdProvider struct {
+	Client *http.Client
+	Config *oauth2.Config
+}
+
+func NewDouyinIdProvider(clientId string, clientSecret string, redirectUrl string) *DouyinIdProvider {
+	idp := &DouyinIdProvider{}
+	idp.Config = idp.getConfig(clientId, clientSecret, redirectUrl)
+	return idp
+}
+
+func (idp *DouyinIdProvider) SetHttpClient(client *http.Client) {
+	idp.Client = client
+}
+
+func (idp *DouyinIdProvider) getConfig(clientId string, clientSecret string, redirectUrl string) *oauth2.Config {
+	var endpoint = oauth2.Endpoint{
+		TokenURL: "https://open.douyin.com/oauth/access_token",
+		AuthURL:  "https://open.douyin.com/platform/oauth/connect",
+	}
+
+	var config = &oauth2.Config{
+		Scopes:       []string{"user_info"},
+		Endpoint:     endpoint,
+		ClientID:     clientId,
+		ClientSecret: clientSecret,
+		RedirectURL:  redirectUrl,
+	}
+
+	return config
+}
+
+// get more details via: https://open.douyin.com/platform/doc?doc=docs/openapi/account-permission/get-access-token
+/*
+{
+  "data": {
+    "access_token": "access_token",
+    "description": "",
+    "error_code": "0",
+    "expires_in": "86400",
+    "open_id": "aaa-bbb-ccc",
+    "refresh_expires_in": "86400",
+    "refresh_token": "refresh_token",
+    "scope": "user_info"
+  },
+  "message": "<nil>"
+}
+*/
+
+type DouyinTokenResp struct {
+	Data struct {
+		AccessToken  string `json:"access_token"`
+		ExpiresIn    int64  `json:"expires_in"`
+		OpenId       string `json:"open_id"`
+		RefreshToken string `json:"refresh_token"`
+		Scope        string `json:"scope"`
+	} `json:"data"`
+	Message string `json:"message"`
+}
+
+// GetToken use code to get access_token
+// get more details via: https://open.douyin.com/platform/doc?doc=docs/openapi/account-permission/get-access-token
+func (idp *DouyinIdProvider) GetToken(code string) (*oauth2.Token, error) {
+	payload := url.Values{}
+	payload.Set("code", code)
+	payload.Set("grant_type", "authorization_code")
+	payload.Set("client_key", idp.Config.ClientID)
+	payload.Set("client_secret", idp.Config.ClientSecret)
+	resp, err := idp.Client.PostForm(idp.Config.Endpoint.TokenURL, payload)
+	if err != nil {
+		return nil, err
+	}
+	data, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return nil, err
+	}
+	tokenResp := &DouyinTokenResp{}
+	err = json.Unmarshal(data, tokenResp)
+	if err != nil {
+		return nil, fmt.Errorf("fail to unmarshal token response: %s", err.Error())
+	}
+
+	token := &oauth2.Token{
+		AccessToken:  tokenResp.Data.AccessToken,
+		RefreshToken: tokenResp.Data.RefreshToken,
+		Expiry:       time.Unix(time.Now().Unix()+tokenResp.Data.ExpiresIn, 0),
+	}
+
+	raw := make(map[string]interface{})
+	raw["open_id"] = tokenResp.Data.OpenId
+	token = token.WithExtra(raw)
+
+	return token, nil
+}
+
+// get more details via: https://open.douyin.com/platform/doc?doc=docs/openapi/account-management/get-account-open-info
+/*
+{
+  "data": {
+    "avatar": "https://example.com/x.jpeg",
+    "city": "上海",
+    "country": "中国",
+    "description": "",
+    "e_account_role": "<nil>",
+    "error_code": "0",
+    "gender": "<nil>",
+    "nickname": "张伟",
+    "open_id": "0da22181-d833-447f-995f-1beefea5bef3",
+    "province": "上海",
+    "union_id": "1ad4e099-4a0c-47d1-a410-bffb4f2f64a4"
+  }
+}
+*/
+
+type DouyinUserInfo struct {
+	Data struct {
+		Avatar  string `json:"avatar"`
+		City    string `json:"city"`
+		Country string `json:"country"`
+		// 0->unknown, 1->male, 2->female
+		Gender   int64  `json:"gender"`
+		Nickname string `json:"nickname"`
+		OpenId   string `json:"open_id"`
+		Province string `json:"province"`
+	} `json:"data"`
+}
+
+// GetUserInfo use token to get user profile
+func (idp *DouyinIdProvider) GetUserInfo(token *oauth2.Token) (*UserInfo, error) {
+	body := &struct {
+		AccessToken string `json:"access_token"`
+		OpenId      string `json:"open_id"`
+	}{token.AccessToken, token.Extra("open_id").(string)}
+	data, err := json.Marshal(body)
+	if err != nil {
+		return nil, err
+	}
+	req, err := http.NewRequest("GET", "https://open.douyin.com/oauth/userinfo/", bytes.NewReader(data))
+	if err != nil {
+		return nil, err
+	}
+	req.Header.Add("access-token", token.AccessToken)
+	req.Header.Add("Accept", "application/json")
+	req.Header.Add("Content-Type", "application/json")
+	resp, err := idp.Client.Do(req)
+	if err != nil {
+		return nil, err
+	}
+
+	defer resp.Body.Close()
+
+	respBody, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return nil, err
+	}
+
+	var douyinUserInfo DouyinUserInfo
+	err = json.Unmarshal(respBody, &douyinUserInfo)
+	if err != nil {
+		return nil, err
+	}
+
+	userInfo := UserInfo{
+		Id:          douyinUserInfo.Data.OpenId,
+		Username:    douyinUserInfo.Data.Nickname,
+		DisplayName: douyinUserInfo.Data.Nickname,
+		AvatarUrl:   douyinUserInfo.Data.Avatar,
+	}
+	return &userInfo, nil
+}

idp/provider.go

@@ -86,6 +86,8 @@ func GetIdProvider(typ string, subType string, clientId string, clientSecret str
 		return NewCasdoorIdProvider(clientId, clientSecret, redirectUrl, hostUrl)
 	} else if typ == "Okta" {
 		return NewOktaIdProvider(clientId, clientSecret, redirectUrl, hostUrl)
+	} else if typ == "Douyin" {
+		return NewDouyinIdProvider(clientId, clientSecret, redirectUrl)
 	} else if isGothSupport(typ) {
 		return NewGothIdProvider(typ, clientId, clientSecret, redirectUrl)
 	} else if typ == "Bilibili" {

init_data.json.template

@@ -0,0 +1,160 @@
+{
+  "organizations": [
+    {
+      "owner": "",
+      "name": "",
+      "displayName": "",
+      "websiteUrl": "",
+      "favicon": "",
+      "passwordType": "",
+      "phonePrefix": "",
+      "defaultAvatar": "",
+      "tags": [""]
+    }
+  ],
+  "applications": [
+    {
+      "owner": "",
+      "name": "",
+      "displayName": "",
+      "logo": "",
+      "homepageUrl": "",
+      "organization": "",
+      "cert": "",
+      "enablePassword": true,
+      "enableSignUp": true,
+      "clientId": "",
+      "clientSecret": "",
+      "providers": [
+        {
+          "name": "",
+          "canSignUp": true,
+          "canSignIn": true,
+          "canUnlink": false,
+          "prompted": false,
+          "alertType": "None"
+        }
+      ],
+      "signupItems": [
+        {
+          "name": "ID",
+          "visible": false,
+          "required": true,
+          "prompted": false,
+          "rule": "Random"
+        },
+        {
+          "name": "Username",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Display name",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Password",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Confirm password",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Email",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Phone",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        },
+        {
+          "name": "Agreement",
+            "visible": true,
+            "required": true,
+            "prompted": false,
+            "rule": "None"
+        }
+      ],
+      "redirectUris": [""],
+      "expireInHours": 168
+    }
+  ],
+  "users": [
+    {
+      "owner": "",
+      "name": "",
+      "type": "normal-user",
+      "password": "",
+      "displayName": "",
+      "avatar": "",
+      "email": "",
+      "phone": "",
+      "address": [],
+      "affiliation": "",
+      "tag": "",
+      "score": 2000,
+      "ranking": 1,
+      "isAdmin": true,
+      "isGlobalAdmin": true,
+      "isForbidden": false,
+      "isDeleted": false,
+      "signupApplication": "",
+      "createdIp": ""
+    }
+  ],
+  "providers": [
+    {
+      "owner": "",
+      "name": "",
+      "displayName": "",
+      "category": "",
+      "type": ""
+    }
+  ],
+  "certs": [
+    {
+      "owner": "",
+      "name": "",
+      "displayName": "",
+      "scope": "JWT",
+      "type": "x509",
+      "cryptoAlgorithm": "RS256",
+      "bitSize": 4096,
+      "expireInYears": 20,
+      "certificate": "",
+      "privateKey": ""
+    }
+  ],
+  "ldaps": [
+    {
+      "id": "",
+      "owner": "",
+      "serverName": "",
+      "host": "",
+      "port": 389,
+      "admin": "",
+      "passwd": "",
+      "baseDn": "",
+      "autoSync": 0,
+      "lastSync": ""
+    }
+  ]
+}

main.go

@@ -36,6 +36,7 @@ func main() {
 
 	object.InitAdapter(*createDatabase)
 	object.InitDb()
+	object.InitFromFile()
 	object.InitDefaultStorageProvider()
 	object.InitLdapAutoSynchronizer()
 	proxy.InitHttpClient()
@@ -51,9 +52,11 @@ func main() {
 	// https://studygolang.com/articles/2303
 	beego.InsertFilter("*", beego.BeforeRouter, routers.StaticFilter)
 	beego.InsertFilter("*", beego.BeforeRouter, routers.AutoSigninFilter)
+	beego.InsertFilter("*", beego.BeforeRouter, routers.CorsFilter)
 	beego.InsertFilter("*", beego.BeforeRouter, routers.AuthzFilter)
 	beego.InsertFilter("*", beego.BeforeRouter, routers.RecordMessage)
 
+	beego.BConfig.WebConfig.Session.SessionOn = true
 	beego.BConfig.WebConfig.Session.SessionName = "casdoor_session_id"
 	if conf.GetConfigString("redisEndpoint") == "" {
 		beego.BConfig.WebConfig.Session.SessionProvider = "file"

manifests/casdoor/templates/configmap.yaml

@@ -16,7 +16,7 @@ data:
     defaultStorageProvider = 
     isCloudIntranet = false
     authState = "casdoor"
-    sock5Proxy = "127.0.0.1:10808"
+    socks5Proxy = "127.0.0.1:10808"
     verificationCodeTimeout = 10
     initScore = 2000
     logPostOnly = true

object/adapter.go

@@ -22,7 +22,7 @@ import (
 	"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/go-sql-driver/mysql"     // db = mysql
 	//_ "github.com/lib/pq"                // db = postgres
 	"xorm.io/core"
 	"xorm.io/xorm"
@@ -36,11 +36,12 @@ func InitConfig() {
 		panic(err)
 	}
 
+	beego.BConfig.WebConfig.Session.SessionOn = true
+
 	InitAdapter(true)
 }
 
 func InitAdapter(createDatabase bool) {
-
 	adapter = NewAdapter(conf.GetConfigString("driverName"), conf.GetBeegoConfDataSourceName(), conf.GetConfigString("dbName"))
 	if createDatabase {
 		adapter.CreateDatabase()
@@ -138,6 +139,11 @@ func (a *Adapter) createTable() {
 		panic(err)
 	}
 
+	err = a.Engine.Sync2(new(Model))
+	if err != nil {
+		panic(err)
+	}
+
 	err = a.Engine.Sync2(new(Provider))
 	if err != nil {
 		panic(err)
@@ -197,6 +203,11 @@ func (a *Adapter) createTable() {
 	if err != nil {
 		panic(err)
 	}
+
+	err = a.Engine.Sync2(new(PermissionRule))
+	if err != nil {
+		panic(err)
+	}
 }
 
 func GetSession(owner string, offset, limit int, field, value, sortField, sortOrder string) *xorm.Session {

object/application.go

@@ -16,12 +16,21 @@ package object
 
 import (
 	"fmt"
+	"net/url"
 	"strings"
 
 	"github.com/casdoor/casdoor/util"
 	"xorm.io/core"
 )
 
+type SignupItem struct {
+	Name     string `json:"name"`
+	Visible  bool   `json:"visible"`
+	Required bool   `json:"required"`
+	Prompted bool   `json:"prompted"`
+	Rule     string `json:"rule"`
+}
+
 type Application struct {
 	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
@@ -37,6 +46,8 @@ type Application struct {
 	EnableSignUp        bool            `json:"enableSignUp"`
 	EnableSigninSession bool            `json:"enableSigninSession"`
 	EnableCodeSignin    bool            `json:"enableCodeSignin"`
+	EnableSamlCompress  bool            `json:"enableSamlCompress"`
+	EnableWebAuthn      bool            `json:"enableWebAuthn"`
 	Providers           []*ProviderItem `xorm:"mediumtext" json:"providers"`
 	SignupItems         []*SignupItem   `xorm:"varchar(1000)" json:"signupItems"`
 	GrantTypes          []string        `xorm:"varchar(1000)" json:"grantTypes"`
@@ -270,8 +281,12 @@ func UpdateApplication(id string, application *Application) bool {
 }
 
 func AddApplication(application *Application) bool {
-	application.ClientId = util.GenerateClientId()
-	application.ClientSecret = util.GenerateClientSecret()
+	if application.ClientId == "" {
+		application.ClientId = util.GenerateClientId()
+	}
+	if application.ClientSecret == "" {
+		application.ClientSecret = util.GenerateClientSecret()
+	}
 	for _, providerItem := range application.Providers {
 		providerItem.Provider = nil
 	}
@@ -311,3 +326,39 @@ func CheckRedirectUriValid(application *Application, redirectUri string) bool {
 	}
 	return validUri
 }
+
+func IsAllowOrigin(origin string) bool {
+	allowOrigin := false
+	originUrl, err := url.Parse(origin)
+	if err != nil {
+		return false
+	}
+
+	rows, err := adapter.Engine.Cols("redirect_uris").Rows(&Application{})
+	if err != nil {
+		panic(err)
+	}
+
+	application := Application{}
+	for rows.Next() {
+		err := rows.Scan(&application)
+		if err != nil {
+			panic(err)
+		}
+		for _, tmpRedirectUri := range application.RedirectUris {
+			u1, err := url.Parse(tmpRedirectUri)
+			if err != nil {
+				continue
+			}
+			if u1.Scheme == originUrl.Scheme && u1.Host == originUrl.Host {
+				allowOrigin = true
+				break
+			}
+		}
+		if allowOrigin {
+			break
+		}
+	}
+
+	return allowOrigin
+}

object/avatar.go

@@ -51,6 +51,10 @@ func downloadFile(url string) (*bytes.Buffer, error) {
 }
 
 func getPermanentAvatarUrl(organization string, username string, url string) string {
+	if url == "" {
+		return ""
+	}
+
 	if defaultStorageProvider == nil {
 		return ""
 	}

object/cert.go

@@ -33,7 +33,7 @@ type Cert struct {
 	BitSize         int    `json:"bitSize"`
 	ExpireInYears   int    `json:"expireInYears"`
 
-	PublicKey              string `xorm:"mediumtext" json:"publicKey"`
+	Certificate            string `xorm:"mediumtext" json:"certificate"`
 	PrivateKey             string `xorm:"mediumtext" json:"privateKey"`
 	AuthorityPublicKey     string `xorm:"mediumtext" json:"authorityPublicKey"`
 	AuthorityRootPublicKey string `xorm:"mediumtext" json:"authorityRootPublicKey"`
@@ -123,9 +123,9 @@ func UpdateCert(id string, cert *Cert) bool {
 }
 
 func AddCert(cert *Cert) bool {
-	if cert.PublicKey == "" || cert.PrivateKey == "" {
-		publicKey, privateKey := generateRsaKeys(cert.BitSize, cert.ExpireInYears, cert.Name, cert.Owner)
-		cert.PublicKey = publicKey
+	if cert.Certificate == "" || cert.PrivateKey == "" {
+		certificate, privateKey := generateRsaKeys(cert.BitSize, cert.ExpireInYears, cert.Name, cert.Owner)
+		cert.Certificate = certificate
 		cert.PrivateKey = privateKey
 	}
 

object/check.go

@@ -229,4 +229,30 @@ func CheckUserPermission(requestUserId, userId string, strict bool) (bool, error
 	}
 
 	return hasPermission, fmt.Errorf("you don't have the permission to do this")
-}
+}
+
+func CheckAccessPermission(userId string, application *Application) (bool, error) {
+	permissions := GetPermissions(application.Organization)
+	allowed := true
+	var err error
+	for _, permission := range permissions {
+		if !permission.IsEnabled {
+			continue
+		}
+
+		isHit := false
+		for _, resource := range permission.Resources {
+			if application.Name == resource {
+				isHit = true
+				break
+			}
+		}
+
+		if isHit {
+			enforcer := getEnforcer(permission)
+			allowed, err = enforcer.Enforce(userId, application.Name, "read")
+			break
+		}
+	}
+	return allowed, err
+}

object/email.go

@@ -29,3 +29,16 @@ func SendEmail(provider *Provider, title string, content string, dest string, se
 
 	return dialer.DialAndSend(message)
 }
+
+// DailSmtpServer Dail Smtp server
+func DailSmtpServer(provider *Provider) error {
+	dialer := gomail.NewDialer(provider.Host, provider.Port, provider.ClientId, provider.ClientSecret)
+
+	sender, err := dialer.Dial()
+	if err != nil {
+		return err
+	}
+	defer sender.Close()
+
+	return nil
+}

object/init.go

@@ -15,19 +15,24 @@
 package object
 
 import (
+	"encoding/gob"
 	"io/ioutil"
 
 	"github.com/casdoor/casdoor/util"
+	"github.com/duo-labs/webauthn/webauthn"
 )
 
 func InitDb() {
 	existed := initBuiltInOrganization()
 	if !existed {
+		initBuiltInProvider()
 		initBuiltInUser()
 		initBuiltInApplication()
 		initBuiltInCert()
 		initBuiltInLdap()
 	}
+
+	initWebAuthn()
 }
 
 func initBuiltInOrganization() bool {
@@ -47,6 +52,32 @@ func initBuiltInOrganization() bool {
 		PhonePrefix:   "86",
 		DefaultAvatar: "https://casbin.org/img/casbin.svg",
 		Tags:          []string{},
+		AccountItems: []*AccountItem{
+			{Name: "Organization", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+			{Name: "ID", Visible: true, ViewRule: "Public", ModifyRule: "Immutable"},
+			{Name: "Name", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+			{Name: "Display name", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Avatar", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "User type", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+			{Name: "Password", Visible: true, ViewRule: "Self", ModifyRule: "Self"},
+			{Name: "Email", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Phone", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Country/Region", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Location", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Affiliation", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Title", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Homepage", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Bio", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+			{Name: "Tag", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+			{Name: "Signup application", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+			{Name: "3rd-party logins", Visible: true, ViewRule: "Self", ModifyRule: "Self"},
+			{Name: "Properties", Visible: false, ViewRule: "Admin", ModifyRule: "Admin"},
+			{Name: "Is admin", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+			{Name: "Is global admin", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+			{Name: "Is forbidden", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+			{Name: "Is deleted", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+			{Name: "WebAuthn credentials", Visible: true, ViewRule: "Self", ModifyRule: "Self"},
+		},
 	}
 	AddOrganization(organization)
 	return false
@@ -78,7 +109,7 @@ func initBuiltInUser() {
 		IsGlobalAdmin:     true,
 		IsForbidden:       false,
 		IsDeleted:         false,
-		SignupApplication: "built-in-app",
+		SignupApplication: "app-built-in",
 		CreatedIp:         "127.0.0.1",
 		Properties:        make(map[string]string),
 	}
@@ -102,7 +133,9 @@ func initBuiltInApplication() {
 		Cert:           "cert-built-in",
 		EnablePassword: true,
 		EnableSignUp:   true,
-		Providers:      []*ProviderItem{},
+		Providers: []*ProviderItem{
+			{Name: "provider_captcha_default", CanSignUp: false, CanSignIn: false, CanUnlink: false, Prompted: false, AlertType: "None", Provider: nil},
+		},
 		SignupItems: []*SignupItem{
 			{Name: "ID", Visible: false, Required: true, Prompted: false, Rule: "Random"},
 			{Name: "Username", Visible: true, Required: true, Prompted: false, Rule: "None"},
@@ -134,7 +167,7 @@ func readTokenFromFile() (string, string) {
 }
 
 func initBuiltInCert() {
-	tokenJwtPublicKey, tokenJwtPrivateKey := readTokenFromFile()
+	tokenJwtCertificate, tokenJwtPrivateKey := readTokenFromFile()
 	cert := getCert("admin", "cert-built-in")
 	if cert != nil {
 		return
@@ -150,7 +183,7 @@ func initBuiltInCert() {
 		CryptoAlgorithm: "RS256",
 		BitSize:         4096,
 		ExpireInYears:   20,
-		PublicKey:       tokenJwtPublicKey,
+		Certificate:     tokenJwtCertificate,
 		PrivateKey:      tokenJwtPrivateKey,
 	}
 	AddCert(cert)
@@ -176,3 +209,24 @@ func initBuiltInLdap() {
 	}
 	AddLdap(ldap)
 }
+
+func initBuiltInProvider() {
+	provider := GetProvider("admin/provider_captcha_default")
+	if provider != nil {
+		return
+	}
+
+	provider = &Provider{
+		Owner:       "admin",
+		Name:        "provider_captcha_default",
+		CreatedTime: util.GetCurrentTime(),
+		DisplayName: "Captcha Default",
+		Category:    "Captcha",
+		Type:        "Default",
+	}
+	AddProvider(provider)
+}
+
+func initWebAuthn() {
+	gob.Register(webauthn.SessionData{})
+}

object/init_data.go

@@ -0,0 +1,146 @@
+// 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 "github.com/casdoor/casdoor/util"
+
+type InitData struct {
+	Organizations []*Organization `json:"organizations"`
+	Applications  []*Application  `json:"applications"`
+	Users         []*User         `json:"users"`
+	Certs         []*Cert         `json:"certs"`
+	Providers     []*Provider     `json:"providers"`
+	Ldaps         []*Ldap         `json:"ldaps"`
+}
+
+func InitFromFile() {
+	initData := readInitDataFromFile("./init_data.json")
+	if initData != nil {
+		for _, organization := range initData.Organizations {
+			initDefinedOrganization(organization)
+		}
+		for _, provider := range initData.Providers {
+			initDefinedProvider(provider)
+		}
+		for _, user := range initData.Users {
+			initDefinedUser(user)
+		}
+		for _, application := range initData.Applications {
+			initDefinedApplication(application)
+		}
+		for _, cert := range initData.Certs {
+			initDefinedCert(cert)
+		}
+		for _, ldap := range initData.Ldaps {
+			initDefinedLdap(ldap)
+		}
+	}
+}
+
+func readInitDataFromFile(filePath string) *InitData {
+	if !util.FileExist(filePath) {
+		return nil
+	}
+
+	s := util.ReadStringFromPath(filePath)
+
+	data := &InitData{}
+	err := util.JsonToStruct(s, data)
+	if err != nil {
+		panic(err)
+	}
+
+	return data
+}
+
+func initDefinedOrganization(organization *Organization) {
+	existed := getOrganization(organization.Owner, organization.Name)
+	if existed != nil {
+		return
+	}
+	organization.CreatedTime = util.GetCurrentTime()
+	organization.AccountItems = []*AccountItem{
+		{Name: "Organization", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+		{Name: "ID", Visible: true, ViewRule: "Public", ModifyRule: "Immutable"},
+		{Name: "Name", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+		{Name: "Display name", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Avatar", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "User type", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+		{Name: "Password", Visible: true, ViewRule: "Self", ModifyRule: "Self"},
+		{Name: "Email", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Phone", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Country/Region", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Location", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Affiliation", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Title", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Homepage", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Bio", Visible: true, ViewRule: "Public", ModifyRule: "Self"},
+		{Name: "Tag", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+		{Name: "Signup application", Visible: true, ViewRule: "Public", ModifyRule: "Admin"},
+		{Name: "3rd-party logins", Visible: true, ViewRule: "Self", ModifyRule: "Self"},
+		{Name: "Properties", Visible: false, ViewRule: "Admin", ModifyRule: "Admin"},
+		{Name: "Is admin", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+		{Name: "Is global admin", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+		{Name: "Is forbidden", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+		{Name: "Is deleted", Visible: true, ViewRule: "Admin", ModifyRule: "Admin"},
+	}
+
+	AddOrganization(organization)
+}
+
+func initDefinedApplication(application *Application) {
+	existed := getApplication(application.Owner, application.Name)
+	if existed != nil {
+		return
+	}
+	application.CreatedTime = util.GetCurrentTime()
+	AddApplication(application)
+}
+
+func initDefinedUser(user *User) {
+	existed := getUser(user.Owner, user.Name)
+	if existed != nil {
+		return
+	}
+	user.CreatedTime = util.GetCurrentTime()
+	user.Id = util.GenerateId()
+	user.Properties = make(map[string]string)
+	AddUser(user)
+}
+
+func initDefinedCert(cert *Cert) {
+	existed := getCert(cert.Owner, cert.Name)
+	if existed != nil {
+		return
+	}
+	cert.CreatedTime = util.GetCurrentTime()
+	AddCert(cert)
+}
+
+func initDefinedLdap(ldap *Ldap) {
+	existed := GetLdap(ldap.Id)
+	if existed != nil {
+		return
+	}
+	AddLdap(ldap)
+}
+
+func initDefinedProvider(provider *Provider) {
+	existed := GetProvider(provider.GetId())
+	if existed != nil {
+		return
+	}
+	AddProvider(provider)
+}

object/model.go

@@ -0,0 +1,122 @@
+// Copyright 2021 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"
+
+	"github.com/casdoor/casdoor/util"
+	"xorm.io/core"
+)
+
+type Model 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"`
+	DisplayName string `xorm:"varchar(100)" json:"displayName"`
+
+	ModelText 	string `xorm:"mediumtext" json:"modelText"`
+	IsEnabled 	bool   `json:"isEnabled"`
+}
+
+func GetModelCount(owner, field, value string) int {
+	session := GetSession(owner, -1, -1, field, value, "", "")
+	count, err := session.Count(&Model{})
+	if err != nil {
+		panic(err)
+	}
+
+	return int(count)
+}
+
+func GetModels(owner string) []*Model {
+	models := []*Model{}
+	err := adapter.Engine.Desc("created_time").Find(&models, &Model{Owner: owner})
+	if err != nil {
+		panic(err)
+	}
+
+	return models
+}
+
+func GetPaginationModels(owner string, offset, limit int, field, value, sortField, sortOrder string) []*Model {
+	models := []*Model{}
+	session := GetSession(owner, offset, limit, field, value, sortField, sortOrder)
+	err := session.Find(&models)
+	if err != nil {
+		panic(err)
+	}
+
+	return models
+}
+
+func getModel(owner string, name string) *Model {
+	if owner == "" || name == "" {
+		return nil
+	}
+
+	model := Model{Owner: owner, Name: name}
+	existed, err := adapter.Engine.Get(&model)
+	if err != nil {
+		panic(err)
+	}
+
+	if existed {
+		return &model
+	} else {
+		return nil
+	}
+}
+
+func GetModel(id string) *Model {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	return getModel(owner, name)
+}
+
+func UpdateModel(id string, model *Model) bool {
+	owner, name := util.GetOwnerAndNameFromId(id)
+	if getModel(owner, name) == nil {
+		return false
+	}
+
+	affected, err := adapter.Engine.ID(core.PK{owner, name}).AllCols().Update(model)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func AddModel(model *Model) bool {
+	affected, err := adapter.Engine.Insert(model)
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func DeleteModel(model *Model) bool {
+	affected, err := adapter.Engine.ID(core.PK{model.Owner, model.Name}).Delete(&Model{})
+	if err != nil {
+		panic(err)
+	}
+
+	return affected != 0
+}
+
+func (model *Model) GetId() string {
+	return fmt.Sprintf("%s/%s", model.Owner, model.Name)
+}

object/oidc_discovery.go

@@ -97,7 +97,7 @@ func GetJsonWebKeySet() (jose.JSONWebKeySet, error) {
 	//link here: https://self-issued.info/docs/draft-ietf-jose-json-web-key.html
 	//or https://datatracker.ietf.org/doc/html/draft-ietf-jose-json-web-key
 	for _, cert := range certs {
-		certPemBlock := []byte(cert.PublicKey)
+		certPemBlock := []byte(cert.Certificate)
 		certDerBlock, _ := pem.Decode(certPemBlock)
 		x509Cert, _ := x509.ParseCertificate(certDerBlock.Bytes)
 

object/organization.go

@@ -20,6 +20,13 @@ import (
 	"xorm.io/core"
 )
 
+type AccountItem struct {
+	Name       string `json:"name"`
+	Visible    bool   `json:"visible"`
+	ViewRule   string `json:"viewRule"`
+	ModifyRule string `json:"modifyRule"`
+}
+
 type Organization struct {
 	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
@@ -36,6 +43,8 @@ type Organization struct {
 	MasterPassword     string   `xorm:"varchar(100)" json:"masterPassword"`
 	EnableSoftDeletion bool     `json:"enableSoftDeletion"`
 	IsProfilePublic    bool     `json:"isProfilePublic"`
+
+	AccountItems []*AccountItem `xorm:"varchar(2000)" json:"accountItems"`
 }
 
 func GetOrganizationCount(owner, field, value string) int {
@@ -121,11 +130,15 @@ func UpdateOrganization(id string, organization *Organization) bool {
 	}
 
 	if name != organization.Name {
-		applications := GetApplicationsByOrganizationName("admin", name)
-		for _, application := range applications {
+		go func() {
+			application := new(Application)
 			application.Organization = organization.Name
-			UpdateApplication(application.GetId(), application)
-		}
+			_, _ = adapter.Engine.Where("organization=?", name).Update(application)
+
+			user := new(User)
+			user.Owner = organization.Name
+			_, _ = adapter.Engine.Where("owner=?", name).Update(user)
+		}()
 	}
 
 	if organization.MasterPassword != "" && organization.MasterPassword != "***" {

object/permission.go

@@ -16,7 +16,12 @@ 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/conf"
 	"github.com/casdoor/casdoor/util"
 	"xorm.io/core"
 )
@@ -30,6 +35,7 @@ type Permission struct {
 	Users []string `xorm:"mediumtext" json:"users"`
 	Roles []string `xorm:"mediumtext" json:"roles"`
 
+	Model        string   `xorm:"varchar(100)" json:"model"`
 	ResourceType string   `xorm:"varchar(100)" json:"resourceType"`
 	Resources    []string `xorm:"mediumtext" json:"resources"`
 	Actions      []string `xorm:"mediumtext" json:"actions"`
@@ -38,6 +44,16 @@ type Permission struct {
 	IsEnabled bool `json:"isEnabled"`
 }
 
+type PermissionRule struct {
+	PType string `xorm:"varchar(100) index not null default ''"`
+	V0    string `xorm:"varchar(100) index not null default ''"`
+	V1    string `xorm:"varchar(100) index not null default ''"`
+	V2    string `xorm:"varchar(100) index not null default ''"`
+	V3    string `xorm:"varchar(100) index not null default ''"`
+	V4    string `xorm:"varchar(100) index not null default ''"`
+	V5    string `xorm:"varchar(100) index not null default ''"`
+}
+
 func GetPermissionCount(owner, field, value string) int {
 	session := GetSession(owner, -1, -1, field, value, "", "")
 	count, err := session.Count(&Permission{})
@@ -94,7 +110,8 @@ func GetPermission(id string) *Permission {
 
 func UpdatePermission(id string, permission *Permission) bool {
 	owner, name := util.GetOwnerAndNameFromId(id)
-	if getPermission(owner, name) == nil {
+	oldPermission := getPermission(owner, name)
+	if oldPermission == nil {
 		return false
 	}
 
@@ -103,6 +120,11 @@ func UpdatePermission(id string, permission *Permission) bool {
 		panic(err)
 	}
 
+	if affected != 0 {
+		removePolicies(oldPermission)
+		addPolicies(permission)
+	}
+
 	return affected != 0
 }
 
@@ -112,6 +134,10 @@ func AddPermission(permission *Permission) bool {
 		panic(err)
 	}
 
+	if affected != 0 {
+		addPolicies(permission)
+	}
+
 	return affected != 0
 }
 
@@ -121,9 +147,85 @@ func DeletePermission(permission *Permission) bool {
 		panic(err)
 	}
 
+	if affected != 0 {
+		removePolicies(permission)
+	}
+
 	return affected != 0
 }
 
 func (permission *Permission) GetId() string {
 	return fmt.Sprintf("%s/%s", permission.Owner, permission.Name)
 }
+
+func getEnforcer(permission *Permission) *casbin.Enforcer {
+	tableNamePrefix := conf.GetConfigString("tableNamePrefix")
+	adapter, err := xormadapter.NewAdapterWithTableName(conf.GetConfigString("driverName"), conf.GetBeegoConfDataSourceName()+conf.GetConfigString("dbName"), "permission_rule", tableNamePrefix, true)
+	if err != nil {
+		panic(err)
+	}
+
+	modelText := `
+[request_definition]
+r = sub, obj, act
+
+[policy_definition]
+p = permission, sub, obj, act
+
+[policy_effect]
+e = some(where (p.eft == allow))
+
+[matchers]
+m = r.sub == p.sub && r.obj == p.obj && r.act == p.act`
+	permissionModel := getModel(permission.Owner, permission.Model)
+	if permissionModel != nil {
+		modelText = permissionModel.ModelText
+	}
+	m, err := model.NewModelFromString(modelText)
+	if err != nil {
+		panic(err)
+	}
+
+	enforcer, err := casbin.NewEnforcer(m, adapter)
+	if err != nil {
+		panic(err)
+	}
+
+	err = enforcer.LoadFilteredPolicy(xormadapter.Filter{V0: []string{permission.GetId()}})
+	if err != nil {
+		panic(err)
+	}
+
+	return enforcer
+}
+
+func getPolicies(permission *Permission) [][]string {
+	var policies [][]string
+	for _, user := range permission.Users {
+		for _, resource := range permission.Resources {
+			for _, action := range permission.Actions {
+				policies = append(policies, []string{permission.GetId(), user, resource, strings.ToLower(action)})
+			}
+		}
+	}
+	return policies
+}
+
+func addPolicies(permission *Permission) {
+	enforcer := getEnforcer(permission)
+	policies := getPolicies(permission)
+
+	_, err := enforcer.AddPolicies(policies)
+	if err != nil {
+		panic(err)
+	}
+}
+
+func removePolicies(permission *Permission) {
+	enforcer := getEnforcer(permission)
+
+	_, err := enforcer.RemoveFilteredPolicy(0, permission.GetId())
+	if err != nil {
+		panic(err)
+	}
+}

object/product_test.go

@@ -30,12 +30,12 @@ func TestProduct(t *testing.T) {
 	product := GetProduct("admin/product_123")
 	provider := getProvider(product.Owner, "provider_pay_alipay")
 	cert := getCert(product.Owner, "cert-pay-alipay")
-	pProvider := pp.GetPaymentProvider(provider.Type, provider.ClientId, provider.ClientSecret, provider.Host, cert.PublicKey, cert.PrivateKey, cert.AuthorityPublicKey, cert.AuthorityRootPublicKey)
+	pProvider := pp.GetPaymentProvider(provider.Type, provider.ClientId, provider.ClientSecret, provider.Host, cert.Certificate, cert.PrivateKey, cert.AuthorityPublicKey, cert.AuthorityRootPublicKey)
 
-	paymentId := util.GenerateTimeId()
+	paymentName := util.GenerateTimeId()
 	returnUrl := ""
 	notifyUrl := ""
-	payUrl, err := pProvider.Pay(product.DisplayName, product.Name, provider.Name, paymentId, product.Price, returnUrl, notifyUrl)
+	payUrl, err := pProvider.Pay(provider.Name, product.Name, "alice", paymentName, product.DisplayName, product.Price, returnUrl, notifyUrl)
 	if err != nil {
 		panic(err)
 	}

object/provider.go

@@ -142,8 +142,8 @@ func GetProvider(id string) *Provider {
 	return getProvider(owner, name)
 }
 
-func GetDefaultHumanCheckProvider() *Provider {
-	provider := Provider{Owner: "admin", Category: "HumanCheck"}
+func GetDefaultCaptchaProvider() *Provider {
+	provider := Provider{Owner: "admin", Category: "Captcha"}
 	existed, err := adapter.Engine.Get(&provider)
 	if err != nil {
 		panic(err)
@@ -214,7 +214,7 @@ func (p *Provider) getPaymentProvider() (pp.PaymentProvider, *Cert, error) {
 		}
 	}
 
-	pProvider := pp.GetPaymentProvider(p.Type, p.ClientId, p.ClientSecret, p.Host, cert.PublicKey, cert.PrivateKey, cert.AuthorityPublicKey, cert.AuthorityRootPublicKey)
+	pProvider := pp.GetPaymentProvider(p.Type, p.ClientId, p.ClientSecret, p.Host, cert.Certificate, cert.PrivateKey, cert.AuthorityPublicKey, cert.AuthorityRootPublicKey)
 	if pProvider == nil {
 		return nil, cert, fmt.Errorf("the payment provider type: %s is not supported", p.Type)
 	}
@@ -225,3 +225,37 @@ func (p *Provider) getPaymentProvider() (pp.PaymentProvider, *Cert, error) {
 func (p *Provider) GetId() string {
 	return fmt.Sprintf("%s/%s", p.Owner, p.Name)
 }
+
+func GetCaptchaProviderByOwnerName(applicationId string) (*Provider, error) {
+	owner, name := util.GetOwnerAndNameFromId(applicationId)
+	provider := Provider{Owner: owner, Name: name, Category: "Captcha"}
+	existed, err := adapter.Engine.Get(&provider)
+	if err != nil {
+		return nil, err
+	}
+
+	if !existed {
+		return nil, fmt.Errorf("the provider: %s does not exist", applicationId)
+	}
+
+	return &provider, nil
+}
+
+func GetCaptchaProviderByApplication(applicationId, isCurrentProvider string) (*Provider, error) {
+	if isCurrentProvider == "true" {
+		return GetCaptchaProviderByOwnerName(applicationId)
+	}
+	application := GetApplication(applicationId)
+	if application == nil || len(application.Providers) == 0 {
+		return nil, fmt.Errorf("invalid application id")
+	}
+	for _, provider := range application.Providers {
+		if provider.Provider == nil {
+			continue
+		}
+		if provider.Provider.Category == "Captcha" {
+			return GetCaptchaProviderByOwnerName(fmt.Sprintf("%s/%s", provider.Provider.Owner, provider.Provider.Name))
+		}
+	}
+	return nil, nil
+}

object/saml_idp.go

@@ -36,7 +36,7 @@ import (
 )
 
 //returns a saml2 response
-func NewSamlResponse(user *User, host string, publicKey string, destination string, iss string, redirectUri []string) (*etree.Element, error) {
+func NewSamlResponse(user *User, host string, certificate string, destination string, iss string, requestId string, redirectUri []string) (*etree.Element, error) {
 	samlResponse := &etree.Element{
 		Space: "samlp",
 		Tag:   "Response",
@@ -51,7 +51,7 @@ func NewSamlResponse(user *User, host string, publicKey string, destination stri
 	samlResponse.CreateAttr("Version", "2.0")
 	samlResponse.CreateAttr("IssueInstant", now)
 	samlResponse.CreateAttr("Destination", destination)
-	samlResponse.CreateAttr("InResponseTo", fmt.Sprintf("Casdoor_%s", arId))
+	samlResponse.CreateAttr("InResponseTo", requestId)
 	samlResponse.CreateElement("saml:Issuer").SetText(host)
 
 	samlResponse.CreateElement("samlp:Status").CreateElement("samlp:StatusCode").CreateAttr("Value", "urn:oasis:names:tc:SAML:2.0:status:Success")
@@ -68,7 +68,7 @@ func NewSamlResponse(user *User, host string, publicKey string, destination stri
 	subjectConfirmation := subject.CreateElement("saml:SubjectConfirmation")
 	subjectConfirmation.CreateAttr("Method", "urn:oasis:names:tc:SAML:2.0:cm:bearer")
 	subjectConfirmationData := subjectConfirmation.CreateElement("saml:SubjectConfirmationData")
-	subjectConfirmationData.CreateAttr("InResponseTo", fmt.Sprintf("_%s", arId))
+	subjectConfirmationData.CreateAttr("InResponseTo", requestId)
 	subjectConfirmationData.CreateAttr("Recipient", destination)
 	subjectConfirmationData.CreateAttr("NotOnOrAfter", expireTime)
 	condition := assertion.CreateElement("saml:Conditions")
@@ -177,8 +177,8 @@ type Attribute struct {
 func GetSamlMeta(application *Application, host string) (*IdpEntityDescriptor, error) {
 	//_, originBackend := getOriginFromHost(host)
 	cert := getCertByApplication(application)
-	block, _ := pem.Decode([]byte(cert.PublicKey))
-	publicKey := base64.StdEncoding.EncodeToString(block.Bytes)
+	block, _ := pem.Decode([]byte(cert.Certificate))
+	certificate := base64.StdEncoding.EncodeToString(block.Bytes)
 
 	origin := beego.AppConfig.String("origin")
 	originFrontend, originBackend := getOriginFromHost(host)
@@ -199,7 +199,7 @@ func GetSamlMeta(application *Application, host string) (*IdpEntityDescriptor, e
 				KeyInfo: KeyInfo{
 					X509Data: X509Data{
 						X509Certificate: X509Certificate{
-							Cert: publicKey,
+							Cert: certificate,
 						},
 					},
 				},
@@ -225,14 +225,15 @@ func GetSamlMeta(application *Application, host string) (*IdpEntityDescriptor, e
 	return &d, nil
 }
 
-//GenerateSamlResponse generates a SAML2.0 response
-//parameter samlRequest is saml request in base64 format
+// GetSamlResponse generates a SAML2.0 response
+// parameter samlRequest is saml request in base64 format
 func GetSamlResponse(application *Application, user *User, samlRequest string, host string) (string, string, error) {
-	//decode samlRequest
+	// base64 decode
 	defated, err := base64.StdEncoding.DecodeString(samlRequest)
 	if err != nil {
 		return "", "", fmt.Errorf("err: %s", err.Error())
 	}
+	// decompress
 	var buffer bytes.Buffer
 	rdr := flate.NewReader(bytes.NewReader(defated))
 	io.Copy(&buffer, rdr)
@@ -241,42 +242,58 @@ func GetSamlResponse(application *Application, user *User, samlRequest string, h
 	if err != nil {
 		return "", "", fmt.Errorf("err: %s", err.Error())
 	}
-	//verify samlRequest
+
+	// verify samlRequest
 	if valid := CheckRedirectUriValid(application, authnRequest.Issuer.Url); !valid {
 		return "", "", fmt.Errorf("err: invalid issuer url")
 	}
 
-	//get publickey string
+	// get certificate string
 	cert := getCertByApplication(application)
-	block, _ := pem.Decode([]byte(cert.PublicKey))
-	publicKey := base64.StdEncoding.EncodeToString(block.Bytes)
+	block, _ := pem.Decode([]byte(cert.Certificate))
+	certificate := base64.StdEncoding.EncodeToString(block.Bytes)
 
 	_, originBackend := getOriginFromHost(host)
 
-	//build signedResponse
-	samlResponse, _ := NewSamlResponse(user, originBackend, publicKey, authnRequest.AssertionConsumerServiceURL, authnRequest.Issuer.Url, application.RedirectUris)
+	// build signedResponse
+	samlResponse, _ := NewSamlResponse(user, originBackend, certificate, authnRequest.AssertionConsumerServiceURL, authnRequest.Issuer.Url, authnRequest.ID, application.RedirectUris)
 	randomKeyStore := &X509Key{
 		PrivateKey:      cert.PrivateKey,
-		X509Certificate: publicKey,
+		X509Certificate: certificate,
 	}
 	ctx := dsig.NewDefaultSigningContext(randomKeyStore)
 	ctx.Hash = crypto.SHA1
-	signedXML, err := ctx.SignEnveloped(samlResponse)
+	//signedXML, err := ctx.SignEnvelopedLimix(samlResponse)
+	//if err != nil {
+	//	return "", "", fmt.Errorf("err: %s", err.Error())
+	//}
+	sig, err := ctx.ConstructSignature(samlResponse, true)
+	samlResponse.InsertChildAt(1, sig)
+
+	doc := etree.NewDocument()
+	doc.SetRoot(samlResponse)
+	xmlBytes, err := doc.WriteToBytes()
 	if err != nil {
 		return "", "", fmt.Errorf("err: %s", err.Error())
 	}
 
-	doc := etree.NewDocument()
-	doc.SetRoot(signedXML)
-	xmlStr, err := doc.WriteToString()
-	if err != nil {
-		return "", "", fmt.Errorf("err: %s", err.Error())
+	// compress
+	if application.EnableSamlCompress {
+		flated := bytes.NewBuffer(nil)
+		writer, err := flate.NewWriter(flated, flate.DefaultCompression)
+		if err != nil {
+			return "", "", fmt.Errorf("err: %s", err.Error())
+		}
+		writer.Write(xmlBytes)
+		writer.Close()
+		xmlBytes = flated.Bytes()
 	}
-	res := base64.StdEncoding.EncodeToString([]byte(xmlStr))
+	// base64 encode
+	res := base64.StdEncoding.EncodeToString(xmlBytes)
 	return res, authnRequest.AssertionConsumerServiceURL, nil
 }
 
-//return a saml1.1 response(not 2.0)
+// NewSamlResponse11 return a saml1.1 response(not 2.0)
 func NewSamlResponse11(user *User, requestID string, host string) *etree.Element {
 	samlResponse := &etree.Element{
 		Space: "samlp",

object/storage.go

@@ -17,6 +17,7 @@ package object
 import (
 	"bytes"
 	"fmt"
+	"net/url"
 	"strings"
 
 	"github.com/casdoor/casdoor/conf"
@@ -42,8 +43,19 @@ func getProviderEndpoint(provider *Provider) string {
 	return endpoint
 }
 
+func escapePath(path string) string {
+	tokens := strings.Split(path, "/")
+	if len(tokens) > 0 {
+		tokens[len(tokens)-1] = url.QueryEscape(tokens[len(tokens)-1])
+	}
+
+	res := strings.Join(tokens, "/")
+	return res
+}
+
 func getUploadFileUrl(provider *Provider, fullFilePath string, hasTimestamp bool) (string, string) {
-	objectKey := util.UrlJoin(util.GetUrlPath(provider.Domain), fullFilePath)
+	escapedPath := escapePath(fullFilePath)
+	objectKey := util.UrlJoin(util.GetUrlPath(provider.Domain), escapedPath)
 
 	host := ""
 	if provider.Type != "Local File System" {
@@ -56,10 +68,13 @@ func getUploadFileUrl(provider *Provider, fullFilePath string, hasTimestamp bool
 		// provider.Domain = "http://localhost:8000" or "https://door.casdoor.com"
 		host = util.UrlJoin(provider.Domain, "/files")
 	}
+	if provider.Type == "Azure Blob" {
+		host = fmt.Sprintf("%s/%s", host, provider.Bucket)
+	}
 
-	fileUrl := util.UrlJoin(host, objectKey)
+	fileUrl := util.UrlJoin(host, escapePath(objectKey))
 	if hasTimestamp {
-		fileUrl = fmt.Sprintf("%s?t=%s", util.UrlJoin(host, objectKey), util.GetCurrentUnixTime())
+		fileUrl = fmt.Sprintf("%s?t=%s", fileUrl, util.GetCurrentUnixTime())
 	}
 
 	return fileUrl, objectKey

object/syncer_user.go

@@ -151,6 +151,8 @@ func (syncer *Syncer) initAdapter() {
 		var dataSourceName string
 		if syncer.DatabaseType == "mssql" {
 			dataSourceName = fmt.Sprintf("sqlserver://%s:%s@%s:%d?database=%s", syncer.User, syncer.Password, syncer.Host, syncer.Port, syncer.Database)
+		} else if syncer.DatabaseType == "postgres" {
+			dataSourceName = fmt.Sprintf("user=%s password=%s host=%s port=%d sslmode=disable dbname=%s", syncer.User, syncer.Password, syncer.Host, syncer.Port, syncer.Database)
 		} else {
 			dataSourceName = fmt.Sprintf("%s:%s@tcp(%s:%d)/", syncer.User, syncer.Password, syncer.Host, syncer.Port)
 		}

object/syncer_util.go

@@ -173,7 +173,23 @@ func (syncer *Syncer) getOriginalUsersFromMap(results []map[string]string) []*Or
 		}
 
 		for _, tableColumn := range syncer.TableColumns {
-			syncer.setUserByKeyValue(originalUser, tableColumn.CasdoorName, result[tableColumn.Name])
+			tableColumnName := tableColumn.Name
+			if syncer.Type == "Keycloak" && syncer.DatabaseType == "postgres" {
+				tableColumnName = strings.ToLower(tableColumnName)
+			}
+
+			value := ""
+			if strings.Contains(tableColumnName, "+") {
+				names := strings.Split(tableColumnName, "+")
+				var values []string
+				for _, name := range names {
+					values = append(values, result[strings.Trim(name, " ")])
+				}
+				value = strings.Join(values, " ")
+			} else {
+				value = result[tableColumnName]
+			}
+			syncer.setUserByKeyValue(originalUser, tableColumn.CasdoorName, value)
 		}
 
 		if syncer.Type == "Keycloak" {
@@ -187,7 +203,7 @@ func (syncer *Syncer) getOriginalUsersFromMap(results []map[string]string) []*Or
 				originalUser.PasswordSalt = credential.Salt
 			}
 			// query and set signup application from user group table
-			sql = fmt.Sprintf("select name from keycloak_group where id = " +
+			sql = fmt.Sprintf("select name from keycloak_group where id = "+
 				"(select group_id as gid from user_group_membership where user_id = '%s')", originalUser.Id)
 			groupResult, _ := syncer.Adapter.Engine.QueryString(sql)
 			if len(groupResult) > 0 {
@@ -198,7 +214,12 @@ func (syncer *Syncer) getOriginalUsersFromMap(results []map[string]string) []*Or
 			tm := time.Unix(i/int64(1000), 0)
 			originalUser.CreatedTime = tm.Format("2006-01-02T15:04:05+08:00")
 			// enable
-			originalUser.IsForbidden = !(result["ENABLED"] == "\x01")
+			value, ok := result["ENABLED"]
+			if ok {
+				originalUser.IsForbidden = !util.ParseBool(value)
+			} else {
+				originalUser.IsForbidden = !util.ParseBool(result["enabled"])
+			}
 		}
 
 		users = append(users, originalUser)

object/token.go

@@ -17,7 +17,6 @@ package object
 import (
 	"crypto/sha256"
 	"encoding/base64"
-	"errors"
 	"fmt"
 	"strings"
 	"time"
@@ -28,7 +27,14 @@ import (
 )
 
 const (
-	hourSeconds = 3600
+	hourSeconds            = 3600
+	INVALID_REQUEST        = "invalid_request"
+	INVALID_CLIENT         = "invalid_client"
+	INVALID_GRANT          = "invalid_grant"
+	UNAUTHORIZED_CLIENT    = "unauthorized_client"
+	UNSUPPORTED_GRANT_TYPE = "unsupported_grant_type"
+	INVALID_SCOPE          = "invalid_scope"
+	ENDPOINT_ERROR         = "endpoint_error"
 )
 
 type Code struct {
@@ -63,7 +69,11 @@ type TokenWrapper struct {
 	TokenType    string `json:"token_type"`
 	ExpiresIn    int    `json:"expires_in"`
 	Scope        string `json:"scope"`
-	Error        string `json:"error,omitempty"`
+}
+
+type TokenError struct {
+	Error            string `json:"error"`
+	ErrorDescription string `json:"error_description,omitempty"`
 }
 
 type IntrospectionResponse struct {
@@ -311,59 +321,42 @@ func GetOAuthCode(userId string, clientId string, responseType string, redirectU
 	}
 }
 
-
-func GetOAuthToken(grantType string, clientId string, clientSecret string, code string, verifier string, scope string, username string, password string, host string, tag string, avatar string) *TokenWrapper {
-	var errString string
+func GetOAuthToken(grantType string, clientId string, clientSecret string, code string, verifier string, scope string, username string, password string, host string, tag string, avatar string) interface{} {
 	application := GetApplicationByClientId(clientId)
 	if application == nil {
-		errString = "error: invalid client_id"
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_CLIENT,
+			ErrorDescription: "client_id is invalid",
 		}
 	}
 
 	//Check if grantType is allowed in the current application
 
 	if !IsGrantTypeValid(grantType, application.GrantTypes) && tag == "" {
-		errString = fmt.Sprintf("error: grant_type: %s is not supported in this application", grantType)
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            UNSUPPORTED_GRANT_TYPE,
+			ErrorDescription: fmt.Sprintf("grant_type: %s is not supported in this application", grantType),
 		}
 	}
 
 	var token *Token
-	var err error
+	var tokenError *TokenError
 	switch grantType {
 	case "authorization_code": // Authorization Code Grant
-		token, err = GetAuthorizationCodeToken(application, clientSecret, code, verifier)
+		token, tokenError = GetAuthorizationCodeToken(application, clientSecret, code, verifier)
 	case "password": //	Resource Owner Password Credentials Grant
-		token, err = GetPasswordToken(application, username, password, scope, host)
+		token, tokenError = GetPasswordToken(application, username, password, scope, host)
 	case "client_credentials": // Client Credentials Grant
-		token, err = GetClientCredentialsToken(application, clientSecret, scope, host)
+		token, tokenError = GetClientCredentialsToken(application, clientSecret, scope, host)
 	}
 
 	if tag == "wechat_miniprogram" {
 		// Wechat Mini Program
-		token, err = GetWechatMiniProgramToken(application, code, host, username, avatar)
+		token, tokenError = GetWechatMiniProgramToken(application, code, host, username, avatar)
 	}
 
-	if err != nil {
-		errString = err.Error()
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
-		}
+	if tokenError != nil {
+		return tokenError
 	}
 
 	token.CodeIsUsed = true
@@ -380,81 +373,59 @@ func GetOAuthToken(grantType string, clientId string, clientSecret string, code
 	return tokenWrapper
 }
 
-func RefreshToken(grantType string, refreshToken string, scope string, clientId string, clientSecret string, host string) *TokenWrapper {
-	var errString string
+func RefreshToken(grantType string, refreshToken string, scope string, clientId string, clientSecret string, host string) interface{} {
 	// check parameters
 	if grantType != "refresh_token" {
-		errString = "error: grant_type should be \"refresh_token\""
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            UNSUPPORTED_GRANT_TYPE,
+			ErrorDescription: "grant_type should be refresh_token",
 		}
 	}
 	application := GetApplicationByClientId(clientId)
 	if application == nil {
-		errString = "error: invalid client_id"
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_CLIENT,
+			ErrorDescription: "client_id is invalid",
 		}
 	}
 	if clientSecret != "" && application.ClientSecret != clientSecret {
-		errString = "error: invalid client_secret"
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_CLIENT,
+			ErrorDescription: "client_secret is invalid",
 		}
 	}
 	// check whether the refresh token is valid, and has not expired.
 	token := Token{RefreshToken: refreshToken}
 	existed, err := adapter.Engine.Get(&token)
 	if err != nil || !existed {
-		errString = "error: invalid refresh_token"
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "refresh token is invalid, expired or revoked",
 		}
 	}
 
 	cert := getCertByApplication(application)
 	_, err = ParseJwtToken(refreshToken, cert)
 	if err != nil {
-		errString := fmt.Sprintf("error: %s", err.Error())
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: fmt.Sprintf("parse refresh token error: %s", err.Error()),
 		}
 	}
 	// generate a new token
 	user := getUser(application.Organization, token.User)
 	if user.IsForbidden {
-		errString = "error: the user is forbidden to sign in, please contact the administrator"
-		return &TokenWrapper{
-			AccessToken: errString,
-			TokenType:   "",
-			ExpiresIn:   0,
-			Scope:       "",
-			Error:       errString,
+		return &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "the user is forbidden to sign in, please contact the administrator",
 		}
 	}
 	newAccessToken, newRefreshToken, err := generateJwtToken(application, user, "", scope, host)
 	if err != nil {
-		panic(err)
+		return &TokenError{
+			Error:            ENDPOINT_ERROR,
+			ErrorDescription: fmt.Sprintf("generate jwt token error: %s", err.Error()),
+		}
 	}
 
 	newToken := &Token{
@@ -508,63 +479,99 @@ func IsGrantTypeValid(method string, grantTypes []string) bool {
 }
 
 // Authorization code flow
-func GetAuthorizationCodeToken(application *Application, clientSecret string, code string, verifier string) (*Token, error) {
+func GetAuthorizationCodeToken(application *Application, clientSecret string, code string, verifier string) (*Token, *TokenError) {
 	if code == "" {
-		return nil, errors.New("error: authorization code should not be empty")
+		return nil, &TokenError{
+			Error:            INVALID_REQUEST,
+			ErrorDescription: "authorization code should not be empty",
+		}
 	}
 
 	token := getTokenByCode(code)
 	if token == nil {
-		return nil, errors.New("error: invalid authorization code")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "authorization code is invalid",
+		}
 	}
 	if token.CodeIsUsed {
 		// anti replay attacks
-		return nil, errors.New("error: authorization code has been used")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "authorization code has been used",
+		}
 	}
 
 	if token.CodeChallenge != "" && pkceChallenge(verifier) != token.CodeChallenge {
-		return nil, errors.New("error: incorrect code_verifier")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "verifier is invalid",
+		}
 	}
 
 	if application.ClientSecret != clientSecret {
 		// when using PKCE, the Client Secret can be empty,
 		// but if it is provided, it must be accurate.
 		if token.CodeChallenge == "" {
-			return nil, errors.New("error: invalid client_secret")
+			return nil, &TokenError{
+				Error:            INVALID_CLIENT,
+				ErrorDescription: "client_secret is invalid",
+			}
 		} else {
 			if clientSecret != "" {
-				return nil, errors.New("error: invalid client_secret")
+				return nil, &TokenError{
+					Error:            INVALID_CLIENT,
+					ErrorDescription: "client_secret is invalid",
+				}
 			}
 		}
 	}
 
 	if application.Name != token.Application {
-		return nil, errors.New("error: the token is for wrong application (client_id)")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "the token is for wrong application (client_id)",
+		}
 	}
 
 	if time.Now().Unix() > token.CodeExpireIn {
 		// code must be used within 5 minutes
-		return nil, errors.New("error: authorization code has expired")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "authorization code has expired",
+		}
 	}
 	return token, nil
 }
 
 // Resource Owner Password Credentials flow
-func GetPasswordToken(application *Application, username string, password string, scope string, host string) (*Token, error) {
+func GetPasswordToken(application *Application, username string, password string, scope string, host string) (*Token, *TokenError) {
 	user := getUser(application.Organization, username)
 	if user == nil {
-		return nil, errors.New("error: the user does not exist")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "the user does not exist",
+		}
 	}
 	msg := CheckPassword(user, password)
 	if msg != "" {
-		return nil, errors.New("error: invalid username or password")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "invalid username or password",
+		}
 	}
 	if user.IsForbidden {
-		return nil, errors.New("error: the user is forbidden to sign in, please contact the administrator")
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: "the user is forbidden to sign in, please contact the administrator",
+		}
 	}
 	accessToken, refreshToken, err := generateJwtToken(application, user, "", scope, host)
 	if err != nil {
-		return nil, err
+		return nil, &TokenError{
+			Error:            ENDPOINT_ERROR,
+			ErrorDescription: fmt.Sprintf("generate jwt token error: %s", err.Error()),
+		}
 	}
 	token := &Token{
 		Owner:        application.Owner,
@@ -586,9 +593,12 @@ func GetPasswordToken(application *Application, username string, password string
 }
 
 // Client Credentials flow
-func GetClientCredentialsToken(application *Application, clientSecret string, scope string, host string) (*Token, error) {
+func GetClientCredentialsToken(application *Application, clientSecret string, scope string, host string) (*Token, *TokenError) {
 	if application.ClientSecret != clientSecret {
-		return nil, errors.New("error: invalid client_secret")
+		return nil, &TokenError{
+			Error:            INVALID_CLIENT,
+			ErrorDescription: "client_secret is invalid",
+		}
 	}
 	nullUser := &User{
 		Owner: application.Owner,
@@ -597,7 +607,10 @@ func GetClientCredentialsToken(application *Application, clientSecret string, sc
 	}
 	accessToken, _, err := generateJwtToken(application, nullUser, "", scope, host)
 	if err != nil {
-		return nil, err
+		return nil, &TokenError{
+			Error:            ENDPOINT_ERROR,
+			ErrorDescription: fmt.Sprintf("generate jwt token error: %s", err.Error()),
+		}
 	}
 	token := &Token{
 		Owner:        application.Owner,
@@ -643,25 +656,37 @@ func GetTokenByUser(application *Application, user *User, scope string, host str
 }
 
 // Wechat Mini Program flow
-func GetWechatMiniProgramToken(application *Application, code string, host string, username string, avatar string) (*Token, error) {
+func GetWechatMiniProgramToken(application *Application, code string, host string, username string, avatar string) (*Token, *TokenError) {
 	mpProvider := GetWechatMiniProgramProvider(application)
 	if mpProvider == nil {
-		return nil, errors.New("error: the application does not support wechat mini program")
+		return nil, &TokenError{
+			Error:            INVALID_CLIENT,
+			ErrorDescription: "the application does not support wechat mini program",
+		}
 	}
 	provider := GetProvider(util.GetId(mpProvider.Name))
 	mpIdp := idp.NewWeChatMiniProgramIdProvider(provider.ClientId, provider.ClientSecret)
 	session, err := mpIdp.GetSessionByCode(code)
 	if err != nil {
-		return nil, err
+		return nil, &TokenError{
+			Error:            INVALID_GRANT,
+			ErrorDescription: fmt.Sprintf("get wechat mini program session error: %s", err.Error()),
+		}
 	}
 	openId, unionId := session.Openid, session.Unionid
 	if openId == "" && unionId == "" {
-		return nil, errors.New("err: WeChat's openid and unionid are empty")
+		return nil, &TokenError{
+			Error:            INVALID_REQUEST,
+			ErrorDescription: "the wechat mini program session is invalid",
+		}
 	}
 	user := getUserByWechatId(openId, unionId)
 	if user == nil {
 		if !application.EnableSignUp {
-			return nil, errors.New("err: the application does not allow to sign up new account")
+			return nil, &TokenError{
+				Error:            INVALID_GRANT,
+				ErrorDescription: "the application does not allow to sign up new account",
+			}
 		}
 		//Add new user
 		var name string
@@ -691,7 +716,10 @@ func GetWechatMiniProgramToken(application *Application, code string, host strin
 
 	accessToken, refreshToken, err := generateJwtToken(application, user, "", "", host)
 	if err != nil {
-		return nil, err
+		return nil, &TokenError{
+			Error:            ENDPOINT_ERROR,
+			ErrorDescription: fmt.Sprintf("generate jwt token error: %s", err.Error()),
+		}
 	}
 
 	token := &Token{

object/token_cas.go

@@ -241,11 +241,11 @@ func GetValidationBySaml(samlRequest string, host string) (string, string, error
 	samlResponse := NewSamlResponse11(user, request.RequestID, host)
 
 	cert := getCertByApplication(application)
-	block, _ := pem.Decode([]byte(cert.PublicKey))
-	publicKey := base64.StdEncoding.EncodeToString(block.Bytes)
+	block, _ := pem.Decode([]byte(cert.Certificate))
+	certificate := base64.StdEncoding.EncodeToString(block.Bytes)
 	randomKeyStore := &X509Key{
 		PrivateKey:      cert.PrivateKey,
-		X509Certificate: publicKey,
+		X509Certificate: certificate,
 	}
 
 	ctx := dsig.NewDefaultSigningContext(randomKeyStore)

object/token_jwt.go

@@ -129,13 +129,13 @@ func ParseJwtToken(token string, cert *Cert) (*Claims, error) {
 			return nil, fmt.Errorf("unexpected signing method: %v", token.Header["alg"])
 		}
 
-		// RSA public key
-		publicKey, err := jwt.ParseRSAPublicKeyFromPEM([]byte(cert.PublicKey))
+		// RSA certificate
+		certificate, err := jwt.ParseRSAPublicKeyFromPEM([]byte(cert.Certificate))
 		if err != nil {
 			return nil, err
 		}
 
-		return publicKey, nil
+		return certificate, nil
 	})
 
 	if t != nil {

object/token_jwt_key_test.go

@@ -23,10 +23,10 @@ import (
 
 func TestGenerateRsaKeys(t *testing.T) {
 	fileId := "token_jwt_key"
-	publicKey, privateKey := generateRsaKeys(4096, 20, "Casdoor Cert", "Casdoor Organization")
+	certificate, privateKey := generateRsaKeys(4096, 20, "Casdoor Cert", "Casdoor Organization")
 
-	// Write certificate (aka public key) to file.
-	util.WriteStringToPath(publicKey, fmt.Sprintf("%s.pem", fileId))
+	// Write certificate (aka certificate) to file.
+	util.WriteStringToPath(certificate, fmt.Sprintf("%s.pem", fileId))
 
 	// Write private key to file.
 	util.WriteStringToPath(privateKey, fmt.Sprintf("%s.key", fileId))

object/user.go

@@ -20,6 +20,7 @@ import (
 
 	"github.com/casdoor/casdoor/conf"
 	"github.com/casdoor/casdoor/util"
+	"github.com/duo-labs/webauthn/webauthn"
 	"xorm.io/core"
 )
 
@@ -96,8 +97,11 @@ type User struct {
 	Steam         string `xorm:"steam varchar(100)" json:"steam"`
 	Bilibili      string `xorm:"bilibili varchar(100)" json:"bilibili"`
 	Okta          string `xorm:"okta varchar(100)" json:"okta"`
+	Douyin        string `xorm:"douyin varchar(100)" json:"douyin"`
 	Custom        string `xorm:"custom varchar(100)" json:"custom"`
 
+	WebauthnCredentials []webauthn.Credential `xorm:"webauthnCredentials blob" json:"webauthnCredentials"`
+
 	Ldap       string            `xorm:"ldap varchar(100)" json:"ldap"`
 	Properties map[string]string `json:"properties"`
 }
@@ -266,6 +270,24 @@ func GetUserByEmail(owner string, email string) *User {
 	}
 }
 
+func GetUserByUserId(owner string, userId string) *User {
+	if owner == "" || userId == "" {
+		return nil
+	}
+
+	user := User{Owner: owner, Id: userId}
+	existed, err := adapter.Engine.Get(&user)
+	if err != nil {
+		panic(err)
+	}
+
+	if existed {
+		return &user
+	} else {
+		return nil
+	}
+}
+
 func GetUser(id string) *User {
 	owner, name := util.GetOwnerAndNameFromId(id)
 	return getUser(owner, name)
@@ -325,9 +347,11 @@ func UpdateUser(id string, user *User, columns []string, isGlobalAdmin bool) boo
 	}
 
 	if len(columns) == 0 {
-		columns = []string{"owner", "display_name", "avatar",
+		columns = []string{
+			"owner", "display_name", "avatar",
 			"location", "address", "region", "language", "affiliation", "title", "homepage", "bio", "score", "tag", "signup_application",
-			"is_admin", "is_global_admin", "is_forbidden", "is_deleted", "hash", "is_default_avatar", "properties"}
+			"is_admin", "is_global_admin", "is_forbidden", "is_deleted", "hash", "is_default_avatar", "properties", "webauthnCredentials",
+		}
 	}
 	if isGlobalAdmin {
 		columns = append(columns, "name", "email", "phone")
@@ -394,10 +418,10 @@ func AddUsers(users []*User) bool {
 		return false
 	}
 
-	//organization := GetOrganizationByUser(users[0])
+	// organization := GetOrganizationByUser(users[0])
 	for _, user := range users {
 		// this function is only used for syncer or batch upload, so no need to encrypt the password
-		//user.UpdateUserPassword(organization)
+		// user.UpdateUserPassword(organization)
 
 		user.UpdateUserHash()
 		user.PreHash = user.Hash

object/user_webauthn.go

@@ -0,0 +1,102 @@
+// Copyright 2022 The casbin 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 (
+	"encoding/base64"
+	"net/url"
+	"strings"
+
+	"github.com/astaxie/beego"
+	"github.com/duo-labs/webauthn/protocol"
+	"github.com/duo-labs/webauthn/webauthn"
+)
+
+func GetWebAuthnObject(host string) *webauthn.WebAuthn {
+	var err error
+
+	origin := beego.AppConfig.String("origin")
+	if origin == "" {
+		_, origin = getOriginFromHost(host)
+	}
+
+	localUrl, err := url.Parse(origin)
+	if err != nil {
+		panic("error when parsing origin:" + err.Error())
+	}
+
+	webAuthn, err := webauthn.New(&webauthn.Config{
+		RPDisplayName: beego.AppConfig.String("appname"),    // Display Name for your site
+		RPID:          strings.Split(localUrl.Host, ":")[0], // Generally the domain name for your site, it's ok because splits cannot return empty array
+		RPOrigin:      origin,                               // The origin URL for WebAuthn requests
+		// RPIcon:     "https://duo.com/logo.png",           // Optional icon URL for your site
+	})
+	if err != nil {
+		panic(err)
+	}
+
+	return webAuthn
+}
+
+// implementation of webauthn.User interface
+func (u *User) WebAuthnID() []byte {
+	return []byte(u.GetId())
+}
+
+func (u *User) WebAuthnName() string {
+	return u.Name
+}
+
+func (u *User) WebAuthnDisplayName() string {
+	return u.DisplayName
+}
+
+func (u *User) WebAuthnCredentials() []webauthn.Credential {
+	return u.WebauthnCredentials
+}
+
+func (u *User) WebAuthnIcon() string {
+	return u.Avatar
+}
+
+// CredentialExcludeList returns a CredentialDescriptor array filled with all the user's credentials
+func (u *User) CredentialExcludeList() []protocol.CredentialDescriptor {
+	credentials := u.WebAuthnCredentials()
+	credentialExcludeList := []protocol.CredentialDescriptor{}
+	for _, cred := range credentials {
+		descriptor := protocol.CredentialDescriptor{
+			Type:         protocol.PublicKeyCredentialType,
+			CredentialID: cred.ID,
+		}
+		credentialExcludeList = append(credentialExcludeList, descriptor)
+	}
+
+	return credentialExcludeList
+}
+
+func (u *User) AddCredentials(credential webauthn.Credential, isGlobalAdmin bool) bool {
+	u.WebauthnCredentials = append(u.WebauthnCredentials, credential)
+	return UpdateUser(u.GetId(), u, []string{"webauthnCredentials"}, isGlobalAdmin)
+}
+
+func (u *User) DeleteCredentials(credentialIdBase64 string) bool {
+	for i, credential := range u.WebauthnCredentials {
+		if base64.StdEncoding.EncodeToString(credential.ID) == credentialIdBase64 {
+			u.WebauthnCredentials = append(u.WebauthnCredentials[0:i], u.WebauthnCredentials[i+1:]...)
+			return UpdateUserForAllFields(u.GetId(), u)
+		}
+	}
+	return false
+}

pp/alipay.go

@@ -28,7 +28,7 @@ type AlipayPaymentProvider struct {
 	Client *alipay.Client
 }
 
-func NewAlipayPaymentProvider(appId string, appPublicKey string, appPrivateKey string, authorityPublicKey string, authorityRootPublicKey string) *AlipayPaymentProvider {
+func NewAlipayPaymentProvider(appId string, appCertificate string, appPrivateKey string, authorityPublicKey string, authorityRootPublicKey string) *AlipayPaymentProvider {
 	pp := &AlipayPaymentProvider{}
 
 	client, err := alipay.NewClient(appId, appPrivateKey, true)
@@ -36,7 +36,7 @@ func NewAlipayPaymentProvider(appId string, appPublicKey string, appPrivateKey s
 		panic(err)
 	}
 
-	err = client.SetCertSnByContent([]byte(appPublicKey), []byte(authorityRootPublicKey), []byte(authorityPublicKey))
+	err = client.SetCertSnByContent([]byte(appCertificate), []byte(authorityRootPublicKey), []byte(authorityPublicKey))
 	if err != nil {
 		panic(err)
 	}

pp/provider.go

@@ -22,9 +22,9 @@ type PaymentProvider interface {
 	GetInvoice(paymentName string, personName string, personIdCard string, personEmail string, personPhone string, invoiceType string, invoiceTitle string, invoiceTaxId string) (string, error)
 }
 
-func GetPaymentProvider(typ string, appId string, clientSecret string, host string, appPublicKey string, appPrivateKey string, authorityPublicKey string, authorityRootPublicKey string) PaymentProvider {
+func GetPaymentProvider(typ string, appId string, clientSecret string, host string, appCertificate string, appPrivateKey string, authorityPublicKey string, authorityRootPublicKey string) PaymentProvider {
 	if typ == "Alipay" {
-		return NewAlipayPaymentProvider(appId, appPublicKey, appPrivateKey, authorityPublicKey, authorityRootPublicKey)
+		return NewAlipayPaymentProvider(appId, appCertificate, appPrivateKey, authorityPublicKey, authorityRootPublicKey)
 	} else if typ == "GC" {
 		return NewGcPaymentProvider(appId, clientSecret, host)
 	}

proxy/proxy.go

@@ -54,17 +54,17 @@ func isAddressOpen(address string) bool {
 }
 
 func getProxyHttpClient() *http.Client {
-	sock5Proxy := conf.GetConfigString("sock5Proxy")
-	if sock5Proxy == "" {
+	socks5Proxy := conf.GetConfigString("socks5Proxy")
+	if socks5Proxy == "" {
 		return &http.Client{}
 	}
 
-	if !isAddressOpen(sock5Proxy) {
+	if !isAddressOpen(socks5Proxy) {
 		return &http.Client{}
 	}
 
 	// https://stackoverflow.com/questions/33585587/creating-a-go-socks5-client
-	dialer, err := proxy.SOCKS5("tcp", sock5Proxy, nil, proxy.Direct)
+	dialer, err := proxy.SOCKS5("tcp", socks5Proxy, nil, proxy.Direct)
 	if err != nil {
 		panic(err)
 	}
@@ -76,7 +76,7 @@ func getProxyHttpClient() *http.Client {
 }
 
 func GetHttpClient(url string) *http.Client {
-	if strings.Contains(url, "githubusercontent.com") {
+	if strings.Contains(url, "githubusercontent.com") || strings.Contains(url, "googleusercontent.com") {
 		return ProxyHttpClient
 	} else {
 		return DefaultHttpClient

routers/authz_filter.go

@@ -109,6 +109,10 @@ func getUrlPath(urlPath string) string {
 		return "/api/login/oauth"
 	}
 
+	if strings.HasPrefix(urlPath, "/api/webauthn") {
+		return "/api/webauthn"
+	}
+
 	return urlPath
 }
 
@@ -118,6 +122,10 @@ func AuthzFilter(ctx *context.Context) {
 	urlPath := getUrlPath(ctx.Request.URL.Path)
 	objOwner, objName := getObject(ctx)
 
+	if strings.HasPrefix(urlPath, "/api/notify-payment") {
+		urlPath = "/api/notify-payment"
+	}
+
 	isAllowed := authz.IsAllowed(subOwner, subName, method, urlPath, objOwner, objName)
 
 	result := "deny"

routers/cors_filter.go

@@ -0,0 +1,51 @@
+// Copyright 2021 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 routers
+
+import (
+	"net/http"
+
+	"github.com/astaxie/beego/context"
+	"github.com/casdoor/casdoor/conf"
+	"github.com/casdoor/casdoor/object"
+)
+
+const (
+	headerOrigin       = "Origin"
+	headerAllowOrigin  = "Access-Control-Allow-Origin"
+	headerAllowMethods = "Access-Control-Allow-Methods"
+	headerAllowHeaders = "Access-Control-Allow-Headers"
+)
+
+func CorsFilter(ctx *context.Context) {
+	origin := ctx.Input.Header(headerOrigin)
+	originConf := conf.GetConfigString("origin")
+
+	if origin != "" && originConf != "" && origin != originConf {
+		if object.IsAllowOrigin(origin) {
+			ctx.Output.Header(headerAllowOrigin, origin)
+			ctx.Output.Header(headerAllowMethods, "POST, GET, OPTIONS")
+			ctx.Output.Header(headerAllowHeaders, "Content-Type, Authorization")
+		} else {
+			ctx.ResponseWriter.WriteHeader(http.StatusForbidden)
+			return
+		}
+
+		if ctx.Input.Method() == "OPTIONS" {
+			ctx.ResponseWriter.WriteHeader(http.StatusOK)
+			return
+		}
+	}
+}

routers/record.go

@@ -65,5 +65,5 @@ func RecordMessage(ctx *context.Context) {
 		record.Organization, record.User = util.GetOwnerAndNameFromId(userId)
 	}
 
-	util.SafeGoroutine(func() {object.AddRecord(record)})
+	util.SafeGoroutine(func() { object.AddRecord(record) })
 }

routers/router.go

@@ -48,7 +48,7 @@ func initAPI() {
 	beego.Router("/api/signup", &controllers.ApiController{}, "POST:Signup")
 	beego.Router("/api/login", &controllers.ApiController{}, "POST:Login")
 	beego.Router("/api/get-app-login", &controllers.ApiController{}, "GET:GetApplicationLogin")
-	beego.Router("/api/logout", &controllers.ApiController{}, "POST:Logout")
+	beego.Router("/api/logout", &controllers.ApiController{}, "GET,POST:Logout")
 	beego.Router("/api/get-account", &controllers.ApiController{}, "GET:GetAccount")
 	beego.Router("/api/userinfo", &controllers.ApiController{}, "GET:GetUserinfo")
 	beego.Router("/api/unlink", &controllers.ApiController{}, "POST:Unlink")
@@ -84,12 +84,19 @@ func initAPI() {
 	beego.Router("/api/add-permission", &controllers.ApiController{}, "POST:AddPermission")
 	beego.Router("/api/delete-permission", &controllers.ApiController{}, "POST:DeletePermission")
 
+	beego.Router("/api/get-models", &controllers.ApiController{}, "GET:GetModels")
+	beego.Router("/api/get-model", &controllers.ApiController{}, "GET:GetModel")
+	beego.Router("/api/update-model", &controllers.ApiController{}, "POST:UpdateModel")
+	beego.Router("/api/add-model", &controllers.ApiController{}, "POST:AddModel")
+	beego.Router("/api/delete-model", &controllers.ApiController{}, "POST:DeleteModel")
+
 	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")
 	beego.Router("/api/send-verification-code", &controllers.ApiController{}, "POST:SendVerificationCode")
+	beego.Router("/api/verify-captcha", &controllers.ApiController{}, "POST:VerifyCaptcha")
 	beego.Router("/api/reset-email-or-phone", &controllers.ApiController{}, "POST:ResetEmailOrPhone")
-	beego.Router("/api/get-human-check", &controllers.ApiController{}, "GET:GetHumanCheck")
+	beego.Router("/api/get-captcha", &controllers.ApiController{}, "GET:GetCaptcha")
 
 	beego.Router("/api/get-ldap-user", &controllers.ApiController{}, "POST:GetLdapUser")
 	beego.Router("/api/get-ldaps", &controllers.ApiController{}, "POST:GetLdaps")
@@ -184,4 +191,9 @@ func initAPI() {
 	beego.Router("/cas/:organization/:application/p3/proxyValidate", &controllers.RootController{}, "GET:CasP3ServiceAndProxyValidate")
 	beego.Router("/cas/:organization/:application/samlValidate", &controllers.RootController{}, "POST:SamlValidate")
 
+	beego.Router("/api/webauthn/signup/begin", &controllers.ApiController{}, "Get:WebAuthnSignupBegin")
+	beego.Router("/api/webauthn/signup/finish", &controllers.ApiController{}, "Post:WebAuthnSignupFinish")
+	beego.Router("/api/webauthn/signin/begin", &controllers.ApiController{}, "Get:WebAuthnSigninBegin")
+	beego.Router("/api/webauthn/signin/finish", &controllers.ApiController{}, "Post:WebAuthnSigninFinish")
+
 }

swagger/swagger.yml

@@ -12,11 +12,22 @@ paths:
       tags:
       - OIDC API
       operationId: RootController.GetJwks
+      responses:
+        "200":
+          description: ""
+          schema:
+            $ref: '#/definitions/jose.JSONWebKey'
   /.well-known/openid-configuration:
     get:
       tags:
       - OIDC API
+      description: Get Oidc Discovery
       operationId: RootController.GetOidcDiscovery
+      responses:
+        "200":
+          description: ""
+          schema:
+            $ref: '#/definitions/object.OidcDiscovery'
   /api/add-application:
     post:
       tags:
@@ -58,6 +69,24 @@ paths:
       tags:
       - Account API
       operationId: ApiController.AddLdap
+  /api/add-model:
+    post:
+      tags:
+      - Model API
+      description: add model
+      operationId: ApiController.AddModel
+      parameters:
+      - in: body
+        name: body
+        description: The details of the model
+        required: true
+        schema:
+          $ref: '#/definitions/object.Model'
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
   /api/add-organization:
     post:
       tags:
@@ -243,11 +272,11 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/controllers.Response'
-  /api/api/get-human-check:
+  /api/api/get-captcha:
     get:
       tags:
       - Login API
-      operationId: ApiController.GetHumancheck
+      operationId: ApiController.GetCaptcha
   /api/api/reset-email-or-phone:
     post:
       tags:
@@ -271,11 +300,11 @@ paths:
         required: true
         type: string
       - in: body
-        name: body
+        name: from
         description: Details of the email request
         required: true
         schema:
-          $ref: '#/definitions/emailForm'
+          $ref: '#/definitions/controllers.EmailForm'
       responses:
         "200":
           description: object
@@ -299,11 +328,11 @@ paths:
         required: true
         type: string
       - in: body
-        name: body
+        name: from
         description: Details of the sms request
         required: true
         schema:
-          $ref: '#/definitions/smsForm'
+          $ref: '#/definitions/controllers.SmsForm'
       responses:
         "200":
           description: object
@@ -382,6 +411,24 @@ paths:
       tags:
       - Account API
       operationId: ApiController.DeleteLdap
+  /api/delete-model:
+    post:
+      tags:
+      - Model API
+      description: delete model
+      operationId: ApiController.DeleteModel
+      parameters:
+      - in: body
+        name: body
+        description: The details of the model
+        required: true
+        schema:
+          $ref: '#/definitions/object.Model'
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
   /api/delete-organization:
     post:
       tags:
@@ -578,6 +625,43 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/controllers.Response'
+  /api/get-app-login:
+    get:
+      tags:
+      - Login API
+      description: get application login
+      operationId: ApiController.GetApplicationLogin
+      parameters:
+      - in: query
+        name: clientId
+        description: client id
+        required: true
+        type: string
+      - in: query
+        name: responseType
+        description: response type
+        required: true
+        type: string
+      - in: query
+        name: redirectUri
+        description: redirect uri
+        required: true
+        type: string
+      - in: query
+        name: scope
+        description: scope
+        required: true
+        type: string
+      - in: query
+        name: state
+        description: state
+        required: true
+        type: string
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/Response'
   /api/get-application:
     get:
       tags:
@@ -700,6 +784,42 @@ paths:
       tags:
       - Account API
       operationId: ApiController.GetLdaps
+  /api/get-model:
+    get:
+      tags:
+      - Model API
+      description: get model
+      operationId: ApiController.GetModel
+      parameters:
+      - in: query
+        name: id
+        description: The id of the model
+        required: true
+        type: string
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.Model'
+  /api/get-models:
+    get:
+      tags:
+      - Model API
+      description: get models
+      operationId: ApiController.GetModels
+      parameters:
+      - in: query
+        name: owner
+        description: The owner of models
+        required: true
+        type: string
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            type: array
+            items:
+              $ref: '#/definitions/object.Model'
   /api/get-organization:
     get:
       tags:
@@ -901,9 +1021,7 @@ paths:
         "200":
           description: The Response object
           schema:
-            type: array
-            items:
-              $ref: '#/definitions/object.Records'
+            $ref: '#/definitions/object.Record'
   /api/get-records-filter:
     post:
       tags:
@@ -912,18 +1030,17 @@ paths:
       operationId: ApiController.GetRecordsByFilter
       parameters:
       - in: body
-        name: body
+        name: filter
         description: filter Record message
         required: true
         schema:
-          $ref: '#/definitions/object.Records'
+          type: string
+        type: string
       responses:
         "200":
           description: The Response object
           schema:
-            type: array
-            items:
-              $ref: '#/definitions/object.Records'
+            $ref: '#/definitions/object.Record'
   /api/get-resource:
     get:
       tags:
@@ -1216,6 +1333,23 @@ paths:
             type: array
             items:
               $ref: '#/definitions/object.Webhook'
+  /api/invoice-payment:
+    post:
+      tags:
+      - Payment API
+      description: invoice payment
+      operationId: ApiController.InvoicePayment
+      parameters:
+      - in: query
+        name: id
+        description: The id of the payment
+        required: true
+        type: string
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
   /api/login:
     post:
       tags:
@@ -1224,21 +1358,51 @@ paths:
       operationId: ApiController.Login
       parameters:
       - in: query
-        name: oAuthParams
-        description: oAuth parameters
+        name: clientId
+        description: clientId
         required: true
         type: string
+      - in: query
+        name: responseType
+        description: responseType
+        required: true
+        type: string
+      - in: query
+        name: redirectUri
+        description: redirectUri
+        required: true
+        type: string
+      - in: query
+        name: scope
+        description: scope
+        type: string
+      - in: query
+        name: state
+        description: state
+        type: string
+      - in: query
+        name: nonce
+        description: nonce
+        type: string
+      - in: query
+        name: code_challenge_method
+        description: code_challenge_method
+        type: string
+      - in: query
+        name: code_challenge
+        description: code_challenge
+        type: string
       - in: body
-        name: body
+        name: form
         description: Login information
         required: true
         schema:
-          $ref: '#/definitions/RequestForm'
+          $ref: '#/definitions/controllers.RequestForm'
       responses:
         "200":
           description: The Response object
           schema:
-            $ref: '#/definitions/controllers.api_controller.Response'
+            $ref: '#/definitions/Response'
   /api/login/oauth/access_token:
     post:
       tags:
@@ -1271,6 +1435,14 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/object.TokenWrapper'
+        "400":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
+        "401":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
   /api/login/oauth/code:
     post:
       tags:
@@ -1333,6 +1505,14 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/object.IntrospectionResponse'
+        "400":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
+        "401":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
   /api/login/oauth/logout:
     get:
       tags:
@@ -1395,7 +1575,25 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/object.TokenWrapper'
+        "400":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
+        "401":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/object.TokenError'
   /api/logout:
+    get:
+      tags:
+      - Login API
+      description: logout the current user
+      operationId: ApiController.Logout
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
     post:
       tags:
       - Login API
@@ -1424,6 +1622,24 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/controllers.Response'
+  /api/run-syncer:
+    get:
+      tags:
+      - Syncer API
+      description: run syncer
+      operationId: ApiController.RunSyncer
+      parameters:
+      - in: body
+        name: body
+        description: The details of the syncer
+        required: true
+        schema:
+          $ref: '#/definitions/object.Syncer'
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
   /api/send-verification-code:
     post:
       tags:
@@ -1493,42 +1709,6 @@ paths:
       tags:
       - Login API
   /api/update-application:
-    get:
-      tags:
-      - Login API
-      description: get application login
-      operationId: ApiController.GetApplicationLogin
-      parameters:
-      - in: query
-        name: clientId
-        description: client id
-        required: true
-        type: string
-      - in: query
-        name: responseType
-        description: response type
-        required: true
-        type: string
-      - in: query
-        name: redirectUri
-        description: redirect uri
-        required: true
-        type: string
-      - in: query
-        name: scope
-        description: scope
-        required: true
-        type: string
-      - in: query
-        name: state
-        description: state
-        required: true
-        type: string
-      responses:
-        "200":
-          description: The Response object
-          schema:
-            $ref: '#/definitions/controllers.api_controller.Response'
     post:
       tags:
       - Application API
@@ -1579,6 +1759,29 @@ paths:
       tags:
       - Account API
       operationId: ApiController.UpdateLdap
+  /api/update-model:
+    post:
+      tags:
+      - Model API
+      description: update model
+      operationId: ApiController.UpdateModel
+      parameters:
+      - in: query
+        name: id
+        description: The id of the model
+        required: true
+        type: string
+      - in: body
+        name: body
+        description: The details of the model
+        required: true
+        schema:
+          $ref: '#/definitions/object.Model'
+      responses:
+        "200":
+          description: The Response object
+          schema:
+            $ref: '#/definitions/controllers.Response'
   /api/update-organization:
     post:
       tags:
@@ -1830,27 +2033,168 @@ paths:
           description: The Response object
           schema:
             $ref: '#/definitions/object.Userinfo'
+  /api/verify-captcha:
+    post:
+      tags:
+      - Verification API
+      operationId: ApiController.VerifyCaptcha
+  /api/webauthn/signin/begin:
+    get:
+      tags:
+      - Login API
+      description: WebAuthn Login Flow 1st stage
+      operationId: ApiController.WebAuthnSigninBegin
+      parameters:
+      - in: query
+        name: owner
+        description: owner
+        required: true
+        type: string
+      - in: query
+        name: name
+        description: name
+        required: true
+        type: string
+      responses:
+        "200":
+          description: The CredentialAssertion object
+          schema:
+            $ref: '#/definitions/protocol.CredentialAssertion'
+  /api/webauthn/signin/finish:
+    post:
+      tags:
+      - Login API
+      description: WebAuthn Login Flow 2nd stage
+      operationId: ApiController.WebAuthnSigninBegin
+      parameters:
+      - in: body
+        name: body
+        description: authenticator assertion Response
+        required: true
+        schema:
+          $ref: '#/definitions/protocol.CredentialAssertionResponse'
+      responses:
+        "200":
+          description: '"The Response object"'
+          schema:
+            $ref: '#/definitions/Response'
+  /api/webauthn/signup/begin:
+    get:
+      tags:
+      - User API
+      description: WebAuthn Registration Flow 1st stage
+      operationId: ApiController.WebAuthnSignupBegin
+      responses:
+        "200":
+          description: The CredentialCreationOptions object
+          schema:
+            $ref: '#/definitions/protocol.CredentialCreation'
+  /api/webauthn/signup/finish:
+    post:
+      tags:
+      - User API
+      description: WebAuthn Registration Flow 2nd stage
+      operationId: ApiController.WebAuthnSignupFinish
+      parameters:
+      - in: body
+        name: body
+        description: authenticator attestation Response
+        required: true
+        schema:
+          $ref: '#/definitions/protocol.CredentialCreationResponse'
+      responses:
+        "200":
+          description: '"The Response object"'
+          schema:
+            $ref: '#/definitions/Response'
 definitions:
-  2127.0xc00036c600.false:
+  2127.0xc000427560.false:
     title: "false"
     type: object
-  2161.0xc00036c630.false:
+  2161.0xc000427590.false:
     title: "false"
     type: object
-  RequestForm:
-    title: RequestForm
-    type: object
   Response:
     title: Response
     type: object
+  controllers.EmailForm:
+    title: EmailForm
+    type: object
+    properties:
+      content:
+        type: string
+      provider:
+        type: string
+      receivers:
+        type: array
+        items:
+          type: string
+      sender:
+        type: string
+      title:
+        type: string
+  controllers.RequestForm:
+    title: RequestForm
+    type: object
+    properties:
+      affiliation:
+        type: string
+      application:
+        type: string
+      autoSignin:
+        type: boolean
+      code:
+        type: string
+      email:
+        type: string
+      emailCode:
+        type: string
+      firstName:
+        type: string
+      idCard:
+        type: string
+      lastName:
+        type: string
+      method:
+        type: string
+      name:
+        type: string
+      organization:
+        type: string
+      password:
+        type: string
+      phone:
+        type: string
+      phoneCode:
+        type: string
+      phonePrefix:
+        type: string
+      provider:
+        type: string
+      redirectUri:
+        type: string
+      region:
+        type: string
+      relayState:
+        type: string
+      samlRequest:
+        type: string
+      samlResponse:
+        type: string
+      state:
+        type: string
+      type:
+        type: string
+      username:
+        type: string
   controllers.Response:
     title: Response
     type: object
     properties:
       data:
-        $ref: '#/definitions/2127.0xc00036c600.false'
+        $ref: '#/definitions/2127.0xc000427560.false'
       data2:
-        $ref: '#/definitions/2161.0xc00036c630.false'
+        $ref: '#/definitions/2161.0xc000427590.false'
       msg:
         type: string
       name:
@@ -1859,25 +2203,33 @@ definitions:
         type: string
       sub:
         type: string
-  controllers.api_controller.Response:
-    title: Response
+  controllers.SmsForm:
+    title: SmsForm
     type: object
     properties:
-      data:
-        $ref: '#/definitions/2127.0xc00036c600.false'
-      data2:
-        $ref: '#/definitions/2161.0xc00036c630.false'
-      msg:
+      content:
+        type: string
+      organizationId:
+        type: string
+      receivers:
+        type: array
+        items:
+          type: string
+  jose.JSONWebKey:
+    title: JSONWebKey
+    type: object
+  object.AccountItem:
+    title: AccountItem
+    type: object
+    properties:
+      modifyRule:
         type: string
       name:
         type: string
-      status:
+      viewRule:
         type: string
-      sub:
-        type: string
-  emailForm:
-    title: emailForm
-    type: object
+      visible:
+        type: boolean
   object.Adapter:
     title: Adapter
     type: object
@@ -1912,10 +2264,14 @@ definitions:
         type: boolean
       enablePassword:
         type: boolean
+      enableSamlCompress:
+        type: boolean
       enableSignUp:
         type: boolean
       enableSigninSession:
         type: boolean
+      enableWebAuthn:
+        type: boolean
       expireInHours:
         type: integer
         format: int64
@@ -1990,7 +2346,7 @@ definitions:
         type: string
       privateKey:
         type: string
-      publicKey:
+      certificate:
         type: string
       scope:
         type: string
@@ -2037,10 +2393,80 @@ definitions:
         type: string
       username:
         type: string
+  object.Model:
+    title: Model
+    type: object
+    properties:
+      createdTime:
+        type: string
+      displayName:
+        type: string
+      isEnabled:
+        type: boolean
+      modelText:
+        type: string
+      name:
+        type: string
+      owner:
+        type: string
+  object.OidcDiscovery:
+    title: OidcDiscovery
+    type: object
+    properties:
+      authorization_endpoint:
+        type: string
+      claims_supported:
+        type: array
+        items:
+          type: string
+      grant_types_supported:
+        type: array
+        items:
+          type: string
+      id_token_signing_alg_values_supported:
+        type: array
+        items:
+          type: string
+      introspection_endpoint:
+        type: string
+      issuer:
+        type: string
+      jwks_uri:
+        type: string
+      request_object_signing_alg_values_supported:
+        type: array
+        items:
+          type: string
+      request_parameter_supported:
+        type: boolean
+      response_modes_supported:
+        type: array
+        items:
+          type: string
+      response_types_supported:
+        type: array
+        items:
+          type: string
+      scopes_supported:
+        type: array
+        items:
+          type: string
+      subject_types_supported:
+        type: array
+        items:
+          type: string
+      token_endpoint:
+        type: string
+      userinfo_endpoint:
+        type: string
   object.Organization:
     title: Organization
     type: object
     properties:
+      accountItems:
+        type: array
+        items:
+          $ref: '#/definitions/object.AccountItem'
       createdTime:
         type: string
       defaultAvatar:
@@ -2051,6 +2477,8 @@ definitions:
         type: boolean
       favicon:
         type: string
+      isProfilePublic:
+        type: boolean
       masterPassword:
         type: string
       name:
@@ -2081,6 +2509,16 @@ definitions:
         type: string
       displayName:
         type: string
+      invoiceRemark:
+        type: string
+      invoiceTaxId:
+        type: string
+      invoiceTitle:
+        type: string
+      invoiceType:
+        type: string
+      invoiceUrl:
+        type: string
       message:
         type: string
       name:
@@ -2091,6 +2529,14 @@ definitions:
         type: string
       payUrl:
         type: string
+      personEmail:
+        type: string
+      personIdCard:
+        type: string
+      personName:
+        type: string
+      personPhone:
+        type: string
       price:
         type: number
         format: double
@@ -2126,6 +2572,8 @@ definitions:
         type: string
       isEnabled:
         type: boolean
+      model:
+        type: string
       name:
         type: string
       owner:
@@ -2205,6 +2653,16 @@ definitions:
         type: string
       createdTime:
         type: string
+      customAuthUrl:
+        type: string
+      customLogo:
+        type: string
+      customScope:
+        type: string
+      customTokenUrl:
+        type: string
+      customUserInfoUrl:
+        type: string
       displayName:
         type: string
       domain:
@@ -2264,9 +2722,35 @@ definitions:
         type: boolean
       provider:
         $ref: '#/definitions/object.Provider'
-  object.Records:
-    title: Records
+  object.Record:
+    title: Record
     type: object
+    properties:
+      action:
+        type: string
+      clientIp:
+        type: string
+      createdTime:
+        type: string
+      extendedUser:
+        $ref: '#/definitions/object.User'
+      id:
+        type: integer
+        format: int64
+      isTriggered:
+        type: boolean
+      method:
+        type: string
+      name:
+        type: string
+      organization:
+        type: string
+      owner:
+        type: string
+      requestUri:
+        type: string
+      user:
+        type: string
   object.Role:
     title: Role
     type: object
@@ -2401,14 +2885,20 @@ definitions:
         type: string
       user:
         type: string
+  object.TokenError:
+    title: TokenError
+    type: object
+    properties:
+      error:
+        type: string
+      error_description:
+        type: string
   object.TokenWrapper:
     title: TokenWrapper
     type: object
     properties:
       access_token:
         type: string
-      error:
-        type: string
       expires_in:
         type: integer
         format: int64
@@ -2442,6 +2932,8 @@ definitions:
         type: string
       baidu:
         type: string
+      bilibili:
+        type: string
       bio:
         type: string
       birthday:
@@ -2452,10 +2944,14 @@ definitions:
         type: string
       createdTime:
         type: string
+      custom:
+        type: string
       dingtalk:
         type: string
       displayName:
         type: string
+      douyin:
+        type: string
       education:
         type: string
       email:
@@ -2521,6 +3017,8 @@ definitions:
         type: string
       name:
         type: string
+      okta:
+        type: string
       owner:
         type: string
       password:
@@ -2558,8 +3056,14 @@ definitions:
         type: string
       type:
         type: string
+      unionId:
+        type: string
       updatedTime:
         type: string
+      webauthnCredentials:
+        type: array
+        items:
+          $ref: '#/definitions/webauthn.Credential'
       wechat:
         type: string
       wecom:
@@ -2618,8 +3122,20 @@ definitions:
         type: string
       url:
         type: string
-  smsForm:
-    title: smsForm
+  protocol.CredentialAssertion:
+    title: CredentialAssertion
+    type: object
+  protocol.CredentialAssertionResponse:
+    title: CredentialAssertionResponse
+    type: object
+  protocol.CredentialCreation:
+    title: CredentialCreation
+    type: object
+  protocol.CredentialCreationResponse:
+    title: CredentialCreationResponse
+    type: object
+  webauthn.Credential:
+    title: Credential
     type: object
   xorm.Engine:
     title: Engine

util/crypto.go

@@ -1,4 +1,4 @@
-// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+// 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.
@@ -12,12 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package object
+package util
 
-type SignupItem struct {
-	Name     string `json:"name"`
-	Visible  bool   `json:"visible"`
-	Required bool   `json:"required"`
-	Prompted bool   `json:"prompted"`
-	Rule     string `json:"rule"`
+import (
+	"crypto/hmac"
+	"crypto/sha1"
+	"encoding/base64"
+)
+
+func GetHmacSha1(keyStr, value string) string {
+	key := []byte(keyStr)
+	mac := hmac.New(sha1.New, key)
+	mac.Write([]byte(value))
+	res := base64.StdEncoding.EncodeToString(mac.Sum(nil))
+
+	return res
 }

util/string.go

@@ -52,8 +52,10 @@ func ParseFloat(s string) float64 {
 }
 
 func ParseBool(s string) bool {
-	if s == "\x01" {
+	if s == "\x01" || s == "true" {
 		return true
+	} else if s == "false" {
+		return false
 	}
 
 	i := ParseInt(s)

web/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

web/.eslintrc

@@ -0,0 +1,63 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "rules": {
+    // "eqeqeq": "error",
+    "semi": ["error", "always"],
+    // "indent": ["error", 2],
+    // follow antd's style guide
+    "quotes": ["error", "double"],
+    "jsx-quotes": ["error", "prefer-double"],
+    "space-in-parens": ["error", "never"],
+    "object-curly-spacing": ["error", "never"],
+    "array-bracket-spacing": ["error", "never"],
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "react/jsx-curly-spacing": [
+      "error",
+      { "when": "never", "allowMultiline": true, "children": true }
+    ],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "space-before-blocks": ["error", "always"],
+    "spaced-comment": ["error", "always"],
+    "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
+    "block-spacing": ["error", "never"],
+    "space-before-function-paren": ["error", "never"],
+    "no-trailing-spaces": ["error", { "ignoreComments": true }],
+    "eol-last": ["error", "always"],
+    // "no-var": ["error"],
+    "curly": ["error", "all"],
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+    "no-mixed-spaces-and-tabs": "error",
+    "sort-imports": ["error", {
+      "ignoreDeclarationSort": true
+    }],
+
+
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react/react-in-jsx-scope": "off",
+
+    // don't use strict mod now, otherwise there are a lot of errors in the codebase
+    "no-unused-vars": "warn",
+    "react/no-deprecated": "warn",
+    "no-case-declarations": "warn",
+    "react/jsx-key": "warn"
+  }
+}

web/craco.config.js

@@ -1,38 +1,38 @@
-const CracoLessPlugin = require('craco-less');
+const CracoLessPlugin = require("craco-less");
 
 module.exports = {
   devServer: {
     proxy: {
-      '/api': {
-        target: 'http://localhost:8000',
+      "/api": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/swagger': {
-        target: 'http://localhost:8000',
+      "/swagger": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/files': {
-        target: 'http://localhost:8000',
+      "/files": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/.well-known/openid-configuration': {
-        target: 'http://localhost:8000',
+      "/.well-known/openid-configuration": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/cas/serviceValidate': {
-        target: 'http://localhost:8000',
+      "/cas/serviceValidate": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/cas/proxyValidate': {
-        target: 'http://localhost:8000',
+      "/cas/proxyValidate": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/cas/proxy': {
-        target: 'http://localhost:8000',
+      "/cas/proxy": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       },
-      '/cas/validate': {
-        target: 'http://localhost:8000',
+      "/cas/validate": {
+        target: "http://localhost:8000",
         changeOrigin: true,
       }
     },
@@ -43,7 +43,7 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: {'@primary-color': 'rgb(45,120,213)'},
+            modifyVars: {"@primary-color": "rgb(45,120,213)"},
             javascriptEnabled: true,
           },
         },

web/package.json

@@ -59,6 +59,8 @@
     ]
   },
   "devDependencies": {
-    "cross-env": "^7.0.3"
+    "cross-env": "^7.0.3",
+    "eslint": "^7.11.0",
+    "eslint-plugin-react": "^7.30.1"
   }
 }

web/public/index.html

@@ -1,13 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?5998fcd123c220efc0936edf4f250504";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+
     <meta charset="utf-8" />
 <!--    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />-->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Casdoor - An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS"
     />
     <link rel="apple-touch-icon" href="https://cdn.casdoor.com/static/favicon.png" />
     <!--

web/src/AccountTable.js

@@ -0,0 +1,243 @@
+// 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 {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
+import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+const {Option} = Select;
+
+class AccountTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  updateTable(table) {
+    this.props.onUpdateTable(table);
+  }
+
+  updateField(table, index, key, value) {
+    table[index][key] = value;
+    this.updateTable(table);
+  }
+
+  addRow(table) {
+    let row = {name: Setting.getNewRowNameForTable(table, "Please select an account item"), visible: true};
+    if (table === undefined) {
+      table = [];
+    }
+    table = Setting.addRow(table, row);
+    this.updateTable(table);
+  }
+
+  deleteRow(table, i) {
+    table = Setting.deleteRow(table, i);
+    this.updateTable(table);
+  }
+
+  upRow(table, i) {
+    table = Setting.swapRow(table, i - 1, i);
+    this.updateTable(table);
+  }
+
+  downRow(table, i) {
+    table = Setting.swapRow(table, i, i + 1);
+    this.updateTable(table);
+  }
+
+  renderTable(table) {
+    const columns = [
+      {
+        title: i18next.t("provider:Name"),
+        dataIndex: "name",
+        key: "name",
+        render: (text, record, index) => {
+          const items = [
+            {name: "Organization", displayName: i18next.t("general:Organization")},
+            {name: "ID", displayName: i18next.t("general:ID")},
+            {name: "Name", displayName: i18next.t("general:Name")},
+            {name: "Display name", displayName: i18next.t("general:Display name")},
+            {name: "Avatar", displayName: i18next.t("general:Avatar")},
+            {name: "User type", displayName: i18next.t("general:User type")},
+            {name: "Password", displayName: i18next.t("general:Password")},
+            {name: "Email", displayName: i18next.t("general:Email")},
+            {name: "Phone", displayName: i18next.t("general:Phone")},
+            {name: "Country/Region", displayName: i18next.t("user:Country/Region")},
+            {name: "Location", displayName: i18next.t("user:Location")},
+            {name: "Affiliation", displayName: i18next.t("user:Affiliation")},
+            {name: "Title", displayName: i18next.t("user:Title")},
+            {name: "Homepage", displayName: i18next.t("user:Homepage")},
+            {name: "Bio", displayName: i18next.t("user:Bio")},
+            {name: "Tag", displayName: i18next.t("user:Tag")},
+            {name: "Signup application", displayName: i18next.t("general:Signup application")},
+            {name: "3rd-party logins", displayName: i18next.t("user:3rd-party logins")},
+            {name: "Properties", displayName: i18next.t("user:Properties")},
+            {name: "Is admin", displayName: i18next.t("user:Is admin")},
+            {name: "Is global admin", displayName: i18next.t("user:Is global admin")},
+            {name: "Is forbidden", displayName: i18next.t("user:Is forbidden")},
+            {name: "Is deleted", displayName: i18next.t("user:Is deleted")},
+            {name: "WebAuthn credentials", displayName: i18next.t("user:WebAuthn credentials")},
+          ];
+
+          const getItemDisplayName = (text) => {
+            const item = items.filter(item => item.name === text);
+            if (item.length === 0) {
+              return "";
+            }
+            return item[0].displayName;
+          };
+
+          return (
+            <Select virtual={false} style={{width: "100%"}}
+              value={getItemDisplayName(text)}
+              onChange={value => {
+                this.updateField(table, index, "name", value);
+              }} >
+              {
+                Setting.getDeduplicatedArray(items, table, "name").map((item, index) => <Option key={index} value={item.name}>{item.displayName}</Option>)
+              }
+            </Select>
+          );
+        }
+      },
+      {
+        title: i18next.t("provider:visible"),
+        dataIndex: "visible",
+        key: "visible",
+        width: "120px",
+        render: (text, record, index) => {
+          return (
+            <Switch checked={text} onChange={checked => {
+              this.updateField(table, index, "visible", checked);
+            }} />
+          );
+        }
+      },
+      {
+        title: i18next.t("organization:viewRule"),
+        dataIndex: "viewRule",
+        key: "viewRule",
+        width: "155px",
+        render: (text, record, index) => {
+          if (!record.visible) {
+            return null;
+          }
+
+          let options = [
+            {id: "Public", name: "Public"},
+            {id: "Self", name: "Self"},
+            {id: "Admin", name: "Admin"},
+          ];
+
+          return (
+            <Select virtual={false} style={{width: "100%"}} value={text} onChange={(value => {
+              this.updateField(table, index, "viewRule", value);
+            })}>
+              {
+                options.map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
+              }
+            </Select>
+          );
+        }
+      },
+      {
+        title: i18next.t("organization:modifyRule"),
+        dataIndex: "modifyRule",
+        key: "modifyRule",
+        width: "155px",
+        render: (text, record, index) => {
+          if (!record.visible) {
+            return null;
+          }
+
+          let options;
+          if (record.viewRule === "Admin") {
+            options = [
+              {id: "Admin", name: "Admin"},
+              {id: "Immutable", name: "Immutable"},
+            ];
+          } else {
+            options = [
+              {id: "Self", name: "Self"},
+              {id: "Admin", name: "Admin"},
+              {id: "Immutable", name: "Immutable"},
+            ];
+          }
+
+          return (
+            <Select virtual={false} style={{width: "100%"}} value={text} onChange={(value => {
+              this.updateField(table, index, "modifyRule", value);
+            })}>
+              {
+                options.map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
+              }
+            </Select>
+          );
+        }
+      },
+      {
+        title: i18next.t("general:Action"),
+        key: "action",
+        width: "100px",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Tooltip placement="bottomLeft" title={i18next.t("general:Up")}>
+                <Button style={{marginRight: "5px"}} disabled={index === 0} icon={<UpOutlined />} size="small" onClick={() => this.upRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={i18next.t("general:Down")}>
+                <Button style={{marginRight: "5px"}} disabled={index === table.length - 1} icon={<DownOutlined />} size="small" onClick={() => this.downRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={i18next.t("general:Delete")}>
+                <Button icon={<DeleteOutlined />} size="small" onClick={() => this.deleteRow(table, index)} />
+              </Tooltip>
+            </div>
+          );
+        }
+      },
+    ];
+
+    return (
+      <Table scroll={{x: "max-content"}} rowKey="name" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+        title={() => (
+          <div>
+            {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+          </div>
+        )}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{marginTop: "20px"}} >
+          <Col span={24}>
+            {
+              this.renderTable(this.props.table)
+            }
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default AccountTable;

web/src/App.js

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Component} from 'react';
-import './App.less';
+import React, {Component} from "react";
+import "./App.less";
 import {Helmet} from "react-helmet";
 import * as Setting from "./Setting";
-import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
-import {Avatar, BackTop, Dropdown, Layout, Menu, Card, Result, Button} from 'antd';
-import {Link, Redirect, Route, Switch, withRouter} from 'react-router-dom'
+import {DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
+import {Avatar, BackTop, Button, Card, Dropdown, Layout, Menu, Result} from "antd";
+import {Link, Redirect, Route, Switch, withRouter} from "react-router-dom";
 import OrganizationListPage from "./OrganizationListPage";
 import OrganizationEditPage from "./OrganizationEditPage";
 import UserListPage from "./UserListPage";
@@ -63,14 +63,16 @@ import SelfForgetPage from "./auth/SelfForgetPage";
 import ForgetPage from "./auth/ForgetPage";
 import * as AuthBackend from "./auth/AuthBackend";
 import AuthCallback from "./auth/AuthCallback";
-import SelectLanguageBox from './SelectLanguageBox';
-import i18next from 'i18next';
+import SelectLanguageBox from "./SelectLanguageBox";
+import i18next from "i18next";
 import PromptPage from "./auth/PromptPage";
 import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
-import SamlCallback from './auth/SamlCallback';
+import SamlCallback from "./auth/SamlCallback";
 import CasLogout from "./auth/CasLogout";
+import ModelListPage from "./ModelListPage";
+import ModelEditPage from "./ModelEditPage";
 
-const { Header, Footer } = Layout;
+const {Header, Footer} = Layout;
 
 class App extends Component {
   constructor(props) {
@@ -108,44 +110,46 @@ class App extends Component {
     this.setState({
       uri: uri,
     });
-    if (uri === '/') {
-      this.setState({ selectedMenuKey: '/' });
-    } else if (uri.includes('/organizations')) {
-      this.setState({ selectedMenuKey: '/organizations' });
-    } else if (uri.includes('/users')) {
-      this.setState({ selectedMenuKey: '/users' });
-    } else if (uri.includes('/roles')) {
-      this.setState({ selectedMenuKey: '/roles' });
-    } else if (uri.includes('/permissions')) {
-      this.setState({ selectedMenuKey: '/permissions' });
-    } else if (uri.includes('/providers')) {
-      this.setState({ selectedMenuKey: '/providers' });
-    } else if (uri.includes('/applications')) {
-      this.setState({ selectedMenuKey: '/applications' });
-    } else if (uri.includes('/resources')) {
-      this.setState({ selectedMenuKey: '/resources' });
-    } else if (uri.includes('/tokens')) {
-      this.setState({ selectedMenuKey: '/tokens' });
-    } else if (uri.includes('/records')) {
-      this.setState({ selectedMenuKey: '/records' });
-    } else if (uri.includes('/webhooks')) {
-      this.setState({ selectedMenuKey: '/webhooks' });
-    } else if (uri.includes('/syncers')) {
-      this.setState({ selectedMenuKey: '/syncers' });
-    } else if (uri.includes('/certs')) {
-      this.setState({ selectedMenuKey: '/certs' });
-    } else if (uri.includes('/products')) {
-      this.setState({ selectedMenuKey: '/products' });
-    } else if (uri.includes('/payments')) {
-      this.setState({ selectedMenuKey: '/payments' });
-    } else if (uri.includes('/signup')) {
-      this.setState({ selectedMenuKey: '/signup' });
-    } else if (uri.includes('/login')) {
-      this.setState({ selectedMenuKey: '/login' });
-    } else if (uri.includes('/result')) {
-      this.setState({ selectedMenuKey: '/result' });
+    if (uri === "/") {
+      this.setState({selectedMenuKey: "/"});
+    } else if (uri.includes("/organizations")) {
+      this.setState({selectedMenuKey: "/organizations"});
+    } else if (uri.includes("/users")) {
+      this.setState({selectedMenuKey: "/users"});
+    } else if (uri.includes("/roles")) {
+      this.setState({selectedMenuKey: "/roles"});
+    } else if (uri.includes("/permissions")) {
+      this.setState({selectedMenuKey: "/permissions"});
+    } else if (uri.includes("/models")) {
+      this.setState({selectedMenuKey: "/models"});
+    } else if (uri.includes("/providers")) {
+      this.setState({selectedMenuKey: "/providers"});
+    } else if (uri.includes("/applications")) {
+      this.setState({selectedMenuKey: "/applications"});
+    } else if (uri.includes("/resources")) {
+      this.setState({selectedMenuKey: "/resources"});
+    } else if (uri.includes("/tokens")) {
+      this.setState({selectedMenuKey: "/tokens"});
+    } else if (uri.includes("/records")) {
+      this.setState({selectedMenuKey: "/records"});
+    } else if (uri.includes("/webhooks")) {
+      this.setState({selectedMenuKey: "/webhooks"});
+    } else if (uri.includes("/syncers")) {
+      this.setState({selectedMenuKey: "/syncers"});
+    } else if (uri.includes("/certs")) {
+      this.setState({selectedMenuKey: "/certs"});
+    } else if (uri.includes("/products")) {
+      this.setState({selectedMenuKey: "/products"});
+    } else if (uri.includes("/payments")) {
+      this.setState({selectedMenuKey: "/payments"});
+    } else if (uri.includes("/signup")) {
+      this.setState({selectedMenuKey: "/signup"});
+    } else if (uri.includes("/login")) {
+      this.setState({selectedMenuKey: "/login"});
+    } else if (uri.includes("/result")) {
+      this.setState({selectedMenuKey: "/result"});
     } else {
-      this.setState({ selectedMenuKey: -1 });
+      this.setState({selectedMenuKey: -1});
     }
   }
 
@@ -230,12 +234,12 @@ class App extends Component {
 
     AuthBackend.logout()
       .then((res) => {
-        if (res.status === 'ok') {
+        if (res.status === "ok") {
           this.setState({
             account: null
           });
 
-          Setting.showMessage("success", `Logged out successfully`);
+          Setting.showMessage("success", "Logged out successfully");
           let redirectUri = res.data2;
           if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
             Setting.goToLink(redirectUri);
@@ -255,9 +259,9 @@ class App extends Component {
   }
 
   handleRightDropdownClick(e) {
-    if (e.key === '/account') {
-      this.props.history.push(`/account`);
-    } else if (e.key === '/logout') {
+    if (e.key === "/account") {
+      this.props.history.push("/account");
+    } else if (e.key === "/logout") {
       this.logout();
     }
   }
@@ -265,16 +269,16 @@ class App extends Component {
   renderAvatar() {
     if (this.state.account.avatar === "") {
       return (
-        <Avatar style={{ backgroundColor: Setting.getAvatarColor(this.state.account.name), verticalAlign: 'middle' }} size="large">
+        <Avatar style={{backgroundColor: Setting.getAvatarColor(this.state.account.name), verticalAlign: "middle"}} size="large">
           {Setting.getShortName(this.state.account.name)}
         </Avatar>
-      )
+      );
     } else {
       return (
-        <Avatar src={this.state.account.avatar} style={{verticalAlign: 'middle' }} size="large">
+        <Avatar src={this.state.account.avatar} style={{verticalAlign: "middle"}} size="large">
           {Setting.getShortName(this.state.account.name)}
         </Avatar>
-      )
+      );
     }
   }
 
@@ -283,10 +287,12 @@ class App extends Component {
       <Menu onClick={this.handleRightDropdownClick.bind(this)}>
         <Menu.Item key="/account">
           <SettingOutlined />
+          &nbsp;
           {i18next.t("account:My Account")}
         </Menu.Item>
         <Menu.Item key="/logout">
           <LogoutOutlined />
+          &nbsp;
           {i18next.t("account:Logout")}
         </Menu.Item>
       </Menu>
@@ -294,7 +300,7 @@ class App extends Component {
 
     return (
       <Dropdown key="/rightDropDown" overlay={menu} className="rightDropDown">
-        <div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}>
+        <div className="ant-dropdown-link" style={{float: "right", cursor: "pointer"}}>
           &nbsp;
           &nbsp;
           {
@@ -308,7 +314,7 @@ class App extends Component {
           &nbsp;
         </div>
       </Dropdown>
-    )
+    );
   }
 
   renderAccount() {
@@ -382,6 +388,13 @@ class App extends Component {
           </Link>
         </Menu.Item>
       );
+      res.push(
+        <Menu.Item key="/models">
+          <Link to="/models">
+            {i18next.t("general:Models")}
+          </Link>
+        </Menu.Item>
+      );
       res.push(
         <Menu.Item key="/providers">
           <Link to="/providers">
@@ -473,7 +486,7 @@ class App extends Component {
 
   renderHomeIfLoggedIn(component) {
     if (this.state.account !== null && this.state.account !== undefined) {
-      return <Redirect to='/' />
+      return <Redirect to="/" />;
     } else {
       return component;
     }
@@ -482,75 +495,114 @@ class App extends Component {
   renderLoginIfNotLoggedIn(component) {
     if (this.state.account === null) {
       sessionStorage.setItem("from", window.location.pathname);
-      return <Redirect to='/login' />
+      return <Redirect to="/login" />;
     } else if (this.state.account === undefined) {
       return null;
-    }
-    else {
+    } else {
       return component;
     }
   }
 
   isStartPages() {
-    return window.location.pathname.startsWith('/login') ||
-      window.location.pathname.startsWith('/signup') ||
-      window.location.pathname === '/';
+    return window.location.pathname.startsWith("/login") ||
+      window.location.pathname.startsWith("/signup") ||
+      window.location.pathname === "/";
   }
 
-  renderRouter(){
+  renderRouter() {
     return(
       <div>
         <Switch>
-          <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
-          <Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
-          <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} {...props} />)}/>
-          <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations/:organizationName" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations/:organizationName/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/users/:organizationName/:userName" render={(props) => <UserEditPage account={this.state.account} {...props} />}/>
-          <Route exact path="/roles" render={(props) => this.renderLoginIfNotLoggedIn(<RoleListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/roles/:organizationName/:roleName" render={(props) => this.renderLoginIfNotLoggedIn(<RoleEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/permissions" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/permissions/:organizationName/:permissionName" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionEditPage 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} />)}/>
-          <Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/resources" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceListPage account={this.state.account} {...props} />)}/>
-          {/*<Route exact path="/resources/:resourceName" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceEditPage account={this.state.account} {...props} />)}/>*/}
-          <Route exact path="/ldap/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/ldap/sync/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapSyncPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/tokens" render={(props) => this.renderLoginIfNotLoggedIn(<TokenListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/tokens/:tokenName" render={(props) => this.renderLoginIfNotLoggedIn(<TokenEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/webhooks" render={(props) => this.renderLoginIfNotLoggedIn(<WebhookListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/webhooks/:webhookName" render={(props) => this.renderLoginIfNotLoggedIn(<WebhookEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/syncers" render={(props) => this.renderLoginIfNotLoggedIn(<SyncerListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/syncers/:syncerName" render={(props) => this.renderLoginIfNotLoggedIn(<SyncerEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/certs" render={(props) => this.renderLoginIfNotLoggedIn(<CertListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/certs/:certName" render={(props) => this.renderLoginIfNotLoggedIn(<CertEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/products" render={(props) => this.renderLoginIfNotLoggedIn(<ProductListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/products/:productName" render={(props) => this.renderLoginIfNotLoggedIn(<ProductEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/products/:productName/buy" render={(props) => this.renderLoginIfNotLoggedIn(<ProductBuyPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/payments" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/payments/:paymentName" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/payments/:paymentName/result" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentResultPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/records" render={(props) => this.renderLoginIfNotLoggedIn(<RecordListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/.well-known/openid-configuration" render={(props) => <OdicDiscoveryPage />}/>
+          <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)} />
+          <Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)} />
+          <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} {...props} />)} />
+          <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)} />
+          <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/organizations/:organizationName" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/organizations/:organizationName/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/users/:organizationName/:userName" render={(props) => <UserEditPage account={this.state.account} {...props} />} />
+          <Route exact path="/roles" render={(props) => this.renderLoginIfNotLoggedIn(<RoleListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/roles/:organizationName/:roleName" render={(props) => this.renderLoginIfNotLoggedIn(<RoleEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/permissions" render={(props) => this.renderLoginIfNotLoggedIn(<PermissionListPage account={this.state.account} {...props} />)} />
+          <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="/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} />)} />
+          <Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/resources" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceListPage account={this.state.account} {...props} />)} />
+          {/* <Route exact path="/resources/:resourceName" render={(props) => this.renderLoginIfNotLoggedIn(<ResourceEditPage account={this.state.account} {...props} />)}/>*/}
+          <Route exact path="/ldap/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/ldap/sync/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapSyncPage account={this.state.account} {...props} />)} />
+          <Route exact path="/tokens" render={(props) => this.renderLoginIfNotLoggedIn(<TokenListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/tokens/:tokenName" render={(props) => this.renderLoginIfNotLoggedIn(<TokenEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/webhooks" render={(props) => this.renderLoginIfNotLoggedIn(<WebhookListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/webhooks/:webhookName" render={(props) => this.renderLoginIfNotLoggedIn(<WebhookEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/syncers" render={(props) => this.renderLoginIfNotLoggedIn(<SyncerListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/syncers/:syncerName" render={(props) => this.renderLoginIfNotLoggedIn(<SyncerEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/certs" render={(props) => this.renderLoginIfNotLoggedIn(<CertListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/certs/:certName" render={(props) => this.renderLoginIfNotLoggedIn(<CertEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/products" render={(props) => this.renderLoginIfNotLoggedIn(<ProductListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/products/:productName" render={(props) => this.renderLoginIfNotLoggedIn(<ProductEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/products/:productName/buy" render={(props) => this.renderLoginIfNotLoggedIn(<ProductBuyPage account={this.state.account} {...props} />)} />
+          <Route exact path="/payments" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/payments/:paymentName" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentEditPage account={this.state.account} {...props} />)} />
+          <Route exact path="/payments/:paymentName/result" render={(props) => this.renderLoginIfNotLoggedIn(<PaymentResultPage account={this.state.account} {...props} />)} />
+          <Route exact path="/records" render={(props) => this.renderLoginIfNotLoggedIn(<RecordListPage account={this.state.account} {...props} />)} />
+          <Route exact path="/.well-known/openid-configuration" render={(props) => <OdicDiscoveryPage />} />
           <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
-                                               extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
-      </Switch>
-    </div>
-    )
+            extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
+        </Switch>
+      </div>
+    );
   }
 
   renderContent() {
     if (!Setting.isMobile()) {
       return (
-        <div style={{display: 'flex', flex: 'auto',width:"100%",flexDirection: 'column'}}>
-          <Layout style={{display: 'flex', alignItems: 'stretch'}}>
-          <Header style={{ padding: '0', marginBottom: '3px'}}>
+        <div style={{display: "flex", flex: "auto", width:"100%", flexDirection: "column"}}>
+          <Layout style={{display: "flex", alignItems: "stretch"}}>
+            <Header style={{padding: "0", marginBottom: "3px"}}>
+              {
+                Setting.isMobile() ? null : (
+                  <Link to={"/"}>
+                    <div className="logo" />
+                  </Link>
+                )
+              }
+              <div>
+                <Menu
+                  // theme="dark"
+                  mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+                  selectedKeys={[`${this.state.selectedMenuKey}`]}
+                  style={{lineHeight: "64px", width: "80%", position: "absolute"}}
+                >
+                  {
+                    this.renderMenu()
+                  }
+                </Menu>
+                {
+                  this.renderAccount()
+                }
+                <SelectLanguageBox />
+              </div>
+            </Header>
+            <Layout style={{backgroundColor: "#f5f5f5", alignItems: "stretch"}}>
+              <Card className="content-warp-card">
+                {
+                  this.renderRouter()
+                }
+              </Card>
+            </Layout>
+          </Layout>
+        </div>
+      );
+    } else {
+      return(
+        <div>
+          <Header style={{padding: "0", marginBottom: "3px"}}>
             {
               Setting.isMobile() ? null : (
                 <Link to={"/"}>
@@ -558,66 +610,28 @@ class App extends Component {
                 </Link>
               )
             }
-            <div>
-              <Menu
-                  // theme="dark"
-                  mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
-                  selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: '64px', width: '80%', position: 'absolute'}}
-              >
-                {
-                  this.renderMenu()
-                }
-              </Menu>
-              {
-                this.renderAccount()
-              }
-              <SelectLanguageBox/>
-            </div>
-          </Header>
-          <Layout style={{backgroundColor: "#f5f5f5", alignItems: 'stretch'}}>
-            <Card className="content-warp-card">
-              {
-              this.renderRouter()
-              }
-            </Card>
-          </Layout>
-          </Layout>
-        </div>
-      )
-    } else {
-      return(
-        <div>
-        <Header style={{ padding: '0', marginBottom: '3px'}}>
-          {
-            Setting.isMobile() ? null : (
-              <Link to={"/"}>
-                <div className="logo" />
-              </Link>
-            )
-          }
-          <Menu
+            <Menu
             // theme="dark"
-            mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
-            selectedKeys={[`${this.state.selectedMenuKey}`]}
-            style={{ lineHeight: '64px' }}
-          >
-            {
-              this.renderMenu()
-            }
-            <div style = {{float: 'right'}}>
-            {
-              this.renderAccount()
-            }
-            <SelectLanguageBox/>
-          </div>
-          </Menu>
-        </Header>
-        {
-          this.renderRouter()
-        }
-      </div>
-      )
+              mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+              selectedKeys={[`${this.state.selectedMenuKey}`]}
+              style={{lineHeight: "64px"}}
+            >
+              {
+                this.renderMenu()
+              }
+              <div style = {{float: "right"}}>
+                {
+                  this.renderAccount()
+                }
+                <SelectLanguageBox />
+              </div>
+            </Menu>
+          </Header>
+          {
+            this.renderRouter()
+          }
+        </div>
+      );
     }
   }
 
@@ -628,14 +642,14 @@ class App extends Component {
     return (
       <Footer id="footer" style={
         {
-          borderTop: '1px solid #e8e8e8',
-          backgroundColor: 'white',
-          textAlign: 'center',
+          borderTop: "1px solid #e8e8e8",
+          backgroundColor: "white",
+          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>
+        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>
       </Footer>
-    )
+    );
   }
 
   isDoorPages() {
@@ -650,25 +664,31 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <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)}} />)}/>
-          <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/signup/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
-          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
-          <Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage account={this.state.account} type={"saml"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
-          <Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout clearAccount={() => this.setState({account: null})} {...props} />)} />
-          <Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage type={"cas"} mode={"signup"} account={this.state.account} {...props} />)}} />
-          <Route exact path="/callback" component={AuthCallback}/>
-          <Route exact path="/callback/saml" component={SamlCallback}/>
-          <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
-          <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)}/>
-          <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} {...props} />)}/>
-          <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
-                                               extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}/>} />
-        </Switch>
-      )
+        <div>
+          <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);}} />)} />
+            <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)} />
+            <Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
+            <Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
+            <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
+            <Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage account={this.state.account} type={"saml"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />} />
+            <Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout clearAccount={() => this.setState({account: null})} {...props} />)} />
+            <Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage type={"cas"} mode={"signup"} account={this.state.account} {...props} />);}} />
+            <Route exact path="/callback" component={AuthCallback} />
+            <Route exact path="/callback/saml" component={SamlCallback} />
+            <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)} />
+            <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)} />
+            <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} {...props} />)} />
+            <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage account={this.state.account} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} {...props} />)} />
+            <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
+              extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
+          </Switch>
+          {
+            this.renderFooter()
+          }
+        </div>
+      );
     }
 
     return (
@@ -698,7 +718,7 @@ class App extends Component {
             this.renderPage()
           }
         </React.Fragment>
-      )
+      );
     }
 
     const organization = this.state.account.organization;
@@ -712,7 +732,7 @@ class App extends Component {
           this.renderPage()
         }
       </React.Fragment>
-    )
+    );
   }
 }
 

web/src/App.test.js

@@ -12,12 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import {render} from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
+// eslint-disable-next-line no-undef
+test("renders learn react link", () => {
+  const {getByText} = render(<App />);
   const linkElement = getByText(/learn react/i);
+  // eslint-disable-next-line no-undef
   expect(linkElement).toBeInTheDocument();
 });

web/src/ApplicationEditPage.js

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from 'antd';
-import {LinkOutlined, UploadOutlined} from "@ant-design/icons";
+import {Button, Card, Col, Input, Popover, Row, Select, Switch, Upload} from "antd";
+import {CopyOutlined, LinkOutlined, UploadOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as CertBackend from "./backend/CertBackend";
 import * as Setting from "./Setting";
@@ -28,14 +28,15 @@ import UrlTable from "./UrlTable";
 import ProviderTable from "./ProviderTable";
 import SignupTable from "./SignupTable";
 import PromptPage from "./auth/PromptPage";
+import copy from "copy-to-clipboard";
 
-import {Controlled as CodeMirror} from 'react-codemirror2';
+import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
-require('codemirror/theme/material-darker.css');
+require("codemirror/theme/material-darker.css");
 require("codemirror/mode/htmlmixed/htmlmixed");
+require("codemirror/mode/xml/xml");
 
-const { Option } = Select;
-const { TextArea } = Input;
+const {Option} = Select;
 
 class ApplicationEditPage extends React.Component {
   constructor(props) {
@@ -105,7 +106,7 @@ class ApplicationEditPage extends React.Component {
       .then((res) => {
         this.setState({
           samlMetadata: res,
-        })
+        });
       });
   }
 
@@ -143,7 +144,7 @@ class ApplicationEditPage extends React.Component {
         }
       }).finally(() => {
         this.setState({uploading: false});
-    })
+      });
   }
 
   renderApplication() {
@@ -152,262 +153,272 @@ class ApplicationEditPage extends React.Component {
         <div>
           {this.state.mode === "add" ? i18next.t("application:New Application") : i18next.t("application:Edit Application")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteApplication()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteApplication()}>{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}>
+      } 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:Name"), i18next.t("general:Name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.name} disabled={this.state.application.name === "app-built-in"} onChange={e => {
-              this.updateApplicationField('name', e.target.value);
+              this.updateApplicationField("name", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.displayName} onChange={e => {
-              this.updateApplicationField('displayName', e.target.value);
+              this.updateApplicationField("displayName", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Logo"), i18next.t("general:Logo - Tooltip"))} :
           </Col>
-          <Col span={22} style={(Setting.isMobile()) ? {maxWidth:'100%'} :{}}>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 1}>
+          <Col span={22} style={(Setting.isMobile()) ? {maxWidth: "100%"} :{}}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
               </Col>
               <Col span={23} >
-                <Input prefix={<LinkOutlined/>} value={this.state.application.logo} onChange={e => {
-                  this.updateApplicationField('logo', e.target.value);
+                <Input prefix={<LinkOutlined />} value={this.state.application.logo} onChange={e => {
+                  this.updateApplicationField("logo", e.target.value);
                 }} />
               </Col>
             </Row>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 1}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {i18next.t("general:Preview")}:
               </Col>
               <Col span={23} >
                 <a target="_blank" rel="noreferrer" href={this.state.application.logo}>
-                  <img src={this.state.application.logo} alt={this.state.application.logo} height={90} style={{marginBottom: '20px'}}/>
+                  <img src={this.state.application.logo} alt={this.state.application.logo} height={90} style={{marginBottom: "20px"}} />
                 </a>
               </Col>
             </Row>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Home"), i18next.t("general:Home - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.application.homepageUrl} onChange={e => {
-              this.updateApplicationField('homepageUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.application.homepageUrl} onChange={e => {
+              this.updateApplicationField("homepageUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Description"), i18next.t("general:Description - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.description} onChange={e => {
-              this.updateApplicationField('description', e.target.value);
+              this.updateApplicationField("description", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <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.application.organization} onChange={(value => {this.updateApplicationField('organization', value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.application.organization} onChange={(value => {this.updateApplicationField("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}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.clientId} onChange={e => {
-              this.updateApplicationField('clientId', e.target.value);
+              this.updateApplicationField("clientId", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.clientSecret} onChange={e => {
-              this.updateApplicationField('clientSecret', e.target.value);
+              this.updateApplicationField("clientSecret", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Cert"), i18next.t("general:Cert - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.application.cert} onChange={(value => {this.updateApplicationField('cert', value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.application.cert} onChange={(value => {this.updateApplicationField("cert", value);})}>
               {
                 this.state.certs.map((cert, index) => <Option key={index} value={cert.name}>{cert.name}</Option>)
               }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:Redirect URLs"), i18next.t("application:Redirect URLs - Tooltip"))} :
           </Col>
           <Col span={22} >
             <UrlTable
               title={i18next.t("application:Redirect URLs")}
               table={this.state.application.redirectUris}
-              onUpdateTable={(value) => { this.updateApplicationField('redirectUris', value)}}
+              onUpdateTable={(value) => {this.updateApplicationField("redirectUris", value);}}
             />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:Token format"), i18next.t("application:Token format - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.application.tokenFormat} onChange={(value => {this.updateApplicationField('tokenFormat', value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.application.tokenFormat} onChange={(value => {this.updateApplicationField("tokenFormat", value);})}>
               {
-                ['JWT', 'JWT-Empty']
+                ["JWT", "JWT-Empty"]
                   .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}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:Token expire"), i18next.t("application:Token expire - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input style={{width: "150px"}} value={this.state.application.expireInHours} suffix="Hours" onChange={e => {
-              this.updateApplicationField('expireInHours', e.target.value);
+              this.updateApplicationField("expireInHours", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:Refresh token expire"), i18next.t("application:Refresh token expire - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input style={{width: "150px"}} value={this.state.application.refreshExpireInHours} suffix="Hours" onChange={e => {
-              this.updateApplicationField('refreshExpireInHours', e.target.value);
+              this.updateApplicationField("refreshExpireInHours", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("application:Password ON"), i18next.t("application:Password ON - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.application.enablePassword} onChange={checked => {
-              this.updateApplicationField('enablePassword', checked);
+              this.updateApplicationField("enablePassword", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("application:Enable signup"), i18next.t("application:Enable signup - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.application.enableSignUp} onChange={checked => {
-              this.updateApplicationField('enableSignUp', checked);
+              this.updateApplicationField("enableSignUp", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("application:Signin session"), i18next.t("application:Enable signin session - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.application.enableSigninSession} onChange={checked => {
-              this.updateApplicationField('enableSigninSession', checked);
+              this.updateApplicationField("enableSigninSession", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("application:Enable code signin"), i18next.t("application:Enable code signin - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.application.enableCodeSignin} onChange={checked => {
-              this.updateApplicationField('enableCodeSignin', checked);
+              this.updateApplicationField("enableCodeSignin", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable WebAuthn signin"), i18next.t("application:Enable WebAuthn signin - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enableWebAuthn} onChange={checked => {
+              this.updateApplicationField("enableWebAuthn", checked);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Signup URL"), i18next.t("general:Signup URL - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.application.signupUrl} onChange={e => {
-              this.updateApplicationField('signupUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.application.signupUrl} onChange={e => {
+              this.updateApplicationField("signupUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Signin URL"), i18next.t("general:Signin URL - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.application.signinUrl} onChange={e => {
-              this.updateApplicationField('signinUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.application.signinUrl} onChange={e => {
+              this.updateApplicationField("signinUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Forget URL"), i18next.t("general:Forget URL - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.application.forgetUrl} onChange={e => {
-              this.updateApplicationField('forgetUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.application.forgetUrl} onChange={e => {
+              this.updateApplicationField("forgetUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Affiliation URL"), i18next.t("general:Affiliation URL - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.application.affiliationUrl} onChange={e => {
-              this.updateApplicationField('affiliationUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.application.affiliationUrl} onChange={e => {
+              this.updateApplicationField("affiliationUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Terms of Use"), i18next.t("provider:Terms of Use - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.application.termsOfUse} style={{marginBottom: "10px"}} onChange={e => {
               this.updateApplicationField("termsOfUse", e.target.value);
-            }}/>
+            }} />
             <Upload maxCount={1} accept=".html" showUploadList={false}
-                    beforeUpload={file => {return false}} onChange={info => {this.handleUpload(info)}}>
-              <Button icon={<UploadOutlined />} loading={this.state.uploading}>Click to Upload</Button>
+              beforeUpload={file => {return false;}} onChange={info => {this.handleUpload(info);}}>
+              <Button icon={<UploadOutlined />} loading={this.state.uploading}>{i18next.t("general:Click to Upload")}</Button>
             </Upload>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Signup HTML"), i18next.t("provider:Signup HTML - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -415,7 +426,7 @@ class ApplicationEditPage extends React.Component {
               <div style={{width: "900px", height: "300px"}} >
                 <CodeMirror
                   value={this.state.application.signupHtml}
-                  options={{mode: 'htmlmixed', theme: "material-darker"}}
+                  options={{mode: "htmlmixed", theme: "material-darker"}}
                   onBeforeChange={(editor, data, value) => {
                     this.updateApplicationField("signupHtml", value);
                   }}
@@ -423,13 +434,13 @@ class ApplicationEditPage extends React.Component {
               </div>
             } title={i18next.t("provider:Signup HTML - Edit")} trigger="click">
               <Input value={this.state.application.signupHtml} style={{marginBottom: "10px"}} onChange={e => {
-                this.updateApplicationField("signupHtml", e.target.value)
-              }}/>
+                this.updateApplicationField("signupHtml", e.target.value);
+              }} />
             </Popover>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Signin HTML"), i18next.t("provider:Signin HTML - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -437,7 +448,7 @@ class ApplicationEditPage extends React.Component {
               <div style={{width: "900px", height: "300px"}} >
                 <CodeMirror
                   value={this.state.application.signinHtml}
-                  options={{mode: 'htmlmixed', theme: "material-darker"}}
+                  options={{mode: "htmlmixed", theme: "material-darker"}}
                   onBeforeChange={(editor, data, value) => {
                     this.updateApplicationField("signinHtml", value);
                   }}
@@ -445,44 +456,66 @@ class ApplicationEditPage extends React.Component {
               </div>
             } title={i18next.t("provider:Signin HTML - Edit")} trigger="click">
               <Input value={this.state.application.signinHtml} style={{marginBottom: "10px"}} onChange={e => {
-                this.updateApplicationField("signinHtml", e.target.value)
-              }}/>
+                this.updateApplicationField("signinHtml", e.target.value);
+              }} />
             </Popover>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:Grant types"), i18next.t("application:Grant types - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: '100%'}}
-                    value={this.state.application.grantTypes}
-                    onChange={(value => {
-                      this.updateApplicationField('grantTypes', value);
-                    })} >
-                      {
-                        [
-                          {id: "authorization_code", name: "Authorization Code"},
-                          {id: "password", name: "Password"},
-                          {id: "client_credentials", name: "Client Credentials"},
-                          {id: "token", name: "Token"},
-                          {id: "id_token", name: "ID Token"},
-                          {id: "refresh_token", name: "Refresh Token"},
-                        ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
-                      }
+            <Select virtual={false} mode="tags" style={{width: "100%"}}
+              value={this.state.application.grantTypes}
+              onChange={(value => {
+                this.updateApplicationField("grantTypes", value);
+              })} >
+              {
+                [
+                  {id: "authorization_code", name: "Authorization Code"},
+                  {id: "password", name: "Password"},
+                  {id: "client_credentials", name: "Client Credentials"},
+                  {id: "token", name: "Token"},
+                  {id: "id_token", name: "ID Token"},
+                  {id: "refresh_token", name: "Refresh Token"},
+                ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
+              }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable SAML compress"), i18next.t("application:Enable SAML compress - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enableSamlCompress} onChange={checked => {
+              this.updateApplicationField("enableSamlCompress", checked);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("application:SAML metadata"), i18next.t("application:SAML metadata - Tooltip"))} :
           </Col>
           <Col span={22}>
-            <TextArea rows={8} value={this.state.samlMetadata} />
+            <CodeMirror
+              value={this.state.samlMetadata}
+              options={{mode: "xml", theme: "default"}}
+              onBeforeChange={(editor, data, value) => {}}
+            />
+            <br />
+            <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
+              copy(`${window.location.origin}/api/saml/metadata?application=admin/${encodeURIComponent(this.state.applicationName)}`);
+              Setting.showMessage("success", i18next.t("application:SAML metadata URL copied to clipboard successfully"));
+            }}
+            >
+              {i18next.t("application:Copy SAML metadata URL")}
+            </Button>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Providers"), i18next.t("general:Providers - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -491,62 +524,66 @@ class ApplicationEditPage extends React.Component {
               table={this.state.application.providers}
               providers={this.state.providers}
               application={this.state.application}
-              onUpdateTable={(value) => { this.updateApplicationField('providers', value)}}
+              onUpdateTable={(value) => {this.updateApplicationField("providers", value);}}
             />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
           </Col>
           {
-            this.renderPreview()
+            this.renderSignupSigninPreview()
           }
         </Row>
         {
           !this.state.application.enableSignUp ? null : (
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                 {Setting.getLabel(i18next.t("application:Signup items"), i18next.t("application:Signup items - Tooltip"))} :
               </Col>
               <Col span={22} >
                 <SignupTable
                   title={i18next.t("application:Signup items")}
                   table={this.state.application.signupItems}
-                  onUpdateTable={(value) => { this.updateApplicationField('signupItems', value)}}
+                  onUpdateTable={(value) => {this.updateApplicationField("signupItems", value);}}
                 />
               </Col>
             </Row>
           )
         }
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
           </Col>
           {
-            this.renderPreview2()
+            this.renderPromptPreview()
           }
         </Row>
       </Card>
-    )
+    );
   }
 
-  renderPreview() {
+  renderSignupSigninPreview() {
     let signUpUrl = `/signup/${this.state.application.name}`;
     let signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
+    let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     if (!this.state.application.enablePassword) {
       signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
     }
-    if (!Setting.isMobile()) {
+
     return (
       <React.Fragment>
-        <Col span={11} style={{display:"flex", flexDirection: "column"}}>
-          <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={signUpUrl}>
-            <Button type="primary">{i18next.t("application:Test signup page..")}</Button>
-          </a>
-          <br/>
-          <br/>
-          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems:"center", overflow:"auto", flexDirection:"column", flex: "auto"}}>
+        <Col span={11}>
+          <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
+            copy(`${window.location.origin}${signUpUrl}`);
+            Setting.showMessage("success", i18next.t("application:Signup page URL copied to clipboard successfully, please paste it into the incognito window or another browser"));
+          }}
+          >
+            {i18next.t("application:Copy signup page URL")}
+          </Button>
+          <br />
+          <div style={{position: "relative", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems:"center", overflow:"auto", flexDirection:"column", flex: "auto"}}>
             {
               this.state.application.enablePassword ? (
                 <SignupPage application={this.state.application} />
@@ -554,65 +591,46 @@ class ApplicationEditPage extends React.Component {
                 <LoginPage type={"login"} mode={"signup"} application={this.state.application} />
               )
             }
+            <div style={maskStyle}></div>
           </div>
         </Col>
-        <Col span={11} style={{display:"flex", flexDirection: "column"}}>
-          <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={signInUrl}>
-            <Button type="primary">{i18next.t("application:Test signin page..")}</Button>
-          </a>
-          <br/>
-          <br/>
-          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems:"center", overflow:"auto", flexDirection:"column", flex: "auto"}}>
+        <Col span={11}>
+          <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
+            copy(`${window.location.origin}${signInUrl}`);
+            Setting.showMessage("success", i18next.t("application:Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser"));
+          }}
+          >
+            {i18next.t("application:Copy signin page URL")}
+          </Button>
+          <br />
+          <div style={{position: "relative", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems:"center", overflow:"auto", flexDirection:"column", flex: "auto"}}>
             <LoginPage type={"login"} mode={"signin"} application={this.state.application} />
+            <div style={maskStyle}></div>
           </div>
         </Col>
       </React.Fragment>
-    )
-  } else{
-    return(
-      <React.Fragment>
-        <Col span={24} style={{display:"flex", flexDirection: "column"}}>
-          <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={signUpUrl}>
-            <Button type="primary">{i18next.t("application:Test signup page..")}</Button>
-          </a>
-          <div style={{marginBottom:"10px", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems: "center", overflow: "auto", flexDirection: "column", flex: "auto"}}>
-            {
-              this.state.application.enablePassword ? (
-                <SignupPage application={this.state.application} />
-              ) : (
-                <LoginPage type={"login"} mode={"signup"} application={this.state.application} />
-              )
-            }
-          </div>
-          <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={signInUrl}>
-            <Button type="primary">{i18next.t("application:Test signin page..")}</Button>
-          </a>
-          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", alignItems: "center", overflow: "auto", flexDirection: "column", flex: "auto"}}>
-            <LoginPage type={"login"} mode={"signin"} application={this.state.application} />
-          </div>
-        </Col>
-      </React.Fragment>
-    )
+    );
   }
-}
 
-  renderPreview2() {
+  renderPromptPreview() {
     let promptUrl = `/prompt/${this.state.application.name}`;
-
+    let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     return (
-      <React.Fragment>
-        <Col span={(Setting.isMobile()) ? 24 : 11} style={{display:"flex", flexDirection: "column", flex: "auto"}} >
-          <a style={{marginBottom: "10px"}} target="_blank" rel="noreferrer" href={promptUrl}>
-            <Button type="primary">{i18next.t("application:Test prompt page..")}</Button>
-          </a>
-          <br style={(Setting.isMobile()) ? {display: "none"} : {}} />
-          <br style={(Setting.isMobile()) ? {display: "none"} : {}} />
-          <div style={{width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", flexDirection: "column", flex: "auto"}}>
-            <PromptPage application={this.state.application} account={this.props.account} />
-          </div>
-        </Col>
-      </React.Fragment>
-    )
+      <Col span={11}>
+        <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
+          copy(`${window.location.origin}${promptUrl}`);
+          Setting.showMessage("success", i18next.t("application:Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser"));
+        }}
+        >
+          {i18next.t("application:Copy prompt page URL")}
+        </Button>
+        <br />
+        <div style={{position: "relative", width: "90%", border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", flexDirection: "column", flex: "auto"}}>
+          <PromptPage application={this.state.application} account={this.props.account} />
+          <div style={maskStyle}></div>
+        </div>
+      </Col>
+    );
   }
 
   submitApplicationEdit(willExist) {
@@ -620,19 +638,19 @@ class ApplicationEditPage extends React.Component {
     ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
       .then((res) => {
         if (res.msg === "") {
-          Setting.showMessage("success", `Successfully saved`);
+          Setting.showMessage("success", "Successfully saved");
           this.setState({
             applicationName: this.state.application.name,
           });
 
           if (willExist) {
-            this.props.history.push(`/applications`);
+            this.props.history.push("/applications");
           } else {
             this.props.history.push(`/applications/${this.state.application.name}`);
           }
         } else {
           Setting.showMessage("error", res.msg);
-          this.updateApplicationField('name', this.state.applicationName);
+          this.updateApplicationField("name", this.state.applicationName);
         }
       })
       .catch(error => {
@@ -643,7 +661,7 @@ class ApplicationEditPage extends React.Component {
   deleteApplication() {
     ApplicationBackend.deleteApplication(this.state.application)
       .then(() => {
-        this.props.history.push(`/applications`);
+        this.props.history.push("/applications");
       })
       .catch(error => {
         Setting.showMessage("error", `Application failed to delete: ${error}`);
@@ -653,15 +671,15 @@ class ApplicationEditPage extends React.Component {
   render() {
     return (
       <div>
-      {
-        this.state.application !== null ? this.renderApplication() : null
-      }
-      <div style={{marginTop: '20px', marginLeft: '40px'}}>
-        <Button size="large" onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
-        <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-        {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteApplication()}>{i18next.t("general:Cancel")}</Button> : null}
+        {
+          this.state.application !== null ? this.renderApplication() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteApplication()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
       </div>
-    </div>
     );
   }
 }

web/src/ApplicationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd';
+import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from "antd";
 import {EditOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -23,7 +23,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
 class ApplicationListPage extends BaseListPage {
-
   newApplication() {
     const randomName = Setting.getRandomName();
     return {
@@ -36,7 +35,10 @@ class ApplicationListPage extends BaseListPage {
       enableSignUp: true,
       enableSigninSession: false,
       enableCodeSignin: false,
-      providers: [],
+      enableSamlCompress: false,
+      providers: [
+        {name: "provider_captcha_default", canSignUp: false, canSignIn: false, canUnlink: false, prompted: false, alertType: "None"},
+      ],
       signupItems: [
         {name: "ID", visible: false, required: true, rule: "Random"},
         {name: "Username", visible: true, required: true, rule: "None"},
@@ -51,15 +53,15 @@ class ApplicationListPage extends BaseListPage {
       redirectUris: ["http://localhost:9000/callback"],
       tokenFormat: "JWT",
       expireInHours: 24 * 7,
-    }
+    };
   }
 
   addApplication() {
     const newApplication = this.newApplication();
     ApplicationBackend.addApplication(newApplication)
       .then((res) => {
-          this.props.history.push({pathname: `/applications/${newApplication.name}`, mode: "add"});
-        }
+        this.props.history.push({pathname: `/applications/${newApplication.name}`, mode: "add"});
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Application failed to add: ${error}`);
@@ -69,12 +71,12 @@ class ApplicationListPage extends BaseListPage {
   deleteApplication(i) {
     ApplicationBackend.deleteApplication(this.state.data[i])
       .then((res) => {
-          Setting.showMessage("success", `Application deleted successfully`);
-          this.setState({
-            data: Setting.deleteRow(this.state.data, i),
-            pagination: {total: this.state.pagination.total - 1},
-          });
-        }
+        Setting.showMessage("success", "Application deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Application failed to delete: ${error}`);
@@ -85,25 +87,25 @@ class ApplicationListPage extends BaseListPage {
     const columns = [
       {
         title: i18next.t("general:Name"),
-        dataIndex: 'name',
-        key: 'name',
-        width: '150px',
-        fixed: 'left',
+        dataIndex: "name",
+        key: "name",
+        width: "150px",
+        fixed: "left",
         sorter: true,
-        ...this.getColumnSearchProps('name'),
+        ...this.getColumnSearchProps("name"),
         render: (text, record, index) => {
           return (
             <Link to={`/applications/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Created time"),
-        dataIndex: 'createdTime',
-        key: 'createdTime',
-        width: '160px',
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "160px",
         sorter: true,
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -111,45 +113,45 @@ class ApplicationListPage extends BaseListPage {
       },
       {
         title: i18next.t("general:Display name"),
-        dataIndex: 'displayName',
-        key: 'displayName',
+        dataIndex: "displayName",
+        key: "displayName",
         // width: '100px',
         sorter: true,
-        ...this.getColumnSearchProps('displayName'),
+        ...this.getColumnSearchProps("displayName"),
       },
       {
-        title: 'Logo',
-        dataIndex: 'logo',
-        key: 'logo',
-        width: '200px',
+        title: "Logo",
+        dataIndex: "logo",
+        key: "logo",
+        width: "200px",
         render: (text, record, index) => {
           return (
             <a target="_blank" rel="noreferrer" href={text}>
               <img src={text} alt={text} width={150} />
             </a>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Organization"),
-        dataIndex: 'organization',
-        key: 'organization',
-        width: '150px',
+        dataIndex: "organization",
+        key: "organization",
+        width: "150px",
         sorter: true,
-        ...this.getColumnSearchProps('organization'),
+        ...this.getColumnSearchProps("organization"),
         render: (text, record, index) => {
           return (
             <Link to={`/organizations/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Providers"),
-        dataIndex: 'providers',
-        key: 'providers',
-        ...this.getColumnSearchProps('providers'),
+        dataIndex: "providers",
+        key: "providers",
+        ...this.getColumnSearchProps("providers"),
         // width: '600px',
         render: (text, record, index) => {
           const providers = text;
@@ -177,11 +179,11 @@ class ApplicationListPage extends BaseListPage {
                         </Link>
                       </div>
                     </List.Item>
-                  )
+                  );
                 }}
               />
-            )
-          }
+            );
+          };
 
           return (
             <div>
@@ -198,28 +200,28 @@ class ApplicationListPage extends BaseListPage {
                 </Col>
               </Row>
             </div>
-          )
+          );
         },
       },
       {
         title: i18next.t("general:Action"),
-        dataIndex: '',
-        key: 'op',
-        width: '170px',
+        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(`/applications/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/applications/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete application: ${record.name} ?`}
                 onConfirm={() => this.deleteApplication(index)}
                 disabled={record.name === "app-built-in"}
               >
-                <Button style={{marginBottom: '10px'}} disabled={record.name === "app-built-in"} type="danger">{i18next.t("general:Delete")}</Button>
+                <Button style={{marginBottom: "10px"}} disabled={record.name === "app-built-in"} type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
@@ -233,15 +235,15 @@ class ApplicationListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={paginationProps}
-               title={() => (
-                 <div>
-                  {i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp;
-                  <Button type="primary" size="small" onClick={this.addApplication.bind(this)}>{i18next.t("general:Add")}</Button>
-                 </div>
-               )}
-               loading={this.state.loading}
-               onChange={this.handleTableChange}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addApplication.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
         />
       </div>
     );
@@ -250,7 +252,7 @@ class ApplicationListPage extends BaseListPage {
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
     let sortField = params.sortField, sortOrder = params.sortOrder;
-    this.setState({ loading: true });
+    this.setState({loading: true});
     ApplicationBackend.getApplications("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {

web/src/BaseListPage.js

@@ -18,121 +18,122 @@ import {SearchOutlined} from "@ant-design/icons";
 import Highlighter from "react-highlight-words";
 
 class BaseListPage extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			classes: props,
-			data: [],
-			pagination: {
-				current: 1,
-				pageSize: 10,
-			},
-			loading: false,
-			searchText: '',
-			searchedColumn: '',
-		};
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      data: [],
+      pagination: {
+        current: 1,
+        pageSize: 10,
+      },
+      loading: false,
+      searchText: "",
+      searchedColumn: "",
+      isAuthorized: true,
+    };
+  }
 
-	UNSAFE_componentWillMount() {
-		const { pagination } = this.state;
-		this.fetch({ pagination });
-	}
+  UNSAFE_componentWillMount() {
+    const {pagination} = this.state;
+    this.fetch({pagination});
+  }
 
-	getColumnSearchProps = dataIndex => ({
-		filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
-			<div style={{ padding: 8 }}>
-				<Input
-					ref={node => {
-						this.searchInput = node;
-					}}
-					placeholder={`Search ${dataIndex}`}
-					value={selectedKeys[0]}
-					onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-					onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-					style={{ marginBottom: 8, display: 'block' }}
-				/>
-				<Space>
-					<Button
-						type="primary"
-						onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-						icon={<SearchOutlined />}
-						size="small"
-						style={{ width: 90 }}
-					>
-						Search
-					</Button>
-					<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
-						Reset
-					</Button>
-					<Button
-						type="link"
-						size="small"
-						onClick={() => {
-							confirm({ closeDropdown: false });
-							this.setState({
-								searchText: selectedKeys[0],
-								searchedColumn: dataIndex,
-							});
-						}}
-					>
-						Filter
-					</Button>
-				</Space>
-			</div>
-		),
-		filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
-		onFilter: (value, record) =>
-			record[dataIndex]
-				? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
-				: '',
-		onFilterDropdownVisibleChange: visible => {
-			if (visible) {
-				setTimeout(() => this.searchInput.select(), 100);
-			}
-		},
-		render: text =>
-			this.state.searchedColumn === dataIndex ? (
-				<Highlighter
-					highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
-					searchWords={[this.state.searchText]}
-					autoEscape
-					textToHighlight={text ? text.toString() : ''}
-				/>
-			) : (
-				text
-			),
-	});
+    getColumnSearchProps = dataIndex => ({
+      filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+        <div style={{padding: 8}}>
+          <Input
+            ref={node => {
+              this.searchInput = node;
+            }}
+            placeholder={`Search ${dataIndex}`}
+            value={selectedKeys[0]}
+            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+            onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+            style={{marginBottom: 8, display: "block"}}
+          />
+          <Space>
+            <Button
+              type="primary"
+              onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
+              icon={<SearchOutlined />}
+              size="small"
+              style={{width: 90}}
+            >
+                        Search
+            </Button>
+            <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{width: 90}}>
+                        Reset
+            </Button>
+            <Button
+              type="link"
+              size="small"
+              onClick={() => {
+                confirm({closeDropdown: false});
+                this.setState({
+                  searchText: selectedKeys[0],
+                  searchedColumn: dataIndex,
+                });
+              }}
+            >
+                        Filter
+            </Button>
+          </Space>
+        </div>
+      ),
+      filterIcon: filtered => <SearchOutlined style={{color: filtered ? "#1890ff" : undefined}} />,
+      onFilter: (value, record) =>
+        record[dataIndex]
+          ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
+          : "",
+      onFilterDropdownVisibleChange: visible => {
+        if (visible) {
+          setTimeout(() => this.searchInput.select(), 100);
+        }
+      },
+      render: text =>
+        this.state.searchedColumn === dataIndex ? (
+          <Highlighter
+            highlightStyle={{backgroundColor: "#ffc069", padding: 0}}
+            searchWords={[this.state.searchText]}
+            autoEscape
+            textToHighlight={text ? text.toString() : ""}
+          />
+        ) : (
+          text
+        ),
+    });
 
-	handleSearch = (selectedKeys, confirm, dataIndex) => {
-		this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination});
-	};
+    handleSearch = (selectedKeys, confirm, dataIndex) => {
+      this.fetch({searchText: selectedKeys[0], searchedColumn: dataIndex, pagination: this.state.pagination});
+    };
 
-	handleReset = clearFilters => {
-		clearFilters();
-		const { pagination } = this.state;
-		this.fetch({ pagination });
-	};
+    handleReset = clearFilters => {
+      clearFilters();
+      const {pagination} = this.state;
+      this.fetch({pagination});
+    };
 
-	handleTableChange = (pagination, filters, sorter) => {
-		this.fetch({
-			sortField: sorter.field,
-			sortOrder: sorter.order,
-			pagination,
-			...filters,
-			searchText: this.state.searchText,
-			searchedColumn: this.state.searchedColumn,
-		});
-	};
+    handleTableChange = (pagination, filters, sorter) => {
+      this.fetch({
+        sortField: sorter.field,
+        sortOrder: sorter.order,
+        pagination,
+        ...filters,
+        searchText: this.state.searchText,
+        searchedColumn: this.state.searchedColumn,
+      });
+    };
 
-	render() {
-		return (
-			<div>
-				{
-					this.renderTable(this.state.data)
-				}
-			</div>
-		);
-	}
+    render() {
+      return (
+        <div>
+          {
+            this.renderTable(this.state.data)
+          }
+        </div>
+      );
+    }
 }
 
-export default BaseListPage;
+export default BaseListPage;

web/src/CertEditPage.js

@@ -13,15 +13,15 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, InputNumber, Row, Select} from 'antd';
+import {Button, Card, Col, Input, InputNumber, Row, Select} from "antd";
 import * as CertBackend from "./backend/CertBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import copy from "copy-to-clipboard";
 import FileSaver from "file-saver";
 
-const { Option } = Select;
-const { TextArea } = Input;
+const {Option} = Select;
+const {TextArea} = Input;
 
 class CertEditPage extends React.Component {
   constructor(props) {
@@ -70,127 +70,127 @@ class CertEditPage extends React.Component {
         <div>
           {this.state.mode === "add" ? i18next.t("cert:New Cert") : i18next.t("cert:Edit Cert")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitCertEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteCert()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteCert()}>{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}>
+      } 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:Name"), i18next.t("general:Name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.cert.name} onChange={e => {
-              this.updateCertField('name', e.target.value);
+              this.updateCertField("name", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.cert.displayName} onChange={e => {
-              this.updateCertField('displayName', e.target.value);
+              this.updateCertField("displayName", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Scope"), i18next.t("cert:Scope - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.cert.scope} onChange={(value => {
-              this.updateCertField('scope', value);
+            <Select virtual={false} style={{width: "100%"}} value={this.state.cert.scope} onChange={(value => {
+              this.updateCertField("scope", value);
             })}>
               {
                 [
-                  {id: 'JWT', name: 'JWT'},
+                  {id: "JWT", name: "JWT"},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
               }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Type"), i18next.t("cert:Type - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.cert.type} onChange={(value => {
-              this.updateCertField('type', value);
+            <Select virtual={false} style={{width: "100%"}} value={this.state.cert.type} onChange={(value => {
+              this.updateCertField("type", value);
             })}>
               {
                 [
-                  {id: 'x509', name: 'x509'},
+                  {id: "x509", name: "x509"},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
               }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Crypto algorithm"), i18next.t("cert:Crypto algorithm - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.cert.cryptoAlgorithm} onChange={(value => {
-              this.updateCertField('cryptoAlgorithm', value);
+            <Select virtual={false} style={{width: "100%"}} value={this.state.cert.cryptoAlgorithm} onChange={(value => {
+              this.updateCertField("cryptoAlgorithm", value);
             })}>
               {
                 [
-                  {id: 'RS256', name: 'RS256'},
+                  {id: "RS256", name: "RS256"},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
               }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Bit size"), i18next.t("cert:Bit size - Tooltip"))} :
           </Col>
           <Col span={22} >
             <InputNumber value={this.state.cert.bitSize} onChange={value => {
-              this.updateCertField('bitSize', value);
+              this.updateCertField("bitSize", value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Expire in years"), i18next.t("cert:Expire in years - Tooltip"))} :
           </Col>
           <Col span={22} >
             <InputNumber value={this.state.cert.expireInYears} onChange={value => {
-              this.updateCertField('expireInYears', value);
+              this.updateCertField("expireInYears", value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("cert:Public key"), i18next.t("cert:Public key - Tooltip"))} :
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("cert:Certificate"), i18next.t("cert:Certificate - Tooltip"))} :
           </Col>
           <Col span={9} >
-            <Button style={{marginRight: '10px', marginBottom: '10px'}} onClick={() => {
-              copy(this.state.cert.publicKey);
-              Setting.showMessage("success", i18next.t("cert:Public key copied to clipboard successfully"));
+            <Button style={{marginRight: "10px", marginBottom: "10px"}} onClick={() => {
+              copy(this.state.cert.certificate);
+              Setting.showMessage("success", i18next.t("cert:Certificate copied to clipboard successfully"));
             }}
             >
-              {i18next.t("cert:Copy public key")}
+              {i18next.t("cert:Copy certificate")}
             </Button>
             <Button type="primary" onClick={() => {
-              const blob = new Blob([this.state.cert.publicKey], {type: "text/plain;charset=utf-8"});
+              const blob = new Blob([this.state.cert.certificate], {type: "text/plain;charset=utf-8"});
               FileSaver.saveAs(blob, "token_jwt_key.pem");
             }}
             >
-              {i18next.t("cert:Download public key")}
+              {i18next.t("cert:Download certificate")}
             </Button>
-            <TextArea autoSize={{minRows: 30, maxRows: 30}} value={this.state.cert.publicKey} onChange={e => {
-              this.updateCertField('publicKey', e.target.value);
+            <TextArea autoSize={{minRows: 30, maxRows: 30}} value={this.state.cert.certificate} onChange={e => {
+              this.updateCertField("certificate", e.target.value);
             }} />
           </Col>
           <Col span={1} />
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("cert:Private key"), i18next.t("cert:Private key - Tooltip"))} :
           </Col>
           <Col span={9} >
-            <Button style={{marginRight: '10px', marginBottom: '10px'}} onClick={() => {
+            <Button style={{marginRight: "10px", marginBottom: "10px"}} onClick={() => {
               copy(this.state.cert.privateKey);
               Setting.showMessage("success", i18next.t("cert:Private key copied to clipboard successfully"));
             }}
@@ -205,12 +205,12 @@ class CertEditPage extends React.Component {
               {i18next.t("cert:Download private key")}
             </Button>
             <TextArea autoSize={{minRows: 30, maxRows: 30}} value={this.state.cert.privateKey} onChange={e => {
-              this.updateCertField('privateKey', e.target.value);
+              this.updateCertField("privateKey", e.target.value);
             }} />
           </Col>
         </Row>
       </Card>
-    )
+    );
   }
 
   submitCertEdit(willExist) {
@@ -218,19 +218,19 @@ class CertEditPage extends React.Component {
     CertBackend.updateCert(this.state.cert.owner, this.state.certName, cert)
       .then((res) => {
         if (res.msg === "") {
-          Setting.showMessage("success", `Successfully saved`);
+          Setting.showMessage("success", "Successfully saved");
           this.setState({
             certName: this.state.cert.name,
           });
 
           if (willExist) {
-            this.props.history.push(`/certs`);
+            this.props.history.push("/certs");
           } else {
             this.props.history.push(`/certs/${this.state.cert.name}`);
           }
         } else {
           Setting.showMessage("error", res.msg);
-          this.updateCertField('name', this.state.certName);
+          this.updateCertField("name", this.state.certName);
         }
       })
       .catch(error => {
@@ -241,7 +241,7 @@ class CertEditPage extends React.Component {
   deleteCert() {
     CertBackend.deleteCert(this.state.cert)
       .then(() => {
-        this.props.history.push(`/certs`);
+        this.props.history.push("/certs");
       })
       .catch(error => {
         Setting.showMessage("error", `Cert failed to delete: ${error}`);
@@ -254,10 +254,10 @@ class CertEditPage extends React.Component {
         {
           this.state.cert !== null ? this.renderCert() : null
         }
-        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
           <Button size="large" onClick={() => this.submitCertEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteCert()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteCert()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/CertListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Table} from 'antd';
+import {Button, Popconfirm, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as CertBackend from "./backend/CertBackend";
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
 class CertListPage extends BaseListPage {
-
   newCert() {
     const randomName = Setting.getRandomName();
     return {
@@ -35,17 +34,17 @@ class CertListPage extends BaseListPage {
       cryptoAlgorithm: "RS256",
       bitSize: 4096,
       expireInYears: 20,
-      publicKey: "",
+      certificate: "",
       privateKey: "",
-    }
+    };
   }
 
   addCert() {
     const newCert = this.newCert();
     CertBackend.addCert(newCert)
       .then((res) => {
-          this.props.history.push({pathname: `/certs/${newCert.name}`, mode: "add"});
-        }
+        this.props.history.push({pathname: `/certs/${newCert.name}`, mode: "add"});
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Cert failed to add: ${error}`);
@@ -55,12 +54,12 @@ class CertListPage extends BaseListPage {
   deleteCert(i) {
     CertBackend.deleteCert(this.state.data[i])
       .then((res) => {
-          Setting.showMessage("success", `Cert deleted successfully`);
-          this.setState({
-            data: Setting.deleteRow(this.state.data, i),
-            pagination: {total: this.state.pagination.total - 1},
-          });
-        }
+        Setting.showMessage("success", "Cert deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Cert failed to delete: ${error}`);
@@ -71,25 +70,25 @@ class CertListPage extends BaseListPage {
     const columns = [
       {
         title: i18next.t("general:Name"),
-        dataIndex: 'name',
-        key: 'name',
-        width: '120px',
-        fixed: 'left',
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
         sorter: true,
-        ...this.getColumnSearchProps('name'),
+        ...this.getColumnSearchProps("name"),
         render: (text, record, index) => {
           return (
             <Link to={`/certs/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Created time"),
-        dataIndex: 'createdTime',
-        key: 'createdTime',
-        width: '180px',
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "180px",
         sorter: true,
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -97,79 +96,79 @@ class CertListPage extends BaseListPage {
       },
       {
         title: i18next.t("general:Display name"),
-        dataIndex: 'displayName',
-        key: 'displayName',
+        dataIndex: "displayName",
+        key: "displayName",
         // width: '100px',
         sorter: true,
-        ...this.getColumnSearchProps('displayName'),
+        ...this.getColumnSearchProps("displayName"),
       },
       {
         title: i18next.t("cert:Scope"),
-        dataIndex: 'scope',
-        key: 'scope',
+        dataIndex: "scope",
+        key: "scope",
         filterMultiple: false,
         filters: [
-          {text: 'JWT', value: 'JWT'},
+          {text: "JWT", value: "JWT"},
         ],
-        width: '110px',
+        width: "110px",
         sorter: true,
       },
       {
         title: i18next.t("cert:Type"),
-        dataIndex: 'type',
-        key: 'type',
+        dataIndex: "type",
+        key: "type",
         filterMultiple: false,
         filters: [
-          {text: 'x509', value: 'x509'},
+          {text: "x509", value: "x509"},
         ],
-        width: '110px',
+        width: "110px",
         sorter: true,
       },
       {
         title: i18next.t("cert:Crypto algorithm"),
-        dataIndex: 'cryptoAlgorithm',
-        key: 'cryptoAlgorithm',
+        dataIndex: "cryptoAlgorithm",
+        key: "cryptoAlgorithm",
         filterMultiple: false,
         filters: [
-          {text: 'RS256', value: 'RS256'},
+          {text: "RS256", value: "RS256"},
         ],
-        width: '190px',
+        width: "190px",
         sorter: true,
       },
       {
         title: i18next.t("cert:Bit size"),
-        dataIndex: 'bitSize',
-        key: 'bitSize',
-        width: '130px',
+        dataIndex: "bitSize",
+        key: "bitSize",
+        width: "130px",
         sorter: true,
-        ...this.getColumnSearchProps('bitSize'),
+        ...this.getColumnSearchProps("bitSize"),
       },
       {
         title: i18next.t("cert:Expire in years"),
-        dataIndex: 'expireInYears',
-        key: 'expireInYears',
-        width: '170px',
+        dataIndex: "expireInYears",
+        key: "expireInYears",
+        width: "170px",
         sorter: true,
-        ...this.getColumnSearchProps('expireInYears'),
+        ...this.getColumnSearchProps("expireInYears"),
       },
       {
         title: i18next.t("general:Action"),
-        dataIndex: '',
-        key: 'op',
-        width: '170px',
+        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(`/certs/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/certs/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete cert: ${record.name} ?`}
                 onConfirm={() => this.deleteCert(index)}
               >
-                <Button style={{marginBottom: '10px'}} type="danger">{i18next.t("general:Delete")}</Button>
+                <Button style={{marginBottom: "10px"}} type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
@@ -183,15 +182,15 @@ class CertListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={certs} rowKey="name" size="middle" bordered pagination={paginationProps}
-               title={() => (
-                 <div>
-                   {i18next.t("general:Certs")}&nbsp;&nbsp;&nbsp;&nbsp;
-                   <Button type="primary" size="small" onClick={this.addCert.bind(this)}>{i18next.t("general:Add")}</Button>
-                 </div>
-               )}
-               loading={this.state.loading}
-               onChange={this.handleTableChange}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={certs} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Certs")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addCert.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
         />
       </div>
     );
@@ -207,7 +206,7 @@ class CertListPage extends BaseListPage {
       field = "type";
       value = params.type;
     }
-    this.setState({ loading: true });
+    this.setState({loading: true});
     CertBackend.getCerts("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {

web/src/CropperDiv.js

@@ -16,122 +16,122 @@ import React, {useState} from "react";
 import Cropper from "react-cropper";
 import "cropperjs/dist/cropper.css";
 import * as Setting from "./Setting";
-import {Button, Row, Col, Modal} from 'antd';
+import {Button, Col, Modal, Row} from "antd";
 import i18next from "i18next";
 import * as ResourceBackend from "./backend/ResourceBackend";
 
 export const CropperDiv = (props) => {
-    const [image, setImage] = useState("");
-    const [cropper, setCropper] = useState();
-    const [visible, setVisible] = React.useState(false);
-    const [confirmLoading, setConfirmLoading] = React.useState(false);
-    const {title} = props;
-    const {user} = props;
-    const {buttonText} = props;
-    let uploadButton;
+  const [image, setImage] = useState("");
+  const [cropper, setCropper] = useState();
+  const [visible, setVisible] = React.useState(false);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const {title} = props;
+  const {user} = props;
+  const {buttonText} = props;
+  let uploadButton;
 
-    const onChange = (e) => {
-        e.preventDefault();
-        let files;
-        if (e.dataTransfer) {
-            files = e.dataTransfer.files;
-        } else if (e.target) {
-            files = e.target.files;
-        }
-        const reader = new FileReader();
-        reader.onload = () => {
-            setImage(reader.result);
-        };
-        if (!(files[0] instanceof Blob)) {
-            return;
-        }
-        reader.readAsDataURL(files[0]);
+  const onChange = (e) => {
+    e.preventDefault();
+    let files;
+    if (e.dataTransfer) {
+      files = e.dataTransfer.files;
+    } else if (e.target) {
+      files = e.target.files;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      setImage(reader.result);
     };
+    if (!(files[0] instanceof Blob)) {
+      return;
+    }
+    reader.readAsDataURL(files[0]);
+  };
 
-    const uploadAvatar = () => {
-        cropper.getCroppedCanvas().toBlob(blob => {
-            if (blob === null) {
-                Setting.showMessage("error", "You must select a picture first!");
-                return false;
-            }
-            // Setting.showMessage("success", "uploading...");
-            const extension = image.substring(image.indexOf('/') + 1, image.indexOf(';base64'));
-            const fullFilePath = `avatar/${user.owner}/${user.name}.${extension}`;
-            ResourceBackend.uploadResource(user.owner, user.name, "avatar", "CropperDiv", fullFilePath, blob)
-              .then((res) => {
-                  if (res.status === "ok") {
-                      window.location.href = "/account";
-                  } else {
-                      Setting.showMessage("error", res.msg);
-                  }
-              });
-            return true;
+  const uploadAvatar = () => {
+    cropper.getCroppedCanvas().toBlob(blob => {
+      if (blob === null) {
+        Setting.showMessage("error", "You must select a picture first!");
+        return false;
+      }
+      // Setting.showMessage("success", "uploading...");
+      const extension = image.substring(image.indexOf("/") + 1, image.indexOf(";base64"));
+      const fullFilePath = `avatar/${user.owner}/${user.name}.${extension}`;
+      ResourceBackend.uploadResource(user.owner, user.name, "avatar", "CropperDiv", fullFilePath, blob)
+        .then((res) => {
+          if (res.status === "ok") {
+            window.location.href = "/account";
+          } else {
+            Setting.showMessage("error", res.msg);
+          }
         });
+      return true;
+    });
+  };
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    setConfirmLoading(true);
+    if (!uploadAvatar()) {
+      setConfirmLoading(false);
     }
+  };
 
-    const showModal = () => {
-        setVisible(true);
-    };
+  const handleCancel = () => {
+    console.log("Clicked cancel button");
+    setVisible(false);
+  };
 
-    const handleOk = () => {
-        setConfirmLoading(true);
-        if (!uploadAvatar()) {
-            setConfirmLoading(false);
+  const selectFile = () => {
+    uploadButton.click();
+  };
+
+  return (
+    <div>
+      <Button type="default" onClick={showModal}>
+        {buttonText}
+      </Button>
+      <Modal
+        maskClosable={false}
+        title={title}
+        visible={visible}
+        okText={i18next.t("user:Upload a photo")}
+        confirmLoading={confirmLoading}
+        onCancel={handleCancel}
+        width={600}
+        footer={
+          [<Button block type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
         }
-    };
-
-    const handleCancel = () => {
-        console.log('Clicked cancel button');
-        setVisible(false);
-    };
-
-    const selectFile = () => {
-        uploadButton.click();
-    }
-
-    return (
-        <div>
-            <Button type="default" onClick={showModal}>
-                {buttonText}
-            </Button>
-            <Modal
-                maskClosable={false}
-                title={title}
-                visible={visible}
-                okText={i18next.t("user:Upload a photo")}
-                confirmLoading={confirmLoading}
-                onCancel={handleCancel}
-                width={600}
-                footer={
-                    [<Button block type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
-                }
-            >
-                <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
-                    <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>
-                    </Row>
-                    <Cropper
-                      style={{height: "100%"}}
-                      initialAspectRatio={1}
-                      preview=".img-preview"
-                      src={image}
-                      viewMode={1}
-                      guides={true}
-                      minCropBoxHeight={10}
-                      minCropBoxWidth={10}
-                      background={false}
-                      responsive={true}
-                      autoCropArea={1}
-                      checkOrientation={false}
-                      onInitialized={(instance) => {
-                          setCropper(instance);
-                      }}
-                    />
-                </Col>
-            </Modal>
-        </div>
-    )
-}
+      >
+        <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
+          <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>
+          </Row>
+          <Cropper
+            style={{height: "100%"}}
+            initialAspectRatio={1}
+            preview=".img-preview"
+            src={image}
+            viewMode={1}
+            guides={true}
+            minCropBoxHeight={10}
+            minCropBoxWidth={10}
+            background={false}
+            responsive={true}
+            autoCropArea={1}
+            checkOrientation={false}
+            onInitialized={(instance) => {
+              setCropper(instance);
+            }}
+          />
+        </Col>
+      </Modal>
+    </div>
+  );
+};
 
 export default CropperDiv;

web/src/LdapEditPage.js

@@ -43,11 +43,11 @@ class LdapEditPage extends React.Component {
         if (res.status === "ok") {
           this.setState({
             ldap: res.data
-          })
+          });
         } else {
           Setting.showMessage("error", res.msg);
         }
-      })
+      });
   }
 
   getOrganizations() {
@@ -73,7 +73,7 @@ class LdapEditPage extends React.Component {
           color: "#faad14",
           marginLeft: "20px"
         }}>{i18next.t("ldap:The Auto Sync option will sync all users to specify organization")}</span>
-      )
+      );
     }
   }
 
@@ -91,12 +91,12 @@ class LdapEditPage extends React.Component {
           </Col>
           <Col span={21}>
             <Select virtual={false} style={{width: "100%"}} disabled={!Setting.isAdminUser(this.props.account)}
-                    value={this.state.ldap.owner} onChange={(value => {
-              this.updateLdapField("owner", value);
-            })}>
+              value={this.state.ldap.owner} onChange={(value => {
+                this.updateLdapField("owner", value);
+              })}>
               {
                 this.state.organizations.map((organization, index) => <Option key={index}
-                                                                              value={organization.name}>{organization.name}</Option>)
+                  value={organization.name}>{organization.name}</Option>)
               }
             </Select>
           </Col>
@@ -106,7 +106,7 @@ class LdapEditPage extends React.Component {
             {Setting.getLabel(i18next.t("ldap:ID"), i18next.t("general:ID - Tooltip"))} :
           </Col>
           <Col span={21}>
-            <Input value={this.state.ldap.id} disabled={true}/>
+            <Input value={this.state.ldap.id} disabled={true} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -116,7 +116,7 @@ class LdapEditPage extends React.Component {
           <Col span={21}>
             <Input value={this.state.ldap.serverName} onChange={e => {
               this.updateLdapField("serverName", e.target.value);
-            }}/>
+            }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -126,7 +126,7 @@ class LdapEditPage extends React.Component {
           <Col span={21}>
             <Input value={this.state.ldap.host} onChange={e => {
               this.updateLdapField("host", e.target.value);
-            }}/>
+            }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -135,9 +135,9 @@ class LdapEditPage extends React.Component {
           </Col>
           <Col span={21}>
             <InputNumber min={0} max={65535} formatter={value => value.replace(/\$\s?|(,*)/g, "")}
-                         value={this.state.ldap.port} onChange={value => {
-              this.updateLdapField("port", value);
-            }}/>
+              value={this.state.ldap.port} onChange={value => {
+                this.updateLdapField("port", value);
+              }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -147,7 +147,7 @@ class LdapEditPage extends React.Component {
           <Col span={21}>
             <Input value={this.state.ldap.baseDn} onChange={e => {
               this.updateLdapField("baseDn", e.target.value);
-            }}/>
+            }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -157,7 +157,7 @@ class LdapEditPage extends React.Component {
           <Col span={21}>
             <Input value={this.state.ldap.admin} onChange={e => {
               this.updateLdapField("admin", e.target.value);
-            }}/>
+            }} />
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}}>
@@ -166,7 +166,7 @@ class LdapEditPage extends React.Component {
           </Col>
           <Col span={21}>
             <Input.Password
-              iconRender={visible => (visible ? <EyeTwoTone/> : <EyeInvisibleOutlined/>)} value={this.state.ldap.passwd}
+              iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} value={this.state.ldap.passwd}
               onChange={e => {
                 this.updateLdapField("passwd", e.target.value);
               }}
@@ -179,24 +179,24 @@ class LdapEditPage extends React.Component {
           </Col>
           <Col span={21}>
             <InputNumber min={0} formatter={value => value.replace(/\$\s?|(,*)/g, "")} disabled={false}
-                         value={this.state.ldap.autoSync} onChange={value => {
-              this.updateLdapField("autoSync", value);
-            }}/><span>&nbsp;mins</span>
+              value={this.state.ldap.autoSync} onChange={value => {
+                this.updateLdapField("autoSync", value);
+              }} /><span>&nbsp;mins</span>
             {this.renderAutoSyncWarn()}
           </Col>
         </Row>
       </Card>
-    )
+    );
   }
 
   submitLdapEdit() {
     LddpBackend.updateLdap(this.state.ldap)
       .then((res) => {
         if (res.status === "ok") {
-          Setting.showMessage("success", `Update LDAP server success`);
+          Setting.showMessage("success", "Update LDAP server success");
           this.setState((prevState) => {
             prevState.ldap = res.data2;
-          })
+          });
         } else {
           Setting.showMessage("error", res.msg);
         }
@@ -225,7 +225,7 @@ class LdapEditPage extends React.Component {
           </Col>
           <Col span={18}>
             <Button type="primary" size="large"
-                    onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+              onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
           </Col>
         </Row>
       </div>

web/src/LdapListPage.js

@@ -28,7 +28,7 @@ class LdapListPage extends React.Component {
   }
 
   UNSAFE_componentWillMount() {
-    this.getLdaps()
+    this.getLdaps();
   }
 
   getLdaps() {
@@ -43,7 +43,7 @@ class LdapListPage extends React.Component {
         this.setState((prevState) => {
           prevState.ldaps = ldapsData;
           return prevState;
-        })
+        });
       });
   }
 
@@ -64,7 +64,7 @@ class LdapListPage extends React.Component {
             <Link to={`/ldaps/${record.id}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
@@ -78,7 +78,7 @@ class LdapListPage extends React.Component {
             <Link to={`/organizations/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
@@ -88,7 +88,7 @@ class LdapListPage extends React.Component {
         ellipsis: true,
         sorter: (a, b) => a.host.localeCompare(b.host),
         render: (text, record, index) => {
-          return `${text}:${record.port}`
+          return `${text}:${record.port}`;
         }
       },
       {
@@ -113,7 +113,7 @@ class LdapListPage extends React.Component {
         sorter: (a, b) => a.autoSync.localeCompare(b.autoSync),
         render: (text, record, index) => {
           return text === 0 ? (<span style={{color: "#faad14"}}>Disable</span>) : (
-            <span style={{color: "#52c41a"}}>{text + " mins"}</span>)
+            <span style={{color: "#52c41a"}}>{text + " mins"}</span>);
         }
       },
       {
@@ -123,7 +123,7 @@ class LdapListPage extends React.Component {
         ellipsis: true,
         sorter: (a, b) => a.lastSync.localeCompare(b.lastSync),
         render: (text, record, index) => {
-          return text
+          return text;
         }
       },
       {
@@ -135,19 +135,19 @@ class LdapListPage extends React.Component {
           return (
             <div>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                      type="primary"
-                      onClick={() => Setting.goToLink(`/ldap/sync/${record.id}`)}>{i18next.t("ldap:Sync")}</Button>
+                type="primary"
+                onClick={() => Setting.goToLink(`/ldap/sync/${record.id}`)}>{i18next.t("ldap:Sync")}</Button>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                      onClick={() => Setting.goToLink(`/ldap/${record.id}`)}>{i18next.t("general:Edit")}</Button>
+                onClick={() => Setting.goToLink(`/ldap/${record.id}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete LDAP Config: ${record.serverName} ?`}
                 onConfirm={() => this.deleteLdap(index)}
               >
                 <Button style={{marginBottom: "10px"}}
-                        type="danger">{i18next.t("general:Delete")}</Button>
+                  type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
@@ -155,17 +155,17 @@ class LdapListPage extends React.Component {
     return (
       <div>
         <Table columns={columns} dataSource={ldaps} rowKey="id" size="middle" bordered
-               pagination={{pageSize: 100}}
-               title={() => (
-                 <div>
-                   <span>{i18next.t("general:LDAPs")}</span>
-                   <Button type="primary" size="small" style={{marginLeft: "10px"}}
-                           onClick={() => {
-                             this.addLdap()
-                           }}>{i18next.t("general:Add")}</Button>
-                 </div>
-               )}
-               loading={ldaps === null}
+          pagination={{pageSize: 100}}
+          title={() => (
+            <div>
+              <span>{i18next.t("general:LDAPs")}</span>
+              <Button type="primary" size="small" style={{marginLeft: "10px"}}
+                onClick={() => {
+                  this.addLdap();
+                }}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={ldaps === null}
         />
       </div>
     );

web/src/LdapSyncPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Col, Row, Table, Popconfirm} from "antd";
+import {Button, Col, Popconfirm, Row, Table} from "antd";
 import * as Setting from "./Setting";
 import * as LdapBackend from "./backend/LdapBackend";
 import i18next from "i18next";
@@ -31,14 +31,14 @@ class LdapSyncPage extends React.Component {
   }
 
   UNSAFE_componentWillMount() {
-    this.getLdap()
+    this.getLdap();
   }
 
   syncUsers() {
     let selectedUsers = this.state.selectedUsers;
     if (selectedUsers === null || selectedUsers.length === 0) {
       Setting.showMessage("error", "Please select al least 1 user first");
-      return
+      return;
     }
 
     LdapBackend.syncUsers(this.state.ldap.owner, this.state.ldap.id, selectedUsers)
@@ -62,14 +62,14 @@ class LdapSyncPage extends React.Component {
             if (failed && failed.length > 0) {
               failed.forEach(elem => {
                 failedUser.push(elem.cn);
-              })
-              Setting.showMessage("error", `Sync [${failedUser}] failed`)
+              });
+              Setting.showMessage("error", `Sync [${failedUser}] failed`);
             }
           }
         } else {
           Setting.showMessage("error", res.msg);
         }
-      }))
+      }));
   }
 
   getLdap() {
@@ -79,7 +79,7 @@ class LdapSyncPage extends React.Component {
           this.setState((prevState) => {
             prevState.ldap = res.data;
             return prevState;
-          })
+          });
           this.getLdapUser(res.data);
         } else {
           Setting.showMessage("error", res.msg);
@@ -95,28 +95,28 @@ class LdapSyncPage extends React.Component {
           this.setState((prevState) => {
             prevState.users = res.data.users;
             return prevState;
-          })
+          });
           this.getExistUsers(ldap.owner, res.data.users);
         } else {
           Setting.showMessage("error", res.msg);
         }
-      })
+      });
   }
 
   getExistUsers(owner, users) {
     let uuidArray = [];
     users.forEach(elem => {
       uuidArray.push(elem.uuid);
-    })
+    });
     LdapBackend.checkLdapUsersExist(owner, uuidArray)
       .then((res) => {
         if (res.status === "ok") {
           this.setState(prevState => {
             prevState.existUuids = res.data?.length > 0 ? res.data : [];
             return prevState;
-          })
+          });
         }
-      })
+      });
   }
 
   buildValArray(data, key) {
@@ -137,7 +137,7 @@ class LdapSyncPage extends React.Component {
     let filterArray = [];
 
     if (data !== null && data.length > 0) {
-      let valArray = this.buildValArray(data, key)
+      let valArray = this.buildValArray(data, key);
       valArray.forEach(elem => {
         filterArray.push({
           text: elem,
@@ -163,7 +163,7 @@ class LdapSyncPage extends React.Component {
         width: "200px",
         sorter: (a, b) => a.uidNumber.localeCompare(b.uidNumber),
         render: (text, record, index) => {
-          return `${text} / ${record.uid}`
+          return `${text} / ${record.uid}`;
         },
       },
       {
@@ -202,7 +202,7 @@ class LdapSyncPage extends React.Component {
         this.setState(prevState => {
           prevState.selectedUsers = selectedRows;
           return prevState;
-        })
+        });
       },
       getCheckboxProps: record => ({
         disabled: this.state.existUuids.indexOf(record.uuid) !== -1,
@@ -212,20 +212,20 @@ class LdapSyncPage extends React.Component {
     return (
       <div>
         <Table rowSelection={rowSelection} columns={columns} dataSource={users} rowKey="uuid" bordered
-               pagination={{defaultPageSize: 10, showQuickJumper: true, showSizeChanger: true}}
-               title={() => (
-                 <div>
-                   <span>{this.state.ldap?.serverName}</span>
-                   <Popconfirm placement={"right"}
-                               title={`Please confirm to sync selected users`}
-                               onConfirm={() => this.syncUsers()}
-                   >
-                     <Button type="primary" size="small"
-                             style={{marginLeft: "10px"}}>{i18next.t("ldap:Sync")}</Button>
-                   </Popconfirm>
-                 </div>
-               )}
-               loading={users === null}
+          pagination={{defaultPageSize: 10, showQuickJumper: true, showSizeChanger: true}}
+          title={() => (
+            <div>
+              <span>{this.state.ldap?.serverName}</span>
+              <Popconfirm placement={"right"}
+                title={"Please confirm to sync selected users"}
+                onConfirm={() => this.syncUsers()}
+              >
+                <Button type="primary" size="small"
+                  style={{marginLeft: "10px"}}>{i18next.t("ldap:Sync")}</Button>
+              </Popconfirm>
+            </div>
+          )}
+          loading={users === null}
         />
       </div>
     );

web/src/LdapTable.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import {Button, Col, Popconfirm, Row, Table} from "antd";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import * as LdapBackend from "./backend/LdapBackend";
@@ -49,24 +49,24 @@ class LdapTable extends React.Component {
       baseDn: "ou=People,dc=example,dc=com",
       autosync: 0,
       lastSync: ""
-    }
+    };
   }
 
   addRow(table) {
     const newLdap = this.newLdap();
     LdapBackend.addLdap(newLdap)
       .then((res) => {
-          if (res.status === "ok") {
-            Setting.showMessage("success", `Add LDAP server success`);
-            if (table === undefined) {
-              table = [];
-            }
-            table = Setting.addRow(table, res.data2);
-            this.updateTable(table);
-          } else {
-            Setting.showMessage("error", res.msg);
+        if (res.status === "ok") {
+          Setting.showMessage("success", "Add LDAP server success");
+          if (table === undefined) {
+            table = [];
           }
+          table = Setting.addRow(table, res.data2);
+          this.updateTable(table);
+        } else {
+          Setting.showMessage("error", res.msg);
         }
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Add LDAP server failed: ${error}`);
@@ -76,14 +76,14 @@ class LdapTable extends React.Component {
   deleteRow(table, i) {
     LdapBackend.deleteLdap(table[i])
       .then((res) => {
-          if (res.status === "ok") {
-            Setting.showMessage("success", `Delete LDAP server success`);
-            table = Setting.deleteRow(table, i);
-            this.updateTable(table);
-          } else {
-            Setting.showMessage("error", res.msg);
-          }
+        if (res.status === "ok") {
+          Setting.showMessage("success", "Delete LDAP server success");
+          table = Setting.deleteRow(table, i);
+          this.updateTable(table);
+        } else {
+          Setting.showMessage("error", res.msg);
         }
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Delete LDAP server failed: ${error}`);
@@ -103,7 +103,7 @@ class LdapTable extends React.Component {
             <Link to={`/ldaps/${record.id}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
@@ -113,7 +113,7 @@ class LdapTable extends React.Component {
         ellipsis: true,
         sorter: (a, b) => a.host.localeCompare(b.host),
         render: (text, record, index) => {
-          return `${text}:${record.port}`
+          return `${text}:${record.port}`;
         }
       },
       {
@@ -131,7 +131,7 @@ class LdapTable extends React.Component {
         sorter: (a, b) => a.autoSync.localeCompare(b.autoSync),
         render: (text, record, index) => {
           return text === 0 ? (<span style={{color: "#faad14"}}>Disable</span>) : (
-            <span style={{color: "#52c41a"}}>{text + " mins"}</span>)
+            <span style={{color: "#52c41a"}}>{text + " mins"}</span>);
         }
       },
       {
@@ -141,7 +141,7 @@ class LdapTable extends React.Component {
         ellipsis: true,
         sorter: (a, b) => a.lastSync.localeCompare(b.lastSync),
         render: (text, record, index) => {
-          return text
+          return text;
         }
       },
       {
@@ -153,32 +153,32 @@ class LdapTable extends React.Component {
           return (
             <div>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                      type="primary"
-                      onClick={() => Setting.goToLink(`/ldap/sync/${record.id}`)}>{i18next.t("ldap:Sync")}</Button>
+                type="primary"
+                onClick={() => Setting.goToLink(`/ldap/sync/${record.id}`)}>{i18next.t("ldap:Sync")}</Button>
               <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}}
-                      onClick={() => Setting.goToLink(`/ldap/${record.id}`)}>{i18next.t("general:Edit")}</Button>
+                onClick={() => Setting.goToLink(`/ldap/${record.id}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete LDAP Config: ${record.serverName} ?`}
                 onConfirm={() => this.deleteRow(table, index)}
               >
                 <Button style={{marginBottom: "10px"}}
-                        type="danger">{i18next.t("general:Delete")}</Button>
+                  type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
 
     return (
-      <Table scroll={{x: 'max-content'}} rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false}
-             title={() => (
-               <div>
-                 {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
-                 <Button style={{marginRight: "5px"}} type="primary" size="small"
-                         onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
-               </div>
-             )}
+      <Table scroll={{x: "max-content"}} rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+        title={() => (
+          <div>
+            {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button style={{marginRight: "5px"}} type="primary" size="small"
+              onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+          </div>
+        )}
       />
     );
   }
@@ -186,7 +186,7 @@ class LdapTable extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{marginTop: '20px'}}>
+        <Row style={{marginTop: "20px"}}>
           <Col span={24}>
             {
               this.renderTable(this.props.table)
@@ -194,7 +194,7 @@ class LdapTable extends React.Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

web/src/ModelEditPage.js

@@ -0,0 +1,208 @@
+// Copyright 2021 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, Row, Select, Switch} from "antd";
+import * as ModelBackend from "./backend/ModelBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import TextArea from "antd/es/input/TextArea";
+
+const {Option} = Select;
+
+class ModelEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      modelName: props.match.params.modelName,
+      model: null,
+      organizations: [],
+      users: [],
+      models: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getModel();
+    this.getOrganizations();
+  }
+
+  getModel() {
+    ModelBackend.getModel(this.state.organizationName, this.state.modelName)
+      .then((model) => {
+        this.setState({
+          model: model,
+        });
+
+        this.getModels(model.owner);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getModels(organizationName) {
+    ModelBackend.getModels(organizationName)
+      .then((res) => {
+        this.setState({
+          models: res,
+        });
+      });
+  }
+
+  parseModelField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateModelField(key, value) {
+    value = this.parseModelField(key, value);
+
+    let model = this.state.model;
+    model[key] = value;
+    this.setState({
+      model: model,
+    });
+  }
+
+  renderModel() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("model:New Model") : i18next.t("model:Edit Model")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitModelEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitModelEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteModel()}>{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.model.owner} onChange={(value => {this.updateModelField("owner", 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.model.name} onChange={e => {
+              this.updateModelField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.model.displayName} onChange={e => {
+              this.updateModelField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("model:Model text"), i18next.t("model:Model text - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <TextArea rows={10} value={this.state.model.modelText} onChange={e => {
+              this.updateModelField("modelText", e.target.value);
+            }} />
+          </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.model.isEnabled} onChange={checked => {
+              this.updateModelField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitModelEdit(willExist) {
+    let model = Setting.deepCopy(this.state.model);
+    ModelBackend.updateModel(this.state.organizationName, this.state.modelName, model)
+      .then((res) => {
+        if (res.msg === "") {
+          Setting.showMessage("success", "Successfully saved");
+          this.setState({
+            modelName: this.state.model.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/models");
+          } else {
+            this.props.history.push(`/models/${this.state.model.owner}/${this.state.model.name}`);
+          }
+        } else {
+          Setting.showMessage("error", res.msg);
+          this.updateModelField("name", this.state.modelName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
+  }
+
+  deleteModel() {
+    ModelBackend.deleteModel(this.state.model)
+      .then(() => {
+        this.props.history.push("/models");
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to delete: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.model !== null ? this.renderModel() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitModelEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitModelEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteModel()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ModelEditPage;

web/src/ModelListPage.js

@@ -0,0 +1,201 @@
+// Copyright 2021 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 ModelBackend from "./backend/ModelBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+
+class ModelListPage extends BaseListPage {
+  newModel() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "built-in",
+      name: `model_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Model - ${randomName}`,
+      modelText: "",
+      isEnabled: true,
+    };
+  }
+
+  addModel() {
+    const newModel = this.newModel();
+    ModelBackend.addModel(newModel)
+      .then((res) => {
+        this.props.history.push({pathname: `/models/${newModel.owner}/${newModel.name}`, mode: "add"});
+      }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to add: ${error}`);
+      });
+  }
+
+  deleteModel(i) {
+    ModelBackend.deleteModel(this.state.data[i])
+      .then((res) => {
+        Setting.showMessage("success", "Model deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `Model failed to delete: ${error}`);
+      });
+  }
+
+  renderTable(models) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+        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={`/models/${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("general:Display name"),
+        dataIndex: "displayName",
+        key: "displayName",
+        width: "200px",
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        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(`/models/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Popconfirm
+                title={`Sure to delete model: ${record.name} ?`}
+                onConfirm={() => this.deleteModel(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={models} rowKey="name" size="middle" bordered
+          pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Models")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small"
+                onClick={this.addModel.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;
+    let sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    ModelBackend.getModels("", 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 ModelListPage;

web/src/OrganizationEditPage.js

@@ -13,15 +13,16 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Input, Row, Select, Switch} from 'antd';
+import {Button, Card, Col, Input, Row, Select, Switch} from "antd";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as LdapBackend from "./backend/LdapBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import {LinkOutlined} from "@ant-design/icons";
 import LdapTable from "./LdapTable";
+import AccountTable from "./AccountTable";
 
-const { Option } = Select;
+const {Option} = Select;
 
 class OrganizationEditPage extends React.Component {
   constructor(props) {
@@ -52,7 +53,7 @@ class OrganizationEditPage extends React.Component {
   getLdaps() {
     LdapBackend.getLdaps(this.state.organizationName)
       .then(res => {
-        let resdata = []
+        let resdata = [];
         if (res.status === "ok") {
           if (res.data !== null) {
             resdata = res.data;
@@ -60,8 +61,8 @@ class OrganizationEditPage extends React.Component {
         }
         this.setState({
           ldaps: resdata
-        })
-      })
+        });
+      });
   }
 
   parseOrganizationField(key, value) {
@@ -87,171 +88,183 @@ class OrganizationEditPage extends React.Component {
         <div>
           {this.state.mode === "add" ? i18next.t("organization:New Organization") : i18next.t("organization:Edit Organization")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitOrganizationEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteOrganization()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteOrganization()}>{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}>
+      } 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:Name"), i18next.t("general:Name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.name} disabled={this.state.organization.name === "built-in"} onChange={e => {
-              this.updateOrganizationField('name', e.target.value);
+              this.updateOrganizationField("name", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.displayName} onChange={e => {
-              this.updateOrganizationField('displayName', e.target.value);
+              this.updateOrganizationField("displayName", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel( i18next.t("general:Favicon"), i18next.t("general:Favicon - Tooltip"))} :
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Favicon"), i18next.t("general:Favicon - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
               </Col>
               <Col span={23} >
-                <Input prefix={<LinkOutlined/>} value={this.state.organization.favicon} onChange={e => {
-                  this.updateOrganizationField('favicon', e.target.value);
+                <Input prefix={<LinkOutlined />} value={this.state.organization.favicon} onChange={e => {
+                  this.updateOrganizationField("favicon", e.target.value);
                 }} />
               </Col>
             </Row>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {i18next.t("general:Preview")}:
               </Col>
               <Col span={23} >
                 <a target="_blank" rel="noreferrer" href={this.state.organization.favicon}>
-                  <img src={this.state.organization.favicon} alt={this.state.organization.favicon} height={90} style={{marginBottom: '20px'}}/>
+                  <img src={this.state.organization.favicon} alt={this.state.organization.favicon} height={90} style={{marginBottom: "20px"}} />
                 </a>
               </Col>
             </Row>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("organization:Website URL"), i18next.t("organization:Website URL - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Input prefix={<LinkOutlined/>} value={this.state.organization.websiteUrl} onChange={e => {
-              this.updateOrganizationField('websiteUrl', e.target.value);
+            <Input prefix={<LinkOutlined />} value={this.state.organization.websiteUrl} onChange={e => {
+              this.updateOrganizationField("websiteUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Password type"), i18next.t("general:Password type - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: '100%'}} value={this.state.organization.passwordType} onChange={(value => {this.updateOrganizationField('passwordType', value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.organization.passwordType} onChange={(value => {this.updateOrganizationField("passwordType", value);})}>
               {
-                ['plain', 'salt', 'md5-salt', 'bcrypt', 'pbkdf2-salt', 'argon2id']
+                ["plain", "salt", "md5-salt", "bcrypt", "pbkdf2-salt", "argon2id"]
                   .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}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Password salt"), i18next.t("general:Password salt - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.passwordSalt} onChange={e => {
-              this.updateOrganizationField('passwordSalt', e.target.value);
+              this.updateOrganizationField("passwordSalt", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Phone prefix"), i18next.t("general:Phone prefix - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input addonBefore={"+"} value={this.state.organization.phonePrefix} onChange={e => {
-              this.updateOrganizationField('phonePrefix', e.target.value);
+              this.updateOrganizationField("phonePrefix", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Default avatar"), i18next.t("general:Default avatar - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
               </Col>
               <Col span={23} >
-                <Input prefix={<LinkOutlined/>} value={this.state.organization.defaultAvatar} onChange={e => {
-                  this.updateOrganizationField('defaultAvatar', e.target.value);
+                <Input prefix={<LinkOutlined />} value={this.state.organization.defaultAvatar} onChange={e => {
+                  this.updateOrganizationField("defaultAvatar", e.target.value);
                 }} />
               </Col>
             </Row>
-            <Row style={{marginTop: '20px'}} >
-              <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
                 {i18next.t("general:Preview")}:
               </Col>
               <Col span={23} >
                 <a target="_blank" rel="noreferrer" href={this.state.organization.defaultAvatar}>
-                  <img src={this.state.organization.defaultAvatar} alt={this.state.organization.defaultAvatar} height={90} style={{marginBottom: '20px'}}/>
+                  <img src={this.state.organization.defaultAvatar} alt={this.state.organization.defaultAvatar} height={90} style={{marginBottom: "20px"}} />
                 </a>
               </Col>
             </Row>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("organization:Tags"), i18next.t("organization:Tags - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: '100%'}} value={this.state.organization.tags} onChange={(value => {this.updateOrganizationField('tags', value);})}>
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.organization.tags} onChange={(value => {this.updateOrganizationField("tags", value);})}>
               {
                 this.state.organization.tags?.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}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Master password"), i18next.t("general:Master password - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input value={this.state.organization.masterPassword} onChange={e => {
-              this.updateOrganizationField('masterPassword', e.target.value);
+              this.updateOrganizationField("masterPassword", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("organization:Soft deletion"), i18next.t("organization:Soft deletion - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.organization.enableSoftDeletion} onChange={checked => {
-              this.updateOrganizationField('enableSoftDeletion', checked);
+              this.updateOrganizationField("enableSoftDeletion", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("organization:Is profile public"), i18next.t("organization:Is profile public - Tooltip"))} :
           </Col>
           <Col span={1} >
             <Switch checked={this.state.organization.isProfilePublic} onChange={checked => {
-              this.updateOrganizationField('isProfilePublic', checked);
+              this.updateOrganizationField("isProfilePublic", checked);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}}>
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("organization:Account items"), i18next.t("organization:Account items - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <AccountTable
+              title={i18next.t("organization:Account items")}
+              table={this.state.organization.accountItems}
+              onUpdateTable={(value) => {this.updateOrganizationField("accountItems", value);}}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:LDAPs"), i18next.t("general:LDAPs - Tooltip"))} :
           </Col>
           <Col span={22}>
@@ -260,12 +273,13 @@ class OrganizationEditPage extends React.Component {
               table={this.state.ldaps}
               organizationName={this.state.organizationName}
               onUpdateTable={(value) => {
-                this.setState({ldaps: value}) }}
+                this.setState({ldaps: value});
+              }}
             />
           </Col>
         </Row>
       </Card>
-    )
+    );
   }
 
   submitOrganizationEdit(willExist) {
@@ -273,19 +287,19 @@ class OrganizationEditPage extends React.Component {
     OrganizationBackend.updateOrganization(this.state.organization.owner, this.state.organizationName, organization)
       .then((res) => {
         if (res.msg === "") {
-          Setting.showMessage("success", `Successfully saved`);
+          Setting.showMessage("success", "Successfully saved");
           this.setState({
             organizationName: this.state.organization.name,
           });
 
           if (willExist) {
-            this.props.history.push(`/organizations`);
+            this.props.history.push("/organizations");
           } else {
             this.props.history.push(`/organizations/${this.state.organization.name}`);
           }
         } else {
           Setting.showMessage("error", res.msg);
-          this.updateOrganizationField('name', this.state.organizationName);
+          this.updateOrganizationField("name", this.state.organizationName);
         }
       })
       .catch(error => {
@@ -296,7 +310,7 @@ class OrganizationEditPage extends React.Component {
   deleteOrganization() {
     OrganizationBackend.deleteOrganization(this.state.organization)
       .then(() => {
-        this.props.history.push(`/organizations`);
+        this.props.history.push("/organizations");
       })
       .catch(error => {
         Setting.showMessage("error", `Failed to connect to server: ${error}`);
@@ -309,10 +323,10 @@ class OrganizationEditPage extends React.Component {
         {
           this.state.organization !== null ? this.renderOrganization() : null
         }
-        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
           <Button size="large" onClick={() => this.submitOrganizationEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteOrganization()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteOrganization()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/OrganizationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Switch, Table} from 'antd';
+import {Button, Popconfirm, Result, Switch, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -22,7 +22,6 @@ import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 
 class OrganizationListPage extends BaseListPage {
-
   newOrganization() {
     const randomName = Setting.getRandomName();
     return {
@@ -40,15 +39,40 @@ class OrganizationListPage extends BaseListPage {
       masterPassword: "",
       enableSoftDeletion: false,
       isProfilePublic: true,
-    }
+      accountItems: [
+        {name: "Organization", visible: true, viewRule: "Public", modifyRule: "Admin"},
+        {name: "ID", visible: true, viewRule: "Public", modifyRule: "Immutable"},
+        {name: "Name", visible: true, viewRule: "Public", modifyRule: "Admin"},
+        {name: "Display name", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Avatar", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "User type", visible: true, viewRule: "Public", modifyRule: "Admin"},
+        {name: "Password", visible: true, viewRule: "Self", modifyRule: "Self"},
+        {name: "Email", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Phone", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Country/Region", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Location", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Affiliation", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Title", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Homepage", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Bio", visible: true, viewRule: "Public", modifyRule: "Self"},
+        {name: "Tag", visible: true, viewRule: "Public", modifyRule: "Admin"},
+        {name: "Signup application", visible: true, viewRule: "Public", modifyRule: "Admin"},
+        {name: "3rd-party logins", visible: true, viewRule: "Self", modifyRule: "Self"},
+        {name: "Properties", visible: false, viewRule: "Admin", modifyRule: "Admin"},
+        {name: "Is admin", visible: true, viewRule: "Admin", modifyRule: "Admin"},
+        {name: "Is global admin", visible: true, viewRule: "Admin", modifyRule: "Admin"},
+        {name: "Is forbidden", visible: true, viewRule: "Admin", modifyRule: "Admin"},
+        {name: "Is deleted", visible: true, viewRule: "Admin", modifyRule: "Admin"},
+      ],
+    };
   }
 
   addOrganization() {
     const newOrganization = this.newOrganization();
     OrganizationBackend.addOrganization(newOrganization)
       .then((res) => {
-          this.props.history.push({pathname: `/organizations/${newOrganization.name}`, mode: "add"});
-        }
+        this.props.history.push({pathname: `/organizations/${newOrganization.name}`, mode: "add"});
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Organization failed to add: ${error}`);
@@ -58,12 +82,12 @@ class OrganizationListPage extends BaseListPage {
   deleteOrganization(i) {
     OrganizationBackend.deleteOrganization(this.state.data[i])
       .then((res) => {
-          Setting.showMessage("success", `Organization deleted successfully`);
-          this.setState({
-            data: Setting.deleteRow(this.state.data, i),
-            pagination: {total: this.state.pagination.total - 1},
-          });
-        }
+        Setting.showMessage("success", "Organization deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Organization failed to delete: ${error}`);
@@ -74,25 +98,25 @@ class OrganizationListPage extends BaseListPage {
     const columns = [
       {
         title: i18next.t("general:Name"),
-        dataIndex: 'name',
-        key: 'name',
-        width: '120px',
-        fixed: 'left',
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
         sorter: true,
-        ...this.getColumnSearchProps('name'),
+        ...this.getColumnSearchProps("name"),
         render: (text, record, index) => {
           return (
             <Link to={`/organizations/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Created time"),
-        dataIndex: 'createdTime',
-        key: 'createdTime',
-        width: '160px',
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "160px",
         sorter: true,
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -100,106 +124,106 @@ class OrganizationListPage extends BaseListPage {
       },
       {
         title: i18next.t("general:Display name"),
-        dataIndex: 'displayName',
-        key: 'displayName',
+        dataIndex: "displayName",
+        key: "displayName",
         // width: '100px',
         sorter: true,
-        ...this.getColumnSearchProps('displayName'),
+        ...this.getColumnSearchProps("displayName"),
       },
       {
         title: i18next.t("organization:Favicon"),
-        dataIndex: 'favicon',
-        key: 'favicon',
-        width: '50px',
+        dataIndex: "favicon",
+        key: "favicon",
+        width: "50px",
         render: (text, record, index) => {
           return (
             <a target="_blank" rel="noreferrer" href={text}>
               <img src={text} alt={text} width={40} />
             </a>
-          )
+          );
         }
       },
       {
         title: i18next.t("organization:Website URL"),
-        dataIndex: 'websiteUrl',
-        key: 'websiteUrl',
-        width: '300px',
+        dataIndex: "websiteUrl",
+        key: "websiteUrl",
+        width: "300px",
         sorter: true,
-        ...this.getColumnSearchProps('websiteUrl'),
+        ...this.getColumnSearchProps("websiteUrl"),
         render: (text, record, index) => {
           return (
             <a target="_blank" rel="noreferrer" href={text}>
               {text}
             </a>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Password type"),
-        dataIndex: 'passwordType',
-        key: 'passwordType',
-        width: '150px',
+        dataIndex: "passwordType",
+        key: "passwordType",
+        width: "150px",
         sorter: true,
         filterMultiple: false,
         filters: [
-          {text: 'plain', value: 'plain'},
-          {text: 'salt', value: 'salt'},
-          {text: 'md5-salt', value: 'md5-salt'},
+          {text: "plain", value: "plain"},
+          {text: "salt", value: "salt"},
+          {text: "md5-salt", value: "md5-salt"},
         ],
       },
       {
         title: i18next.t("general:Password salt"),
-        dataIndex: 'passwordSalt',
-        key: 'passwordSalt',
-        width: '150px',
+        dataIndex: "passwordSalt",
+        key: "passwordSalt",
+        width: "150px",
         sorter: true,
-        ...this.getColumnSearchProps('passwordSalt'),
+        ...this.getColumnSearchProps("passwordSalt"),
       },
       {
         title: i18next.t("organization:Default avatar"),
-        dataIndex: 'defaultAvatar',
-        key: 'defaultAvatar',
-        width: '120px',
+        dataIndex: "defaultAvatar",
+        key: "defaultAvatar",
+        width: "120px",
         render: (text, record, index) => {
           return (
-              <a target="_blank" rel="noreferrer" href={text}>
-                <img src={text} alt={text} width={40} />
-              </a>
-          )
+            <a target="_blank" rel="noreferrer" href={text}>
+              <img src={text} alt={text} width={40} />
+            </a>
+          );
         }
       },
       {
         title: i18next.t("organization:Soft deletion"),
-        dataIndex: 'enableSoftDeletion',
-        key: 'enableSoftDeletion',
-        width: '140px',
+        dataIndex: "enableSoftDeletion",
+        key: "enableSoftDeletion",
+        width: "140px",
         sorter: true,
         render: (text, record, index) => {
           return (
             <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Action"),
-        dataIndex: '',
-        key: 'op',
-        width: '240px',
+        dataIndex: "",
+        key: "op",
+        width: "240px",
         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(`/organizations/${record.name}/users`)}>{i18next.t("general:Users")}</Button>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} onClick={() => this.props.history.push(`/organizations/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/organizations/${record.name}/users`)}>{i18next.t("general:Users")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} onClick={() => this.props.history.push(`/organizations/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete organization: ${record.name} ?`}
                 onConfirm={() => this.deleteOrganization(index)}
                 disabled={record.name === "built-in"}
               >
-                <Button style={{marginBottom: '10px'}} disabled={record.name === "built-in"} type="danger">{i18next.t("general:Delete")}</Button>
+                <Button style={{marginBottom: "10px"}} disabled={record.name === "built-in"} type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
@@ -211,17 +235,28 @@ class OrganizationListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
+    if (!this.state.isAuthorized) {
+      return (
+        <Result
+          status="403"
+          title="403 Unauthorized"
+          subTitle={i18next.t("general:Sorry, you do not have permission to access this page.")}
+          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
+        />
+      );
+    }
+
     return (
       <div>
-        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={paginationProps}
-               title={() => (
-                 <div>
-                  {i18next.t("general:Organizations")}&nbsp;&nbsp;&nbsp;&nbsp;
-                  <Button type="primary" size="small" onClick={this.addOrganization.bind(this)}>{i18next.t("general:Add")}</Button>
-                 </div>
-               )}
-               loading={this.state.loading}
-               onChange={this.handleTableChange}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Organizations")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addOrganization.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
         />
       </div>
     );
@@ -234,7 +269,7 @@ class OrganizationListPage extends BaseListPage {
       field = "passwordType";
       value = params.passwordType;
     }
-    this.setState({ loading: true });
+    this.setState({loading: true});
     OrganizationBackend.getOrganizations("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {
@@ -248,6 +283,13 @@ class OrganizationListPage extends BaseListPage {
             searchText: params.searchText,
             searchedColumn: params.searchedColumn,
           });
+        } else {
+          if (res.msg.includes("Unauthorized")) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
         }
       });
   };

web/src/PasswordModal.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Button, Col, Modal, Row, Input,} from "antd";
+import {Button, Col, Input, Modal, Row} from "antd";
 import i18next from "i18next";
 import React from "react";
 import * as UserBackend from "./backend/UserBackend";
@@ -50,17 +50,16 @@ export const PasswordModal = (props) => {
       if (res.status === "ok") {
         Setting.showMessage("success", i18next.t("user:Password Set"));
         setVisible(false);
-      }
-      else Setting.showMessage("error", i18next.t(`user:${res.msg}`));
-    })
-  }
+      } else {Setting.showMessage("error", i18next.t(`user:${res.msg}`));}
+    });
+  };
 
   let hasOldPassword = user.password !== "";
 
   return (
     <Row>
       <Button type="default" disabled={props.disabled} onClick={showModal}>
-        { hasOldPassword ? i18next.t("user:Modify password...") : i18next.t("user:Set password...")}
+        {hasOldPassword ? i18next.t("user:Modify password...") : i18next.t("user:Set password...")}
       </Button>
       <Modal
         maskClosable={false}
@@ -74,21 +73,21 @@ export const PasswordModal = (props) => {
         width={600}
       >
         <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
-          { (hasOldPassword && !Setting.isAdminUser(account)) ? (
+          {(hasOldPassword && !Setting.isAdminUser(account)) ? (
             <Row style={{width: "100%", marginBottom: "20px"}}>
-              <Input.Password addonBefore={i18next.t("user:Old Password")} placeholder={i18next.t("user:input password")} onChange={(e) => setOldPassword(e.target.value)}/>
+              <Input.Password addonBefore={i18next.t("user:Old Password")} placeholder={i18next.t("user:input password")} onChange={(e) => setOldPassword(e.target.value)} />
             </Row>
           ) : null}
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Input.Password addonBefore={i18next.t("user:New Password")} placeholder={i18next.t("user:input password")} onChange={(e) => setNewPassword(e.target.value)}/>
+            <Input.Password addonBefore={i18next.t("user:New Password")} placeholder={i18next.t("user:input password")} onChange={(e) => setNewPassword(e.target.value)} />
           </Row>
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Input.Password addonBefore={i18next.t("user:Re-enter New")} placeholder={i18next.t("user:input password")} onChange={(e) => setRePassword(e.target.value)}/>
+            <Input.Password addonBefore={i18next.t("user:Re-enter New")} placeholder={i18next.t("user:input password")} onChange={(e) => setRePassword(e.target.value)} />
           </Row>
         </Col>
       </Modal>
     </Row>
-  )
-}
+  );
+};
 
-export default PasswordModal;
+export default PasswordModal;

web/src/PaymentEditPage.js

@@ -13,13 +13,13 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Col, Descriptions, Input, Modal, Row, Select} from 'antd';
+import {Button, Card, Col, Descriptions, Input, Modal, Row, Select} from "antd";
 import {InfoCircleTwoTone} from "@ant-design/icons";
 import * as PaymentBackend from "./backend/PaymentBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 
-const { Option } = Select;
+const {Option} = Select;
 
 class PaymentEditPage extends React.Component {
   constructor(props) {
@@ -79,7 +79,7 @@ class PaymentEditPage extends React.Component {
           isInvoiceLoading: false,
         });
         if (res.msg === "") {
-          Setting.showMessage("success", `Successfully invoiced`);
+          Setting.showMessage("success", "Successfully invoiced");
           Setting.openLinkSafe(res.data);
           this.getPayment();
         } else {
@@ -117,17 +117,17 @@ class PaymentEditPage extends React.Component {
           {" " + i18next.t("payment:Confirm your invoice information")}
         </div>
       }
-             visible={this.state.isModalVisible}
-             onOk={handleIssueInvoice}
-             onCancel={handleCancel}
-             okText={i18next.t("payment:Issue Invoice")}
-             cancelText={i18next.t("general:Cancel")}>
+      visible={this.state.isModalVisible}
+      onOk={handleIssueInvoice}
+      onCancel={handleCancel}
+      okText={i18next.t("payment:Issue Invoice")}
+      cancelText={i18next.t("general:Cancel")}>
         <p>
           {
             i18next.t("payment:Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.")
           }
-          <br/>
-          <br/>
+          <br />
+          <br />
           <Descriptions size={"small"} bordered>
             <Descriptions.Item label={i18next.t("payment:Person name")} span={3}>{this.state.payment?.personName}</Descriptions.Item>
             <Descriptions.Item label={i18next.t("payment:Person ID card")} span={3}>{this.state.payment?.personIdCard}</Descriptions.Item>
@@ -140,7 +140,7 @@ class PaymentEditPage extends React.Component {
           </Descriptions>
         </p>
       </Modal>
-    )
+    );
   }
 
   renderPayment() {
@@ -149,12 +149,12 @@ class PaymentEditPage extends React.Component {
         <div>
           {this.state.mode === "add" ? i18next.t("payment:New Payment") : i18next.t("payment:Edit Payment")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitPaymentEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deletePayment()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deletePayment()}>{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}>
+      } 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} >
@@ -163,8 +163,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <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} >
@@ -173,18 +173,18 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Display name"), i18next.t("general:Display name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={true} value={this.state.payment.displayName} onChange={e => {
-              this.updatePaymentField('displayName', e.target.value);
+              this.updatePaymentField("displayName", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Provider"), i18next.t("general:Provider - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -193,8 +193,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Type"), i18next.t("payment:Type - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -203,8 +203,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Product"), i18next.t("payment:Product - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -213,8 +213,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Price"), i18next.t("payment:Price - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -223,8 +223,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Currency"), i18next.t("payment:Currency - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -233,8 +233,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:State"), i18next.t("payment:State - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -243,8 +243,8 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Message"), i18next.t("payment:Message - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -253,113 +253,113 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Person name"), i18next.t("payment:Person name - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== ""} value={this.state.payment.personName} onChange={e => {
-              this.updatePaymentField('personName', e.target.value);
+              this.updatePaymentField("personName", e.target.value);
               if (this.state.payment.invoiceType === "Individual") {
-                this.updatePaymentField('invoiceTitle', e.target.value);
-                this.updatePaymentField('invoiceTaxId', "");
+                this.updatePaymentField("invoiceTitle", e.target.value);
+                this.updatePaymentField("invoiceTaxId", "");
               }
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Person ID card"), i18next.t("payment:Person ID card - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== ""} value={this.state.payment.personIdCard} onChange={e => {
-              this.updatePaymentField('personIdCard', e.target.value);
+              this.updatePaymentField("personIdCard", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Person Email"), i18next.t("payment:Person Email - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== ""} value={this.state.payment.personEmail} onChange={e => {
-              this.updatePaymentField('personEmail', e.target.value);
+              this.updatePaymentField("personEmail", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Person phone"), i18next.t("payment:Person phone - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== ""} value={this.state.payment.personPhone} onChange={e => {
-              this.updatePaymentField('personPhone', e.target.value);
+              this.updatePaymentField("personPhone", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice type"), i18next.t("payment:Invoice type - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select disabled={this.state.payment.invoiceUrl !== ""} virtual={false} style={{width: '100%'}} value={this.state.payment.invoiceType} onChange={(value => {
-              this.updatePaymentField('invoiceType', value);
+            <Select disabled={this.state.payment.invoiceUrl !== ""} virtual={false} style={{width: "100%"}} value={this.state.payment.invoiceType} onChange={(value => {
+              this.updatePaymentField("invoiceType", value);
               if (value === "Individual") {
-                this.updatePaymentField('invoiceTitle', this.state.payment.personName);
-                this.updatePaymentField('invoiceTaxId', "");
+                this.updatePaymentField("invoiceTitle", this.state.payment.personName);
+                this.updatePaymentField("invoiceTaxId", "");
               }
             })}>
               {
                 [
-                  {id: 'Individual', name: i18next.t("payment:Individual")},
-                  {id: 'Organization', name: i18next.t("payment:Organization")},
+                  {id: "Individual", name: i18next.t("payment:Individual")},
+                  {id: "Organization", name: i18next.t("payment:Organization")},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
               }
             </Select>
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice title"), i18next.t("payment:Invoice title - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== "" || this.state.payment.invoiceType === "Individual"} value={this.state.payment.invoiceTitle} onChange={e => {
-              this.updatePaymentField('invoiceTitle', e.target.value);
+              this.updatePaymentField("invoiceTitle", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice tax ID"), i18next.t("payment:Invoice tax ID - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== "" || this.state.payment.invoiceType === "Individual"} value={this.state.payment.invoiceTaxId} onChange={e => {
-              this.updatePaymentField('invoiceTaxId', e.target.value);
+              this.updatePaymentField("invoiceTaxId", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice remark"), i18next.t("payment:Invoice remark - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={this.state.payment.invoiceUrl !== ""} value={this.state.payment.invoiceRemark} onChange={e => {
-              this.updatePaymentField('invoiceRemark', e.target.value);
+              this.updatePaymentField("invoiceRemark", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice URL"), i18next.t("payment:Invoice URL - Tooltip"))} :
           </Col>
           <Col span={22} >
             <Input disabled={true} value={this.state.payment.invoiceUrl} onChange={e => {
-              this.updatePaymentField('invoiceUrl', e.target.value);
+              this.updatePaymentField("invoiceUrl", e.target.value);
             }} />
           </Col>
         </Row>
-        <Row id={"invoice-area"} style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+        <Row id={"invoice-area"} style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("payment:Invoice actions"), i18next.t("payment:Invoice actions - Tooltip"))} :
           </Col>
           <Col span={22} >
@@ -384,7 +384,7 @@ class PaymentEditPage extends React.Component {
           </Col>
         </Row>
       </Card>
-    )
+    );
   }
 
   checkError() {
@@ -444,19 +444,19 @@ class PaymentEditPage extends React.Component {
     PaymentBackend.updatePayment(this.state.payment.owner, this.state.paymentName, payment)
       .then((res) => {
         if (res.msg === "") {
-          Setting.showMessage("success", `Successfully saved`);
+          Setting.showMessage("success", "Successfully saved");
           this.setState({
             paymentName: this.state.payment.name,
           });
 
           if (willExist) {
-            this.props.history.push(`/payments`);
+            this.props.history.push("/payments");
           } else {
             this.props.history.push(`/payments/${this.state.payment.name}`);
           }
         } else {
           Setting.showMessage("error", res.msg);
-          this.updatePaymentField('name', this.state.paymentName);
+          this.updatePaymentField("name", this.state.paymentName);
         }
       })
       .catch(error => {
@@ -467,7 +467,7 @@ class PaymentEditPage extends React.Component {
   deletePayment() {
     PaymentBackend.deletePayment(this.state.payment)
       .then(() => {
-        this.props.history.push(`/payments`);
+        this.props.history.push("/payments");
       })
       .catch(error => {
         Setting.showMessage("error", `Payment failed to delete: ${error}`);
@@ -483,10 +483,10 @@ class PaymentEditPage extends React.Component {
         {
           this.renderModal()
         }
-        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
           <Button size="large" onClick={() => this.submitPaymentEdit(false)}>{i18next.t("general:Save")}</Button>
-          <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
-          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deletePayment()}>{i18next.t("general:Cancel")}</Button> : null}
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deletePayment()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/PaymentListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Table} from 'antd';
+import {Button, Popconfirm, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as PaymentBackend from "./backend/PaymentBackend";
@@ -44,15 +44,15 @@ class PaymentListPage extends BaseListPage {
       returnUrl: "https://door.casdoor.com/payments",
       state: "Paid",
       message: "",
-    }
+    };
   }
 
   addPayment() {
     const newPayment = this.newPayment();
     PaymentBackend.addPayment(newPayment)
       .then((res) => {
-          this.props.history.push({pathname: `/payments/${newPayment.name}`, mode: "add"});
-        }
+        this.props.history.push({pathname: `/payments/${newPayment.name}`, mode: "add"});
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Payment failed to add: ${error}`);
@@ -62,12 +62,12 @@ class PaymentListPage extends BaseListPage {
   deletePayment(i) {
     PaymentBackend.deletePayment(this.state.data[i])
       .then((res) => {
-          Setting.showMessage("success", `Payment deleted successfully`);
-          this.setState({
-            data: Setting.deleteRow(this.state.data, i),
-            pagination: {total: this.state.pagination.total - 1},
-          });
-        }
+        Setting.showMessage("success", "Payment deleted successfully");
+        this.setState({
+          data: Setting.deleteRow(this.state.data, i),
+          pagination: {total: this.state.pagination.total - 1},
+        });
+      }
       )
       .catch(error => {
         Setting.showMessage("error", `Payment failed to delete: ${error}`);
@@ -78,55 +78,55 @@ class PaymentListPage extends BaseListPage {
     const columns = [
       {
         title: i18next.t("general:Organization"),
-        dataIndex: 'organization',
-        key: 'organization',
-        width: '120px',
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps('organization'),
+        ...this.getColumnSearchProps("organization"),
         render: (text, record, index) => {
           return (
             <Link to={`/organizations/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:User"),
-        dataIndex: 'user',
-        key: 'user',
-        width: '120px',
+        dataIndex: "user",
+        key: "user",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps('user'),
+        ...this.getColumnSearchProps("user"),
         render: (text, record, index) => {
           return (
             <Link to={`/users/${record.organization}/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Name"),
-        dataIndex: 'name',
-        key: 'name',
-        width: '180px',
-        fixed: 'left',
+        dataIndex: "name",
+        key: "name",
+        width: "180px",
+        fixed: "left",
         sorter: true,
-        ...this.getColumnSearchProps('name'),
+        ...this.getColumnSearchProps("name"),
         render: (text, record, index) => {
           return (
             <Link to={`/payments/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("general:Created time"),
-        dataIndex: 'createdTime',
-        key: 'createdTime',
-        width: '160px',
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "160px",
         sorter: true,
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -142,28 +142,28 @@ class PaymentListPage extends BaseListPage {
       // },
       {
         title: i18next.t("general:Provider"),
-        dataIndex: 'provider',
-        key: 'provider',
-        width: '150px',
-        fixed: 'left',
+        dataIndex: "provider",
+        key: "provider",
+        width: "150px",
+        fixed: "left",
         sorter: true,
-        ...this.getColumnSearchProps('provider'),
+        ...this.getColumnSearchProps("provider"),
         render: (text, record, index) => {
           return (
             <Link to={`/providers/${text}`}>
               {text}
             </Link>
-          )
+          );
         }
       },
       {
         title: i18next.t("payment:Type"),
-        dataIndex: 'type',
-        key: 'type',
-        width: '140px',
-        align: 'center',
+        dataIndex: "type",
+        key: "type",
+        width: "140px",
+        align: "center",
         filterMultiple: false,
-        filters: Setting.getProviderTypeOptions('Payment').map((o) => {return {text:o.id, value:o.name}}),
+        filters: Setting.getProviderTypeOptions("Payment").map((o) => {return {text:o.id, value:o.name};}),
         sorter: true,
         render: (text, record, index) => {
           record.category = "Payment";
@@ -172,55 +172,55 @@ class PaymentListPage extends BaseListPage {
       },
       {
         title: i18next.t("payment:Product"),
-        dataIndex: 'productDisplayName',
-        key: 'productDisplayName',
+        dataIndex: "productDisplayName",
+        key: "productDisplayName",
         // width: '160px',
         sorter: true,
-        ...this.getColumnSearchProps('productDisplayName'),
+        ...this.getColumnSearchProps("productDisplayName"),
       },
       {
         title: i18next.t("payment:Price"),
-        dataIndex: 'price',
-        key: 'price',
-        width: '120px',
+        dataIndex: "price",
+        key: "price",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps('price'),
+        ...this.getColumnSearchProps("price"),
       },
       {
         title: i18next.t("payment:Currency"),
-        dataIndex: 'currency',
-        key: 'currency',
-        width: '120px',
+        dataIndex: "currency",
+        key: "currency",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps('currency'),
+        ...this.getColumnSearchProps("currency"),
       },
       {
         title: i18next.t("payment:State"),
-        dataIndex: 'state',
-        key: 'state',
-        width: '120px',
+        dataIndex: "state",
+        key: "state",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps('state'),
+        ...this.getColumnSearchProps("state"),
       },
       {
         title: i18next.t("general:Action"),
-        dataIndex: '',
-        key: 'op',
-        width: '240px',
+        dataIndex: "",
+        key: "op",
+        width: "240px",
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} onClick={() => this.props.history.push(`/payments/${record.name}/result`)}>{i18next.t("payment:Result")}</Button>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/payments/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} onClick={() => this.props.history.push(`/payments/${record.name}/result`)}>{i18next.t("payment:Result")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/payments/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete payment: ${record.name} ?`}
                 onConfirm={() => this.deletePayment(index)}
               >
-                <Button style={{marginBottom: '10px'}} type="danger">{i18next.t("general:Delete")}</Button>
+                <Button style={{marginBottom: "10px"}} type="danger">{i18next.t("general:Delete")}</Button>
               </Popconfirm>
             </div>
-          )
+          );
         }
       },
     ];
@@ -234,15 +234,15 @@ class PaymentListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={payments} rowKey="name" size="middle" bordered pagination={paginationProps}
-               title={() => (
-                 <div>
-                   {i18next.t("general:Payments")}&nbsp;&nbsp;&nbsp;&nbsp;
-                   <Button type="primary" size="small" onClick={this.addPayment.bind(this)}>{i18next.t("general:Add")}</Button>
-                 </div>
-               )}
-               loading={this.state.loading}
-               onChange={this.handleTableChange}
+        <Table scroll={{x: "max-content"}} columns={columns} dataSource={payments} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Payments")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addPayment.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
         />
       </div>
     );
@@ -255,7 +255,7 @@ class PaymentListPage extends BaseListPage {
       field = "type";
       value = params.type;
     }
-    this.setState({ loading: true });
+    this.setState({loading: true});
     PaymentBackend.getPayments("", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {
         if (res.status === "ok") {

web/src/PaymentResultPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Result, Spin} from 'antd';
+import {Button, Result, Spin} from "antd";
 import * as PaymentBackend from "./backend/PaymentBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
@@ -71,7 +71,7 @@ class PaymentResultPage extends React.Component {
             ]}
           />
         </div>
-      )
+      );
     } else if (payment.state === "Created") {
       return (
         <div>
@@ -87,7 +87,7 @@ class PaymentResultPage extends React.Component {
             ]}
           />
         </div>
-      )
+      );
     } else {
       return (
         <div>
@@ -107,7 +107,7 @@ class PaymentResultPage extends React.Component {
             ]}
           />
         </div>
-      )
+      );
     }
   }
 }