update

Dockerfile

@@ -0,0 +1,21 @@
+FROM alpine 
+
+RUN echo -e https://mirrors.ustc.edu.cn/alpine/v3.15/main > /etc/apk/repositories \
+  && cat /etc/apk/repositories \
+# 设置时区为上海
+  && apk add tzdata && cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
+  && echo "Asia/Shanghai" > /etc/timezone \
+  && apk del tzdata \
+# 解决apline 运行编译后的执行文件 not found错误
+# 由于alpine镜像使用的是musl libc而不是gnu libc，/lib64/ 是不存在的。但他们是兼容的，可以创建个软连接
+  && mkdir /lib64 \
+  && ln -s /lib/libc.musl-x86_64.so.1 /lib64/ld-linux-x86-64.so.2
+
+WORKDIR /
+
+ADD web web
+ADD casdoor casdoor
+
+EXPOSE 8000
+
+ENTRYPOINT ["./casdoor"]

README.md

@@ -0,0 +1,28 @@
+# casdoor
+
+## build
+
+```shell
+git clone https://github.com/casdoor/casdoor
+cd casdoor
+go build .
+cd web
+yarn install
+yarn build
+```
+
+上传cdn，web/build/index.html中，css，js改为cdn路径
+
+## 项目地址
+
+[github](https://github.com/casdoor/casdoor)
+
+## 部署
+
+1. sh build.sh
+2. cd deployment
+3. docker compose up -d
+
+## 访问
+
+`http://127.0.0.1:36002`

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# 命名镜像
+repository_image="registry.cn-chengdu.aliyuncs.com/infish/pack-casdoor-auth:v1.0.0"
+
+# 删除本地已存在的镜像
+docker rmi $repository_image
+
+# 创建本地镜像
+docker build -t $repository_image .
+
+# push到镜像仓库，需要登陆对应docker仓库账号
+docker push $repository_image
+
+# 运行示例
+# docker run  -itd -p 20001:20001 --name comm-pay-service pay-service:1.0.0

conf/app.conf

@@ -1,24 +0,0 @@
-appname = casdoor
-httpport = 8000
-runmode = dev
-copyrequestbody = true
-driverName = mysql
-dataSourceName = casdoor:infish_2023_xx@tcp(casdoor-mysql:3306)/
-dbName = casdoor
-tableNamePrefix =
-showSql = false
-redisEndpoint =
-defaultStorageProvider = 
-isCloudIntranet = false
-authState = "casdoor"
-socks5Proxy = "127.0.0.1:10808"
-verificationCodeTimeout = 10
-initScore = 2000
-logPostOnly = true
-origin =
-staticBaseUrl = "3dqueen.cloud/auth2"
-isDemoMode = false
-batchSize = 100
-ldapServerPort = 389
-languages = en,zh,es,fr,de,id,ja,ko,ru,vi
-quota = {"organization": -1, "user": -1, "application": -1, "provider": -1}

deployment/conf/app.conf

@@ -0,0 +1,24 @@
+ppname = casdoor
+httpport = 8000
+runmode = dev
+copyrequestbody = true
+driverName = mysql
+dataSourceName = root:auth2023@tcp(auth-mysql:3306)/
+dbName = casdoor
+# tableNamePrefix =
+# showSql = false
+# redisEndpoint =
+# defaultStorageProvider = 
+# isCloudIntranet = false
+# authState = "casdoor"
+# socks5Proxy = "127.0.0.1:10808"
+# verificationCodeTimeout = 10
+# initScore = 2000
+# logPostOnly = true
+# origin =
+# staticBaseUrl = "https://auth3dqueen.oss-cn-beijing.aliyuncs.com/static"
+# isDemoMode = false
+# batchSize = 100
+# ldapServerPort = 389
+# languages = en,zh,es,fr,de,id,ja,ko,ru,vi
+# quota = {"organization": -1, "user": -1, "application": -1, "provider": -1}

deployment/docker-compose.yaml

@@ -0,0 +1,30 @@
+version: '3.8'
+
+# 网络
+networks:
+  default:
+    name: default-network
+    external: true
+
+services:
+  auth-casdoor:
+    image: "registry.cn-chengdu.aliyuncs.com/infish/pack-casdoor-auth:v1.0.0"
+    restart: always
+    ports:
+      - 36002:8000
+    volumes:
+      - ./conf:/conf        
+    depends_on:
+        - auth-mysql
+        
+  auth-mysql:
+    restart: always
+    image: mysql:5.7.42
+    volumes:
+      - /data/auth/mysql:/var/lib/mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: auth2023
+      MYSQL_DATABASE: casdoor
+    ports:
+      - 33306:3306
+

docker-compose.yml

@@ -1,44 +0,0 @@
-version: "3.8"
-
-networks:
-  default:
-    name: default-network
-    external: true
-
-services:
-  casdoor-nginx:
-    image: "registry.cn-chengdu.aliyuncs.com/infish/pack-comm-nginx:1.23.1"
-    restart: always
-    volumes:
-      - ./nginx/conf.d:/etc/nginx/conf.d
-      - ./nginx/www:/usr/share/nginx/html
-    ports:
-      - 18098:80
-    depends_on:
-      - casdoor
-
-  casdoor:
-    image: casbin/casdoor:v1.297.0
-    restart: always
-    # environment:
-    #   - driverName=mysql
-    #   - dataSourceName=casdoor:infish_2023_xx@tcp(casdoor-mysql:3306)/
-    volumes:
-      - ./conf:/conf
-    ports:
-      - 8000:8000
-    depends_on:
-      - casdoor-mysql
-
-  casdoor-mysql:
-    image: mysql:8
-    restart: always
-    environment:
-      - MYSQL_ROOT_PASSWORD=infish_2023_xx
-      - MYSQL_DATABASE=casdoor
-      - MYSQL_USER=casdoor
-      - MYSQL_PASSWORD=infish_2023_xx
-    volumes:
-      - /data/mysql/casdoor-data:/var/lib/mysql
-    ports:
-      - 3307:3306                 

nginx/conf.d/default.conf

@@ -1,51 +0,0 @@
-server {
-    listen       80;
-    listen  [::]:80;
-    server_name  localhost;
-    #access_log  /var/log/nginx/host.access.log  main;
-    # location / {
-    #     root   /usr/share/nginx/html;
-    #     index  index.html index.htm;
-    # }
-    #error_page  404              /404.html;
-
-    # redirect server error pages to the static page /50x.html
-    #
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-
-    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
-    #
-    #location ~ \.php$ {
-    #    proxy_pass   http://127.0.0.1;
-    #}
-
-    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
-    #
-    #location ~ \.php$ {
-    #    root           html;
-    #    fastcgi_pass   127.0.0.1:9000;
-    #    fastcgi_index  index.php;
-    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
-    #    include        fastcgi_params;
-    #}
-
-    # deny access to .htaccess files, if Apache's document root
-    # concurs with nginx's one
-    #
-    #location ~ /\.ht {
-    #    deny  all;
-    #}  
-
-   # casdoor
-   location / {
-      proxy_pass  http://casdoor:8000/;
-   }
-   
-    #nats-exporter
-    # location /natsexporter/ {
-    #    proxy_pass  http://nats-exporter:7777/;
-    # }
-}

nginx/www/index.html

@@ -1 +0,0 @@
-hello world~!!!

web/.eslintignore

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

web/.eslintrc

@@ -0,0 +1,107 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "requireConfigFile": false,
+    "babelOptions": {
+      "babelrc": false,
+      "configFile": false,
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "plugins": ["unused-imports"],
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "rules": {
+    "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"],
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "curly": ["error", "all"],
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+    "no-mixed-spaces-and-tabs": "error",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "no-multiple-empty-lines": [
+      "error",
+      { "max": 1, "maxBOF": 0, "maxEOF": 0 }
+    ],
+    "space-unary-ops": ["error", { "words": true, "nonwords": false }],
+    "space-infix-ops": "error",
+    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
+    "comma-style": ["error", "last"],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "never",
+        "exports": "never",
+        "functions": "never"
+      }
+    ],
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "none",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-unused-vars": "off",
+    "react/no-deprecated": "error",
+    "react/jsx-key": "error",
+    "no-console": "error",
+    "eqeqeq": "error",
+    "keyword-spacing": "error",
+
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "react/react-in-jsx-scope": "off",
+    "no-case-declarations": "off"
+  }
+}

web/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

web/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-less"
+  ]
+}

web/babel.config.json

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3.6.5"
+      }
+    ]
+  ]
+}

web/craco.config.js

@@ -0,0 +1,53 @@
+const CracoLessPlugin = require("craco-less");
+
+module.exports = {
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/swagger": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/files": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/.well-known/openid-configuration": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/cas/serviceValidate": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/cas/proxyValidate": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/cas/proxy": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+      "/cas/validate": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: {"@primary-color": "rgb(89,54,213)", "@border-radius-base": "5px"},
+            javascriptEnabled: true,
+          },
+        },
+      },
+    },
+  ],
+};

web/crowdin.yml

@@ -0,0 +1,10 @@
+project_id: '491513'
+api_token_env: 'CROWDIN_PERSONAL_TOKEN'
+preserve_hierarchy: true
+files: [
+    # JSON translation files
+    {
+      source: '/src/locales/en/data.json',
+      translation: '/src/locales/%two_letters_code%/data.json',
+    },
+  ]

web/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    "retries": {
+      "runMode": 2,
+      "openMode": 0
+    }
+  },
+});

web/cypress/e2e/adapter.cy.js

@@ -0,0 +1,16 @@
+describe('Test adapter', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn"
+      };
+    it("test adapter", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/adapters");
+        cy.url().should("eq", "http://localhost:7001/adapters");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/adapters/built-in/")
+    });
+})

web/cypress/e2e/application.cy.js

@@ -0,0 +1,13 @@
+describe('Test aplication', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test aplication", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/applications");
+        cy.url().should("eq", "http://localhost:7001/applications");
+        cy.visit("http://localhost:7001/applications/built-in/app-built-in");
+        cy.url().should("eq", "http://localhost:7001/applications/built-in/app-built-in");
+    });
+})

web/cypress/e2e/certs.cy.js

@@ -0,0 +1,13 @@
+describe('Test certs', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test certs", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/certs");
+        cy.url().should("eq", "http://localhost:7001/certs");
+        cy.visit("http://localhost:7001/certs/cert-built-in");
+        cy.url().should("eq", "http://localhost:7001/certs/cert-built-in");
+    });
+})

web/cypress/e2e/login.cy.js

@@ -0,0 +1,54 @@
+describe("Login test", () => {
+  const selector = {
+    username: "#input",
+    password: "#normal_login_password",
+    loginButton: ".ant-btn",
+  };
+  it("Login succeeded", () => {
+    cy.request({
+      method: "POST",
+      url: "http://localhost:7001/api/login",
+      body: {
+        "application": "app-built-in",
+        "organization": "built-in",
+        "username": "admin",
+        "password": "123",
+        "autoSignin": true,
+        "type": "login",
+      },
+    }).then((Response) => {
+      expect(Response).property("body").property("status").to.equal("ok");
+    });
+  });
+  it("ui Login succeeded", () => {
+    cy.visit("http://localhost:7001");
+    cy.get(selector.username).type("admin");
+    cy.get(selector.password).type("123");
+    cy.get(selector.loginButton).click();
+    cy.url().should("eq", "http://localhost:7001/");
+  });
+
+  it("Login failed", () => {
+    cy.request({
+      method: "POST",
+      url: "http://localhost:7001/api/login",
+      body: {
+        "application": "app-built-in",
+        "organization": "built-in",
+        "username": "admin",
+        "password": "1234",
+        "autoSignin": true,
+        "type": "login",
+      },
+    }).then((Response) => {
+      expect(Response).property("body").property("status").to.equal("error");
+    });
+  });
+  it("ui Login failed", () => {
+    cy.visit("http://localhost:7001");
+    cy.get(selector.username).type("admin");
+    cy.get(selector.password).type("1234");
+    cy.get(selector.loginButton).click();
+    cy.url().should("eq", "http://localhost:7001/login");
+  });
+});

web/cypress/e2e/models.cy.js

@@ -0,0 +1,13 @@
+describe('Test models', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test org", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/models");
+        cy.url().should("eq", "http://localhost:7001/models");
+        cy.visit("http://localhost:7001/models/built-in/model-built-in");
+        cy.url().should("eq", "http://localhost:7001/models/built-in/model-built-in");
+    });
+})

web/cypress/e2e/orgnazition.cy.js

@@ -0,0 +1,15 @@
+describe('Test Orgnazition', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test org", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/organizations");
+        cy.url().should("eq", "http://localhost:7001/organizations");
+        cy.visit("http://localhost:7001/organizations/built-in");
+        cy.url().should("eq", "http://localhost:7001/organizations/built-in");
+        cy.visit("http://localhost:7001/organizations/built-in/users");
+        cy.url().should("eq", "http://localhost:7001/organizations/built-in/users");
+    });
+})

web/cypress/e2e/payments.cy.js

@@ -0,0 +1,16 @@
+describe('Test payments', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn"
+      };
+    it("test payments", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/payments");
+        cy.url().should("eq", "http://localhost:7001/payments");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/payments/")
+    });
+})

web/cypress/e2e/permissions.cy.js

@@ -0,0 +1,13 @@
+describe('Test permissions', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test permissions", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/permissions");
+        cy.url().should("eq", "http://localhost:7001/permissions");
+        cy.visit("http://localhost:7001/permissions/built-in/permission-built-in");
+        cy.url().should("eq", "http://localhost:7001/permissions/built-in/permission-built-in");
+    });
+})

web/cypress/e2e/products.cy.js

@@ -0,0 +1,16 @@
+describe('Test products', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn > span"
+      };
+    it("test products", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/products");
+        cy.url().should("eq", "http://localhost:7001/products");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/products/")
+    });
+})

web/cypress/e2e/providers.cy.js

@@ -0,0 +1,13 @@
+describe('Test providers', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test providers", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/providers");
+        cy.url().should("eq", "http://localhost:7001/providers");
+        cy.visit("http://localhost:7001/providers/admin/provider_captcha_default");
+        cy.url().should("eq", "http://localhost:7001/providers/admin/provider_captcha_default");
+    });
+})

web/cypress/e2e/records.cy.js

@@ -0,0 +1,11 @@
+describe('Test records', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test records", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/records");
+        cy.url().should("eq", "http://localhost:7001/records");
+    });
+})

web/cypress/e2e/resource.cy.js

@@ -0,0 +1,11 @@
+describe('Test resource', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test resource", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/resources");
+        cy.url().should("eq", "http://localhost:7001/resources");
+    });
+})

web/cypress/e2e/role.cy.js

@@ -0,0 +1,11 @@
+describe('Test roles', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test role", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/roles");
+        cy.url().should("eq", "http://localhost:7001/roles");
+    });
+})

web/cypress/e2e/sessions.cy.js

@@ -0,0 +1,11 @@
+describe('Test sessions', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test sessions", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/sessions");
+        cy.url().should("eq", "http://localhost:7001/sessions");
+    });
+})

web/cypress/e2e/syncers.cy.js

@@ -0,0 +1,16 @@
+describe('Test syncers', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn"
+      };
+    it("test syncers", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/syncers");
+        cy.url().should("eq", "http://localhost:7001/syncers");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/syncers/")
+    });
+})

web/cypress/e2e/sysinfo.cy.js

@@ -0,0 +1,11 @@
+describe('Test sysinfo', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test sysinfo", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/sysinfo");
+        cy.url().should("eq", "http://localhost:7001/sysinfo");
+    });
+})

web/cypress/e2e/tokens.cy.js

@@ -0,0 +1,16 @@
+describe('Test tokens', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn"
+      };
+    it("test records", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/tokens");
+        cy.url().should("eq", "http://localhost:7001/tokens");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/tokens/")
+    });
+})

web/cypress/e2e/user.cy.js

@@ -0,0 +1,13 @@
+describe('Test User', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    it("test user", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/users");
+        cy.url().should("eq", "http://localhost:7001/users");
+        cy.visit("http://localhost:7001/users/built-in/admin");
+        cy.url().should("eq", "http://localhost:7001/users/built-in/admin");
+    });
+})

web/cypress/e2e/webhooks.cy.js

@@ -0,0 +1,16 @@
+describe('Test webhooks', () => {
+    beforeEach(()=>{
+        cy.visit("http://localhost:7001");
+        cy.login();
+    })
+    const selector = {
+        add: ".ant-table-title > div > .ant-btn"
+      };
+    it("test webhooks", () => {
+        cy.visit("http://localhost:7001");
+        cy.visit("http://localhost:7001/webhooks");
+        cy.url().should("eq", "http://localhost:7001/webhooks");
+        cy.get(selector.add).click();
+        cy.url().should("include","http://localhost:7001/webhooks/")
+    });
+})

web/cypress/support/commands.js

@@ -0,0 +1,41 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+Cypress.Commands.add('login', ()=>{
+    cy.request({
+        method: "POST",
+        url: "http://localhost:7001/api/login",
+        body: {
+          "application": "app-built-in",
+          "organization": "built-in",
+          "username": "admin",
+          "password": "123",
+          "autoSignin": true,
+          "type": "login",
+        },
+      }).then((Response) => {
+        expect(Response).property("body").property("status").to.equal("ok");
+      });
+})

web/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

web/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.8.1",
+    "@ant-design/icons": "^4.7.0",
+    "@craco/craco": "^6.4.5",
+    "@crowdin/cli": "^3.7.10",
+    "@ctrl/tinycolor": "^3.5.0",
+    "@emotion/react": "^11.10.5",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "antd": "5.2.3",
+    "antd-token-previewer": "^1.1.0-22",
+    "codemirror": "^5.61.1",
+    "copy-to-clipboard": "^3.3.1",
+    "core-js": "^3.25.0",
+    "craco-less": "^2.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "file-saver": "^2.0.5",
+    "i18n-iso-countries": "^7.0.0",
+    "i18next": "^19.8.9",
+    "libphonenumber-js": "^1.10.19",
+    "moment": "^2.29.1",
+    "qs": "^6.10.2",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-codemirror2": "^7.2.1",
+    "react-cropper": "^2.1.7",
+    "react-device-detect": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "react-github-corner": "^2.5.0",
+    "react-helmet": "^6.1.0",
+    "react-highlight-words": "^0.18.0",
+    "react-i18next": "^11.8.7",
+    "react-router-dom": "^5.3.3",
+    "react-scripts": "5.0.1",
+    "react-social-login-buttons": "^3.4.0"
+  },
+  "scripts": {
+    "start": "cross-env PORT=7001 craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
+    "crowdin:sync": "crowdin upload && crowdin download",
+    "preinstall": "node -e \"if (process.env.npm_execpath.indexOf('yarn') === -1) throw new Error('Use yarn for installing: https://yarnpkg.com/en/docs/install')\"",
+    "fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
+    "lint:css": "stylelint src/**/*.{css,less} --fix"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "ie > 8"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version",
+      "ie > 8"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
+    "cross-env": "^7.0.3",
+    "cypress": "^12.5.1",
+    "eslint": "8.22.0",
+    "eslint-plugin-react": "^7.31.1",
+    "husky": "^4.3.8",
+    "lint-staged": "^13.0.3",
+    "stylelint": "^14.11.0",
+    "stylelint-config-recommended-less": "^1.0.4",
+    "stylelint-config-standard": "^28.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{css,less}": [
+      "stylelint --fix"
+    ],
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

web/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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="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.casbin.org/img/favicon.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="https://cdn.casbin.org/site/casdoor/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Casdoor</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

web/src/AdapterEditPage.js

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

web/src/AdapterListPage.js

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

web/src/App.js

@@ -0,0 +1,773 @@
+// 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, {Component} from "react";
+import "./App.less";
+import {Helmet} from "react-helmet";
+import * as Setting from "./Setting";
+import {StyleProvider, legacyLogicalPropertiesTransformer} from "@ant-design/cssinjs";
+import {BarsOutlined, CommentOutlined, DownOutlined, InfoCircleFilled, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
+import {Alert, Avatar, Button, Card, ConfigProvider, Drawer, Dropdown, FloatButton, 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";
+import UserEditPage from "./UserEditPage";
+import RoleListPage from "./RoleListPage";
+import RoleEditPage from "./RoleEditPage";
+import PermissionListPage from "./PermissionListPage";
+import PermissionEditPage from "./PermissionEditPage";
+import ProviderListPage from "./ProviderListPage";
+import ProviderEditPage from "./ProviderEditPage";
+import ApplicationListPage from "./ApplicationListPage";
+import ApplicationEditPage from "./ApplicationEditPage";
+import ResourceListPage from "./ResourceListPage";
+import LdapEditPage from "./LdapEditPage";
+import LdapSyncPage from "./LdapSyncPage";
+import TokenListPage from "./TokenListPage";
+import TokenEditPage from "./TokenEditPage";
+import RecordListPage from "./RecordListPage";
+import WebhookListPage from "./WebhookListPage";
+import WebhookEditPage from "./WebhookEditPage";
+import SyncerListPage from "./SyncerListPage";
+import SyncerEditPage from "./SyncerEditPage";
+import CertListPage from "./CertListPage";
+import CertEditPage from "./CertEditPage";
+import ChatListPage from "./ChatListPage";
+import ChatEditPage from "./ChatEditPage";
+import ChatPage from "./ChatPage";
+import MessageEditPage from "./MessageEditPage";
+import MessageListPage from "./MessageListPage";
+import ProductListPage from "./ProductListPage";
+import ProductEditPage from "./ProductEditPage";
+import ProductBuyPage from "./ProductBuyPage";
+import PaymentListPage from "./PaymentListPage";
+import PaymentEditPage from "./PaymentEditPage";
+import PaymentResultPage from "./PaymentResultPage";
+import AccountPage from "./account/AccountPage";
+import HomePage from "./basic/HomePage";
+import CustomGithubCorner from "./common/CustomGithubCorner";
+import * as Conf from "./Conf";
+
+import * as Auth from "./auth/Auth";
+import EntryPage from "./EntryPage";
+import ResultPage from "./auth/ResultPage";
+import * as AuthBackend from "./auth/AuthBackend";
+import AuthCallback from "./auth/AuthCallback";
+import LanguageSelect from "./common/select/LanguageSelect";
+import i18next from "i18next";
+import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
+import SamlCallback from "./auth/SamlCallback";
+import ModelListPage from "./ModelListPage";
+import ModelEditPage from "./ModelEditPage";
+import SystemInfo from "./SystemInfo";
+import AdapterListPage from "./AdapterListPage";
+import AdapterEditPage from "./AdapterEditPage";
+import {withTranslation} from "react-i18next";
+import ThemeSelect from "./common/select/ThemeSelect";
+import SessionListPage from "./SessionListPage";
+
+const {Header, Footer, Content} = Layout;
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      selectedMenuKey: 0,
+      account: undefined,
+      uri: null,
+      menuVisible: false,
+      themeAlgorithm: ["default"],
+      themeData: Conf.ThemeDefault,
+      logo: this.getLogo(Setting.getAlgorithmNames(Conf.ThemeDefault)),
+    };
+
+    Setting.initServerUrl();
+    Auth.initAuthWithConfig({
+      serverUrl: Setting.ServerUrl,
+      appName: "app-built-in", // the application name of Casdoor itself, do not change it
+    });
+  }
+
+  UNSAFE_componentWillMount() {
+    this.updateMenuKey();
+    this.getAccount();
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line no-restricted-globals
+    const uri = location.pathname;
+    if (this.state.uri !== uri) {
+      this.updateMenuKey();
+    }
+  }
+
+  updateMenuKey() {
+    // eslint-disable-next-line no-restricted-globals
+    const uri = location.pathname;
+    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("/models")) {
+      this.setState({selectedMenuKey: "/models"});
+    } else if (uri.includes("/adapters")) {
+      this.setState({selectedMenuKey: "/adapters"});
+    } else if (uri.includes("/providers")) {
+      this.setState({selectedMenuKey: "/providers"});
+    } else if (uri.includes("/applications")) {
+      this.setState({selectedMenuKey: "/applications"});
+    } else if (uri.includes("/resources")) {
+      this.setState({selectedMenuKey: "/resources"});
+    } else if (uri.includes("/records")) {
+      this.setState({selectedMenuKey: "/records"});
+    } else if (uri.includes("/tokens")) {
+      this.setState({selectedMenuKey: "/tokens"});
+    } else if (uri.includes("/sessions")) {
+      this.setState({selectedMenuKey: "/sessions"});
+    } 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("/chats")) {
+      this.setState({selectedMenuKey: "/chats"});
+    } else if (uri.includes("/messages")) {
+      this.setState({selectedMenuKey: "/messages"});
+    } 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 if (uri.includes("/sysinfo")) {
+      this.setState({selectedMenuKey: "/sysinfo"});
+    } else {
+      this.setState({selectedMenuKey: -1});
+    }
+  }
+
+  getAccessTokenParam(params) {
+    // "/page?access_token=123"
+    const accessToken = params.get("access_token");
+    return accessToken === null ? "" : `?accessToken=${accessToken}`;
+  }
+
+  getCredentialParams(params) {
+    // "/page?username=abc&password=123"
+    if (params.get("username") === null || params.get("password") === null) {
+      return "";
+    }
+    return `?username=${params.get("username")}&password=${params.get("password")}`;
+  }
+
+  getUrlWithoutQuery() {
+    return window.location.toString().replace(window.location.search, "");
+  }
+
+  getLanguageParam(params) {
+    // "/page?language=en"
+    const language = params.get("language");
+    if (language !== null) {
+      Setting.setLanguage(language);
+      return `language=${language}`;
+    }
+    return "";
+  }
+
+  getLogo(themes) {
+    if (themes.includes("dark")) {
+      return `${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256_dark.png`;
+    } else {
+      return `${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`;
+    }
+  }
+
+  setLanguage(account) {
+    const language = account?.language;
+    if (language !== "" && language !== i18next.language) {
+      Setting.setLanguage(language);
+    }
+  }
+
+  setTheme = (theme, initThemeAlgorithm) => {
+    this.setState({
+      themeData: theme,
+    });
+
+    if (initThemeAlgorithm) {
+      this.setState({
+        logo: this.getLogo(Setting.getAlgorithmNames(theme)),
+        themeAlgorithm: Setting.getAlgorithmNames(theme),
+      });
+    }
+  };
+
+  getAccount() {
+    const params = new URLSearchParams(this.props.location.search);
+
+    let query = this.getAccessTokenParam(params);
+    if (query === "") {
+      query = this.getCredentialParams(params);
+    }
+
+    const query2 = this.getLanguageParam(params);
+    if (query2 !== "") {
+      const url = window.location.toString().replace(new RegExp(`[?&]${query2}`), "");
+      window.history.replaceState({}, document.title, url);
+    }
+
+    if (query !== "") {
+      window.history.replaceState({}, document.title, this.getUrlWithoutQuery());
+    }
+
+    AuthBackend.getAccount(query)
+      .then((res) => {
+        let account = null;
+        if (res.status === "ok") {
+          account = res.data;
+          account.organization = res.data2;
+
+          this.setLanguage(account);
+          this.setTheme(Setting.getThemeData(account.organization), Conf.InitThemeAlgorithm);
+        } else {
+          if (res.data !== "Please login first") {
+            Setting.showMessage("error", `${i18next.t("application:Failed to sign in")}: ${res.msg}`);
+          }
+        }
+
+        this.setState({
+          account: account,
+        });
+      });
+  }
+
+  logout() {
+    this.setState({
+      expired: false,
+      submitted: false,
+    });
+
+    AuthBackend.logout()
+      .then((res) => {
+        if (res.status === "ok") {
+          const owner = this.state.account.owner;
+
+          this.setState({
+            account: null,
+            themeAlgorithm: ["default"],
+          });
+
+          Setting.showMessage("success", i18next.t("application:Logged out successfully"));
+          const redirectUri = res.data2;
+          if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
+            Setting.goToLink(redirectUri);
+          } else if (owner !== "built-in") {
+            Setting.goToLink(`${window.location.origin}/login/${owner}`);
+          } else {
+            Setting.goToLinkSoft(this, "/");
+          }
+        } else {
+          Setting.showMessage("error", `Failed to log out: ${res.msg}`);
+        }
+      });
+  }
+
+  onUpdateAccount(account) {
+    this.setState({
+      account: account,
+    });
+  }
+
+  renderAvatar() {
+    if (this.state.account.avatar === "") {
+      return (
+        <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">
+          {Setting.getShortName(this.state.account.name)}
+        </Avatar>
+      );
+    }
+  }
+
+  renderRightDropdown() {
+    const items = [];
+    items.push(Setting.getItem(<><SettingOutlined />&nbsp;&nbsp;{i18next.t("account:My Account")}</>,
+      "/account"
+    ));
+    items.push(Setting.getItem(<><CommentOutlined />&nbsp;&nbsp;{i18next.t("account:Chats & Messages")}</>,
+      "/chat"
+    ));
+    items.push(Setting.getItem(<><LogoutOutlined />&nbsp;&nbsp;{i18next.t("account:Logout")}</>,
+      "/logout"));
+
+    const onClick = (e) => {
+      if (e.key === "/account") {
+        this.props.history.push("/account");
+      } else if (e.key === "/chat") {
+        this.props.history.push("/chat");
+      } else if (e.key === "/logout") {
+        this.logout();
+      }
+    };
+
+    return (
+      <Dropdown key="/rightDropDown" menu={{items, onClick}} >
+        <div className="rightDropDown">
+          {
+            this.renderAvatar()
+          }
+          &nbsp;
+          &nbsp;
+          {Setting.isMobile() ? null : Setting.getNameAtLeast(this.state.account.displayName)} &nbsp; <DownOutlined />
+          &nbsp;
+          &nbsp;
+          &nbsp;
+        </div>
+      </Dropdown>
+    );
+  }
+
+  renderAccountMenu() {
+    if (this.state.account === undefined) {
+      return null;
+    } else if (this.state.account === null) {
+      return null;
+    } else {
+      return (
+        <React.Fragment>
+          {this.renderRightDropdown()}
+          <ThemeSelect
+            themeAlgorithm={this.state.themeAlgorithm}
+            onChange={(nextThemeAlgorithm) => {
+              this.setState({
+                themeAlgorithm: nextThemeAlgorithm,
+                logo: this.getLogo(nextThemeAlgorithm),
+              });
+            }} />
+          <LanguageSelect languages={this.state.account.organization.languages} />
+        </React.Fragment>
+      );
+    }
+  }
+
+  getMenuItems() {
+    const res = [];
+
+    if (this.state.account === null || this.state.account === undefined) {
+      return [];
+    }
+
+    res.push(Setting.getItem(<Link to="/">{i18next.t("general:Home")}</Link>, "/"));
+
+    if (Setting.isAdminUser(this.state.account)) {
+      res.push(Setting.getItem(<Link to="/organizations">{i18next.t("general:Organizations")}</Link>,
+        "/organizations"));
+    }
+
+    if (Setting.isLocalAdminUser(this.state.account)) {
+      res.push(Setting.getItem(<Link to="/users">{i18next.t("general:Users")}</Link>,
+        "/users"
+      ));
+
+      res.push(Setting.getItem(<Link to="/roles">{i18next.t("general:Roles")}</Link>,
+        "/roles"
+      ));
+
+      res.push(Setting.getItem(<Link to="/permissions">{i18next.t("general:Permissions")}</Link>,
+        "/permissions"
+      ));
+    }
+
+    if (Setting.isAdminUser(this.state.account)) {
+      res.push(Setting.getItem(<Link to="/models">{i18next.t("general:Models")}</Link>,
+        "/models"
+      ));
+
+      res.push(Setting.getItem(<Link to="/adapters">{i18next.t("general:Adapters")}</Link>,
+        "/adapters"
+      ));
+    }
+
+    if (Setting.isLocalAdminUser(this.state.account)) {
+      res.push(Setting.getItem(<Link to="/applications">{i18next.t("general:Applications")}</Link>,
+        "/applications"
+      ));
+
+      res.push(Setting.getItem(<Link to="/providers">{i18next.t("general:Providers")}</Link>,
+        "/providers"
+      ));
+
+      res.push(Setting.getItem(<Link to="/chats">{i18next.t("general:Chats")}</Link>,
+        "/chats"
+      ));
+
+      res.push(Setting.getItem(<Link to="/messages">{i18next.t("general:Messages")}</Link>,
+        "/messages"
+      ));
+
+      res.push(Setting.getItem(<Link to="/resources">{i18next.t("general:Resources")}</Link>,
+        "/resources"
+      ));
+
+      res.push(Setting.getItem(<Link to="/records">{i18next.t("general:Records")}</Link>,
+        "/records"
+      ));
+    }
+
+    if (Setting.isAdminUser(this.state.account)) {
+      res.push(Setting.getItem(<Link to="/tokens">{i18next.t("general:Tokens")}</Link>,
+        "/tokens"
+      ));
+
+      res.push(Setting.getItem(<Link to="/sessions">{i18next.t("general:Sessions")}</Link>,
+        "/sessions"
+      ));
+
+      res.push(Setting.getItem(<Link to="/webhooks">{i18next.t("general:Webhooks")}</Link>,
+        "/webhooks"
+      ));
+
+      res.push(Setting.getItem(<Link to="/syncers">{i18next.t("general:Syncers")}</Link>,
+        "/syncers"
+      ));
+
+      res.push(Setting.getItem(<Link to="/certs">{i18next.t("general:Certs")}</Link>,
+        "/certs"
+      ));
+
+      if (Conf.EnableExtraPages) {
+        res.push(Setting.getItem(<Link to="/products">{i18next.t("general:Products")}</Link>,
+          "/products"
+        ));
+
+        res.push(Setting.getItem(<Link to="/payments">{i18next.t("general:Payments")}</Link>,
+          "/payments"
+        ));
+
+        res.push(Setting.getItem(<Link to="/sysinfo">{i18next.t("general:System Info")}</Link>,
+          "/sysinfo"
+        ));
+      }
+      res.push(Setting.getItem(<a target="_blank" rel="noreferrer"
+        href={Setting.isLocalhost() ? `${Setting.ServerUrl}/swagger` : "/swagger"}>{i18next.t("general:Swagger")}</a>,
+      "/swagger"
+      ));
+    }
+
+    return res;
+  }
+
+  renderHomeIfLoggedIn(component) {
+    if (this.state.account !== null && this.state.account !== undefined) {
+      return <Redirect to="/" />;
+    } else {
+      return component;
+    }
+  }
+
+  renderLoginIfNotLoggedIn(component) {
+    if (this.state.account === null) {
+      sessionStorage.setItem("from", window.location.pathname);
+      return <Redirect to="/login" />;
+    } else if (this.state.account === undefined) {
+      return null;
+    } else {
+      return component;
+    }
+  }
+
+  isStartPages() {
+    return window.location.pathname.startsWith("/login") ||
+        window.location.pathname.startsWith("/signup") ||
+        window.location.pathname === "/";
+  }
+
+  renderRouter() {
+    return (
+      <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} onChangeTheme={this.setTheme} {...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="/adapters" render={(props) => this.renderLoginIfNotLoggedIn(<AdapterListPage account={this.state.account} {...props} />)} />
+        <Route exact path="/adapters/:organizationName/:adapterName" render={(props) => this.renderLoginIfNotLoggedIn(<AdapterEditPage account={this.state.account} {...props} />)} />
+        <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)} />
+        <Route exact path="/providers/:organizationName/: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/:organizationName/: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/:organizationName/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)} />
+        <Route exact path="/ldap/sync/:organizationName/: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="/sessions" render={(props) => this.renderLoginIfNotLoggedIn(<SessionListPage 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="/chats" render={(props) => this.renderLoginIfNotLoggedIn(<ChatListPage account={this.state.account} {...props} />)} />
+        <Route exact path="/chats/:chatName" render={(props) => this.renderLoginIfNotLoggedIn(<ChatEditPage account={this.state.account} {...props} />)} />
+        <Route exact path="/chat" render={(props) => this.renderLoginIfNotLoggedIn(<ChatPage account={this.state.account} {...props} />)} />
+        <Route exact path="/messages" render={(props) => this.renderLoginIfNotLoggedIn(<MessageListPage account={this.state.account} {...props} />)} />
+        <Route exact path="/messages/:messageName" render={(props) => this.renderLoginIfNotLoggedIn(<MessageEditPage 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="/sysinfo" render={(props) => this.renderLoginIfNotLoggedIn(<SystemInfo account={this.state.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>
+    );
+  }
+
+  onClose = () => {
+    this.setState({
+      menuVisible: false,
+    });
+  };
+
+  showMenu = () => {
+    this.setState({
+      menuVisible: true,
+    });
+  };
+
+  renderContent() {
+    const onClick = ({key}) => {
+      if (key === "/swagger") {
+        window.open(Setting.isLocalhost() ? `${Setting.ServerUrl}/swagger` : "/swagger", "_blank");
+      } else {
+        this.props.history.push(key);
+      }
+    };
+    return (
+      <Layout id="parent-area">
+        {/* https://github.com/ant-design/ant-design/issues/40394 ant design bug. If it will be fixed, we can delete the code for control the color of Header*/}
+        <Header style={{padding: "0", marginBottom: "3px", backgroundColor: this.state.themeAlgorithm.includes("dark") ? "black" : "white"}}>
+          {Setting.isMobile() ? null : (
+            <Link to={"/"}>
+              <div className="logo" style={{background: `url(${this.state.logo})`}} />
+            </Link>
+          )}
+          {Setting.isMobile() ?
+            <React.Fragment>
+              <Drawer title={i18next.t("general:Close")} placement="left" visible={this.state.menuVisible} onClose={this.onClose}>
+                <Menu
+                  items={this.getMenuItems()}
+                  mode={"inline"}
+                  selectedKeys={[this.state.selectedMenuKey]}
+                  style={{lineHeight: "64px"}}
+                  onClick={this.onClose}
+                >
+                </Menu>
+              </Drawer>
+              <Button icon={<BarsOutlined />} onClick={this.showMenu} type="text">
+                {i18next.t("general:Menu")}
+              </Button>
+            </React.Fragment> :
+            <Menu
+              onClick={onClick}
+              items={this.getMenuItems()}
+              mode={"horizontal"}
+              selectedKeys={[this.state.selectedMenuKey]}
+              style={{position: "absolute", left: "145px", right: "260px"}}
+            />
+          }
+          {
+            this.renderAccountMenu()
+          }
+        </Header>
+        <Content style={{display: "flex", flexDirection: "column"}} >
+          {(Setting.isMobile() || window.location.pathname === "/chat") ?
+            this.renderRouter() :
+            <Card className="content-warp-card">
+              {this.renderRouter()}
+            </Card>
+          }
+        </Content>
+        {this.renderFooter()}
+      </Layout>
+    );
+  }
+
+  renderFooter() {
+    return (
+      <React.Fragment>
+        {!this.state.account ? null : <div style={{display: "none"}} id="CasdoorApplicationName" value={this.state.account.signupApplication} />}
+        <Footer id="footer" style={
+          {
+            textAlign: "center",
+          }
+        }>
+            Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={this.state.logo} /></a>
+        </Footer>
+      </React.Fragment>
+    );
+  }
+
+  isDoorPages() {
+    return this.isEntryPages() || window.location.pathname.startsWith("/callback");
+  }
+
+  isEntryPages() {
+    return window.location.pathname.startsWith("/signup") ||
+        window.location.pathname.startsWith("/login") ||
+        window.location.pathname.startsWith("/forget") ||
+        window.location.pathname.startsWith("/prompt") ||
+        window.location.pathname.startsWith("/cas") ||
+        window.location.pathname.startsWith("/auto-signup");
+  }
+
+  renderPage() {
+    if (this.isDoorPages()) {
+      return (
+        <Layout id="parent-area">
+          <Content style={{display: "flex", justifyContent: "center"}}>
+            {
+              this.isEntryPages() ?
+                <EntryPage
+                  account={this.state.account}
+                  theme={this.state.themeData}
+                  onUpdateAccount={(account) => {
+                    this.onUpdateAccount(account);
+                  }}
+                  updataThemeData={this.setTheme}
+                /> :
+                <Switch>
+                  <Route exact path="/callback" component={AuthCallback} />
+                  <Route exact path="/callback/saml" component={SamlCallback} />
+                  <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>
+            }
+          </Content>
+          {
+            this.renderFooter()
+          }
+        </Layout>
+      );
+    }
+
+    return (
+      <React.Fragment>
+        {/* { */}
+        {/*   this.renderBanner() */}
+        {/* } */}
+        <FloatButton.BackTop />
+        <CustomGithubCorner />
+        {
+          this.renderContent()
+        }
+      </React.Fragment>
+    );
+  }
+
+  renderBanner() {
+    if (!Conf.IsDemoMode) {
+      return null;
+    }
+
+    const language = Setting.getLanguage();
+    if (language === "en" || language === "zh") {
+      return null;
+    }
+
+    return (
+      <Alert type="info" banner showIcon={false} closable message={
+        <div style={{textAlign: "center"}}>
+          <InfoCircleFilled style={{color: "rgb(87,52,211)"}} />
+          &nbsp;&nbsp;
+          {i18next.t("general:Found some texts still not translated? Please help us translate at")}
+          &nbsp;
+          <a target="_blank" rel="noreferrer" href={"https://crowdin.com/project/casdoor-site"}>
+            Crowdin
+          </a>
+          &nbsp;!&nbsp;🙏
+        </div>
+      } />
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {(this.state.account === undefined || this.state.account === null) ?
+          <Helmet>
+            <link rel="icon" href={"https://cdn.casdoor.com/static/favicon.png"} />
+          </Helmet> :
+          <Helmet>
+            <title>{this.state.account.organization?.displayName}</title>
+            <link rel="icon" href={this.state.account.organization?.favicon} />
+          </Helmet>
+        }
+        <ConfigProvider theme={{
+          token: {
+            colorPrimary: this.state.themeData.colorPrimary,
+            colorInfo: this.state.themeData.colorPrimary,
+            borderRadius: this.state.themeData.borderRadius,
+          },
+          algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
+        }}>
+          <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
+            {
+              this.renderPage()
+            }
+          </StyleProvider>
+        </ConfigProvider>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withRouter(withTranslation()(App));

web/src/App.less

@@ -0,0 +1,136 @@
+/* stylelint-disable at-rule-name-case */
+/* stylelint-disable selector-class-pattern */
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+img {
+  border-style: none;
+  vertical-align: middle;
+}
+
+#root {
+  height: 100%;
+}
+
+#parent-area {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.panel-logo {
+  margin-bottom: 30px;
+}
+
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  width: 45px;
+  height: 64px;
+  float: right;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5f5f5 !important;
+  }
+}
+
+.rightDropDown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  float: right;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f5f5f5;
+    color: black;
+  }
+}
+
+.content-warp-card {
+  box-shadow: 0 1px 5px 0 rgb(51 51 51 / 14%);
+  margin: 5px;
+  flex: 1;
+  align-items: stretch;
+}
+
+.side-image {
+  display: none;
+
+  @media screen and (min-width: 1100px) {
+    display: block;
+    position: relative;
+    width: 500px;
+    border-right: 0.5px solid rgb(196 203 215);
+  }
+}
+
+.forget-content {
+  padding: 10px 100px 20px;
+  margin: 30px auto;
+  border: 2px solid #fff;
+  border-radius: 7px;
+  background-color: rgb(255 255 255);
+  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
+}
+
+.login-panel {
+  margin-top: 50px;
+  margin-bottom: 50px;
+  display: flex;
+  background-color: rgb(255 255 255);
+  overflow: hidden;
+}
+
+.login-form {
+  text-align: center;
+  padding: 30px;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0 auto;
+  position: relative;
+}
+
+.loginBackground {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  background: #fff no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+
+.ant-menu-horizontal {
+  border-bottom: none !important;
+}

web/src/App.test.js

@@ -0,0 +1,25 @@
+// 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 {render} from "@testing-library/react";
+import App from "./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

@@ -0,0 +1,936 @@
+// 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, ConfigProvider, Input, Popover, Radio, Result, 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";
+import * as Conf from "./Conf";
+import * as ProviderBackend from "./backend/ProviderBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as ResourceBackend from "./backend/ResourceBackend";
+import SignupPage from "./auth/SignupPage";
+import LoginPage from "./auth/LoginPage";
+import i18next from "i18next";
+import UrlTable from "./table/UrlTable";
+import ProviderTable from "./table/ProviderTable";
+import SignupTable from "./table/SignupTable";
+import PromptPage from "./auth/PromptPage";
+import copy from "copy-to-clipboard";
+
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+import ThemeEditor from "./common/theme/ThemeEditor";
+
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/htmlmixed/htmlmixed");
+require("codemirror/mode/xml/xml");
+require("codemirror/mode/css/css");
+
+const {Option} = Select;
+
+const template = `<style>
+  .login-panel{
+    padding: 40px 70px 0 70px;
+    border-radius: 10px;
+    background-color: #ffffff;
+    box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.20);
+}
+</style>`;
+
+const previewGrid = Setting.isMobile() ? 22 : 11;
+const previewWidth = Setting.isMobile() ? "110%" : "90%";
+
+const sideTemplate = `<style>
+  .left-model{
+    text-align: center;
+    padding: 30px;
+    background-color: #8ca0ed;
+    position: absolute;
+    transform: none;
+    width: 100%;
+    height: 100%;
+  }
+  .side-logo{
+    display: flex;
+    align-items: center;
+  }
+  .side-logo span {
+    font-family: Montserrat, sans-serif;
+    font-weight: 900;
+    font-size: 2.4rem;
+    line-height: 1.3;
+    margin-left: 16px;
+    color: #404040;
+  }
+  .img{
+    max-width: none;
+    margin: 41px 0 13px;
+  }
+</style>
+<div class="left-model">
+  <span class="side-logo"> <img src="https://cdn.casbin.org/img/casdoor-logo_1185x256.png" alt="Casdoor" style="width: 120px"> 
+    <span>SSO</span> 
+  </span>
+  <div class="img">
+    <img src="https://cdn.casbin.org/img/casbin.svg" alt="Casdoor"/>
+  </div>
+</div>
+`;
+
+class ApplicationEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      owner: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      applicationName: props.match.params.applicationName,
+      application: null,
+      organizations: [],
+      certs: [],
+      providers: [],
+      uploading: false,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+      samlMetadata: null,
+      isAuthorized: true,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getApplication();
+    this.getOrganizations();
+    this.getCerts();
+    this.getProviders();
+    this.getSamlMetadata();
+  }
+
+  getApplication() {
+    ApplicationBackend.getApplication("admin", this.state.applicationName)
+      .then((application) => {
+        if (application.grantTypes === null || application.grantTypes === undefined || application.grantTypes.length === 0) {
+          application.grantTypes = ["authorization_code"];
+        }
+        this.setState({
+          application: application,
+        });
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        if (res?.status === "error") {
+          this.setState({
+            isAuthorized: false,
+          });
+        } else {
+          this.setState({
+            organizations: (res.msg === undefined) ? res : [],
+          });
+        }
+      });
+  }
+
+  getCerts() {
+    CertBackend.getCerts("admin")
+      .then((res) => {
+        this.setState({
+          certs: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getProviders() {
+    ProviderBackend.getProviders(this.state.owner).then((res => {
+      this.setState({
+        providers: res,
+      });
+    }));
+  }
+
+  getSamlMetadata() {
+    ApplicationBackend.getSamlMetadata("admin", this.state.applicationName)
+      .then((res) => {
+        this.setState({
+          samlMetadata: res,
+        });
+      });
+  }
+
+  parseApplicationField(key, value) {
+    if (["expireInHours", "refreshExpireInHours", "offset"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateApplicationField(key, value) {
+    value = this.parseApplicationField(key, value);
+
+    const application = this.state.application;
+    application[key] = value;
+    this.setState({
+      application: application,
+    });
+  }
+
+  handleUpload(info) {
+    if (info.file.type !== "text/html") {
+      Setting.showMessage("error", i18next.t("application:Please select a HTML file"));
+      return;
+    }
+    this.setState({uploading: true});
+    const fullFilePath = `termsOfUse/${this.state.application.owner}/${this.state.application.name}.html`;
+    ResourceBackend.uploadResource(this.props.account.owner, this.props.account.name, "termsOfUse", "ApplicationEditPage", fullFilePath, info.file)
+      .then(res => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("application:File uploaded successfully"));
+          this.updateApplicationField("termsOfUse", res.data);
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+        }
+      }).finally(() => {
+        this.setState({uploading: false});
+      });
+  }
+
+  renderApplication() {
+    return (
+      <Card size="small" title={
+        <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}
+        </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: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);
+            }} />
+          </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.application.displayName} onChange={e => {
+              this.updateApplicationField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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}>
+                {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);
+                }} />
+              </Col>
+            </Row>
+            <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"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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%"}} disabled={!Setting.isAdminUser(this.props.account)} 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}>
+            {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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);})}>
+              {
+                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}>
+            {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);}}
+            />
+          </Col>
+        </Row>
+        <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);})}
+              options={["JWT", "JWT-Empty"].map((item) => Setting.getOption(item, item))}
+            />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable password"), i18next.t("application:Enable password - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enablePassword} onChange={checked => {
+              this.updateApplicationField("enablePassword", checked);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Auto signin"), i18next.t("application:Auto signin - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enableAutoSignin} onChange={checked => {
+              this.updateApplicationField("enableAutoSignin", checked);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable Email linking"), i18next.t("application:Enable Email linking - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enableLinkWithEmail} onChange={checked => {
+              this.updateApplicationField("enableLinkWithEmail", 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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("signup:Terms of Use"), i18next.t("signup: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}>{i18next.t("general:Click to Upload")}</Button>
+            </Upload>
+          </Col>
+        </Row>
+        <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} >
+            <Popover placement="right" content={
+              <div style={{width: "900px", height: "300px"}} >
+                <CodeMirror
+                  value={this.state.application.signupHtml}
+                  options={{mode: "htmlmixed", theme: "material-darker"}}
+                  onBeforeChange={(editor, data, value) => {
+                    this.updateApplicationField("signupHtml", value);
+                  }}
+                />
+              </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);
+              }} />
+            </Popover>
+          </Col>
+        </Row>
+        <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} >
+            <Popover placement="right" content={
+              <div style={{width: "900px", height: "300px"}} >
+                <CodeMirror
+                  value={this.state.application.signinHtml}
+                  options={{mode: "htmlmixed", theme: "material-darker"}}
+                  onBeforeChange={(editor, data, value) => {
+                    this.updateApplicationField("signinHtml", value);
+                  }}
+                />
+              </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);
+              }} />
+            </Popover>
+          </Col>
+        </Row>
+        <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>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:SAML reply URL"), i18next.t("application:Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined />} value={this.state.application.samlReplyUrl} onChange={e => {
+              this.updateApplicationField("samlReplyUrl", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable SAML compression"), i18next.t("application:Enable SAML compression - 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}>
+            <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}>
+            {Setting.getLabel(i18next.t("general:Providers"), i18next.t("general:Providers - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <ProviderTable
+              title={i18next.t("general:Providers")}
+              table={this.state.application.providers}
+              providers={this.state.providers}
+              application={this.state.application}
+              onUpdateTable={(value) => {this.updateApplicationField("providers", value);}}
+            />
+          </Col>
+        </Row>
+        <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.renderSignupSigninPreview()
+          }
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Background URL"), i18next.t("application:Background URL - Tooltip"))} :
+          </Col>
+          <Col span={22} style={(Setting.isMobile()) ? {maxWidth: "100%"} : {}}>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input prefix={<LinkOutlined />} value={this.state.application.formBackgroundUrl} onChange={e => {
+                  this.updateApplicationField("formBackgroundUrl", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {i18next.t("general:Preview")}:
+              </Col>
+              <Col span={22} >
+                <a target="_blank" rel="noreferrer" href={this.state.application.formBackgroundUrl}>
+                  <img src={this.state.application.formBackgroundUrl} alt={this.state.application.formBackgroundUrl} height={90} style={{marginBottom: "20px"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Form CSS"), i18next.t("application:Form CSS - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <Popover placement="right" content={
+              <div style={{width: "900px", height: "300px"}} >
+                <CodeMirror value={this.state.application.formCss === "" ? template : this.state.application.formCss}
+                  options={{mode: "css", theme: "material-darker"}}
+                  onBeforeChange={(editor, data, value) => {
+                    this.updateApplicationField("formCss", value);
+                  }}
+                />
+              </div>
+            } title={i18next.t("application:Form CSS - Edit")} trigger="click">
+              <Input value={this.state.application.formCss} style={{marginBottom: "10px"}} onChange={e => {
+                this.updateApplicationField("formCss", e.target.value);
+              }} />
+            </Popover>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("application:Form position"), i18next.t("application:Form position - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Row style={{marginTop: "20px"}} >
+              <Radio.Group onChange={e => {this.updateApplicationField("formOffset", e.target.value);}} value={this.state.application.formOffset}>
+                <Radio.Button value={1}>{i18next.t("application:Left")}</Radio.Button>
+                <Radio.Button value={2}>{i18next.t("application:Center")}</Radio.Button>
+                <Radio.Button value={3}>{i18next.t("application:Right")}</Radio.Button>
+                <Radio.Button value={4}>
+                  {i18next.t("application:Enable side panel")}
+                </Radio.Button>
+              </Radio.Group>
+            </Row>
+            {this.state.application.formOffset === 4 ?
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 3}>
+                  {Setting.getLabel(i18next.t("application:Side panel HTML"), i18next.t("application:Side panel HTML - Tooltip"))} :
+                </Col>
+                <Col span={21} >
+                  <Popover placement="right" content={
+                    <div style={{width: "900px", height: "300px"}} >
+                      <CodeMirror value={this.state.application.formSideHtml === "" ? sideTemplate : this.state.application.formSideHtml}
+                        options={{mode: "htmlmixed", theme: "material-darker"}}
+                        onBeforeChange={(editor, data, value) => {
+                          this.updateApplicationField("formSideHtml", value);
+                        }}
+                      />
+                    </div>
+                  } title={i18next.t("application:Side panel HTML - Edit")} trigger="click">
+                    <Input value={this.state.application.formSideHtml} style={{marginBottom: "10px"}} onChange={e => {
+                      this.updateApplicationField("formSideHtml", e.target.value);
+                    }} />
+                  </Popover>
+                </Col>
+              </Row>
+              : null}
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("theme:Theme"), i18next.t("theme:Theme - Tooltip"))} :
+          </Col>
+          <Col span={22} style={{marginTop: "5px"}}>
+            <Row>
+              <Radio.Group value={this.state.application.themeData?.isEnabled ?? false} onChange={e => {
+                const {_, ...theme} = this.state.application.themeData ?? {...Conf.ThemeDefault, isEnabled: false};
+                this.updateApplicationField("themeData", {...theme, isEnabled: e.target.value});
+              }} >
+                <Radio.Button value={false}>{i18next.t("application:Follow organization theme")}</Radio.Button>
+                <Radio.Button value={true}>{i18next.t("theme:Customize theme")}</Radio.Button>
+              </Radio.Group>
+            </Row>
+            {
+              this.state.application.themeData?.isEnabled ?
+                <Row style={{marginTop: "20px"}}>
+                  <ThemeEditor themeData={this.state.application.themeData} onThemeChange={(_, nextThemeData) => {
+                    const {isEnabled} = this.state.application.themeData ?? {...Conf.ThemeDefault, isEnabled: false};
+                    this.updateApplicationField("themeData", {...nextThemeData, isEnabled});
+                  }} />
+                </Row> : null
+            }
+          </Col>
+        </Row>
+        {
+          !this.state.application.enableSignUp ? null : (
+            <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);}}
+                />
+              </Col>
+            </Row>
+          )
+        }
+        <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.renderPromptPreview()
+          }
+        </Row>
+      </Card>
+    );
+  }
+
+  renderSignupSigninPreview() {
+    const themeData = this.state.application.themeData ?? Conf.ThemeDefault;
+    let signUpUrl = `/signup/${this.state.application.name}`;
+    const signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
+    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "97%", width: "100%", background: "rgba(0,0,0,0.4)"};
+    if (!this.state.application.enablePassword) {
+      signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
+    }
+
+    return (
+      <React.Fragment>
+        <Col span={previewGrid}>
+          <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 />
+          <ConfigProvider theme={{
+            token: {
+              colorPrimary: themeData.colorPrimary,
+              colorInfo: themeData.colorPrimary,
+              borderRadius: themeData.borderRadius,
+            },
+          }}>
+            <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
+              {
+                this.state.application.enablePassword ? (
+                  <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                    <SignupPage application={this.state.application} preview = "auto" />
+                  </div>
+                ) : (
+                  <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                    <LoginPage type={"login"} mode={"signup"} application={this.state.application} preview = "auto" />
+                  </div>
+                )
+              }
+              <div style={{overflow: "auto", ...maskStyle}} />
+            </div>
+          </ConfigProvider>
+        </Col>
+        <Col span={previewGrid}>
+          <Button style={{marginBottom: "10px", marginTop: Setting.isMobile() ? "15px" : "0"}} 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 />
+          <ConfigProvider theme={{
+            token: {
+              colorPrimary: themeData.colorPrimary,
+              colorInfo: themeData.colorPrimary,
+              borderRadius: themeData.borderRadius,
+            },
+          }}>
+            <div style={{position: "relative", width: previewWidth, border: "1px solid rgb(217,217,217)", boxShadow: "10px 10px 5px #888888", overflow: "auto"}}>
+              <div className="loginBackground" style={{backgroundImage: `url(${this.state.application?.formBackgroundUrl})`, overflow: "auto"}}>
+                <LoginPage type={"login"} mode={"signin"} application={this.state.application} preview = "auto" />
+              </div>
+              <div style={{overflow: "auto", ...maskStyle}} />
+            </div>
+          </ConfigProvider>
+        </Col>
+      </React.Fragment>
+    );
+  }
+
+  renderPromptPreview() {
+    const themeData = this.state.application.themeData ?? Conf.ThemeDefault;
+    const promptUrl = `/prompt/${this.state.application.name}`;
+    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
+    return (
+      <Col span={previewGrid}>
+        <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 />
+        <ConfigProvider theme={{
+          token: {
+            colorPrimary: themeData.colorPrimary,
+            colorInfo: themeData.colorPrimary,
+            borderRadius: themeData.borderRadius,
+          },
+        }}>
+          <div style={{position: "relative", width: previewWidth, 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>
+        </ConfigProvider>
+      </Col>
+    );
+  }
+
+  submitApplicationEdit(willExist) {
+    const application = Setting.deepCopy(this.state.application);
+    application.providers = application.providers?.filter(provider => this.state.providers.map(provider => provider.name).includes(provider.name));
+
+    ApplicationBackend.updateApplication("admin", this.state.applicationName, application)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            applicationName: this.state.application.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/applications");
+          } else {
+            this.props.history.push(`/applications/${this.state.application.organization}/${this.state.application.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateApplicationField("name", this.state.applicationName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteApplication() {
+    ApplicationBackend.deleteApplication(this.state.application)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/applications");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    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 or logged in status invalid.")}
+          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
+        />
+      );
+    }
+
+    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}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ApplicationEditPage;

web/src/ApplicationListPage.js

@@ -0,0 +1,301 @@
+// 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, Col, List, Row, Table, Tooltip} from "antd";
+import {EditOutlined} from "@ant-design/icons";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ApplicationBackend from "./backend/ApplicationBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class ApplicationListPage extends BaseListPage {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.account.owner,
+    });
+  }
+
+  newApplication() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.applicationName,
+      name: `application_${randomName}`,
+      organization: this.state.organizationName,
+      createdTime: moment().format(),
+      displayName: `New Application - ${randomName}`,
+      logo: `${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`,
+      enablePassword: true,
+      enableSignUp: true,
+      enableSigninSession: false,
+      enableCodeSignin: false,
+      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"},
+        {name: "Display name", visible: true, required: true, rule: "None"},
+        {name: "Password", visible: true, required: true, rule: "None"},
+        {name: "Confirm password", visible: true, required: true, rule: "None"},
+        {name: "Email", visible: true, required: true, rule: "Normal"},
+        {name: "Phone", visible: true, required: true, rule: "None"},
+        {name: "Agreement", visible: true, required: true, rule: "None"},
+      ],
+      cert: "cert-built-in",
+      redirectUris: ["http://localhost:9000/callback"],
+      tokenFormat: "JWT",
+      expireInHours: 24 * 7,
+      formOffset: 2,
+    };
+  }
+
+  addApplication() {
+    const newApplication = this.newApplication();
+    ApplicationBackend.addApplication(newApplication)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/applications/${newApplication.organization}/${newApplication.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteApplication(i) {
+    ApplicationBackend.deleteApplication(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(applications) {
+    const columns = [
+      {
+        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={`/applications/${record.organization}/${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: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        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",
+        sorter: true,
+        ...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"),
+        // width: '600px',
+        render: (text, record, index) => {
+          const providers = text;
+          if (providers.length === 0) {
+            return `(${i18next.t("general:empty")})`;
+          }
+
+          const half = Math.floor((providers.length + 1) / 2);
+
+          const getList = (providers) => {
+            return (
+              <List
+                size="small"
+                locale={{emptyText: " "}}
+                dataSource={providers}
+                renderItem={(providerItem, i) => {
+                  return (
+                    <List.Item>
+                      <div style={{display: "inline"}}>
+                        <Tooltip placement="topLeft" title="Edit">
+                          <Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/providers/${record.organization}/${providerItem.name}`)} />
+                        </Tooltip>
+                        <Link to={`/providers/${record.organization}/${providerItem.name}`}>
+                          {providerItem.name}
+                        </Link>
+                      </div>
+                    </List.Item>
+                  );
+                }}
+              />
+            );
+          };
+
+          return (
+            <div>
+              <Row>
+                <Col span={12}>
+                  {
+                    getList(providers.slice(0, half))
+                  }
+                </Col>
+                <Col span={12}>
+                  {
+                    getList(providers.slice(half))
+                  }
+                </Col>
+              </Row>
+            </div>
+          );
+        },
+      },
+      {
+        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(`/applications/${record.organization}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteApplication(index)}
+                disabled={record.name === "app-built-in"}
+              >
+              </PopconfirmModal>
+            </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={applications} rowKey={(record) => `${record.owner}/${record.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>
+    );
+  }
+
+  fetch = (params = {}) => {
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    this.setState({loading: true});
+    (Setting.isAdminUser(this.props.account) ? ApplicationBackend.getApplications("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder) :
+      ApplicationBackend.getApplicationsByOrganization("admin", this.state.organizationName, 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ApplicationListPage;

web/src/BaseListPage.js

@@ -0,0 +1,152 @@
+// 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, Input, Result, Space} from "antd";
+import {SearchOutlined} from "@ant-design/icons";
+import Highlighter from "react-highlight-words";
+import i18next from "i18next";
+
+class BaseListPage extends React.Component {
+  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});
+  }
+
+  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())
+        : "",
+    onFilterDropdownOpenChange: 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});
+  };
+
+  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,
+    });
+  };
+
+  render() {
+    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 or logged in status invalid.")}
+          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
+        />
+      );
+    }
+
+    return (
+      <div>
+        {
+          this.renderTable(this.state.data)
+        }
+      </div>
+    );
+  }
+}
+
+export default BaseListPage;

web/src/CertEditPage.js

@@ -0,0 +1,272 @@
+// 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, 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;
+
+class CertEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      certName: props.match.params.certName,
+      cert: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getCert();
+  }
+
+  getCert() {
+    CertBackend.getCert("admin", this.state.certName)
+      .then((cert) => {
+        this.setState({
+          cert: cert,
+        });
+      });
+  }
+
+  parseCertField(key, value) {
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateCertField(key, value) {
+    value = this.parseCertField(key, value);
+
+    const cert = this.state.cert;
+    cert[key] = value;
+    this.setState({
+      cert: cert,
+    });
+  }
+
+  renderCert() {
+    const editorWidth = Setting.isMobile() ? 22 : 9;
+    return (
+      <Card size="small" title={
+        <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}
+        </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:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.cert.name} onChange={e => {
+              this.updateCertField("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.cert.displayName} onChange={e => {
+              this.updateCertField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider: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);
+            })}>
+              {
+                [
+                  {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}>
+            {Setting.getLabel(i18next.t("provider: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);
+            })}>
+              {
+                [
+                  {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}>
+            {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);
+            })}>
+              {
+                [
+                  {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}>
+            {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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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={editorWidth} >
+            <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 certificate")}
+            </Button>
+            <Button type="primary" onClick={() => {
+              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 certificate")}
+            </Button>
+            <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}>
+            {Setting.getLabel(i18next.t("cert:Private key"), i18next.t("cert:Private key - Tooltip"))} :
+          </Col>
+          <Col span={editorWidth} >
+            <Button style={{marginRight: "10px", marginBottom: "10px"}} onClick={() => {
+              copy(this.state.cert.privateKey);
+              Setting.showMessage("success", i18next.t("cert:Private key copied to clipboard successfully"));
+            }}
+            >
+              {i18next.t("cert:Copy private key")}
+            </Button>
+            <Button type="primary" onClick={() => {
+              const blob = new Blob([this.state.cert.privateKey], {type: "text/plain;charset=utf-8"});
+              FileSaver.saveAs(blob, "token_jwt_key.key");
+            }}
+            >
+              {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);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitCertEdit(willExist) {
+    const cert = Setting.deepCopy(this.state.cert);
+    CertBackend.updateCert(this.state.cert.owner, this.state.certName, cert)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            certName: this.state.cert.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/certs");
+          } else {
+            this.props.history.push(`/certs/${this.state.cert.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateCertField("name", this.state.certName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteCert() {
+    CertBackend.deleteCert(this.state.cert)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/certs");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.cert !== null ? this.renderCert() : null
+        }
+        <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}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CertEditPage;

web/src/CertListPage.js

@@ -0,0 +1,242 @@
+// 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as CertBackend from "./backend/CertBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class CertListPage extends BaseListPage {
+  newCert() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.certname,
+      name: `cert_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Cert - ${randomName}`,
+      scope: "JWT",
+      type: "x509",
+      cryptoAlgorithm: "RS256",
+      bitSize: 4096,
+      expireInYears: 20,
+      certificate: "",
+      privateKey: "",
+    };
+  }
+
+  addCert() {
+    const newCert = this.newCert();
+    CertBackend.addCert(newCert)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/certs/${newCert.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteCert(i) {
+    CertBackend.deleteCert(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(certs) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...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",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Display name"),
+        dataIndex: "displayName",
+        key: "displayName",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("provider:Scope"),
+        dataIndex: "scope",
+        key: "scope",
+        filterMultiple: false,
+        filters: [
+          {text: "JWT", value: "JWT"},
+        ],
+        width: "110px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        filterMultiple: false,
+        filters: [
+          {text: "x509", value: "x509"},
+        ],
+        width: "110px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("cert:Crypto algorithm"),
+        dataIndex: "cryptoAlgorithm",
+        key: "cryptoAlgorithm",
+        filterMultiple: false,
+        filters: [
+          {text: "RS256", value: "RS256"},
+        ],
+        width: "190px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("cert:Bit size"),
+        dataIndex: "bitSize",
+        key: "bitSize",
+        width: "130px",
+        sorter: true,
+        ...this.getColumnSearchProps("bitSize"),
+      },
+      {
+        title: i18next.t("cert:Expire in years"),
+        dataIndex: "expireInYears",
+        key: "expireInYears",
+        width: "170px",
+        sorter: true,
+        ...this.getColumnSearchProps("expireInYears"),
+      },
+      {
+        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(`/certs/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteCert(index)}
+              >
+              </PopconfirmModal>
+            </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={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>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.category !== undefined && params.category !== null) {
+      field = "category";
+      value = params.category;
+    } else if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    CertBackend.getCerts("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default CertListPage;

web/src/ChatBox.js

@@ -0,0 +1,199 @@
+// Copyright 2023 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 {Avatar, Input, List, Spin} from "antd";
+import {CopyOutlined, DislikeOutlined, LikeOutlined, SendOutlined} from "@ant-design/icons";
+import i18next from "i18next";
+
+const {TextArea} = Input;
+
+class ChatBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: "",
+    };
+
+    this.listContainerRef = React.createRef();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.messages !== this.props.messages && this.props.messages !== null) {
+      this.scrollToListItem(this.props.messages.length);
+    }
+  }
+
+  handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+
+      if (this.state.inputValue !== "") {
+        this.send(this.state.inputValue);
+        this.setState({inputValue: ""});
+      }
+    }
+  };
+
+  scrollToListItem(index) {
+    const listContainerElement = this.listContainerRef.current;
+
+    if (!listContainerElement) {
+      return;
+    }
+
+    const targetItem = listContainerElement.querySelector(
+      `#chatbox-list-item-${index}`
+    );
+
+    if (!targetItem) {
+      return;
+    }
+
+    const scrollDistance = targetItem.offsetTop - listContainerElement.offsetTop;
+
+    listContainerElement.scrollTo({
+      top: scrollDistance,
+      behavior: "smooth",
+    });
+  }
+
+  send = (text) => {
+    this.props.sendMessage(text);
+    this.setState({inputValue: ""});
+  };
+
+  renderList() {
+    if (this.props.messages === undefined || this.props.messages === null) {
+      return (
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "20%"}} />
+        </div>
+      );
+    }
+
+    return (
+      <div ref={this.listContainerRef} style={{position: "relative", maxHeight: "calc(100vh - 140px)", overflowY: "auto"}}>
+        <List
+          itemLayout="horizontal"
+          dataSource={[...this.props.messages, {}]}
+          renderItem={(item, index) => {
+            if (Object.keys(item).length === 0 && item.constructor === Object) {
+              return <List.Item id={`chatbox-list-item-${index}`} style={{
+                height: "160px",
+                backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
+                borderBottom: "1px solid rgb(229, 229, 229)",
+                position: "relative",
+              }} />;
+            }
+
+            return (
+              <List.Item id={`chatbox-list-item-${index}`} style={{
+                backgroundColor: index % 2 === 0 ? "white" : "rgb(247,247,248)",
+                borderBottom: "1px solid rgb(229, 229, 229)",
+                position: "relative",
+              }}>
+                <div style={{width: "800px", margin: "0 auto", position: "relative"}}>
+                  <List.Item.Meta
+                    avatar={<Avatar style={{width: "30px", height: "30px", borderRadius: "3px"}} src={item.author === `${this.props.account.owner}/${this.props.account.name}` ? this.props.account.avatar : "https://cdn.casbin.com/casdoor/resource/built-in/admin/gpt.png"} />}
+                    title={<div style={{fontSize: "16px", fontWeight: "normal", lineHeight: "24px", marginTop: "-15px", marginLeft: "5px", marginRight: "80px"}}>{item.text}</div>}
+                  />
+                  <div style={{position: "absolute", top: "0px", right: "0px"}}
+                  >
+                    <CopyOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                    <LikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                    <DislikeOutlined style={{color: "rgb(172,172,190)", margin: "5px"}} />
+                  </div>
+                </div>
+              </List.Item>
+            );
+          }}
+        />
+        <div style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "120px",
+          background: "linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 50%, white 100%)",
+          pointerEvents: "none",
+        }} />
+      </div>
+    );
+  }
+
+  renderInput() {
+    return (
+      <div
+        style={{
+          position: "fixed",
+          bottom: "90px",
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <div style={{position: "relative", width: "760px", marginLeft: "-280px"}}>
+          <TextArea
+            placeholder={"Send a message..."}
+            autoSize={{maxRows: 8}}
+            value={this.state.inputValue}
+            onChange={(e) => this.setState({inputValue: e.target.value})}
+            onKeyDown={this.handleKeyDown}
+            style={{
+              fontSize: "16px",
+              fontWeight: "normal",
+              lineHeight: "24px",
+              width: "770px",
+              height: "48px",
+              borderRadius: "6px",
+              borderColor: "rgb(229,229,229)",
+              boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
+              paddingLeft: "17px",
+              paddingRight: "17px",
+              paddingTop: "12px",
+              paddingBottom: "12px",
+            }}
+            suffix={<SendOutlined style={{color: "rgb(210,210,217"}} onClick={() => this.send(this.state.inputValue)} />}
+            autoComplete="off"
+          />
+          <SendOutlined
+            style={{
+              color: this.state.inputValue === "" ? "rgb(210,210,217)" : "rgb(142,142,160)",
+              position: "absolute",
+              bottom: "17px",
+              right: "17px",
+            }}
+            onClick={() => this.send(this.state.inputValue)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.renderList()
+        }
+        {
+          this.renderInput()
+        }
+      </div>
+    );
+  }
+}
+
+export default ChatBox;

web/src/ChatEditPage.js

@@ -0,0 +1,243 @@
+// Copyright 2023 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} from "antd";
+import * as ChatBackend from "./backend/ChatBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as UserBackend from "./backend/UserBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+class ChatEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      chatName: props.match.params.chatName,
+      chat: null,
+      organizations: [],
+      users: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getChat();
+    this.getOrganizations();
+  }
+
+  getChat() {
+    ChatBackend.getChat("admin", this.state.chatName)
+      .then((chat) => {
+        this.setState({
+          chat: chat,
+        });
+
+        this.getUsers(chat.organization);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getUsers(organizationName) {
+    UserBackend.getUsers(organizationName)
+      .then((res) => {
+        this.setState({
+          users: res,
+        });
+      });
+  }
+
+  parseChatField(key, value) {
+    if ([].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateChatField(key, value) {
+    value = this.parseChatField(key, value);
+
+    const chat = this.state.chat;
+    chat[key] = value;
+    this.setState({
+      chat: chat,
+    });
+  }
+
+  renderChat() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("chat:New Chat") : i18next.t("chat:Edit Chat")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitChatEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitChatEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteChat()}>{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.chat.organization} onChange={(value => {this.updateChatField("organization", value);})}
+              options={this.state.organizations.map((organization) => Setting.getOption(organization.name, organization.name))
+              } />
+          </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.chat.name} onChange={e => {
+              this.updateChatField("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.chat.displayName} onChange={e => {
+              this.updateChatField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Type"), i18next.t("provider:Type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.chat.type} onChange={(value => {
+              this.updateChatField("type", value);
+            })}
+            options={[
+              {value: "Single", name: i18next.t("chat:Single")},
+              {value: "Group", name: i18next.t("chat:Group")},
+              {value: "AI", name: i18next.t("chat:AI")},
+            ].map((item) => Setting.getOption(item.name, item.value))}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Category"), i18next.t("provider:Category - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.chat.category} onChange={e => {
+              this.updateChatField("category", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("chat:User1"), i18next.t("chat:User1 - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.chat.user1} onChange={(value => {this.updateChatField("user1", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("chat:User2"), i18next.t("chat:User2 - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.chat.user2} onChange={(value => {this.updateChatField("user2", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Users"), i18next.t("chat:Users - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select mode="tags" style={{width: "100%"}} value={this.state.chat.users}
+              onChange={(value => {this.updateChatField("users", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
+            />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitChatEdit(willExist) {
+    const chat = Setting.deepCopy(this.state.chat);
+    ChatBackend.updateChat(this.state.chat.owner, this.state.chatName, chat)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            chatName: this.state.chat.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/chats");
+          } else {
+            this.props.history.push(`/chats/${this.state.chat.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateChatField("name", this.state.chatName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteChat() {
+    ChatBackend.deleteChat(this.state.chat)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/chats");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.chat !== null ? this.renderChat() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitChatEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitChatEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteChat()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ChatEditPage;

web/src/ChatListPage.js

@@ -0,0 +1,294 @@
+// Copyright 2023 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ChatBackend from "./backend/ChatBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class ChatListPage extends BaseListPage {
+  newChat() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.applicationName,
+      name: `chat_${randomName}`,
+      createdTime: moment().format(),
+      updatedTime: moment().format(),
+      organization: this.props.account.owner,
+      displayName: `New Chat - ${randomName}`,
+      type: "Single",
+      category: "Chat Category - 1",
+      user1: `${this.props.account.owner}/${this.props.account.name}`,
+      user2: "",
+      users: [`${this.props.account.owner}/${this.props.account.name}`],
+      messageCount: 0,
+    };
+  }
+
+  addChat() {
+    const newChat = this.newChat();
+    ChatBackend.addChat(newChat)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/chats/${newChat.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteChat(i) {
+    ChatBackend.deleteChat(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(chats) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/chats/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "150px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Updated time"),
+        dataIndex: "updatedTime",
+        key: "updatedTime",
+        width: "15  0px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Display name"),
+        dataIndex: "displayName",
+        key: "displayName",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "110px",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {text: "Single", value: "Single"},
+          {text: "Group", value: "Group"},
+          {text: "AI", value: "AI"},
+        ],
+        render: (text, record, index) => {
+          return i18next.t(`chat:${text}`);
+        },
+      },
+      {
+        title: i18next.t("provider:Category"),
+        dataIndex: "category",
+        key: "category",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("category"),
+      },
+      {
+        title: i18next.t("chat:User1"),
+        dataIndex: "user1",
+        key: "user1",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("user1"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("chat:User2"),
+        dataIndex: "user2",
+        key: "user2",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("user2"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Users"),
+        dataIndex: "users",
+        key: "users",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("users"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "users");
+        },
+      },
+      {
+        title: i18next.t("chat:Message count"),
+        dataIndex: "messageCount",
+        key: "messageCount",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("messageCount"),
+      },
+      {
+        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(`/chats/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteChat(index)}
+              >
+              </PopconfirmModal>
+            </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={chats} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Chats")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addChat.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.category !== undefined && params.category !== null) {
+      field = "category";
+      value = params.category;
+    } else if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    ChatBackend.getChats("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ChatListPage;

web/src/ChatMenu.js

@@ -0,0 +1,167 @@
+// Copyright 2023 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, Menu} from "antd";
+import {DeleteOutlined, LayoutOutlined, PlusOutlined} from "@ant-design/icons";
+
+class ChatMenu extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const items = this.chatsToItems(this.props.chats);
+    const openKeys = items.map((item) => item.key);
+
+    this.state = {
+      openKeys: openKeys,
+      selectedKeys: ["0-0"],
+    };
+  }
+
+  chatsToItems(chats) {
+    const categories = {};
+    chats.forEach((chat) => {
+      if (!categories[chat.category]) {
+        categories[chat.category] = [];
+      }
+      categories[chat.category].push(chat);
+    });
+
+    const selectedKeys = this.state === undefined ? [] : this.state.selectedKeys;
+    return Object.keys(categories).map((category, index) => {
+      return {
+        key: `${index}`,
+        icon: <LayoutOutlined />,
+        label: category,
+        children: categories[category].map((chat, chatIndex) => {
+          const globalChatIndex = chats.indexOf(chat);
+          const isSelected = selectedKeys.includes(`${index}-${chatIndex}`);
+          return {
+            key: `${index}-${chatIndex}`,
+            index: globalChatIndex,
+            label: (
+              <div
+                className="menu-item-container"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                {chat.displayName}
+                {isSelected && (
+                  <DeleteOutlined
+                    className="menu-item-delete-icon"
+                    style={{
+                      visibility: "visible",
+                      color: "inherit",
+                      transition: "color 0.3s",
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = "inherit";
+                    }}
+                    onMouseDown={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.4)";
+                    }}
+                    onMouseUp={(e) => {
+                      e.currentTarget.style.color = "rgba(89,54,213,0.6)";
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (this.props.onDeleteChat) {
+                        this.props.onDeleteChat(globalChatIndex);
+                      }
+                    }}
+                  />
+                )}
+              </div>
+            ),
+          };
+        }),
+      };
+    });
+  }
+
+  onSelect = (info) => {
+    const [categoryIndex, chatIndex] = info.selectedKeys[0].split("-").map(Number);
+    const selectedItem = this.chatsToItems(this.props.chats)[categoryIndex].children[chatIndex];
+    this.setState({selectedKeys: [`${categoryIndex}-${chatIndex}`]});
+
+    if (this.props.onSelectChat) {
+      this.props.onSelectChat(selectedItem.index);
+    }
+  };
+
+  getRootSubmenuKeys(items) {
+    return items.map((item, index) => `${index}`);
+  }
+
+  onOpenChange = (keys) => {
+    const items = this.chatsToItems(this.props.chats);
+    const rootSubmenuKeys = this.getRootSubmenuKeys(items);
+    const latestOpenKey = keys.find((key) => this.state.openKeys.indexOf(key) === -1);
+
+    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+      this.setState({openKeys: keys});
+    } else {
+      this.setState({openKeys: latestOpenKey ? [latestOpenKey] : []});
+    }
+  };
+
+  render() {
+    const items = this.chatsToItems(this.props.chats);
+
+    return (
+      <>
+        <Button
+          icon={<PlusOutlined />}
+          style={{
+            width: "calc(100% - 8px)",
+            height: "40px",
+            margin: "4px",
+            borderColor: "rgb(229,229,229)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = "rgba(0, 0, 0, 0.1)";
+          }}
+          onMouseDown={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.4)";
+          }}
+          onMouseUp={(e) => {
+            e.currentTarget.style.borderColor = "rgba(89,54,213,0.6)";
+          }}
+          onClick={this.props.onAddChat}
+        >
+          New Chat
+        </Button>
+        <Menu
+          mode="inline"
+          openKeys={this.state.openKeys}
+          selectedKeys={this.state.selectedKeys}
+          onOpenChange={this.onOpenChange}
+          onSelect={this.onSelect}
+          items={items}
+        />
+      </>
+    );
+  }
+}
+
+export default ChatMenu;

web/src/ChatPage.js

@@ -0,0 +1,242 @@
+// Copyright 2023 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 {Spin} from "antd";
+import moment from "moment";
+import ChatMenu from "./ChatMenu";
+import ChatBox from "./ChatBox";
+import * as Setting from "./Setting";
+import * as ChatBackend from "./backend/ChatBackend";
+import * as MessageBackend from "./backend/MessageBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+
+class ChatPage extends BaseListPage {
+  newChat(chat) {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.applicationName,
+      name: `chat_${randomName}`,
+      createdTime: moment().format(),
+      updatedTime: moment().format(),
+      organization: this.props.account.owner,
+      displayName: `New Chat - ${randomName}`,
+      type: "AI",
+      category: chat !== undefined ? chat.category : "Chat Category - 1",
+      user1: `${this.props.account.owner}/${this.props.account.name}`,
+      user2: "",
+      users: [`${this.props.account.owner}/${this.props.account.name}`],
+      messageCount: 0,
+    };
+  }
+
+  newMessage(text) {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.messagename,
+      name: `message_${randomName}`,
+      createdTime: moment().format(),
+      organization: this.props.account.owner,
+      chat: this.state.chatName,
+      author: `${this.props.account.owner}/${this.props.account.name}`,
+      text: text,
+    };
+  }
+
+  sendMessage(text) {
+    const newMessage = this.newMessage(text);
+    MessageBackend.addMessage(newMessage)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.getMessages(this.state.chatName);
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  getMessages(chatName) {
+    MessageBackend.getChatMessages(chatName)
+      .then((messages) => {
+        this.setState({
+          messages: messages,
+        });
+
+        Setting.scrollToDiv(`chatbox-list-item-${messages.length}`);
+      });
+  }
+
+  addChat(chat) {
+    const newChat = this.newChat(chat);
+    ChatBackend.addChat(newChat)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+          this.setState({
+            chatName: newChat.name,
+            messages: null,
+          });
+          this.getMessages(newChat.name);
+
+          const {pagination} = this.state;
+          this.fetch({pagination});
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteChat(chats, i, chat) {
+    ChatBackend.deleteChat(chat)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          const data = Setting.deleteRow(this.state.data, i);
+          const j = Math.min(i, data.length - 1);
+          if (j < 0) {
+            this.setState({
+              chatName: undefined,
+              messages: undefined,
+              data: data,
+            });
+          } else {
+            const focusedChat = data[j];
+            this.setState({
+              chatName: focusedChat.name,
+              messages: null,
+              data: data,
+            });
+            this.getMessages(focusedChat.name);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(chats) {
+    const onSelectChat = (i) => {
+      const chat = chats[i];
+      this.setState({
+        chatName: chat.name,
+        messages: null,
+      });
+      this.getMessages(chat.name);
+    };
+
+    const onAddChat = () => {
+      const chat = this.state.data.filter(chat => chat.name === this.state.chatName)[0];
+      this.addChat(chat);
+    };
+
+    const onDeleteChat = (i) => {
+      const chat = chats[i];
+      this.deleteChat(chats, i, chat);
+    };
+
+    if (this.state.loading) {
+      return (
+        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "10%"}} />
+        </div>
+      );
+    }
+
+    return (
+      <div style={{display: "flex", height: "calc(100vh - 140px)"}}>
+        <div style={{width: "250px", height: "100%", backgroundColor: "white", borderRight: "1px solid rgb(245,245,245)"}}>
+          <ChatMenu chats={chats} onSelectChat={onSelectChat} onAddChat={onAddChat} onDeleteChat={onDeleteChat} />
+        </div>
+        <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative"}}>
+          {
+            this.state.messages === null ? null : (
+              <div style={{
+                position: "absolute",
+                top: -50,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundImage: "url(https://cdn.casbin.org/img/casdoor-logo_1185x256.png)",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "200px auto",
+                backgroundBlendMode: "luminosity",
+                filter: "grayscale(80%) brightness(140%) contrast(90%)",
+                opacity: 0.5,
+              }}>
+              </div>
+            )
+          }
+          <ChatBox messages={this.state.messages} sendMessage={(text) => {this.sendMessage(text);}} account={this.props.account} />
+        </div>
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.category !== undefined && params.category !== null) {
+      field = "category";
+      value = params.category;
+    } else if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    ChatBackend.getChats("admin", 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,
+          });
+
+          const chats = res.data;
+          if (this.state.chatName === undefined && chats.length > 0) {
+            const chat = chats[0];
+            this.getMessages(chat.name);
+            this.setState({
+              chatName: chat.name,
+            });
+          }
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ChatPage;

web/src/Conf.js

@@ -0,0 +1,30 @@
+// 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.
+
+export const ShowGithubCorner = false;
+export const GithubRepo = "https://github.com/casdoor/casdoor";
+export const IsDemoMode = false;
+
+export const ForceLanguage = "";
+export const DefaultLanguage = "en";
+
+export const EnableExtraPages = true;
+
+export const InitThemeAlgorithm = true;
+export const ThemeDefault = {
+  themeType: "default",
+  colorPrimary: "#5734d3",
+  borderRadius: 6,
+  isCompact: false,
+};

web/src/EntryPage.js

@@ -0,0 +1,95 @@
+// 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 {Redirect, Route, Switch} from "react-router-dom";
+import {Spin} from "antd";
+import i18next from "i18next";
+import * as Setting from "./Setting";
+import * as Conf from "./Conf";
+import SignupPage from "./auth/SignupPage";
+import SelfLoginPage from "./auth/SelfLoginPage";
+import LoginPage from "./auth/LoginPage";
+import SelfForgetPage from "./auth/SelfForgetPage";
+import ForgetPage from "./auth/ForgetPage";
+import PromptPage from "./auth/PromptPage";
+import CasLogout from "./auth/CasLogout";
+import {authConfig} from "./auth/Auth";
+
+class EntryPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      application: undefined,
+    };
+  }
+
+  renderHomeIfLoggedIn(component) {
+    if (this.props.account !== null && this.props.account !== undefined) {
+      return <Redirect to="/" />;
+    } else {
+      return component;
+    }
+  }
+
+  renderLoginIfNotLoggedIn(component) {
+    if (this.props.account === null) {
+      sessionStorage.setItem("from", window.location.pathname);
+      return <Redirect to="/login" />;
+    } else if (this.props.account === undefined) {
+      return null;
+    } else {
+      return component;
+    }
+  }
+
+  getApplicationObj() {
+    return this.state.application || null;
+  }
+
+  render() {
+    const onUpdateApplication = (application) => {
+      this.setState({
+        application: application,
+      });
+
+      const themeData = application !== null ? Setting.getThemeData(application.organizationObj, application) : Conf.ThemeDefault;
+      this.props.updataThemeData(themeData);
+    };
+
+    return (
+      <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
+        <Spin size="large" spinning={this.state.application === undefined} tip={i18next.t("login:Loading")} style={{margin: "0 auto"}} />
+        <Switch>
+          <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} applicationName={authConfig.appName} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/login/:owner" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/auto-signup/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signup"} onUpdateApplication={onUpdateApplication}{...props} />} />
+          <Route exact path="/signup/oauth/authorize" render={(props) => <SignupPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />} />
+          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"code"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
+          <Route exact path="/login/saml/authorize/:owner/:applicationName" render={(props) => <LoginPage {...this.props} application={this.state.application} type={"saml"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />} />
+          <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/prompt" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/prompt/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<PromptPage {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/cas/:owner/:casApplicationName/logout" render={(props) => this.renderHomeIfLoggedIn(<CasLogout {...this.props} application={this.state.application} onUpdateApplication={onUpdateApplication} {...props} />)} />
+          <Route exact path="/cas/:owner/:casApplicationName/login" render={(props) => {return (<LoginPage {...this.props} application={this.state.application} type={"cas"} mode={"signin"} onUpdateApplication={onUpdateApplication} {...props} />);}} />
+        </Switch>
+      </div>
+    );
+  }
+}
+
+export default EntryPage;

web/src/LdapEditPage.js

@@ -0,0 +1,268 @@
+// 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, InputNumber, Row, Select, Switch} from "antd";
+import {EyeInvisibleOutlined, EyeTwoTone} from "@ant-design/icons";
+import * as LddpBackend from "./backend/LdapBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+const {Option} = Select;
+
+class LdapEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ldapId: props.match.params.ldapId,
+      organizationName: props.match.params.organizationName,
+      ldap: null,
+      organizations: [],
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getLdap();
+    this.getOrganizations();
+  }
+
+  getLdap() {
+    LddpBackend.getLdap(this.state.organizationName, this.state.ldapId)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            ldap: res.data,
+          });
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  updateLdapField(key, value) {
+    this.setState((prevState) => {
+      prevState.ldap[key] = value;
+      return prevState;
+    });
+  }
+
+  renderAutoSyncWarn() {
+    if (this.state.ldap.autoSync > 0) {
+      return (
+        <span style={{
+          color: "#faad14",
+          marginLeft: "20px",
+        }}>{i18next.t("ldap:The Auto Sync option will sync all users to specify organization")}</span>
+      );
+    }
+  }
+
+  renderLdap() {
+    return (
+      <Card size="small" title={
+        <div>
+          {i18next.t("ldap:Edit LDAP")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitLdapEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          <Button style={{marginLeft: "20px"}}
+            onClick={() => Setting.goToLink(`/ldap/sync/${this.state.organizationName}/${this.state.ldapId}`)}>
+            {i18next.t("general:Sync")} LDAP
+          </Button>
+        </div>
+      } style={{marginLeft: "5px"}} type="inner">
+        <Row style={{marginTop: "10px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
+          </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);
+              })}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index}
+                  value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("general:ID"), i18next.t("general:ID - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.id} disabled={true} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Server name"), i18next.t("ldap:Server name - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.serverName} onChange={e => {
+              this.updateLdapField("serverName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Server host"), i18next.t("ldap:Server host - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.host} onChange={e => {
+              this.updateLdapField("host", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Server port"), i18next.t("ldap:Server port - Tooltip"))} :
+          </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);
+              }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Enable SSL"), i18next.t("ldap:Enable SSL - Tooltip"))} :
+          </Col>
+          <Col span={21} >
+            <Switch checked={this.state.ldap.enableSsl} onChange={checked => {
+              this.updateLdapField("enableSsl", checked);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Base DN"), i18next.t("ldap:Base DN - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.baseDn} onChange={e => {
+              this.updateLdapField("baseDn", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Search Filter"), i18next.t("ldap:Search Filter - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.filter} onChange={e => {
+              this.updateLdapField("filter", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Filter fields"), i18next.t("ldap:Filter fields - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Select value={this.state.ldap.filterFields ?? []} style={{width: "100%"}} mode={"multiple"} options={[
+              {value: "uid", label: "uid"},
+              {value: "mail", label: "Email"},
+              {value: "mobile", label: "mobile"},
+            ].map((item) => Setting.getOption(item.label, item.value))} onChange={value => {
+              this.updateLdapField("filterFields", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Admin"), i18next.t("ldap:Admin - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input value={this.state.ldap.username} onChange={e => {
+              this.updateLdapField("username", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Admin Password"), i18next.t("ldap:Admin Password - Tooltip"))} :
+          </Col>
+          <Col span={21}>
+            <Input.Password
+              iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} value={this.state.ldap.password}
+              onChange={e => {
+                this.updateLdapField("password", e.target.value);
+              }}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{lineHeight: "32px", textAlign: "right", paddingRight: "25px"}} span={3}>
+            {Setting.getLabel(i18next.t("ldap:Auto Sync"), i18next.t("ldap:Auto Sync - Tooltip"))} :
+          </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>
+            {this.renderAutoSyncWarn()}
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitLdapEdit(willExist) {
+    LddpBackend.updateLdap(this.state.ldap)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", "Update LDAP server success");
+          this.setState({
+            organizationName: this.state.ldap.owner,
+          });
+
+          if (willExist) {
+            this.props.history.push(`/organizations/${this.state.organizationName}`);
+          }
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Update LDAP server failed: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.ldap !== null ? this.renderLdap() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitLdapEdit()}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitLdapEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LdapEditPage;

web/src/LdapSyncPage.js

@@ -0,0 +1,260 @@
+// 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, Popconfirm, Table} from "antd";
+import * as Setting from "./Setting";
+import * as LdapBackend from "./backend/LdapBackend";
+import i18next from "i18next";
+import {Link} from "react-router-dom";
+
+class LdapSyncPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ldapId: props.match.params.ldapId,
+      organizationName: props.match.params.organizationName,
+      ldap: null,
+      users: [],
+      existUuids: [],
+      selectedUsers: [],
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getLdap();
+  }
+
+  syncUsers() {
+    const selectedUsers = this.state.selectedUsers;
+    if (selectedUsers === null || selectedUsers.length === 0) {
+      Setting.showMessage("error", "Please select al least 1 user first");
+      return;
+    }
+
+    LdapBackend.syncUsers(this.state.ldap.owner, this.state.ldap.id, selectedUsers)
+      .then((res => {
+        if (res.status === "ok") {
+          const exist = res.data.exist;
+          const failed = res.data.failed;
+          const existUser = [];
+          const failedUser = [];
+
+          if ((!exist || exist.length === 0) && (!failed || failed.length === 0)) {
+            Setting.goToLink(`/organizations/${this.state.ldap.owner}/users`);
+          } else {
+            if (exist && exist.length > 0) {
+              exist.forEach(elem => {
+                existUser.push(elem.cn);
+              });
+              Setting.showMessage("error", `User [${existUser}] is already exist`);
+            }
+
+            if (failed && failed.length > 0) {
+              failed.forEach(elem => {
+                failedUser.push(elem.cn);
+              });
+              Setting.showMessage("error", `Sync [${failedUser}] failed`);
+            }
+          }
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      }));
+  }
+
+  getLdap() {
+    LdapBackend.getLdap(this.state.organizationName, this.state.ldapId)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            ldap: res.data,
+          });
+          this.getLdapUser();
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      });
+  }
+
+  getLdapUser() {
+    LdapBackend.getLdapUser(this.state.organizationName, this.state.ldapId)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState((prevState) => {
+            prevState.users = res.data.users;
+            prevState.existUuids = res.data2?.length > 0 ? res.data2 : [];
+            return prevState;
+          });
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      });
+  }
+
+  buildValArray(data, key) {
+    const valTypesArray = [];
+
+    if (data !== null && data.length > 0) {
+      data.forEach(elem => {
+        const val = elem[key];
+        if (!valTypesArray.includes(val)) {
+          valTypesArray.push(val);
+        }
+      });
+    }
+    return valTypesArray;
+  }
+
+  buildFilter(data, key) {
+    const filterArray = [];
+
+    if (data !== null && data.length > 0) {
+      const valArray = this.buildValArray(data, key);
+      valArray.forEach(elem => {
+        filterArray.push({
+          text: elem,
+          value: elem,
+        });
+      });
+    }
+    return filterArray;
+  }
+
+  renderTable(users) {
+    const columns = [
+      {
+        title: i18next.t("ldap:CN"),
+        dataIndex: "cn",
+        key: "cn",
+        sorter: (a, b) => a.cn.localeCompare(b.cn),
+        render: (text, record, index) => {
+          return (<div style={{display: "flex", justifyContent: "space-between"}}>
+            <div>
+              {text}
+            </div>
+            {this.state.existUuids.includes(record.uuid) ?
+              Setting.getTag("green", i18next.t("ldap:synced")) :
+              Setting.getTag("red", i18next.t("ldap:unsynced"))
+            }
+          </div>);
+        },
+      },
+      {
+        title: "Uid",
+        dataIndex: "uid",
+        key: "uid",
+        sorter: (a, b) => a.uid.localeCompare(b.uid),
+        render: (text, record, index) => {
+          return (
+            this.state.existUuids.includes(record.uuid) ?
+              <Link to={`/users/${this.state.organizationName}/${text}`}>
+                {text}
+              </Link> :
+              text
+          );
+        },
+      },
+      {
+        title: "UidNumber",
+        dataIndex: "uidNumber",
+        key: "uidNumber",
+        sorter: (a, b) => a.uidNumber.localeCompare(b.uidNumber),
+        render: (text, record, index) => {
+          return text;
+        },
+      },
+      {
+        title: i18next.t("ldap:Group ID"),
+        dataIndex: "groupId",
+        key: "groupId",
+        sorter: (a, b) => a.groupId.localeCompare(b.groupId),
+        filters: this.buildFilter(this.state.users, "groupId"),
+        onFilter: (value, record) => record.groupId.indexOf(value) === 0,
+      },
+      {
+        title: i18next.t("general:Email"),
+        dataIndex: "email",
+        key: "email",
+        sorter: (a, b) => a.email.localeCompare(b.email),
+      },
+      {
+        title: i18next.t("general:Phone"),
+        dataIndex: "phone",
+        key: "phone",
+        sorter: (a, b) => a.phone.localeCompare(b.phone),
+      },
+      {
+        title: i18next.t("user:Address"),
+        dataIndex: "address",
+        key: "address",
+        sorter: (a, b) => a.address.localeCompare(b.address),
+      },
+    ];
+
+    const rowSelection = {
+      onChange: (selectedRowKeys, selectedRows) => {
+        this.setState({
+          selectedUsers: selectedRows,
+        });
+      },
+      getCheckboxProps: record => ({
+        disabled: this.state.existUuids.indexOf(record.uuid) !== -1,
+      }),
+    };
+
+    return (
+      <Table rowSelection={rowSelection} columns={columns} dataSource={users} rowKey="uuid" bordered size="small"
+        pagination={{defaultPageSize: 10, showQuickJumper: true, showSizeChanger: true}}
+        title={() => (
+          <div>
+            {this.state.ldap?.serverName}
+            <Popconfirm placement={"right"} disabled={this.state.selectedUsers.length === 0}
+              title={"Please confirm to sync selected users"}
+              onConfirm={() => this.syncUsers()}
+            >
+              <Button type="primary" style={{marginLeft: "10px"}} disabled={this.state.selectedUsers.length === 0}>
+                {i18next.t("general:Sync")}
+              </Button>
+            </Popconfirm>
+            <Button style={{marginLeft: "20px"}}
+              onClick={() => Setting.goToLink(`/ldap/${this.state.organizationName}/${this.state.ldapId}`)}>
+              {i18next.t("general:Edit")} LDAP
+            </Button>
+          </div>
+        )}
+        loading={users === null}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.renderTable(this.state.users)
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => {
+            this.props.history.push(`/organizations/${this.state.organizationName}`);
+          }}>
+            {i18next.t("general:Save & Exit")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LdapSyncPage;

web/src/MessageEditPage.js

@@ -0,0 +1,220 @@
+// Copyright 2023 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} from "antd";
+import * as ChatBackend from "./backend/ChatBackend";
+import * as MessageBackend from "./backend/MessageBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as UserBackend from "./backend/UserBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+const {TextArea} = Input;
+
+class MessageEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      messageName: props.match.params.messageName,
+      message: null,
+      organizations: [],
+      chats: [],
+      users: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getMessage();
+    this.getOrganizations();
+    this.getChats();
+  }
+
+  getMessage() {
+    MessageBackend.getMessage("admin", this.state.messageName)
+      .then((message) => {
+        this.setState({
+          message: message,
+        });
+
+        this.getUsers(message.organization);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getChats() {
+    ChatBackend.getChats("admin")
+      .then((res) => {
+        this.setState({
+          chats: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getUsers(organizationName) {
+    UserBackend.getUsers(organizationName)
+      .then((res) => {
+        this.setState({
+          users: res,
+        });
+      });
+  }
+
+  parseMessageField(key, value) {
+    if ([].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateMessageField(key, value) {
+    value = this.parseMessageField(key, value);
+
+    const message = this.state.message;
+    message[key] = value;
+    this.setState({
+      message: message,
+    });
+  }
+
+  renderMessage() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("message:New Message") : i18next.t("message:Edit Message")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitMessageEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitMessageEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteMessage()}>{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.message.organization} onChange={(value => {this.updateMessageField("organization", value);})}
+              options={this.state.organizations.map((organization) => Setting.getOption(organization.name, organization.name))
+              } />
+          </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.message.name} onChange={e => {
+              this.updateMessageField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("message:Chat"), i18next.t("message:Chat - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.message.chat} onChange={(value => {this.updateMessageField("chat", value);})}
+              options={this.state.chats.map((chat) => Setting.getOption(chat.name, chat.name))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("message:Author"), i18next.t("message:Author - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.message.author} onChange={(value => {this.updateMessageField("author", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("message:Text"), i18next.t("message:Text - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <TextArea rows={10} value={this.state.message.text} onChange={e => {
+              this.updateMessageField("text", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitMessageEdit(willExist) {
+    const message = Setting.deepCopy(this.state.message);
+    MessageBackend.updateMessage(this.state.message.owner, this.state.messageName, message)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            messageName: this.state.message.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/messages");
+          } else {
+            this.props.history.push(`/messages/${this.state.message.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateMessageField("name", this.state.messageName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteMessage() {
+    MessageBackend.deleteMessage(this.state.message)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/messages");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.message !== null ? this.renderMessage() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitMessageEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitMessageEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteMessage()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MessageEditPage;

web/src/MessageListPage.js

@@ -0,0 +1,236 @@
+// Copyright 2023 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as MessageBackend from "./backend/MessageBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class MessageListPage extends BaseListPage {
+  newMessage() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.messagename,
+      name: `message_${randomName}`,
+      createdTime: moment().format(),
+      organization: this.props.account.owner,
+      chat: "",
+      author: `${this.props.account.owner}/${this.props.account.name}`,
+      text: "",
+    };
+  }
+
+  addMessage() {
+    const newMessage = this.newMessage();
+    MessageBackend.addMessage(newMessage)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/messages/${newMessage.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteMessage(i) {
+    MessageBackend.deleteMessage(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(messages) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/messages/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "150px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("message:Chat"),
+        dataIndex: "chat",
+        key: "chat",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("chat"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/chats/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("message:Author"),
+        dataIndex: "author",
+        key: "author",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("author"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("message:Text"),
+        dataIndex: "text",
+        key: "text",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("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(`/messages/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteMessage(index)}
+              >
+              </PopconfirmModal>
+            </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={messages} rowKey={(record) => `${record.owner}/${record.name}`}size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Messages")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addMessage.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.category !== undefined && params.category !== null) {
+      field = "category";
+      value = params.category;
+    } else if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    MessageBackend.getMessages("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default MessageListPage;

web/src/ModelEditPage.js

@@ -0,0 +1,212 @@
+// 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);
+
+    const 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) {
+    const model = Setting.deepCopy(this.state.model);
+    ModelBackend.updateModel(this.state.organizationName, this.state.modelName, model)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general: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", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateModelField("name", this.state.modelName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteModel() {
+    ModelBackend.deleteModel(this.state.model)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/models");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${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,215 @@
+// 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, 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";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+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) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/models/${newModel.owner}/${newModel.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteModel(i) {
+    ModelBackend.deleteModel(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(models) {
+    const columns = [
+      {
+        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/${record.owner}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        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: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>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteModel(index)}
+              >
+              </PopconfirmModal>
+            </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={(record) => `${record.owner}/${record.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;
+    const 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ModelListPage;

web/src/OrganizationEditPage.js

@@ -0,0 +1,423 @@
+// 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, InputNumber, Radio, Row, Select, Switch} from "antd";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as ApplicationBackend from "./backend/ApplicationBackend";
+import * as LdapBackend from "./backend/LdapBackend";
+import * as Setting from "./Setting";
+import * as Conf from "./Conf";
+import i18next from "i18next";
+import {LinkOutlined} from "@ant-design/icons";
+import LdapTable from "./table/LdapTable";
+import AccountTable from "./table/AccountTable";
+import ThemeEditor from "./common/theme/ThemeEditor";
+
+const {Option} = Select;
+
+class OrganizationEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.match.params.organizationName,
+      organization: null,
+      applications: [],
+      ldaps: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getOrganization();
+    this.getApplications();
+    this.getLdaps();
+  }
+
+  getOrganization() {
+    OrganizationBackend.getOrganization("admin", this.state.organizationName)
+      .then((organization) => {
+        this.setState({
+          organization: organization,
+        });
+      });
+  }
+
+  getApplications() {
+    ApplicationBackend.getApplicationsByOrganization("admin", this.state.organizationName)
+      .then((applications) => {
+        this.setState({
+          applications: applications,
+        });
+      });
+  }
+
+  getLdaps() {
+    LdapBackend.getLdaps(this.state.organizationName)
+      .then(res => {
+        let resdata = [];
+        if (res.status === "ok") {
+          if (res.data !== null) {
+            resdata = res.data;
+          }
+        }
+        this.setState({
+          ldaps: resdata,
+        });
+      });
+  }
+
+  parseOrganizationField(key, value) {
+    // if ([].includes(key)) {
+    //   value = Setting.myParseInt(value);
+    // }
+    return value;
+  }
+
+  updateOrganizationField(key, value) {
+    value = this.parseOrganizationField(key, value);
+    const organization = this.state.organization;
+    organization[key] = value;
+    this.setState({
+      organization: organization,
+    });
+  }
+
+  renderOrganization() {
+    return (
+      <Card size="small" title={
+        <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}
+        </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: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);
+            }} />
+          </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.organization.displayName} onChange={e => {
+              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"))} :
+          </Col>
+          <Col span={22} >
+            <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);
+                }} />
+              </Col>
+            </Row>
+            <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"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);})}
+              options={["plain", "salt", "md5-salt", "bcrypt", "pbkdf2-salt", "argon2id"].map(item => Setting.getOption(item, item))}
+            />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Supported country codes"), i18next.t("general:Supported country codes - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode={"multiple"} style={{width: "100%"}} value={this.state.organization.countryCodes ?? []}
+              onChange={value => {
+                this.updateOrganizationField("countryCodes", value);
+              }}
+              filterOption={(input, option) => (option?.text ?? "").toLowerCase().includes(input.toLowerCase())}
+            >
+              {
+                Setting.getCountryCodeData().map((country) => Setting.getCountryCodeOption(country))
+              }
+            </Select>
+          </Col>
+        </Row>
+        <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 : 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);
+                }} />
+              </Col>
+            </Row>
+            <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"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Default application"), i18next.t("general:Default application - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.organization.defaultApplication} onChange={(value => {this.updateOrganizationField("defaultApplication", value);})}
+              options={this.state.applications?.map((item) => Setting.getOption(item.name, item.name))
+              } />
+          </Col>
+        </Row>
+        <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);})}>
+              {
+                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}>
+            {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);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Languages"), i18next.t("general:Languages - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}}
+              options={Setting.Countries.map((item) => {
+                return Setting.getOption(item.label, item.key);
+              })}
+              value={this.state.organization.languages ?? []}
+              onChange={(value => {
+                this.updateOrganizationField("languages", value);
+              })} >
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("organization:Init score"), i18next.t("organization:Init score - Tooltip"))} :
+          </Col>
+          <Col span={4} >
+            <InputNumber value={this.state.organization.initScore} onChange={value => {
+              this.updateOrganizationField("initScore", value);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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("theme:Theme"), i18next.t("theme:Theme - Tooltip"))} :
+          </Col>
+          <Col span={22} style={{marginTop: "5px"}}>
+            <Row>
+              <Radio.Group value={this.state.organization.themeData?.isEnabled ?? false} onChange={e => {
+                const {_, ...theme} = this.state.organization.themeData ?? {...Conf.ThemeDefault, isEnabled: false};
+                this.updateOrganizationField("themeData", {...theme, isEnabled: e.target.value});
+              }} >
+                <Radio.Button value={false}>{i18next.t("organization:Follow global theme")}</Radio.Button>
+                <Radio.Button value={true}>{i18next.t("theme:Customize theme")}</Radio.Button>
+              </Radio.Group>
+            </Row>
+            {
+              this.state.organization.themeData?.isEnabled ?
+                <Row style={{marginTop: "20px"}}>
+                  <ThemeEditor themeData={this.state.organization.themeData} onThemeChange={(_, nextThemeData) => {
+                    const {isEnabled} = this.state.organization.themeData ?? {...Conf.ThemeDefault, isEnabled: false};
+                    this.updateOrganizationField("themeData", {...nextThemeData, isEnabled});
+                  }} />
+                </Row> : null
+            }
+          </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}>
+            <LdapTable
+              title={i18next.t("general:LDAPs")}
+              table={this.state.ldaps}
+              organizationName={this.state.organizationName}
+              onUpdateTable={(value) => {
+                this.setState({ldaps: value});
+              }}
+            />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitOrganizationEdit(willExist) {
+    const organization = Setting.deepCopy(this.state.organization);
+    OrganizationBackend.updateOrganization(this.state.organization.owner, this.state.organizationName, organization)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+
+          if (this.props.account.organization.name === this.state.organizationName) {
+            this.props.onChangeTheme(Setting.getThemeData(this.state.organization));
+          }
+
+          this.setState({
+            organizationName: this.state.organization.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/organizations");
+          } else {
+            this.props.history.push(`/organizations/${this.state.organization.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateOrganizationField("name", this.state.organizationName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteOrganization() {
+    OrganizationBackend.deleteOrganization(this.state.organization)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/organizations");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.organization !== null ? this.renderOrganization() : null
+        }
+        <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}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OrganizationEditPage;

web/src/OrganizationListPage.js

@@ -0,0 +1,298 @@
+// 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, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class OrganizationListPage extends BaseListPage {
+  newOrganization() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.organizationname,
+      name: `organization_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Organization - ${randomName}`,
+      websiteUrl: "https://door.casdoor.com",
+      favicon: `${Setting.StaticBaseUrl}/img/favicon.png`,
+      passwordType: "plain",
+      PasswordSalt: "",
+      countryCodes: ["CN"],
+      defaultAvatar: `${Setting.StaticBaseUrl}/img/casbin.svg`,
+      defaultApplication: "",
+      tags: [],
+      languages: Setting.Countries.map(item => item.key),
+      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: "Roles", visible: true, viewRule: "Public", modifyRule: "Immutable"},
+        {name: "Permissions", visible: true, viewRule: "Public", modifyRule: "Immutable"},
+        {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) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/organizations/${newOrganization.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteOrganization(i) {
+    OrganizationBackend.deleteOrganization(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(organizations) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...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",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Display name"),
+        dataIndex: "displayName",
+        key: "displayName",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("general:Favicon"),
+        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",
+        sorter: true,
+        ...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",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {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",
+        sorter: true,
+        ...this.getColumnSearchProps("passwordSalt"),
+      },
+      {
+        title: i18next.t("general:Default avatar"),
+        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>
+          );
+        },
+      },
+      {
+        title: i18next.t("organization:Soft deletion"),
+        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",
+        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>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteOrganization(index)}
+                disabled={record.name === "built-in"}
+              >
+              </PopconfirmModal>
+            </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={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>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.passwordType !== undefined && params.passwordType !== null) {
+      field = "passwordType";
+      value = params.passwordType;
+    }
+    this.setState({loading: true});
+    OrganizationBackend.getOrganizations("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default OrganizationListPage;

web/src/PaymentEditPage.js

@@ -0,0 +1,500 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Card, Col, 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;
+
+class PaymentEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      paymentName: props.match.params.paymentName,
+      payment: null,
+      isModalVisible: false,
+      isInvoiceLoading: false,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getPayment();
+  }
+
+  getPayment() {
+    PaymentBackend.getPayment("admin", this.state.paymentName)
+      .then((payment) => {
+        this.setState({
+          payment: payment,
+        });
+
+        Setting.scrollToDiv("invoice-area");
+      });
+  }
+
+  parsePaymentField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updatePaymentField(key, value) {
+    value = this.parsePaymentField(key, value);
+
+    const payment = this.state.payment;
+    payment[key] = value;
+    this.setState({
+      payment: payment,
+    });
+  }
+
+  issueInvoice() {
+    this.setState({
+      isModalVisible: false,
+      isInvoiceLoading: true,
+    });
+
+    PaymentBackend.invoicePayment(this.state.payment.owner, this.state.paymentName)
+      .then((res) => {
+        this.setState({
+          isInvoiceLoading: false,
+        });
+        if (res.status === "ok") {
+          Setting.showMessage("success", "Successfully invoiced");
+          Setting.openLinkSafe(res.data);
+          this.getPayment();
+        } else {
+          Setting.showMessage(res.msg.includes("成功") ? "info" : "error", res.msg);
+        }
+      })
+      .catch(error => {
+        this.setState({
+          isInvoiceLoading: false,
+        });
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  downloadInvoice() {
+    Setting.openLinkSafe(this.state.payment.invoiceUrl);
+  }
+
+  renderModal() {
+    const ths = this;
+    const handleIssueInvoice = () => {
+      ths.issueInvoice();
+    };
+
+    const handleCancel = () => {
+      this.setState({
+        isModalVisible: false,
+      });
+    };
+
+    return (
+      <Modal title={
+        <div>
+          <InfoCircleTwoTone twoToneColor="rgb(45,120,213)" />
+          {" " + i18next.t("payment:Confirm your invoice information")}
+        </div>
+      }
+      open={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 />
+          <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>
+            <Descriptions.Item label={i18next.t("payment:Person Email")} span={3}>{this.state.payment?.personEmail}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Person phone")} span={3}>{this.state.payment?.personPhone}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice type")} span={3}>{this.state.payment?.invoiceType === "Individual" ? i18next.t("payment:Individual") : i18next.t("general:Organization")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice title")} span={3}>{this.state.payment?.invoiceTitle}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice tax ID")} span={3}>{this.state.payment?.invoiceTaxId}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("payment:Invoice remark")} span={3}>{this.state.payment?.invoiceRemark}</Descriptions.Item>
+          </Descriptions>
+        </p>
+      </Modal>
+    );
+  }
+
+  renderPayment() {
+    return (
+      <Card size="small" title={
+        <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}
+        </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} >
+            <Input disabled={true} value={this.state.payment.organization} onChange={e => {
+              // this.updatePaymentField('organization', e.target.value);
+            }} />
+          </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 disabled={true} value={this.state.payment.name} onChange={e => {
+              // this.updatePaymentField('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 disabled={true} value={this.state.payment.displayName} onChange={e => {
+              this.updatePaymentField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            <Input disabled={true} value={this.state.payment.provider} onChange={e => {
+              // this.updatePaymentField('provider', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Type"), i18next.t("payment:Type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={this.state.payment.type} onChange={e => {
+              // this.updatePaymentField('type', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            <Input disabled={true} value={this.state.payment.productName} onChange={e => {
+              // this.updatePaymentField('productName', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Price"), i18next.t("product:Price - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={this.state.payment.price} onChange={e => {
+              // this.updatePaymentField('amount', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            <Input disabled={true} value={this.state.payment.currency} onChange={e => {
+              // this.updatePaymentField('currency', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:State"), i18next.t("general:State - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={this.state.payment.state} onChange={e => {
+              // this.updatePaymentField('state', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            <Input disabled={true} value={this.state.payment.message} onChange={e => {
+              // this.updatePaymentField('message', e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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);
+              if (this.state.payment.invoiceType === "Individual") {
+                this.updatePaymentField("invoiceTitle", e.target.value);
+                this.updatePaymentField("invoiceTaxId", "");
+              }
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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 virtual={false} disabled={this.state.payment.invoiceUrl !== ""} 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", "");
+              }
+            })}>
+              {
+                [
+                  {id: "Individual", name: i18next.t("payment:Individual")},
+                  {id: "Organization", name: i18next.t("general: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}>
+            {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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            {
+              this.state.payment.invoiceUrl === "" ? (
+                <Button type={"primary"} loading={this.state.isInvoiceLoading} onClick={() => {
+                  const errorText = this.checkError();
+                  if (errorText !== "") {
+                    Setting.showMessage("error", errorText);
+                    return;
+                  }
+
+                  this.setState({
+                    isModalVisible: true,
+                  });
+                }}>{i18next.t("payment:Issue Invoice")}</Button>
+              ) : (
+                <Button type={"primary"} onClick={() => this.downloadInvoice(false)}>{i18next.t("payment:Download Invoice")}</Button>
+              )
+            }
+            <Button style={{marginLeft: "20px"}} onClick={() => Setting.goToLink(this.state.payment.returnUrl)}>{i18next.t("payment:Return to Website")}</Button>
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  checkError() {
+    if (this.state.payment.state !== "Paid") {
+      return i18next.t("payment:Please pay the order first!");
+    }
+
+    if (!Setting.isValidPersonName(this.state.payment.personName)) {
+      return i18next.t("signup:Please input your real name!");
+    }
+
+    if (!Setting.isValidIdCard(this.state.payment.personIdCard)) {
+      return i18next.t("signup:Please input the correct ID card number!");
+    }
+
+    if (!Setting.isValidEmail(this.state.payment.personEmail)) {
+      return i18next.t("signup:The input is not valid Email!");
+    }
+
+    if (!Setting.isValidPhone(this.state.payment.personPhone)) {
+      return i18next.t("signup:The input is not valid Phone!");
+    }
+
+    if (!Setting.isValidPhone(this.state.payment.personPhone)) {
+      return i18next.t("signup:The input is not valid Phone!");
+    }
+
+    if (this.state.payment.invoiceType === "Individual") {
+      if (this.state.payment.invoiceTitle !== this.state.payment.personName) {
+        return i18next.t("signup:The input is not invoice title!");
+      }
+
+      if (this.state.payment.invoiceTaxId !== "") {
+        return i18next.t("signup:The input is not invoice Tax ID!");
+      }
+    } else {
+      if (!Setting.isValidInvoiceTitle(this.state.payment.invoiceTitle)) {
+        return i18next.t("signup:The input is not invoice title!");
+      }
+
+      if (!Setting.isValidTaxId(this.state.payment.invoiceTaxId)) {
+        return i18next.t("signup:The input is not invoice Tax ID!");
+      }
+    }
+
+    return "";
+  }
+
+  submitPaymentEdit(willExist) {
+    const errorText = this.checkError();
+    if (errorText !== "") {
+      Setting.showMessage("error", errorText);
+      return;
+    }
+
+    const payment = Setting.deepCopy(this.state.payment);
+    PaymentBackend.updatePayment(this.state.payment.owner, this.state.paymentName, payment)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            paymentName: this.state.payment.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/payments");
+          } else {
+            this.props.history.push(`/payments/${this.state.payment.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updatePaymentField("name", this.state.paymentName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deletePayment() {
+    PaymentBackend.deletePayment(this.state.payment)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/payments");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.payment !== null ? this.renderPayment() : null
+        }
+        {
+          this.renderModal()
+        }
+        <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}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PaymentEditPage;

web/src/PaymentListPage.js

@@ -0,0 +1,293 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Link} from "react-router-dom";
+import {Button, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as PaymentBackend from "./backend/PaymentBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import * as Provider from "./auth/Provider";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class PaymentListPage extends BaseListPage {
+  newPayment() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin",
+      name: `payment_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Payment - ${randomName}`,
+      provider: "provider_pay_paypal",
+      type: "PayPal",
+      organization: "built-in",
+      user: "admin",
+      productName: "computer-1",
+      productDisplayName: "A notebook computer",
+      detail: "This is a computer with excellent CPU, memory and disk",
+      tag: "Promotion-1",
+      currency: "USD",
+      price: 300.00,
+      payUrl: "https://pay.com/pay.php",
+      returnUrl: "https://door.casdoor.com/payments",
+      state: "Paid",
+      message: "",
+    };
+  }
+
+  addPayment() {
+    const newPayment = this.newPayment();
+    PaymentBackend.addPayment(newPayment)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/payments/${newPayment.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      }
+      )
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deletePayment(i) {
+    PaymentBackend.deletePayment(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(payments) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "180px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/payments/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Provider"),
+        dataIndex: "provider",
+        key: "provider",
+        width: "150px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("provider"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/providers/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:User"),
+        dataIndex: "user",
+        key: "user",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${record.organization}/${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: '160px',
+      //   sorter: true,
+      //   ...this.getColumnSearchProps('displayName'),
+      // },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "140px",
+        align: "center",
+        filterMultiple: false,
+        filters: Setting.getProviderTypeOptions("Payment").map((o) => {return {text: o.id, value: o.name};}),
+        sorter: true,
+        render: (text, record, index) => {
+          record.category = "Payment";
+          return Provider.getProviderLogoWidget(record);
+        },
+      },
+      {
+        title: i18next.t("payment:Product"),
+        dataIndex: "productDisplayName",
+        key: "productDisplayName",
+        // width: '160px',
+        sorter: true,
+        ...this.getColumnSearchProps("productDisplayName"),
+      },
+      {
+        title: i18next.t("product:Price"),
+        dataIndex: "price",
+        key: "price",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("price"),
+      },
+      {
+        title: i18next.t("payment:Currency"),
+        dataIndex: "currency",
+        key: "currency",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("currency"),
+      },
+      {
+        title: i18next.t("general:State"),
+        dataIndex: "state",
+        key: "state",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("state"),
+      },
+      {
+        title: i18next.t("general:Action"),
+        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>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deletePayment(index)}
+              >
+              </PopconfirmModal>
+            </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={payments} rowKey={(record) => `${record.owner}/${record.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>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    PaymentBackend.getPayments("", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default PaymentListPage;

web/src/PaymentResultPage.js

@@ -0,0 +1,115 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Result, Spin} from "antd";
+import * as PaymentBackend from "./backend/PaymentBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+class PaymentResultPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      paymentName: props.match.params.paymentName,
+      payment: null,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getPayment();
+  }
+
+  getPayment() {
+    PaymentBackend.getPayment("admin", this.state.paymentName)
+      .then((payment) => {
+        this.setState({
+          payment: payment,
+        });
+
+        if (payment.state === "Created") {
+          setTimeout(() => this.getPayment(), 1000);
+        }
+      });
+  }
+
+  render() {
+    const payment = this.state.payment;
+
+    if (payment === null) {
+      return null;
+    }
+
+    if (payment.state === "Paid") {
+      return (
+        <div>
+          {
+            Setting.renderHelmet(payment)
+          }
+          <Result
+            status="success"
+            title={`${i18next.t("payment:You have successfully completed the payment")}: ${payment.productDisplayName}`}
+            subTitle={i18next.t("payment:Please click the below button to return to the original website")}
+            extra={[
+              <Button type="primary" key="returnUrl" onClick={() => {
+                Setting.goToLink(payment.returnUrl);
+              }}>
+                {i18next.t("payment:Return to Website")}
+              </Button>,
+            ]}
+          />
+        </div>
+      );
+    } else if (payment.state === "Created") {
+      return (
+        <div>
+          {
+            Setting.renderHelmet(payment)
+          }
+          <Result
+            status="info"
+            title={`${i18next.t("payment:The payment is still under processing")}: ${payment.productDisplayName}, ${i18next.t("payment:the current state is")}: ${payment.state}, ${i18next.t("payment:please wait for a few seconds...")}`}
+            subTitle={i18next.t("payment:Please click the below button to return to the original website")}
+            extra={[
+              <Spin key="returnUrl" size="large" tip={i18next.t("payment:Processing...")} />,
+            ]}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          {
+            Setting.renderHelmet(payment)
+          }
+          <Result
+            status="error"
+            title={`${i18next.t("payment:The payment has failed")}: ${payment.productDisplayName}, ${i18next.t("payment:the current state is")}: ${payment.state}`}
+            subTitle={i18next.t("payment:Please click the below button to return to the original website")}
+            extra={[
+              <Button type="primary" key="returnUrl" onClick={() => {
+                Setting.goToLink(payment.returnUrl);
+              }}>
+                {i18next.t("payment:Return to Website")}
+              </Button>,
+            ]}
+          />
+        </div>
+      );
+    }
+  }
+}
+
+export default PaymentResultPage;

web/src/PermissionEditPage.js

@@ -0,0 +1,452 @@
+// 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 PermissionBackend from "./backend/PermissionBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as UserBackend from "./backend/UserBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import * as RoleBackend from "./backend/RoleBackend";
+import * as ModelBackend from "./backend/ModelBackend";
+import * as ApplicationBackend from "./backend/ApplicationBackend";
+import moment from "moment/moment";
+
+class PermissionEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      permissionName: props.match.params.permissionName,
+      permission: null,
+      organizations: [],
+      model: null,
+      users: [],
+      roles: [],
+      models: [],
+      resources: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getPermission();
+    this.getOrganizations();
+  }
+
+  getPermission() {
+    PermissionBackend.getPermission(this.state.organizationName, this.state.permissionName)
+      .then((permission) => {
+        this.setState({
+          permission: permission,
+        });
+
+        this.getUsers(permission.owner);
+        this.getRoles(permission.owner);
+        this.getModels(permission.owner);
+        this.getResources(permission.owner);
+        this.getModel(permission.owner, permission.model);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getUsers(organizationName) {
+    UserBackend.getUsers(organizationName)
+      .then((res) => {
+        this.setState({
+          users: res,
+        });
+      });
+  }
+
+  getRoles(organizationName) {
+    RoleBackend.getRoles(organizationName)
+      .then((res) => {
+        this.setState({
+          roles: res,
+        });
+      });
+  }
+
+  getModels(organizationName) {
+    ModelBackend.getModels(organizationName)
+      .then((res) => {
+        this.setState({
+          models: res,
+        });
+      });
+  }
+
+  getModel(organizationName, modelName) {
+    ModelBackend.getModel(organizationName, modelName)
+      .then((res) => {
+        this.setState({
+          model: res,
+        });
+      });
+  }
+
+  getResources(organizationName) {
+    ApplicationBackend.getApplicationsByOrganization("admin", organizationName)
+      .then((res) => {
+        this.setState({
+          resources: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  parsePermissionField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updatePermissionField(key, value) {
+    if (key === "model") {
+      this.getModel(this.state.permission.owner, value);
+    }
+
+    value = this.parsePermissionField(key, value);
+
+    const permission = this.state.permission;
+    permission[key] = value;
+    this.setState({
+      permission: permission,
+    });
+  }
+
+  hasRoleDefinition(model) {
+    if (model !== null) {
+      return model.modelText.includes("role_definition");
+    }
+    return false;
+  }
+
+  renderPermission() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("permission:New Permission") : i18next.t("permission:Edit Permission")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitPermissionEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitPermissionEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deletePermission()}>{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.permission.owner} onChange={(owner => {
+              this.updatePermissionField("owner", owner);
+              this.getUsers(owner);
+              this.getRoles(owner);
+              this.getModels(owner);
+              this.getResources(owner);
+            })}
+            options={this.state.organizations.map((organization) => Setting.getOption(organization.name, organization.name))
+            } />
+          </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.permission.name} onChange={e => {
+              this.updatePermissionField("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.permission.displayName} onChange={e => {
+              this.updatePermissionField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Model"), i18next.t("general:Model - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.permission.model} onChange={(model => {
+              this.updatePermissionField("model", model);
+            })}
+            options={this.state.models.map((model) => Setting.getOption(model.name, model.name))
+            } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Adapter"), i18next.t("general:Adapter - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.permission.adapter} onChange={e => {
+              this.updatePermissionField("adapter", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub users"), i18next.t("role:Sub users - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select mode="tags" style={{width: "100%"}} value={this.state.permission.users}
+              onChange={(value => {this.updatePermissionField("users", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} disabled={!this.hasRoleDefinition(this.state.model)} mode="tags" style={{width: "100%"}} value={this.state.permission.roles}
+              onChange={(value => {this.updatePermissionField("roles", value);})}
+              options={this.state.roles.filter(roles => (roles.owner !== this.state.roles.owner || roles.name !== this.state.roles.name)).map((permission) => Setting.getOption(`${permission.owner}/${permission.name}`, `${permission.owner}/${permission.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub domains"), i18next.t("role:Sub domains - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.domains}
+              onChange={(value => {
+                this.updatePermissionField("domains", value);
+              })}
+              options={this.state.permission.domains.map((domain) => Setting.getOption(domain, domain))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Resource type"), i18next.t("permission:Resource type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.permission.resourceType} onChange={(value => {
+              this.updatePermissionField("resourceType", value);
+            })}
+            options={[
+              {value: "Application", name: i18next.t("general:Application")},
+              {value: "TreeNode", name: i18next.t("permission:TreeNode")},
+            ].map((item) => Setting.getOption(item.name, item.value))}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Resources"), i18next.t("permission:Resources - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.resources}
+              onChange={(value => {this.updatePermissionField("resources", value);})}
+              options={this.state.resources.map((resource) => Setting.getOption(`${resource.name}`, `${resource.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Actions"), i18next.t("permission:Actions - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.actions} onChange={(value => {
+              this.updatePermissionField("actions", value);
+            })}
+            options={[
+              {value: "Read", name: i18next.t("permission:Read")},
+              {value: "Write", name: i18next.t("permission:Write")},
+              {value: "Admin", name: i18next.t("permission:Admin")},
+            ].map((item) => Setting.getOption(item.name, item.value))}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Effect"), i18next.t("permission:Effect - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.permission.effect} onChange={(value => {
+              this.updatePermissionField("effect", value);
+            })}
+            options={[
+              {value: "Allow", name: i18next.t("permission:Allow")},
+              {value: "Deny", name: i18next.t("permission:Deny")},
+            ].map((item) => Setting.getOption(item.name, item.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.permission.isEnabled} onChange={checked => {
+              this.updatePermissionField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Submitter"), i18next.t("permission:Submitter - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={this.state.permission.submitter} onChange={e => {
+              this.updatePermissionField("submitter", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Approver"), i18next.t("permission:Approver - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={this.state.permission.approver} onChange={e => {
+              this.updatePermissionField("approver", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("permission:Approve time"), i18next.t("permission:Approve time - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input disabled={true} value={Setting.getFormattedDate(this.state.permission.approveTime)} onChange={e => {
+              this.updatePermissionField("approveTime", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:State"), i18next.t("general:State - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} disabled={!Setting.isLocalAdminUser(this.props.account)} style={{width: "100%"}} value={this.state.permission.state} onChange={(value => {
+              if (this.state.permission.state !== value) {
+                if (value === "Approved") {
+                  this.updatePermissionField("approver", this.props.account.name);
+                  this.updatePermissionField("approveTime", moment().format());
+                } else {
+                  this.updatePermissionField("approver", "");
+                  this.updatePermissionField("approveTime", "");
+                }
+              }
+
+              this.updatePermissionField("state", value);
+            })}
+            options={[
+              {value: "Approved", name: i18next.t("permission:Approved")},
+              {value: "Pending", name: i18next.t("permission:Pending")},
+            ].map((item) => Setting.getOption(item.name, item.value))}
+            />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitPermissionEdit(willExist) {
+    if (this.state.permission.users.length === 0 && this.state.permission.roles.length === 0) {
+      Setting.showMessage("error", "The users and roles cannot be empty at the same time");
+      return;
+    }
+    // if (this.state.permission.domains.length === 0) {
+    //   Setting.showMessage("error", "The domains cannot be empty");
+    //   return;
+    // }
+    if (this.state.permission.resources.length === 0) {
+      Setting.showMessage("error", "The resources cannot be empty");
+      return;
+    }
+    if (this.state.permission.actions.length === 0) {
+      Setting.showMessage("error", "The actions cannot be empty");
+      return;
+    }
+    if (!Setting.isLocalAdminUser(this.props.account) && this.state.permission.submitter !== this.props.account.name) {
+      Setting.showMessage("error", "A normal user can only modify the permission submitted by itself");
+      return;
+    }
+
+    const permission = Setting.deepCopy(this.state.permission);
+    PermissionBackend.updatePermission(this.state.organizationName, this.state.permissionName, permission)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            permissionName: this.state.permission.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/permissions");
+          } else {
+            this.props.history.push(`/permissions/${this.state.permission.owner}/${this.state.permission.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updatePermissionField("name", this.state.permissionName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deletePermission() {
+    PermissionBackend.deletePermission(this.state.permission)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/permissions");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.permission !== null ? this.renderPermission() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitPermissionEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitPermissionEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deletePermission()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PermissionEditPage;

web/src/PermissionListPage.js

@@ -0,0 +1,373 @@
+// 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, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as PermissionBackend from "./backend/PermissionBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class PermissionListPage extends BaseListPage {
+  newPermission() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: this.props.account.owner,
+      name: `permission_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Permission - ${randomName}`,
+      users: [`${this.props.account.owner}/${this.props.account.name}`],
+      roles: [],
+      domains: [],
+      resourceType: "Application",
+      resources: ["app-built-in"],
+      actions: ["Read"],
+      effect: "Allow",
+      isEnabled: true,
+      submitter: this.props.account.name,
+      approver: "",
+      approveTime: "",
+      state: "Pending",
+    };
+  }
+
+  addPermission() {
+    const newPermission = this.newPermission();
+    PermissionBackend.addPermission(newPermission)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/permissions/${newPermission.owner}/${newPermission.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deletePermission(i) {
+    PermissionBackend.deletePermission(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(permissions) {
+    const columns = [
+      // https://github.com/ant-design/ant-design/issues/22184
+      {
+        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={`/permissions/${record.owner}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        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: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: "160px",
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("role:Sub users"),
+        dataIndex: "users",
+        key: "users",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("users"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "users");
+        },
+      },
+      {
+        title: i18next.t("role:Sub roles"),
+        dataIndex: "roles",
+        key: "roles",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("roles"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "roles");
+        },
+      },
+      {
+        title: i18next.t("role:Sub domains"),
+        dataIndex: "domains",
+        key: "domains",
+        sorter: true,
+        ...this.getColumnSearchProps("domains"),
+        render: (text, record, index) => {
+          return Setting.getTags(text);
+        },
+      },
+      {
+        title: i18next.t("permission:Resource type"),
+        dataIndex: "resourceType",
+        key: "resourceType",
+        filterMultiple: false,
+        filters: [
+          {text: "Application", value: "Application"},
+        ],
+        width: "170px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("general:Resources"),
+        dataIndex: "resources",
+        key: "resources",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("resources"),
+        render: (text, record, index) => {
+          return Setting.getTags(text);
+        },
+      },
+      {
+        title: i18next.t("permission:Actions"),
+        dataIndex: "actions",
+        key: "actions",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("actions"),
+        render: (text, record, index) => {
+          const tags = text.map((tag, i) => {
+            switch (tag) {
+            case "Read":
+              return i18next.t("permission:Read");
+            case "Write":
+              return i18next.t("permission:Write");
+            case "Admin":
+              return i18next.t("permission:Admin");
+            default:
+              return null;
+            }
+          });
+          return Setting.getTags(tags);
+        },
+      },
+      {
+        title: i18next.t("permission:Effect"),
+        dataIndex: "effect",
+        key: "effect",
+        filterMultiple: false,
+        filters: [
+          {text: i18next.t("permission:Allow"), value: "Allow"},
+          {text: i18next.t("permission:Deny"), value: "Deny"},
+        ],
+        width: "120px",
+        sorter: true,
+        render: (text, record, index) => {
+          switch (text) {
+          case "Allow":
+            return Setting.getTag("success", i18next.t("permission:Allow"));
+          case "Deny":
+            return Setting.getTag("error", i18next.t("permission:Deny"));
+          default:
+            return null;
+          }
+        },
+      },
+      {
+        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("permission:Submitter"),
+        dataIndex: "submitter",
+        key: "submitter",
+        filterMultiple: false,
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("permission:Approver"),
+        dataIndex: "approver",
+        key: "approver",
+        filterMultiple: false,
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("permission:Approve time"),
+        dataIndex: "approveTime",
+        key: "approveTime",
+        filterMultiple: false,
+        width: "120px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:State"),
+        dataIndex: "state",
+        key: "state",
+        filterMultiple: false,
+        filters: [
+          {text: i18next.t("permission:Approved"), value: "Approved"},
+          {text: i18next.t("permission:Pending"), value: "Pending"},
+        ],
+        width: "120px",
+        sorter: true,
+        render: (text, record, index) => {
+          switch (text) {
+          case "Approved":
+            return Setting.getTag("success", i18next.t("permission:Approved"));
+          case "Pending":
+            return Setting.getTag("error", i18next.t("permission:Pending"));
+          default:
+            return null;
+          }
+        },
+      },
+      {
+        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(`/permissions/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deletePermission(index)}
+              >
+              </PopconfirmModal>
+            </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={permissions} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Permissions")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addPermission.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+
+    const getPermissions = Setting.isLocalAdminUser(this.props.account) ? PermissionBackend.getPermissions : PermissionBackend.getPermissionsBySubmitter;
+    getPermissions(Setting.isAdminUser(this.props.account) ? "" : this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            loading: false,
+            data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
+            searchText: params.searchText,
+            searchedColumn: params.searchedColumn,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default PermissionListPage;

web/src/ProductBuyPage.js

@@ -0,0 +1,248 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Descriptions, Modal, Spin} from "antd";
+import {CheckCircleTwoTone} from "@ant-design/icons";
+import i18next from "i18next";
+import * as ProductBackend from "./backend/ProductBackend";
+import * as Setting from "./Setting";
+
+class ProductBuyPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      productName: props.match?.params.productName,
+      product: null,
+      isPlacingOrder: false,
+      qrCodeModalProvider: null,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getProduct();
+  }
+
+  getProduct() {
+    if (this.state.productName === undefined) {
+      return;
+    }
+
+    ProductBackend.getProduct("admin", this.state.productName)
+      .then((product) => {
+        this.setState({
+          product: product,
+        });
+      });
+  }
+
+  getProductObj() {
+    if (this.props.product !== undefined) {
+      return this.props.product;
+    } else {
+      return this.state.product;
+    }
+  }
+
+  getCurrencySymbol(product) {
+    if (product?.currency === "USD") {
+      return "$";
+    } else if (product?.currency === "CNY") {
+      return "￥";
+    } else {
+      return "(Unknown currency)";
+    }
+  }
+
+  getCurrencyText(product) {
+    if (product?.currency === "USD") {
+      return i18next.t("product:USD");
+    } else if (product?.currency === "CNY") {
+      return i18next.t("product:CNY");
+    } else {
+      return "(Unknown currency)";
+    }
+  }
+
+  getPrice(product) {
+    return `${this.getCurrencySymbol(product)}${product?.price} (${this.getCurrencyText(product)})`;
+  }
+
+  buyProduct(product, provider) {
+    if (provider.clientId.startsWith("http")) {
+      this.setState({
+        qrCodeModalProvider: provider,
+      });
+      return;
+    }
+
+    this.setState({
+      isPlacingOrder: true,
+    });
+
+    ProductBackend.buyProduct(this.state.product.owner, this.state.productName, provider.name)
+      .then((res) => {
+        if (res.status === "ok") {
+          const payUrl = res.data;
+          Setting.goToLink(payUrl);
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+
+          this.setState({
+            isPlacingOrder: false,
+          });
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderQrCodeModal() {
+    if (this.state.qrCodeModalProvider === undefined || this.state.qrCodeModalProvider === null) {
+      return null;
+    }
+
+    return (
+      <Modal title={
+        <div>
+          <CheckCircleTwoTone twoToneColor="rgb(45,120,213)" />
+          {" " + i18next.t("product:Please scan the QR code to pay")}
+        </div>
+      }
+      open={this.state.qrCodeModalProvider !== undefined && this.state.qrCodeModalProvider !== null}
+      onOk={() => {
+        Setting.goToLink(this.state.product.returnUrl);
+      }}
+      onCancel={() => {
+        this.setState({
+          qrCodeModalProvider: null,
+        });
+      }}
+      okText={i18next.t("product:I have completed the payment")}
+      cancelText={i18next.t("general:Cancel")}>
+        <p key={this.state.qrCodeModalProvider?.name}>
+          {
+            i18next.t("product:Please provide your username in the remark")
+          }
+          :&nbsp;&nbsp;
+          {
+            Setting.getTag("default", this.props.account.name)
+          }
+          <br />
+          <br />
+          <img src={this.state.qrCodeModalProvider?.clientId} alt={this.state.qrCodeModalProvider?.name} width={"472px"} style={{marginBottom: "20px"}} />
+        </p>
+      </Modal>
+    );
+  }
+
+  getPayButton(provider) {
+    let text = provider.type;
+    if (provider.type === "Alipay") {
+      text = i18next.t("product:Alipay");
+    } else if (provider.type === "WeChat Pay") {
+      text = i18next.t("product:WeChat Pay");
+    } else if (provider.type === "PayPal") {
+      text = i18next.t("product:PayPal");
+    }
+
+    return (
+      <Button style={{height: "50px", borderWidth: "2px"}} shape="round" icon={
+        <img style={{marginRight: "10px"}} width={36} height={36} src={Setting.getProviderLogoURL(provider)} alt={provider.displayName} />
+      } size={"large"} >
+        {
+          text
+        }
+      </Button>
+    );
+  }
+
+  renderProviderButton(provider, product) {
+    return (
+      <span key={provider.name} style={{width: "200px", marginRight: "20px", marginBottom: "10px"}}>
+        <span style={{width: "200px", cursor: "pointer"}} onClick={() => this.buyProduct(product, provider)}>
+          {
+            this.getPayButton(provider)
+          }
+        </span>
+      </span>
+    );
+  }
+
+  renderPay(product) {
+    if (product === undefined || product === null) {
+      return null;
+    }
+
+    if (product.state !== "Published") {
+      return i18next.t("product:This product is currently not in sale.");
+    }
+    if (product.providerObjs.length === 0) {
+      return i18next.t("product:There is no payment channel for this product.");
+    }
+
+    return product.providerObjs.map(provider => {
+      return this.renderProviderButton(provider, product);
+    });
+  }
+
+  render() {
+    const product = this.getProductObj();
+
+    if (product === null) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Spin spinning={this.state.isPlacingOrder} size="large" tip={i18next.t("product:Placing order...")} style={{paddingTop: "10%"}} >
+          <Descriptions title={i18next.t("product:Buy Product")} bordered>
+            <Descriptions.Item label={i18next.t("general:Name")} span={3}>
+              <span style={{fontSize: 28}}>
+                {Setting.getLanguageText(product?.displayName)}
+              </span>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Detail")}><span style={{fontSize: 16}}>{Setting.getLanguageText(product?.detail)}</span></Descriptions.Item>
+            <Descriptions.Item label={i18next.t("user:Tag")}><span style={{fontSize: 16}}>{product?.tag}</span></Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:SKU")}><span style={{fontSize: 16}}>{product?.name}</span></Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Image")} span={3}>
+              <img src={product?.image} alt={product?.name} height={90} style={{marginBottom: "20px"}} />
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Price")}>
+              <span style={{fontSize: 28, color: "red", fontWeight: "bold"}}>
+                {
+                  this.getPrice(product)
+                }
+              </span>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Quantity")}><span style={{fontSize: 16}}>{product?.quantity}</span></Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Sold")}><span style={{fontSize: 16}}>{product?.sold}</span></Descriptions.Item>
+            <Descriptions.Item label={i18next.t("product:Pay")} span={3}>
+              {
+                this.renderPay(product)
+              }
+            </Descriptions.Item>
+          </Descriptions>
+        </Spin>
+        {
+          this.renderQrCodeModal()
+        }
+      </div>
+    );
+  }
+}
+
+export default ProductBuyPage;

web/src/ProductEditPage.js

@@ -0,0 +1,335 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Card, Col, Input, InputNumber, Row, Select} from "antd";
+import * as ProductBackend from "./backend/ProductBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import {LinkOutlined} from "@ant-design/icons";
+import * as ProviderBackend from "./backend/ProviderBackend";
+import ProductBuyPage from "./ProductBuyPage";
+
+const {Option} = Select;
+
+class ProductEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      productName: props.match.params.productName,
+      product: null,
+      providers: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getProduct();
+    this.getPaymentProviders();
+  }
+
+  getProduct() {
+    ProductBackend.getProduct("admin", this.state.productName)
+      .then((product) => {
+        this.setState({
+          product: product,
+        });
+      });
+  }
+
+  getPaymentProviders() {
+    ProviderBackend.getProviders("admin")
+      .then((res) => {
+        this.setState({
+          providers: res.filter(provider => provider.category === "Payment"),
+        });
+      });
+  }
+
+  parseProductField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateProductField(key, value) {
+    value = this.parseProductField(key, value);
+
+    const product = this.state.product;
+    product[key] = value;
+    this.setState({
+      product: product,
+    });
+  }
+
+  renderProduct() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("product:New Product") : i18next.t("product:Edit Product")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitProductEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitProductEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteProduct()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      } style={(Setting.isMobile()) ? {margin: "5px"} : {}} type="inner">
+        <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.product.name} onChange={e => {
+              this.updateProductField("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.product.displayName} onChange={e => {
+              this.updateProductField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Image"), i18next.t("product:Image - Tooltip"))} :
+          </Col>
+          <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.product.image} onChange={e => {
+                  this.updateProductField("image", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <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.product.image}>
+                  <img src={this.state.product.image} alt={this.state.product.image} height={90} style={{marginBottom: "20px"}} />
+                </a>
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Tag"), i18next.t("product:Tag - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.product.tag} onChange={e => {
+              this.updateProductField("tag", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Detail"), i18next.t("product:Detail - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.product.detail} onChange={e => {
+              this.updateProductField("detail", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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.product.description} onChange={e => {
+              this.updateProductField("description", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.product.currency} onChange={(value => {
+              this.updateProductField("currency", value);
+            })}>
+              {
+                [
+                  {id: "USD", name: "USD"},
+                  {id: "CNY", name: "CNY"},
+                ].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}>
+            {Setting.getLabel(i18next.t("product:Price"), i18next.t("product:Price - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.product.price} onChange={value => {
+              this.updateProductField("price", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Quantity"), i18next.t("product:Quantity - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.product.quantity} onChange={value => {
+              this.updateProductField("quantity", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Sold"), i18next.t("product:Sold - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.product.sold} onChange={value => {
+              this.updateProductField("sold", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Payment providers"), i18next.t("product:Payment providers - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.product.providers} onChange={(value => {this.updateProductField("providers", value);})}>
+              {
+                this.state.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("product:Return URL"), i18next.t("product:Return URL - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined />} value={this.state.product.returnUrl} onChange={e => {
+              this.updateProductField("returnUrl", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:State"), i18next.t("general:State - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.product.state} onChange={(value => {
+              this.updateProductField("state", value);
+            })}>
+              {
+                [
+                  {id: "Published", name: "Published"},
+                  {id: "Draft", name: "Draft"},
+                ].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}>
+            {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
+          </Col>
+          {
+            this.renderPreview()
+          }
+        </Row>
+      </Card>
+    );
+  }
+
+  renderPreview() {
+    const buyUrl = `/products/${this.state.product.name}/buy`;
+    return (
+      <Col span={22} style={{display: "flex", flexDirection: "column"}}>
+        <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={buyUrl}>
+          <Button type="primary">{i18next.t("product:Test buy 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"}}>
+          <ProductBuyPage product={this.state.product} />
+        </div>
+      </Col>
+    );
+  }
+
+  submitProductEdit(willExist) {
+    const product = Setting.deepCopy(this.state.product);
+    ProductBackend.updateProduct(this.state.product.owner, this.state.productName, product)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            productName: this.state.product.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/products");
+          } else {
+            this.props.history.push(`/products/${this.state.product.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateProductField("name", this.state.productName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteProduct() {
+    ProductBackend.deleteProduct(this.state.product)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/products");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.product !== null ? this.renderProduct() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitProductEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitProductEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteProduct()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProductEditPage;

web/src/ProductListPage.js

@@ -0,0 +1,310 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Link} from "react-router-dom";
+import {Button, Col, List, Row, Table, Tooltip} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ProductBackend from "./backend/ProductBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import {EditOutlined} from "@ant-design/icons";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class ProductListPage extends BaseListPage {
+  newProduct() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin",
+      name: `product_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Product - ${randomName}`,
+      image: `${Setting.StaticBaseUrl}/img/casdoor-logo_1185x256.png`,
+      tag: "Casdoor Summit 2022",
+      currency: "USD",
+      price: 300,
+      quantity: 99,
+      sold: 10,
+      providers: [],
+      state: "Published",
+    };
+  }
+
+  addProduct() {
+    const newProduct = this.newProduct();
+    ProductBackend.addProduct(newProduct)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/products/${newProduct.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteProduct(i) {
+    ProductBackend.deleteProduct(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(products) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "140px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/products/${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: "170px",
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("product:Image"),
+        dataIndex: "image",
+        key: "image",
+        width: "170px",
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" rel="noreferrer" href={text}>
+              <img src={text} alt={text} width={150} />
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("user:Tag"),
+        dataIndex: "tag",
+        key: "tag",
+        width: "160px",
+        sorter: true,
+        ...this.getColumnSearchProps("tag"),
+      },
+      {
+        title: i18next.t("payment:Currency"),
+        dataIndex: "currency",
+        key: "currency",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("currency"),
+      },
+      {
+        title: i18next.t("product:Price"),
+        dataIndex: "price",
+        key: "price",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("price"),
+      },
+      {
+        title: i18next.t("product:Quantity"),
+        dataIndex: "quantity",
+        key: "quantity",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("quantity"),
+      },
+      {
+        title: i18next.t("product:Sold"),
+        dataIndex: "sold",
+        key: "sold",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("sold"),
+      },
+      {
+        title: i18next.t("general:State"),
+        dataIndex: "state",
+        key: "state",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("state"),
+      },
+      {
+        title: i18next.t("product:Payment providers"),
+        dataIndex: "providers",
+        key: "providers",
+        width: "500px",
+        ...this.getColumnSearchProps("providers"),
+        render: (text, record, index) => {
+          const providers = text;
+          if (providers.length === 0) {
+            return `(${i18next.t("general:empty")})`;
+          }
+
+          const half = Math.floor((providers.length + 1) / 2);
+
+          const getList = (providers) => {
+            return (
+              <List
+                size="small"
+                locale={{emptyText: " "}}
+                dataSource={providers}
+                renderItem={(providerName, i) => {
+                  return (
+                    <List.Item>
+                      <div style={{display: "inline"}}>
+                        <Tooltip placement="topLeft" title="Edit">
+                          <Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/providers/${providerName}`)} />
+                        </Tooltip>
+                        <Link to={`/providers/${providerName}`}>
+                          {providerName}
+                        </Link>
+                      </div>
+                    </List.Item>
+                  );
+                }}
+              />
+            );
+          };
+
+          return (
+            <div>
+              <Row>
+                <Col span={12}>
+                  {
+                    getList(providers.slice(0, half))
+                  }
+                </Col>
+                <Col span={12}>
+                  {
+                    getList(providers.slice(half))
+                  }
+                </Col>
+              </Row>
+            </div>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "230px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} onClick={() => this.props.history.push(`/products/${record.name}/buy`)}>{i18next.t("product:Buy")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/products/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteProduct(index)}
+              >
+              </PopconfirmModal>
+            </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={products} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Products")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addProduct.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    ProductBackend.getProducts("", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ProductListPage;

web/src/ProviderEditPage.js

@@ -0,0 +1,942 @@
+// 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, InputNumber, Row, Select, Switch} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as ProviderBackend from "./backend/ProviderBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import {authConfig} from "./auth/Auth";
+import * as ProviderEditTestEmail from "./common/TestEmailWidget";
+import * as ProviderEditTestSms from "./common/TestSmsWidget";
+import copy from "copy-to-clipboard";
+import {CaptchaPreview} from "./common/CaptchaPreview";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
+
+const {Option} = Select;
+const {TextArea} = Input;
+
+class ProviderEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      providerName: props.match.params.providerName,
+      owner: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      provider: null,
+      organizations: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getOrganizations();
+    this.getProvider();
+  }
+
+  getProvider() {
+    ProviderBackend.getProvider(this.state.owner, this.state.providerName)
+      .then((provider) => {
+        this.setState({
+          provider: provider,
+        });
+      });
+  }
+
+  getOrganizations() {
+    if (Setting.isAdminUser(this.props.account)) {
+      OrganizationBackend.getOrganizations("admin")
+        .then((res) => {
+          this.setState({
+            organizations: res.msg === undefined ? res : [],
+          });
+        });
+    }
+  }
+
+  parseProviderField(key, value) {
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateProviderField(key, value) {
+    value = this.parseProviderField(key, value);
+
+    const provider = this.state.provider;
+    provider[key] = value;
+    this.setState({
+      provider: provider,
+    });
+  }
+
+  getClientIdLabel(provider) {
+    switch (provider.category) {
+    case "Email":
+      return Setting.getLabel(i18next.t("signup:Username"), i18next.t("signup:Username - Tooltip"));
+    case "SMS":
+      if (provider.type === "Volc Engine SMS") {
+        return Setting.getLabel(i18next.t("provider:Access key"), i18next.t("provider:Access key - Tooltip"));
+      } else if (provider.type === "Huawei Cloud SMS") {
+        return Setting.getLabel(i18next.t("provider:App key"), i18next.t("provider:App key - Tooltip"));
+      } else {
+        return Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"));
+      }
+    case "Captcha":
+      if (provider.type === "Aliyun Captcha") {
+        return Setting.getLabel(i18next.t("provider:Access key"), i18next.t("provider:Access key - Tooltip"));
+      } else {
+        return Setting.getLabel(i18next.t("provider:Site key"), i18next.t("provider:Site key - Tooltip"));
+      }
+    default:
+      return Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"));
+    }
+  }
+
+  getClientSecretLabel(provider) {
+    switch (provider.category) {
+    case "Email":
+      return Setting.getLabel(i18next.t("general:Password"), i18next.t("general:Password - Tooltip"));
+    case "SMS":
+      if (provider.type === "Volc Engine SMS") {
+        return Setting.getLabel(i18next.t("provider:Secret access key"), i18next.t("provider:Secret access key - Tooltip"));
+      } else if (provider.type === "Huawei Cloud SMS") {
+        return Setting.getLabel(i18next.t("provider:App secret"), i18next.t("provider:AppSecret - Tooltip"));
+      } else {
+        return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
+      }
+    case "Captcha":
+      if (provider.type === "Aliyun Captcha") {
+        return Setting.getLabel(i18next.t("provider:Secret access key"), i18next.t("provider:Secret access key - Tooltip"));
+      } else {
+        return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
+      }
+    case "AI":
+      return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
+    default:
+      return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
+    }
+  }
+
+  getProviderSubTypeOptions(type) {
+    if (type === "WeCom" || type === "Infoflow") {
+      return (
+        [
+          {id: "Internal", name: i18next.t("provider:Internal")},
+          {id: "Third-party", name: i18next.t("provider:Third-party")},
+        ]
+      );
+    } else if (type === "Aliyun Captcha") {
+      return [
+        {id: "nc", name: i18next.t("provider:Sliding Validation")},
+        {id: "ic", name: i18next.t("provider:Intelligent Validation")},
+      ];
+    } else {
+      return [];
+    }
+  }
+
+  getAppIdRow(provider) {
+    let text = "";
+    let tooltip = "";
+
+    if (provider.category === "OAuth") {
+      if (provider.type === "WeCom" && provider.subType === "Internal") {
+        text = i18next.t("provider:Agent ID");
+        tooltip = i18next.t("provider:Agent ID - Tooltip");
+      } else if (provider.type === "Infoflow") {
+        text = i18next.t("provider:Agent ID");
+        tooltip = i18next.t("provider:Agent ID - Tooltip");
+      }
+    } else if (provider.category === "SMS") {
+      if (provider.type === "Tencent Cloud SMS") {
+        text = i18next.t("provider:App ID");
+        tooltip = i18next.t("provider:App ID - Tooltip");
+      } else if (provider.type === "Volc Engine SMS") {
+        text = i18next.t("provider:SMS account");
+        tooltip = i18next.t("provider:SMS account - Tooltip");
+      } else if (provider.type === "Huawei Cloud SMS") {
+        text = i18next.t("provider:Channel No.");
+        tooltip = i18next.t("provider:Channel No. - Tooltip");
+      }
+    } else if (provider.category === "Email") {
+      if (provider.type === "SUBMAIL") {
+        text = i18next.t("provider:App ID");
+        tooltip = i18next.t("provider:App ID - Tooltip");
+      }
+    }
+
+    if (text === "" && tooltip === "") {
+      return null;
+    } else {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(text, tooltip)} :
+          </Col>
+          <Col span={22} >
+            <Input value={provider.appId} onChange={e => {
+              this.updateProviderField("appId", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    }
+  }
+
+  loadSamlConfiguration() {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(this.state.provider.metadata, "text/xml");
+    const cert = xmlDoc.getElementsByTagName("ds:X509Certificate")[0].childNodes[0].nodeValue;
+    const endpoint = xmlDoc.getElementsByTagName("md:SingleSignOnService")[0].getAttribute("Location");
+    const issuerUrl = xmlDoc.getElementsByTagName("md:EntityDescriptor")[0].getAttribute("entityID");
+    this.updateProviderField("idP", cert);
+    this.updateProviderField("endpoint", endpoint);
+    this.updateProviderField("issuerUrl", issuerUrl);
+  }
+
+  renderProvider() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("provider:New Provider") : i18next.t("provider:Edit Provider")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteProvider()}>{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:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.provider.name} onChange={e => {
+              this.updateProviderField("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.provider.displayName} onChange={e => {
+              this.updateProviderField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <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%"}} disabled={!Setting.isAdminUser(this.props.account)} value={this.state.provider.owner} onChange={(value => {this.updateProviderField("owner", value);})}>
+              {Setting.isAdminUser(this.props.account) ? <Option key={"admin"} value={"admin"}>{i18next.t("provider:admin (Shared)")}</Option> : null}
+              {
+                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("provider:Category"), i18next.t("provider:Category - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.provider.category} onChange={(value => {
+              this.updateProviderField("category", value);
+              if (value === "OAuth") {
+                this.updateProviderField("type", "GitHub");
+              } else if (value === "Email") {
+                this.updateProviderField("type", "Default");
+                this.updateProviderField("host", "smtp.example.com");
+                this.updateProviderField("port", 465);
+                this.updateProviderField("disableSsl", false);
+                this.updateProviderField("title", "Casdoor Verification Code");
+                this.updateProviderField("content", "You have requested a verification code at Casdoor. Here is your code: %s, please enter in 5 minutes.");
+                this.updateProviderField("receiver", this.props.account.email);
+              } else if (value === "SMS") {
+                this.updateProviderField("type", "Aliyun SMS");
+              } else if (value === "Storage") {
+                this.updateProviderField("type", "Local File System");
+                this.updateProviderField("domain", Setting.getFullServerUrl());
+              } else if (value === "SAML") {
+                this.updateProviderField("type", "Aliyun IDaaS");
+              } else if (value === "Payment") {
+                this.updateProviderField("type", "Alipay");
+              } else if (value === "Captcha") {
+                this.updateProviderField("type", "Default");
+              } else if (value === "AI") {
+                this.updateProviderField("type", "OpenAI API - GPT");
+              }
+            })}>
+              {
+                [
+                  {id: "AI", name: "AI"},
+                  {id: "Captcha", name: "Captcha"},
+                  {id: "Email", name: "Email"},
+                  {id: "OAuth", name: "OAuth"},
+                  {id: "Payment", name: "Payment"},
+                  {id: "SAML", name: "SAML"},
+                  {id: "SMS", name: "SMS"},
+                  {id: "Storage", name: "Storage"},
+                ]
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map((providerCategory, index) => <Option key={index} value={providerCategory.id}>{providerCategory.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Type"), i18next.t("provider:Type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.provider.type} onChange={(value => {
+              this.updateProviderField("type", value);
+              if (value === "Local File System") {
+                this.updateProviderField("domain", Setting.getFullServerUrl());
+              }
+              if (value === "Custom") {
+                this.updateProviderField("customAuthUrl", "https://door.casdoor.com/login/oauth/authorize");
+                this.updateProviderField("customScope", "openid profile email");
+                this.updateProviderField("customTokenUrl", "https://door.casdoor.com/api/login/oauth/access_token");
+                this.updateProviderField("customUserInfoUrl", "https://door.casdoor.com/api/userinfo");
+              }
+            })}>
+              {
+                Setting.getProviderTypeOptions(this.state.provider.category)
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map((providerType, index) => <Option key={index} value={providerType.id}>{providerType.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        {
+          this.state.provider.type !== "WeCom" && this.state.provider.type !== "Infoflow" && this.state.provider.type !== "Aliyun Captcha" ? null : (
+            <React.Fragment>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={2}>
+                  {Setting.getLabel(i18next.t("provider:Sub type"), i18next.t("provider:Sub type - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Select virtual={false} style={{width: "100%"}} value={this.state.provider.subType} onChange={value => {
+                    this.updateProviderField("subType", value);
+                  }}>
+                    {
+                      this.getProviderSubTypeOptions(this.state.provider.type).map((providerSubType, index) => <Option key={index} value={providerSubType.id}>{providerSubType.name}</Option>)
+                    }
+                  </Select>
+                </Col>
+              </Row>
+              {
+                this.state.provider.type !== "WeCom" ? null : (
+                  <Row style={{marginTop: "20px"}} >
+                    <Col style={{marginTop: "5px"}} span={2}>
+                      {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
+                    </Col>
+                    <Col span={22} >
+                      <Select virtual={false} style={{width: "100%"}} value={this.state.provider.method} onChange={value => {
+                        this.updateProviderField("method", value);
+                      }}>
+                        {
+                          [
+                            {id: "Normal", name: i18next.t("provider:Normal")},
+                            {id: "Silent", name: i18next.t("provider:Silent")},
+                          ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+                        }
+                      </Select>
+                    </Col>
+                  </Row>)
+              }
+            </React.Fragment>
+          )
+        }
+        {
+          this.state.provider.type !== "Custom" ? null : (
+            <React.Fragment>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Auth URL"), i18next.t("provider:Auth URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customAuthUrl} onChange={e => {
+                    this.updateProviderField("customAuthUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Scope"), i18next.t("provider:Scope - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customScope} onChange={e => {
+                    this.updateProviderField("customScope", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Token URL"), i18next.t("provider:Token URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customTokenUrl} onChange={e => {
+                    this.updateProviderField("customTokenUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:UserInfo URL"), i18next.t("provider:UserInfo URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.customUserInfoUrl} onChange={e => {
+                    this.updateProviderField("customUserInfoUrl", 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"))} :
+                </Col>
+                <Col span={22} >
+                  <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.provider.customLogo} onChange={e => {
+                        this.updateProviderField("customLogo", e.target.value);
+                      }} />
+                    </Col>
+                  </Row>
+                  <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.provider.customLogo}>
+                        <img src={this.state.provider.customLogo} alt={this.state.provider.customLogo} height={90} style={{marginBottom: "20px"}} />
+                      </a>
+                    </Col>
+                  </Row>
+                </Col>
+              </Row>
+            </React.Fragment>
+          )
+        }
+        {
+          this.state.provider.category === "Captcha" && this.state.provider.type === "Default" ? null : (
+            <React.Fragment>
+              {
+                this.state.provider.category === "AI" ? null : (
+                  <Row style={{marginTop: "20px"}} >
+                    <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                      {this.getClientIdLabel(this.state.provider)}
+                    </Col>
+                    <Col span={22} >
+                      <Input value={this.state.provider.clientId} onChange={e => {
+                        this.updateProviderField("clientId", e.target.value);
+                      }} />
+                    </Col>
+                  </Row>
+                )
+              }
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {this.getClientSecretLabel(this.state.provider)}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.clientSecret} onChange={e => {
+                    this.updateProviderField("clientSecret", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+            </React.Fragment>
+          )
+        }
+        {
+          this.state.provider.type !== "WeChat" && this.state.provider.type !== "Aliyun Captcha" && this.state.provider.type !== "WeChat Pay" ? null : (
+            <React.Fragment>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {this.state.provider.type === "Aliyun Captcha"
+                    ? Setting.getLabel(i18next.t("provider:Scene"), i18next.t("provider:Scene - Tooltip"))
+                    : this.state.provider.type === "WeChat Pay"
+                      ? Setting.getLabel("appId", "appId")
+                      : Setting.getLabel(i18next.t("provider:Client ID 2"), i18next.t("provider:Client ID 2 - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.clientId2} onChange={e => {
+                    this.updateProviderField("clientId2", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              {
+                this.state.provider.type === "WeChat Pay" ? null : (
+                  <Row style={{marginTop: "20px"}} >
+                    <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                      {this.state.provider.type === "Aliyun Captcha"
+                        ? Setting.getLabel(i18next.t("provider:App key"), i18next.t("provider:App key - Tooltip"))
+                        : Setting.getLabel(i18next.t("provider:Client secret 2"), i18next.t("provider:Client secret 2 - Tooltip"))}
+                    </Col>
+                    <Col span={22} >
+                      <Input value={this.state.provider.clientSecret2} onChange={e => {
+                        this.updateProviderField("clientSecret2", e.target.value);
+                      }} />
+                    </Col>
+                  </Row>
+                )
+              }
+            </React.Fragment>
+          )
+        }
+        {
+          this.state.provider.type !== "WeChat" ? null : (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:Enable QR code"), i18next.t("provider:Enable QR code - Tooltip"))} :
+              </Col>
+              <Col span={1} >
+                <Switch checked={this.state.provider.disableSsl} onChange={checked => {
+                  this.updateProviderField("disableSsl", checked);
+                }} />
+              </Col>
+            </Row>
+          )
+        }
+        {
+          this.state.provider.type !== "Adfs" && this.state.provider.type !== "AzureAD" && this.state.provider.type !== "Casdoor" && this.state.provider.type !== "Okta" ? null : (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Domain"), i18next.t("provider:Domain - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.domain} onChange={e => {
+                  this.updateProviderField("domain", e.target.value);
+                }} />
+              </Col>
+            </Row>
+          )
+        }
+        {this.state.provider.category === "Storage" ? (
+          <div>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Endpoint"), i18next.t("provider:Region endpoint for Internet"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.endpoint} onChange={e => {
+                  this.updateProviderField("endpoint", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Endpoint (Intranet)"), i18next.t("provider:Region endpoint for Intranet"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.intranetEndpoint} onChange={e => {
+                  this.updateProviderField("intranetEndpoint", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Bucket"), i18next.t("provider:Bucket - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.bucket} onChange={e => {
+                  this.updateProviderField("bucket", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Path prefix"), i18next.t("provider:Path prefix - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.pathPrefix} onChange={e => {
+                  this.updateProviderField("pathPrefix", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={2}>
+                {Setting.getLabel(i18next.t("provider:Domain"), i18next.t("provider:Domain - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.domain} onChange={e => {
+                  this.updateProviderField("domain", e.target.value);
+                }} />
+              </Col>
+            </Row>
+            {["AWS S3", "MinIO", "Tencent Cloud COS"].includes(this.state.provider.type) ? (
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={2}>
+                  {Setting.getLabel(i18next.t("provider:Region ID"), i18next.t("provider:Region ID - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.regionId} onChange={e => {
+                    this.updateProviderField("regionId", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+            ) : null}
+          </div>
+        ) : null}
+        {
+          this.state.provider.category === "Email" ? (
+            <React.Fragment>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Host"), i18next.t("provider:Host - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input prefix={<LinkOutlined />} value={this.state.provider.host} onChange={e => {
+                    this.updateProviderField("host", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Port"), i18next.t("provider:Port - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <InputNumber value={this.state.provider.port} onChange={value => {
+                    this.updateProviderField("port", value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Disable SSL"), i18next.t("provider:Disable SSL - Tooltip"))} :
+                </Col>
+                <Col span={1} >
+                  <Switch checked={this.state.provider.disableSsl} onChange={checked => {
+                    this.updateProviderField("disableSsl", checked);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Email title"), i18next.t("provider:Email title - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.title} onChange={e => {
+                    this.updateProviderField("title", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Email content"), i18next.t("provider:Email content - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <TextArea autoSize={{minRows: 3, maxRows: 100}} value={this.state.provider.content} onChange={e => {
+                    this.updateProviderField("content", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Test Email"), i18next.t("provider:Test Email - Tooltip"))} :
+                </Col>
+                <Col span={4} >
+                  <Input value={this.state.provider.receiver} placeholder = {i18next.t("user:Input your email")} onChange={e => {
+                    this.updateProviderField("receiver", e.target.value);
+                  }} />
+                </Col>
+                <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => ProviderEditTestEmail.connectSmtpServer(this.state.provider)} >
+                  {i18next.t("provider:Test SMTP Connection")}
+                </Button>
+                <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
+                  disabled={!Setting.isValidEmail(this.state.provider.receiver)}
+                  onClick={() => ProviderEditTestEmail.sendTestEmail(this.state.provider, this.state.provider.receiver)} >
+                  {i18next.t("provider:Send Testing Email")}
+                </Button>
+              </Row>
+            </React.Fragment>
+          ) : this.state.provider.category === "SMS" ? (
+            <React.Fragment>
+              {this.state.provider.type === "Twilio SMS" ?
+                null :
+                (<Row style={{marginTop: "20px"}} >
+                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                    {Setting.getLabel(i18next.t("provider:Sign Name"), i18next.t("provider:Sign Name - Tooltip"))} :
+                  </Col>
+                  <Col span={22} >
+                    <Input value={this.state.provider.signName} onChange={e => {
+                      this.updateProviderField("signName", e.target.value);
+                    }} />
+                  </Col>
+                </Row>
+                )
+              }
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Template code"), i18next.t("provider:Template code - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.templateCode} onChange={e => {
+                    this.updateProviderField("templateCode", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:SMS Test"), i18next.t("provider:SMS Test - Tooltip"))} :
+                </Col>
+                <Col span={4} >
+                  <Input.Group compact>
+                    <CountryCodeSelect
+                      style={{width: "30%"}}
+                      value={this.state.provider.content}
+                      onChange={(value) => {
+                        this.updateProviderField("content", value);
+                      }}
+                      countryCodes={this.props.account.organization.countryCodes}
+                    />
+                    <Input value={this.state.provider.receiver}
+                      style={{width: "70%"}}
+                      placeholder = {i18next.t("user:Input your phone number")}
+                      onChange={e => {
+                        this.updateProviderField("receiver", e.target.value);
+                      }} />
+                  </Input.Group>
+                </Col>
+                <Col span={2} >
+                  <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
+                    disabled={!Setting.isValidPhone(this.state.provider.receiver)}
+                    onClick={() => ProviderEditTestSms.sendTestSms(this.state.provider, "+" + Setting.getCountryCode(this.state.provider.content) + this.state.provider.receiver)} >
+                    {i18next.t("provider:Send Testing SMS")}
+                  </Button>
+                </Col>
+              </Row>
+            </React.Fragment>
+          ) : this.state.provider.category === "SAML" ? (
+            <React.Fragment>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Sign request"), i18next.t("provider:Sign request - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Switch checked={this.state.provider.enableSignAuthnRequest} onChange={checked => {
+                    this.updateProviderField("enableSignAuthnRequest", checked);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Metadata"), i18next.t("provider:Metadata - Tooltip"))} :
+                </Col>
+                <Col span={22}>
+                  <TextArea rows={4} value={this.state.provider.metadata} onChange={e => {
+                    this.updateProviderField("metadata", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}}>
+                <Col style={{marginTop: "5px"}} span={2} />
+                <Col span={2}>
+                  <Button type="primary" onClick={() => {
+                    try {
+                      this.loadSamlConfiguration();
+                      Setting.showMessage("success", i18next.t("provider:Parse metadata successfully"));
+                    } catch (err) {
+                      Setting.showMessage("error", i18next.t("provider:Can not parse metadata"));
+                    }
+                  }}>
+                    {i18next.t("provider:Parse")}
+                  </Button>
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Endpoint"), i18next.t("provider:SAML 2.0 Endpoint (HTTP)"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.endpoint} onChange={e => {
+                    this.updateProviderField("endpoint", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:IdP"), i18next.t("provider:IdP certificate"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.idP} onChange={e => {
+                    this.updateProviderField("idP", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Issuer URL"), i18next.t("provider:Issuer URL - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input value={this.state.provider.issuerUrl} onChange={e => {
+                    this.updateProviderField("issuerUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:SP ACS URL"), i18next.t("provider:SP ACS URL - Tooltip"))} :
+                </Col>
+                <Col span={21} >
+                  <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
+                </Col>
+                <Col span={1}>
+                  <Button type="primary" onClick={() => {
+                    copy(`${authConfig.serverUrl}/api/acs`);
+                    Setting.showMessage("success", i18next.t("provider:Link copied to clipboard successfully"));
+                  }}>
+                    {i18next.t("provider:Copy")}
+                  </Button>
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:SP Entity ID"), i18next.t("provider:SP ACS URL - Tooltip"))} :
+                </Col>
+                <Col span={21} >
+                  <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
+                </Col>
+                <Col span={1}>
+                  <Button type="primary" onClick={() => {
+                    copy(`${authConfig.serverUrl}/api/acs`);
+                    Setting.showMessage("success", i18next.t("provider:Link copied to clipboard successfully"));
+                  }}>
+                    {i18next.t("provider:Copy")}
+                  </Button>
+                </Col>
+              </Row>
+            </React.Fragment>
+          ) : null
+        }
+        {
+          this.state.provider.type === "WeChat Pay" ? (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel("cert", "cert")} :
+              </Col>
+              <Col span={22} >
+                <Input value={this.state.provider.cert} onChange={e => {
+                  this.updateProviderField("cert", e.target.value);
+                }} />
+              </Col>
+            </Row>
+          ) : null
+        }
+        {this.getAppIdRow(this.state.provider)}
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Provider URL"), i18next.t("provider:Provider URL - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined />} value={this.state.provider.providerUrl} onChange={e => {
+              this.updateProviderField("providerUrl", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        {
+          this.state.provider.category !== "Captcha" ? null : (
+            <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>
+              <Col span={22} >
+                <CaptchaPreview
+                  owner={this.state.provider.owner}
+                  name={this.state.provider.name}
+                  provider={this.state.provider}
+                  providerName={this.state.providerName}
+                  captchaType={this.state.provider.type}
+                  subType={this.state.provider.subType}
+                  clientId={this.state.provider.clientId}
+                  clientSecret={this.state.provider.clientSecret}
+                  clientId2={this.state.provider.clientId2}
+                  clientSecret2={this.state.provider.clientSecret2}
+                  providerUrl={this.state.provider.providerUrl}
+                />
+              </Col>
+            </Row>
+          )
+        }
+      </Card>
+    );
+  }
+
+  submitProviderEdit(willExist) {
+    const provider = Setting.deepCopy(this.state.provider);
+    ProviderBackend.updateProvider(this.state.owner, this.state.providerName, provider)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            owner: this.state.provider.owner,
+            providerName: this.state.provider.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/providers");
+          } else {
+            this.props.history.push(`/providers/${this.state.provider.owner}/${this.state.provider.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateProviderField("name", this.state.providerName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteProvider() {
+    ProviderBackend.deleteProvider(this.state.provider)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/providers");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.provider !== null ? this.renderProvider() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteProvider()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProviderEditPage;

web/src/ProviderListPage.js

@@ -0,0 +1,281 @@
+// 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as ProviderBackend from "./backend/ProviderBackend";
+import * as Provider from "./auth/Provider";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class ProviderListPage extends BaseListPage {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setState({
+      owner: Setting.isAdminUser(this.props.account) ? "admin" : this.props.account.owner,
+    });
+  }
+
+  newProvider() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: this.state.owner,
+      name: `provider_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Provider - ${randomName}`,
+      category: "OAuth",
+      type: "GitHub",
+      method: "Normal",
+      clientId: "",
+      clientSecret: "",
+      enableSignUp: true,
+      host: "",
+      port: 0,
+      providerUrl: "https://github.com/organizations/xxx/settings/applications/1234567",
+    };
+  }
+
+  addProvider() {
+    const newProvider = this.newProvider();
+    ProviderBackend.addProvider(newProvider)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/providers/${newProvider.owner}/${newProvider.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteProvider(i) {
+    ProviderBackend.deleteProvider(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(providers) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/providers/${record.owner}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "180px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Display name"),
+        dataIndex: "displayName",
+        key: "displayName",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("provider:Category"),
+        dataIndex: "category",
+        key: "category",
+        filterMultiple: false,
+        filters: [
+          {text: "OAuth", value: "OAuth"},
+          {text: "Email", value: "Email"},
+          {text: "SMS", value: "SMS"},
+          {text: "Storage", value: "Storage"},
+          {text: "SAML", value: "SAML"},
+          {text: "Captcha", value: "Captcha"},
+          {text: "Payment", value: "Payment"},
+        ],
+        width: "110px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "110px",
+        align: "center",
+        filterMultiple: false,
+        filters: [
+          {text: "OAuth", value: "OAuth", children: Setting.getProviderTypeOptions("OAuth").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "Email", value: "Email", children: Setting.getProviderTypeOptions("Email").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "SMS", value: "SMS", children: Setting.getProviderTypeOptions("SMS").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "Storage", value: "Storage", children: Setting.getProviderTypeOptions("Storage").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "SAML", value: "SAML", children: Setting.getProviderTypeOptions("SAML").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "Captcha", value: "Captcha", children: Setting.getProviderTypeOptions("Captcha").map((o) => {return {text: o.id, value: o.name};})},
+          {text: "Payment", value: "Payment", children: Setting.getProviderTypeOptions("Payment").map((o) => {return {text: o.id, value: o.name};})},
+        ],
+        sorter: true,
+        render: (text, record, index) => {
+          return Provider.getProviderLogoWidget(record);
+        },
+      },
+      {
+        title: i18next.t("provider:Client ID"),
+        dataIndex: "clientId",
+        key: "clientId",
+        width: "100px",
+        sorter: true,
+        ...this.getColumnSearchProps("clientId"),
+        render: (text, record, index) => {
+          return Setting.getShortText(text);
+        },
+      },
+      {
+        title: i18next.t("provider:Provider URL"),
+        dataIndex: "providerUrl",
+        key: "providerUrl",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("providerUrl"),
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" rel="noreferrer" href={text}>
+              {
+                Setting.getShortText(text)
+              }
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "170px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button disabled={!Setting.isAdminUser(this.props.account) && (record.owner !== this.props.account.owner)} style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.props.history.push(`/providers/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteProvider(index)}
+              >
+              </PopconfirmModal>
+            </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={providers} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Providers")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addProvider.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.category !== undefined && params.category !== null) {
+      field = "category";
+      value = params.category;
+    } else if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    (Setting.isAdminUser(this.props.account) ? ProviderBackend.getGlobalProviders(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      : ProviderBackend.getProviders(this.state.owner, 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ProviderListPage;

web/src/RecordListPage.js

@@ -0,0 +1,237 @@
+// 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 {Switch, Table} from "antd";
+import * as Setting from "./Setting";
+import * as RecordBackend from "./backend/RecordBackend";
+import i18next from "i18next";
+import moment from "moment";
+import BaseListPage from "./BaseListPage";
+
+class RecordListPage extends BaseListPage {
+  UNSAFE_componentWillMount() {
+    this.state.pagination.pageSize = 20;
+    const {pagination} = this.state;
+    this.fetch({pagination});
+  }
+
+  newRecord() {
+    return {
+      owner: "built-in",
+      name: "1234",
+      id: "1234",
+      clientIp: "::1",
+      timestamp: moment().format(),
+      organization: "built-in",
+      username: "admin",
+      requestUri: "/api/get-account",
+      action: "login",
+      isTriggered: false,
+    };
+  }
+
+  renderTable(records) {
+    let columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "320px",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+      },
+      {
+        title: i18next.t("general:ID"),
+        dataIndex: "id",
+        key: "id",
+        width: "90px",
+        sorter: true,
+        ...this.getColumnSearchProps("id"),
+      },
+      {
+        title: i18next.t("general:Client IP"),
+        dataIndex: "clientIp",
+        key: "clientIp",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("clientIp"),
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" rel="noreferrer" href={`https://db-ip.com/${text}`}>
+              {text}
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Timestamp"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "180px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "110px",
+        sorter: true,
+        ...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",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${record.organization}/${record.user}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Method"),
+        dataIndex: "method",
+        key: "method",
+        width: "110px",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {text: "GET", value: "GET"},
+          {text: "HEAD", value: "HEAD"},
+          {text: "POST", value: "POST"},
+          {text: "PUT", value: "PUT"},
+          {text: "DELETE", value: "DELETE"},
+          {text: "CONNECT", value: "CONNECT"},
+          {text: "OPTIONS", value: "OPTIONS"},
+          {text: "TRACE", value: "TRACE"},
+          {text: "PATCH", value: "PATCH"},
+        ],
+      },
+      {
+        title: i18next.t("general:Request URI"),
+        dataIndex: "requestUri",
+        key: "requestUri",
+        // width: '300px',
+        sorter: true,
+        ...this.getColumnSearchProps("requestUri"),
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "action",
+        key: "action",
+        width: "200px",
+        sorter: true,
+        ...this.getColumnSearchProps("action"),
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return text;
+        },
+      },
+      {
+        title: i18next.t("record:Is triggered"),
+        dataIndex: "isTriggered",
+        key: "isTriggered",
+        width: "140px",
+        sorter: true,
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          if (!["signup", "login", "logout", "update-user"].includes(record.action)) {
+            return null;
+          }
+
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+    ];
+
+    if (Setting.isLocalAdminUser(this.props.account)) {
+      columns = columns.filter(column => column.key !== "name" && column.key !== "organization");
+    }
+
+    const paginationProps = {
+      total: this.state.pagination.total,
+      pageSize: this.state.pagination.pageSize,
+      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={records} rowKey="id" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.method !== undefined && params.method !== null) {
+      field = "method";
+      value = params.method;
+    }
+    this.setState({loading: true});
+    RecordBackend.getRecords(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,
+          });
+        } else {
+          if (res.data.includes("Please login first")) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default RecordListPage;

web/src/ResourceListPage.js

@@ -0,0 +1,316 @@
+// 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, Table, Upload} from "antd";
+import {UploadOutlined} from "@ant-design/icons";
+import copy from "copy-to-clipboard";
+import * as Setting from "./Setting";
+import * as ResourceBackend from "./backend/ResourceBackend";
+import i18next from "i18next";
+import {Link} from "react-router-dom";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class ResourceListPage extends BaseListPage {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setState({
+      fileList: [],
+      uploading: false,
+    });
+  }
+
+  deleteResource(i) {
+    ResourceBackend.deleteResource(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  handleUpload(info) {
+    this.setState({uploading: true});
+    const filename = info.fileList[0].name;
+    const fullFilePath = `resource/${this.props.account.owner}/${this.props.account.name}/${filename}`;
+    ResourceBackend.uploadResource(this.props.account.owner, this.props.account.name, "custom", "ResourceListPage", fullFilePath, info.file)
+      .then(res => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("application:File uploaded successfully"));
+          window.location.reload();
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      }).finally(() => {
+        this.setState({uploading: false});
+      });
+  }
+
+  renderUpload() {
+    return (
+      <Upload maxCount={1} accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.csv,.xls,.xlsx" showUploadList={false}
+        beforeUpload={file => {return false;}} onChange={info => {this.handleUpload(info);}}>
+        <Button icon={<UploadOutlined />} loading={this.state.uploading} type="primary" size="small">
+          {i18next.t("resource:Upload a file...")}
+        </Button>
+      </Upload>
+    );
+  }
+
+  renderTable(resources) {
+    const columns = [
+      {
+        title: i18next.t("general:Provider"),
+        dataIndex: "provider",
+        key: "provider",
+        width: "150px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("provider"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/providers/${record.owner}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Application"),
+        dataIndex: "application",
+        key: "application",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("application"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/applications/${record.organization}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:User"),
+        dataIndex: "user",
+        key: "user",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${record.owner}/${record.user}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("resource:Parent"),
+        dataIndex: "parent",
+        key: "parent",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("parent"),
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "150px",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "150px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("user:Tag"),
+        dataIndex: "tag",
+        key: "tag",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("tag"),
+      },
+      // {
+      //   title: i18next.t("resource:File name"),
+      //   dataIndex: 'fileName',
+      //   key: 'fileName',
+      //   width: '120px',
+      //   sorter: (a, b) => a.fileName.localeCompare(b.fileName),
+      // },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "fileType",
+        key: "fileType",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("fileType"),
+      },
+      {
+        title: i18next.t("resource:Format"),
+        dataIndex: "fileFormat",
+        key: "fileFormat",
+        width: "80px",
+        sorter: true,
+        ...this.getColumnSearchProps("fileFormat"),
+      },
+      {
+        title: i18next.t("resource:File size"),
+        dataIndex: "fileSize",
+        key: "fileSize",
+        width: "100px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFriendlyFileSize(text);
+        },
+      },
+      {
+        title: i18next.t("general:Preview"),
+        dataIndex: "preview",
+        key: "preview",
+        width: "100px",
+        render: (text, record, index) => {
+          if (record.fileType === "image") {
+            return (
+              <a target="_blank" rel="noreferrer" href={record.url}>
+                <img src={record.url} alt={record.name} width={200} />
+              </a>
+            );
+          } else if (record.fileType === "video") {
+            return (
+              <video width={200} controls>
+                <source src={record.url} type="video/mp4" />
+              </video>
+            );
+          }
+        },
+      },
+      {
+        title: i18next.t("general:URL"),
+        dataIndex: "url",
+        key: "url",
+        width: "120px",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button type="normal" onClick={() => {
+                copy(record.url);
+                Setting.showMessage("success", i18next.t("provider:Link copied to clipboard successfully"));
+              }}
+              >
+                {i18next.t("resource:Copy Link")}
+              </Button>
+            </div>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "70px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteResource(index)}
+                okText={i18next.t("general:OK")}
+                cancelText={i18next.t("general:Cancel")}
+              >
+              </PopconfirmModal>
+            </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={resources} rowKey="name" size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Resources")}&nbsp;&nbsp;&nbsp;&nbsp;
+              {/* <Button type="primary" size="small" onClick={this.addResource.bind(this)}>{i18next.t("general:Add")}</Button>*/}
+              {
+                this.renderUpload()
+              }
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    this.setState({loading: true});
+    ResourceBackend.getResources(this.props.account.owner, this.props.account.name, 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,
+          });
+        } else {
+          if (res.data.includes("Please login first")) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default ResourceListPage;

web/src/RoleEditPage.js

@@ -0,0 +1,241 @@
+// 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 RoleBackend from "./backend/RoleBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import * as UserBackend from "./backend/UserBackend";
+
+class RoleEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      roleName: props.match.params.roleName,
+      role: null,
+      organizations: [],
+      users: [],
+      roles: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getRole();
+    this.getOrganizations();
+  }
+
+  getRole() {
+    RoleBackend.getRole(this.state.organizationName, this.state.roleName)
+      .then((role) => {
+        this.setState({
+          role: role,
+        });
+
+        this.getUsers(role.owner);
+        this.getRoles(role.owner);
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getUsers(organizationName) {
+    UserBackend.getUsers(organizationName)
+      .then((res) => {
+        this.setState({
+          users: res,
+        });
+      });
+  }
+
+  getRoles(organizationName) {
+    RoleBackend.getRoles(organizationName)
+      .then((res) => {
+        this.setState({
+          roles: res,
+        });
+      });
+  }
+
+  parseRoleField(key, value) {
+    if ([""].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateRoleField(key, value) {
+    value = this.parseRoleField(key, value);
+
+    const role = this.state.role;
+    role[key] = value;
+    this.setState({
+      role: role,
+    });
+  }
+
+  renderRole() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("role:New Role") : i18next.t("role:Edit Role")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitRoleEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitRoleEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteRole()}>{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.role.owner} onChange={(value => {this.updateRoleField("owner", value);})}
+              options={this.state.organizations.map((organization) => Setting.getOption(organization.name, organization.name))
+              } />
+          </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.role.name} onChange={e => {
+              this.updateRoleField("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.role.displayName} onChange={e => {
+              this.updateRoleField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub users"), i18next.t("role:Sub users - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select mode="tags" style={{width: "100%"}} value={this.state.role.users}
+              onChange={(value => {this.updateRoleField("users", value);})}
+              options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.role.roles} onChange={(value => {this.updateRoleField("roles", value);})}
+              options={this.state.roles.filter(role => (role.owner !== this.state.role.owner || role.name !== this.state.role.name)).map((role) => Setting.getOption(`${role.owner}/${role.name}`, `${role.owner}/${role.name}`))
+              } />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("role:Sub domains"), i18next.t("role:Sub domains - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.role.domains} onChange={(value => {
+              this.updateRoleField("domains", value);
+            })}
+            options={this.state.role.domains?.map((domain) => Setting.getOption(domain, domain))
+            } />
+          </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.role.isEnabled} onChange={checked => {
+              this.updateRoleField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitRoleEdit(willExist) {
+    const role = Setting.deepCopy(this.state.role);
+    RoleBackend.updateRole(this.state.organizationName, this.state.roleName, role)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            roleName: this.state.role.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/roles");
+          } else {
+            this.props.history.push(`/roles/${this.state.role.owner}/${this.state.role.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateRoleField("name", this.state.roleName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteRole() {
+    RoleBackend.deleteRole(this.state.role)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/roles");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.role !== null ? this.renderRole() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitRoleEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitRoleEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteRole()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RoleEditPage;

web/src/RoleListPage.js

@@ -0,0 +1,246 @@
+// 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, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as RoleBackend from "./backend/RoleBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class RoleListPage extends BaseListPage {
+  newRole() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: this.props.account.owner,
+      name: `role_${randomName}`,
+      createdTime: moment().format(),
+      displayName: `New Role - ${randomName}`,
+      users: [],
+      roles: [],
+      domains: [],
+      isEnabled: true,
+    };
+  }
+
+  addRole() {
+    const newRole = this.newRole();
+    RoleBackend.addRole(newRole)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/roles/${newRole.owner}/${newRole.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteRole(i) {
+    RoleBackend.deleteRole(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+
+      });
+  }
+
+  renderTable(roles) {
+    const columns = [
+      {
+        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={`/roles/${record.owner}/${record.name}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        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: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("role:Sub users"),
+        dataIndex: "users",
+        key: "users",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("users"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "users");
+        },
+      },
+      {
+        title: i18next.t("role:Sub roles"),
+        dataIndex: "roles",
+        key: "roles",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("roles"),
+        render: (text, record, index) => {
+          return Setting.getTags(text, "roles");
+        },
+      },
+      {
+        title: i18next.t("role:Sub domains"),
+        dataIndex: "domains",
+        key: "domains",
+        sorter: true,
+        ...this.getColumnSearchProps("domains"),
+        render: (text, record, index) => {
+          return Setting.getTags(text);
+        },
+      },
+      {
+        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(`/roles/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteRole(index)}
+              >
+              </PopconfirmModal>
+            </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={roles} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Roles")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addRole.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    RoleBackend.getRoles(Setting.isAdminUser(this.props.account) ? "" : this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.setState({
+            loading: false,
+            data: res.data,
+            pagination: {
+              ...params.pagination,
+              total: res.data2,
+            },
+            searchText: params.searchText,
+            searchedColumn: params.searchedColumn,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default RoleListPage;

web/src/SessionListPage.js

@@ -0,0 +1,162 @@
+// 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 BaseListPage from "./BaseListPage";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import {Link} from "react-router-dom";
+import {Table, Tag} from "antd";
+import React from "react";
+import * as SessionBackend from "./backend/SessionBackend";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class SessionListPage extends BaseListPage {
+
+  deleteSession(i) {
+    SessionBackend.deleteSession(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(sessions) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: "150px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "organization",
+        width: "110px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "180px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:Session ID"),
+        dataIndex: "sessionId",
+        key: "sessionId",
+        width: "180px",
+        sorter: true,
+        render: (text, record, index) => {
+          return text.map((item, index) =>
+            <Tag key={index}>{item}</Tag>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "70px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteSession(index)}
+              >
+              </PopconfirmModal>
+            </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={sessions} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.contentType !== undefined && params.contentType !== null) {
+      field = "contentType";
+      value = params.contentType;
+    }
+    this.setState({loading: true});
+    SessionBackend.getSessions("", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default SessionListPage;

web/src/Setting.js

@@ -0,0 +1,1156 @@
+// 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 {Select, Tag, Tooltip, message, theme} from "antd";
+import {QuestionCircleTwoTone} from "@ant-design/icons";
+import {isMobile as isMobileDevice} from "react-device-detect";
+import "./i18n";
+import i18next from "i18next";
+import copy from "copy-to-clipboard";
+import {authConfig} from "./auth/Auth";
+import {Helmet} from "react-helmet";
+import * as Conf from "./Conf";
+import * as phoneNumber from "libphonenumber-js";
+
+const {Option} = Select;
+
+export const ServerUrl = "";
+
+// export const StaticBaseUrl = "https://cdn.jsdelivr.net/gh/casbin/static";
+export const StaticBaseUrl = "https://cdn.casbin.org";
+
+export const Countries = [{label: "English", key: "en", country: "US", alt: "English"},
+  {label: "中文", key: "zh", country: "CN", alt: "中文"},
+  {label: "Español", key: "es", country: "ES", alt: "Español"},
+  {label: "Français", key: "fr", country: "FR", alt: "Français"},
+  {label: "Deutsch", key: "de", country: "DE", alt: "Deutsch"},
+  {label: "Indonesia", key: "id", country: "ID", alt: "Indonesia"},
+  {label: "日本語", key: "ja", country: "JP", alt: "日本語"},
+  {label: "한국어", key: "ko", country: "KR", alt: "한국어"},
+  {label: "Русский", key: "ru", country: "RU", alt: "Русский"},
+  {label: "TiếngViệt", key: "vi", country: "VN", alt: "TiếngViệt"},
+];
+
+export function getThemeData(organization, application) {
+  if (application?.themeData?.isEnabled) {
+    return application.themeData;
+  } else if (organization?.themeData?.isEnabled) {
+    return organization.themeData;
+  } else {
+    return Conf.ThemeDefault;
+  }
+}
+
+export function getAlgorithm(themeAlgorithmNames) {
+  return themeAlgorithmNames.map((algorithmName) => {
+    if (algorithmName === "dark") {
+      return theme.darkAlgorithm;
+    }
+    if (algorithmName === "compact") {
+      return theme.compactAlgorithm;
+    }
+    return theme.defaultAlgorithm;
+  });
+}
+
+export function getAlgorithmNames(themeData) {
+  const algorithms = [themeData?.themeType !== "dark" ? "default" : "dark"];
+  if (themeData?.isCompact === true) {
+    algorithms.push("compact");
+  }
+
+  return algorithms;
+}
+
+export const OtherProviderInfo = {
+  SMS: {
+    "Aliyun SMS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/sms",
+    },
+    "Tencent Cloud SMS": {
+      logo: `${StaticBaseUrl}/img/social_tencent_cloud.jpg`,
+      url: "https://cloud.tencent.com/product/sms",
+    },
+    "Volc Engine SMS": {
+      logo: `${StaticBaseUrl}/img/social_volc_engine.jpg`,
+      url: "https://www.volcengine.com/products/cloud-sms",
+    },
+    "Huawei Cloud SMS": {
+      logo: `${StaticBaseUrl}/img/social_huawei.png`,
+      url: "https://www.huaweicloud.com/product/msgsms.html",
+    },
+    "Twilio SMS": {
+      logo: `${StaticBaseUrl}/img/social_twilio.svg`,
+      url: "https://www.twilio.com/messaging",
+    },
+    "SmsBao SMS": {
+      logo: `${StaticBaseUrl}/img/social_smsbao.png`,
+      url: "https://www.smsbao.com/",
+    },
+    "SUBMAIL SMS": {
+      logo: `${StaticBaseUrl}/img/social_submail.svg`,
+      url: "https://www.mysubmail.com",
+    },
+    "Mock SMS": {
+      logo: `${StaticBaseUrl}/img/social_default.png`,
+      url: "",
+    },
+  },
+  Email: {
+    "Default": {
+      logo: `${StaticBaseUrl}/img/email_default.png`,
+      url: "",
+    },
+    "SUBMAIL": {
+      logo: `${StaticBaseUrl}/img/social_submail.svg`,
+      url: "https://www.mysubmail.com",
+    },
+    "Mailtrap": {
+      logo: `${StaticBaseUrl}/img/email_mailtrap.png`,
+      url: "https://mailtrap.io",
+    },
+  },
+  Storage: {
+    "Local File System": {
+      logo: `${StaticBaseUrl}/img/social_file.png`,
+      url: "",
+    },
+    "AWS S3": {
+      logo: `${StaticBaseUrl}/img/social_aws.png`,
+      url: "https://aws.amazon.com/s3",
+    },
+    "MinIO": {
+      logo: "https://min.io/resources/img/logo.svg",
+      url: "https://min.io/",
+    },
+    "Aliyun OSS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/oss",
+    },
+    "Tencent Cloud COS": {
+      logo: `${StaticBaseUrl}/img/social_tencent_cloud.jpg`,
+      url: "https://cloud.tencent.com/product/cos",
+    },
+    "Azure Blob": {
+      logo: `${StaticBaseUrl}/img/social_azure.png`,
+      url: "https://azure.microsoft.com/en-us/services/storage/blobs/",
+    },
+  },
+  SAML: {
+    "Aliyun IDaaS": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://aliyun.com/product/idaas",
+    },
+    "Keycloak": {
+      logo: `${StaticBaseUrl}/img/social_keycloak.png`,
+      url: "https://www.keycloak.org/",
+    },
+  },
+  Payment: {
+    "Alipay": {
+      logo: `${StaticBaseUrl}/img/payment_alipay.png`,
+      url: "https://www.alipay.com/",
+    },
+    "WeChat Pay": {
+      logo: `${StaticBaseUrl}/img/payment_wechat_pay.png`,
+      url: "https://pay.weixin.qq.com/",
+    },
+    "PayPal": {
+      logo: `${StaticBaseUrl}/img/payment_paypal.png`,
+      url: "https://www.paypal.com/",
+    },
+    "GC": {
+      logo: `${StaticBaseUrl}/img/payment_gc.png`,
+      url: "https://gc.org",
+    },
+  },
+  Captcha: {
+    "Default": {
+      logo: `${StaticBaseUrl}/img/captcha_default.png`,
+      url: "https://pkg.go.dev/github.com/dchest/captcha",
+    },
+    "reCAPTCHA": {
+      logo: `${StaticBaseUrl}/img/social_recaptcha.png`,
+      url: "https://www.google.com/recaptcha",
+    },
+    "hCaptcha": {
+      logo: `${StaticBaseUrl}/img/social_hcaptcha.png`,
+      url: "https://www.hcaptcha.com",
+    },
+    "Aliyun Captcha": {
+      logo: `${StaticBaseUrl}/img/social_aliyun.png`,
+      url: "https://help.aliyun.com/product/28308.html",
+    },
+    "GEETEST": {
+      logo: `${StaticBaseUrl}/img/social_geetest.png`,
+      url: "https://www.geetest.com",
+    },
+    "Cloudflare Turnstile": {
+      logo: `${StaticBaseUrl}/img/social_cloudflare.png`,
+      url: "https://www.cloudflare.com/products/turnstile/",
+    },
+  },
+  AI: {
+    "OpenAI API - GPT": {
+      logo: `${StaticBaseUrl}/img/social_openai.svg`,
+      url: "https://platform.openai.com",
+    },
+  },
+};
+
+export function initCountries() {
+  const countries = require("i18n-iso-countries");
+  countries.registerLocale(require("i18n-iso-countries/langs/" + getLanguage() + ".json"));
+  return countries;
+}
+
+export function getCountryCode(country) {
+  if (phoneNumber.isSupportedCountry(country)) {
+    return phoneNumber.getCountryCallingCode(country);
+  }
+  return "";
+}
+
+export function getCountryCodeData(countryCodes = phoneNumber.getCountries()) {
+  return countryCodes?.map((countryCode) => {
+    if (phoneNumber.isSupportedCountry(countryCode)) {
+      const name = initCountries().getName(countryCode, getLanguage());
+      return {
+        code: countryCode,
+        name: name || "",
+        phone: phoneNumber.getCountryCallingCode(countryCode),
+      };
+    }
+  }).filter(item => item.name !== "")
+    .sort((a, b) => a.phone - b.phone);
+}
+
+export function getCountryCodeOption(country) {
+  return (
+    <Option key={country.code} value={country.code} label={`+${country.phone}`} text={`${country.name}, ${country.code}, ${country.phone}`} >
+      <div style={{display: "flex", justifyContent: "space-between", marginRight: "10px"}}>
+        <div>
+          {getCountryImage(country)}
+          {`${country.name}`}
+        </div>
+        {`+${country.phone}`}
+      </div>
+    </Option>
+  );
+}
+
+export function getCountryImage(country) {
+  return <img src={`${StaticBaseUrl}/flag-icons/${country.code}.svg`} alt={country.name} height={20} style={{marginRight: 10}} />;
+}
+
+export function initServerUrl() {
+  // const hostname = window.location.hostname;
+  // if (hostname === "localhost") {
+  //   ServerUrl = `http://${hostname}:8000`;
+  // }
+}
+
+export function isLocalhost() {
+  const hostname = window.location.hostname;
+  return hostname === "localhost";
+}
+
+export function getFullServerUrl() {
+  let fullServerUrl = window.location.origin;
+  if (fullServerUrl === "http://localhost:7001") {
+    fullServerUrl = "http://localhost:8000";
+  }
+  return fullServerUrl;
+}
+
+export function isProviderVisible(providerItem) {
+  if (providerItem.provider === undefined || providerItem.provider === null) {
+    return false;
+  }
+
+  if (providerItem.provider.category !== "OAuth" && providerItem.provider.category !== "SAML") {
+    return false;
+  }
+
+  if (providerItem.provider.type === "WeChatMiniProgram") {
+    return false;
+  }
+
+  return true;
+}
+
+export function isResponseDenied(data) {
+  if (data.msg === "Unauthorized operation" || data.msg === "未授权的操作") {
+    return true;
+  }
+  return false;
+}
+
+export function isProviderVisibleForSignUp(providerItem) {
+  if (providerItem.canSignUp === false) {
+    return false;
+  }
+
+  return isProviderVisible(providerItem);
+}
+
+export function isProviderVisibleForSignIn(providerItem) {
+  if (providerItem.canSignIn === false) {
+    return false;
+  }
+
+  return isProviderVisible(providerItem);
+}
+
+export function isProviderPrompted(providerItem) {
+  return isProviderVisible(providerItem) && providerItem.prompted;
+}
+
+export function isSignupItemPrompted(signupItem) {
+  return signupItem.visible && signupItem.prompted;
+}
+
+export function getAllPromptedProviderItems(application) {
+  return application.providers.filter(providerItem => isProviderPrompted(providerItem));
+}
+
+export function getAllPromptedSignupItems(application) {
+  return application.signupItems.filter(signupItem => isSignupItemPrompted(signupItem));
+}
+
+export function getSignupItem(application, itemName) {
+  const signupItems = application.signupItems?.filter(signupItem => signupItem.name === itemName);
+  if (signupItems.length === 0) {
+    return null;
+  }
+  return signupItems[0];
+}
+
+export function isValidPersonName(personName) {
+  return personName !== "";
+
+  // // https://blog.css8.cn/post/14210975.html
+  // const personNameRegex = /^[\u4e00-\u9fa5]{2,6}$/;
+  // return personNameRegex.test(personName);
+}
+
+export function isValidIdCard(idCard) {
+  return idCard !== "";
+
+  // const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/;
+  // return idCardRegex.test(idCard);
+}
+
+export function isValidEmail(email) {
+  // https://github.com/yiminghe/async-validator/blob/057b0b047f88fac65457bae691d6cb7c6fe48ce1/src/rule/type.ts#L9
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return emailRegex.test(email);
+}
+
+export function isValidPhone(phone, countryCode = "") {
+  if (countryCode !== "" && countryCode !== "CN") {
+    return phoneNumber.isValidPhoneNumber(phone, countryCode);
+  }
+
+  // https://learnku.com/articles/31543, `^s*$` filter empty email individually.
+  const phoneCnRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
+  const phoneRegex = /[0-9]{4,15}$/;
+
+  return countryCode === "CN" ? phoneCnRegex.test(phone) : phoneRegex.test(phone);
+}
+
+export function isValidInvoiceTitle(invoiceTitle) {
+  return invoiceTitle !== "";
+
+  // if (invoiceTitle === "") {
+  //   return false;
+  // }
+  //
+  // // https://blog.css8.cn/post/14210975.html
+  // const invoiceTitleRegex = /^[()（）\u4e00-\u9fa5]{0,50}$/;
+  // return invoiceTitleRegex.test(invoiceTitle);
+}
+
+export function isValidTaxId(taxId) {
+  return taxId !== "";
+
+  // // https://www.codetd.com/article/8592083
+  // const regArr = [/^[\da-z]{10,15}$/i, /^\d{6}[\da-z]{10,12}$/i, /^[a-z]\d{6}[\da-z]{9,11}$/i, /^[a-z]{2}\d{6}[\da-z]{8,10}$/i, /^\d{14}[\dx][\da-z]{4,5}$/i, /^\d{17}[\dx][\da-z]{1,2}$/i, /^[a-z]\d{14}[\dx][\da-z]{3,4}$/i, /^[a-z]\d{17}[\dx][\da-z]{0,1}$/i, /^[\d]{6}[\da-z]{13,14}$/i];
+  // for (let i = 0; i < regArr.length; i++) {
+  //   if (regArr[i].test(taxId)) {
+  //     return true;
+  //   }
+  // }
+  // return false;
+}
+
+export function isAffiliationPrompted(application) {
+  const signupItem = getSignupItem(application, "Affiliation");
+  if (signupItem === null) {
+    return false;
+  }
+
+  return signupItem.prompted;
+}
+
+export function hasPromptPage(application) {
+  const providerItems = getAllPromptedProviderItems(application);
+  if (providerItems.length !== 0) {
+    return true;
+  }
+
+  const signupItems = getAllPromptedSignupItems(application);
+  if (signupItems.length !== 0) {
+    return true;
+  }
+
+  return isAffiliationPrompted(application);
+}
+
+function isAffiliationAnswered(user, application) {
+  if (!isAffiliationPrompted(application)) {
+    return true;
+  }
+
+  if (user === null) {
+    return false;
+  }
+  return user.affiliation !== "";
+}
+
+function isProviderItemAnswered(user, application, providerItem) {
+  if (user === null) {
+    return false;
+  }
+
+  const provider = providerItem.provider;
+  const linkedValue = user[provider.type.toLowerCase()];
+  return linkedValue !== undefined && linkedValue !== "";
+}
+
+function isSignupItemAnswered(user, signupItem) {
+  if (user === null) {
+    return false;
+  }
+
+  if (signupItem.name !== "Country/Region") {
+    return true;
+  }
+
+  const value = user["region"];
+  return value !== undefined && value !== "";
+}
+
+export function isPromptAnswered(user, application) {
+  if (!isAffiliationAnswered(user, application)) {
+    return false;
+  }
+
+  const providerItems = getAllPromptedProviderItems(application);
+  for (let i = 0; i < providerItems.length; i++) {
+    if (!isProviderItemAnswered(user, application, providerItems[i])) {
+      return false;
+    }
+  }
+
+  const signupItems = getAllPromptedSignupItems(application);
+  for (let i = 0; i < signupItems.length; i++) {
+    if (!isSignupItemAnswered(user, signupItems[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function parseObject(s) {
+  try {
+    return eval("(" + s + ")");
+  } catch (e) {
+    return null;
+  }
+}
+
+export function parseJson(s) {
+  if (s === "") {
+    return null;
+  } else {
+    return JSON.parse(s);
+  }
+}
+
+export function myParseInt(i) {
+  const res = parseInt(i);
+  return isNaN(res) ? 0 : res;
+}
+
+export function openLink(link) {
+  // this.props.history.push(link);
+  const w = window.open("about:blank");
+  w.location.href = link;
+}
+
+export function openLinkSafe(link) {
+  // Javascript window.open issue in safari
+  // https://stackoverflow.com/questions/45569893/javascript-window-open-issue-in-safari
+  const a = document.createElement("a");
+  a.href = link;
+  a.setAttribute("target", "_blank");
+  a.click();
+}
+
+export function goToLink(link) {
+  window.location.href = link;
+}
+
+export function goToLinkSoft(ths, link) {
+  if (link.startsWith("http")) {
+    openLink(link);
+    return;
+  }
+
+  ths.props.history.push(link);
+}
+
+export function showMessage(type, text) {
+  if (type === "success") {
+    message.success(text);
+  } else if (type === "error") {
+    message.error(text);
+  } else if (type === "info") {
+    message.info(text);
+  }
+}
+
+export function isAdminUser(account) {
+  if (account === undefined || account === null) {
+    return false;
+  }
+  return account.owner === "built-in" || account.isGlobalAdmin === true;
+}
+
+export function isLocalAdminUser(account) {
+  if (account === undefined || account === null) {
+    return false;
+  }
+  return account.isAdmin === true || isAdminUser(account);
+}
+
+export function deepCopy(obj) {
+  return Object.assign({}, obj);
+}
+
+export function addRow(array, row, position = "end") {
+  return position === "end" ? [...array, row] : [row, ...array];
+}
+
+export function deleteRow(array, i) {
+  // return array = array.slice(0, i).concat(array.slice(i + 1));
+  return [...array.slice(0, i), ...array.slice(i + 1)];
+}
+
+export function swapRow(array, i, j) {
+  return [...array.slice(0, i), array[j], ...array.slice(i + 1, j), array[i], ...array.slice(j + 1)];
+}
+
+export function trim(str, ch) {
+  if (str === undefined) {
+    return undefined;
+  }
+
+  let start = 0;
+  let end = str.length;
+
+  while (start < end && str[start] === ch) {++start;}
+
+  while (end > start && str[end - 1] === ch) {--end;}
+
+  return (start > 0 || end < str.length) ? str.substring(start, end) : str;
+}
+
+export function isMobile() {
+  // return getIsMobileView();
+  return isMobileDevice;
+}
+
+export function getFormattedDate(date) {
+  if (date === undefined) {
+    return null;
+  }
+
+  date = date.replace("T", " ");
+  date = date.replace("+08:00", " ");
+  return date;
+}
+
+export function getFormattedDateShort(date) {
+  return date.slice(0, 10);
+}
+
+export function getShortName(s) {
+  return s.split("/").slice(-1)[0];
+}
+
+export function getNameAtLeast(s) {
+  s = getShortName(s);
+  if (s.length >= 6) {
+    return s;
+  }
+
+  return (
+    <React.Fragment>
+      &nbsp;
+      {s}
+      &nbsp;
+      &nbsp;
+    </React.Fragment>
+  );
+}
+
+export function getShortText(s, maxLength = 35) {
+  if (s.length > maxLength) {
+    return `${s.slice(0, maxLength)}...`;
+  } else {
+    return s;
+  }
+}
+
+export function getFriendlyFileSize(size) {
+  if (size < 1024) {
+    return size + " B";
+  }
+
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  let num = (size / Math.pow(1024, i));
+  const round = Math.round(num);
+  num = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round;
+  return `${num} ${"KMGTPEZY"[i - 1]}B`;
+}
+
+function getHashInt(s) {
+  let hash = 0;
+  if (s.length !== 0) {
+    for (let i = 0; i < s.length; i++) {
+      const char = s.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash;
+    }
+  }
+
+  if (hash < 0) {
+    hash = -hash;
+  }
+  return hash;
+}
+
+export function getAvatarColor(s) {
+  const colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"];
+  const hash = getHashInt(s);
+  return colorList[hash % 4];
+}
+
+export function getLanguageText(text) {
+  if (!text.includes("|")) {
+    return text;
+  }
+
+  let res;
+  const tokens = text.split("|");
+  if (getLanguage() !== "zh") {
+    res = trim(tokens[0], "");
+  } else {
+    res = trim(tokens[1], "");
+  }
+  return res;
+}
+
+export function getLanguage() {
+  return i18next.language ?? Conf.DefaultLanguage;
+}
+
+export function setLanguage(language) {
+  localStorage.setItem("language", language);
+  i18next.changeLanguage(language);
+}
+
+export function getAcceptLanguage() {
+  if (i18next.language === null || i18next.language === "") {
+    return "en;q=0.9,en;q=0.8";
+  }
+  return i18next.language + ";q=0.9,en;q=0.8";
+}
+
+export function getClickable(text) {
+  return (
+    <a onClick={() => {
+      copy(text);
+      showMessage("success", "Copied to clipboard");
+    }}>
+      {text}
+    </a>
+  );
+}
+
+export function getProviderLogoURL(provider) {
+  if (provider.category === "OAuth") {
+    if (provider.type === "Custom") {
+      return provider.customLogo;
+    }
+    return `${StaticBaseUrl}/img/social_${provider.type.toLowerCase()}.png`;
+  } else {
+    const info = OtherProviderInfo[provider.category][provider.type];
+    // avoid crash when provider is not found
+    if (info) {
+      return info.logo;
+    }
+    return "";
+  }
+}
+
+export function getProviderLogo(provider) {
+  const idp = provider.type.toLowerCase().trim().split(" ")[0];
+  const url = getProviderLogoURL(provider);
+  return (
+    <img width={30} height={30} src={url} alt={idp} />
+  );
+}
+
+export function getProviderTypeOptions(category) {
+  if (category === "OAuth") {
+    return (
+      [
+        {id: "Google", name: "Google"},
+        {id: "GitHub", name: "GitHub"},
+        {id: "QQ", name: "QQ"},
+        {id: "WeChat", name: "WeChat"},
+        {id: "WeChatMiniProgram", name: "WeChat Mini Program"},
+        {id: "Facebook", name: "Facebook"},
+        {id: "DingTalk", name: "DingTalk"},
+        {id: "Weibo", name: "Weibo"},
+        {id: "Gitee", name: "Gitee"},
+        {id: "LinkedIn", name: "LinkedIn"},
+        {id: "WeCom", name: "WeCom"},
+        {id: "Lark", name: "Lark"},
+        {id: "GitLab", name: "GitLab"},
+        {id: "Adfs", name: "Adfs"},
+        {id: "Baidu", name: "Baidu"},
+        {id: "Alipay", name: "Alipay"},
+        {id: "Casdoor", name: "Casdoor"},
+        {id: "Infoflow", name: "Infoflow"},
+        {id: "Apple", name: "Apple"},
+        {id: "AzureAD", name: "AzureAD"},
+        {id: "Slack", name: "Slack"},
+        {id: "Steam", name: "Steam"},
+        {id: "Bilibili", name: "Bilibili"},
+        {id: "Okta", name: "Okta"},
+        {id: "Douyin", name: "Douyin"},
+        {id: "Line", name: "Line"},
+        {id: "Amazon", name: "Amazon"},
+        {id: "Auth0", name: "Auth0"},
+        {id: "BattleNet", name: "Battle.net"},
+        {id: "Bitbucket", name: "Bitbucket"},
+        {id: "Box", name: "Box"},
+        {id: "CloudFoundry", name: "Cloud Foundry"},
+        {id: "Dailymotion", name: "Dailymotion"},
+        {id: "Deezer", name: "Deezer"},
+        {id: "DigitalOcean", name: "DigitalOcean"},
+        {id: "Discord", name: "Discord"},
+        {id: "Dropbox", name: "Dropbox"},
+        {id: "EveOnline", name: "Eve Online"},
+        {id: "Fitbit", name: "Fitbit"},
+        {id: "Gitea", name: "Gitea"},
+        {id: "Heroku", name: "Heroku"},
+        {id: "InfluxCloud", name: "InfluxCloud"},
+        {id: "Instagram", name: "Instagram"},
+        {id: "Intercom", name: "Intercom"},
+        {id: "Kakao", name: "Kakao"},
+        {id: "Lastfm", name: "Lastfm"},
+        {id: "Mailru", name: "Mailru"},
+        {id: "Meetup", name: "Meetup"},
+        {id: "MicrosoftOnline", name: "MicrosoftOnline"},
+        {id: "Naver", name: "Naver"},
+        {id: "Nextcloud", name: "Nextcloud"},
+        {id: "OneDrive", name: "OneDrive"},
+        {id: "Oura", name: "Oura"},
+        {id: "Patreon", name: "Patreon"},
+        {id: "PayPal", name: "PayPal"},
+        {id: "SalesForce", name: "SalesForce"},
+        {id: "Shopify", name: "Shopify"},
+        {id: "Soundcloud", name: "Soundcloud"},
+        {id: "Spotify", name: "Spotify"},
+        {id: "Strava", name: "Strava"},
+        {id: "Stripe", name: "Stripe"},
+        {id: "TikTok", name: "TikTok"},
+        {id: "Tumblr", name: "Tumblr"},
+        {id: "Twitch", name: "Twitch"},
+        {id: "Twitter", name: "Twitter"},
+        {id: "Typetalk", name: "Typetalk"},
+        {id: "Uber", name: "Uber"},
+        {id: "VK", name: "VK"},
+        {id: "Wepay", name: "Wepay"},
+        {id: "Xero", name: "Xero"},
+        {id: "Yahoo", name: "Yahoo"},
+        {id: "Yammer", name: "Yammer"},
+        {id: "Yandex", name: "Yandex"},
+        {id: "Zoom", name: "Zoom"},
+        {id: "Custom", name: "Custom"},
+      ]
+    );
+  } else if (category === "Email") {
+    return (
+      [
+        {id: "Default", name: "Default"},
+        {id: "SUBMAIL", name: "SUBMAIL"},
+        {id: "Mailtrap", name: "Mailtrap"},
+      ]
+    );
+  } else if (category === "SMS") {
+    return (
+      [
+        {id: "Aliyun SMS", name: "Aliyun SMS"},
+        {id: "Tencent Cloud SMS", name: "Tencent Cloud SMS"},
+        {id: "Volc Engine SMS", name: "Volc Engine SMS"},
+        {id: "Huawei Cloud SMS", name: "Huawei Cloud SMS"},
+        {id: "Twilio SMS", name: "Twilio SMS"},
+        {id: "SmsBao SMS", name: "SmsBao SMS"},
+        {id: "SUBMAIL SMS", name: "SUBMAIL SMS"},
+      ]
+    );
+  } else if (category === "Storage") {
+    return (
+      [
+        {id: "Local File System", name: "Local File System"},
+        {id: "AWS S3", name: "AWS S3"},
+        {id: "MinIO", name: "MinIO"},
+        {id: "Aliyun OSS", name: "Aliyun OSS"},
+        {id: "Tencent Cloud COS", name: "Tencent Cloud COS"},
+        {id: "Azure Blob", name: "Azure Blob"},
+      ]
+    );
+  } else if (category === "SAML") {
+    return ([
+      {id: "Aliyun IDaaS", name: "Aliyun IDaaS"},
+      {id: "Keycloak", name: "Keycloak"},
+    ]);
+  } else if (category === "Payment") {
+    return ([
+      {id: "Alipay", name: "Alipay"},
+      {id: "WeChat Pay", name: "WeChat Pay"},
+      {id: "PayPal", name: "PayPal"},
+      {id: "GC", name: "GC"},
+    ]);
+  } else if (category === "Captcha") {
+    return ([
+      {id: "Default", name: "Default"},
+      {id: "reCAPTCHA", name: "reCAPTCHA"},
+      {id: "hCaptcha", name: "hCaptcha"},
+      {id: "Aliyun Captcha", name: "Aliyun Captcha"},
+      {id: "GEETEST", name: "GEETEST"},
+      {id: "Cloudflare Turnstile", name: "Cloudflare Turnstile"},
+    ]);
+  } else if (category === "AI") {
+    return ([
+      {id: "OpenAI API - GPT", name: "OpenAI API - GPT"},
+    ]);
+  } else {
+    return [];
+  }
+}
+
+export function renderLogo(application) {
+  if (application === null) {
+    return null;
+  }
+
+  if (application.homepageUrl !== "") {
+    return (
+      <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
+        <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
+      </a>
+    );
+  } else {
+    return (
+      <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
+    );
+  }
+}
+
+export function getLoginLink(application) {
+  let url;
+  if (application === null) {
+    url = null;
+  } else if (!application.enablePassword && window.location.pathname.includes("/auto-signup/oauth/authorize")) {
+    url = window.location.href.replace("/auto-signup/oauth/authorize", "/login/oauth/authorize");
+  } else if (authConfig.appName === application.name) {
+    url = "/login";
+  } else if (application.signinUrl === "") {
+    url = trim(application.homepageUrl, "/") + "/login";
+  } else {
+    url = application.signinUrl;
+  }
+  return url;
+}
+
+export function renderLoginLink(application, text) {
+  const url = getLoginLink(application);
+  return renderLink(url, text, null);
+}
+
+export function redirectToLoginPage(application, history) {
+  const loginLink = getLoginLink(application);
+  if (loginLink.startsWith("http://") || loginLink.startsWith("https://")) {
+    goToLink(loginLink);
+  } else {
+    history.push(loginLink);
+  }
+}
+
+function renderLink(url, text, onClick) {
+  if (url === null) {
+    return null;
+  }
+
+  if (url.startsWith("/")) {
+    return (
+      <Link style={{float: "right"}} to={url} onClick={() => {
+        if (onClick !== null) {
+          onClick();
+        }
+      }}>{text}</Link>
+    );
+  } else if (url.startsWith("http")) {
+    return (
+      <a target="_blank" rel="noopener noreferrer" style={{float: "right"}} href={url} onClick={() => {
+        if (onClick !== null) {
+          onClick();
+        }
+      }}>{text}</a>
+    );
+  } else {
+    return null;
+  }
+}
+
+export function renderSignupLink(application, text) {
+  let url;
+  if (application === null) {
+    url = null;
+  } else if (!application.enablePassword && window.location.pathname.includes("/login/oauth/authorize")) {
+    url = window.location.href.replace("/login/oauth/authorize", "/auto-signup/oauth/authorize");
+  } else if (authConfig.appName === application.name) {
+    url = "/signup";
+  } else {
+    if (application.signupUrl === "") {
+      url = `/signup/${application.name}`;
+    } else {
+      url = application.signupUrl;
+    }
+  }
+
+  const storeSigninUrl = () => {
+    sessionStorage.setItem("signinUrl", window.location.href);
+  };
+
+  return renderLink(url, text, storeSigninUrl);
+}
+
+export function renderForgetLink(application, text) {
+  let url;
+  if (application === null) {
+    url = null;
+  } else if (authConfig.appName === application.name) {
+    url = "/forget";
+  } else {
+    if (application.forgetUrl === "") {
+      url = `/forget/${application.name}`;
+    } else {
+      url = application.forgetUrl;
+    }
+  }
+
+  return renderLink(url, text, null);
+}
+
+export function renderHelmet(application) {
+  if (application === undefined || application === null || application.organizationObj === undefined || application.organizationObj === null || application.organizationObj === "") {
+    return null;
+  }
+
+  return (
+    <Helmet>
+      <title>{application.organizationObj.displayName}</title>
+      <link rel="icon" href={application.organizationObj.favicon} />
+    </Helmet>
+  );
+}
+
+export function getLabel(text, tooltip) {
+  return (
+    <React.Fragment>
+      <span style={{marginRight: 4}}>{text}</span>
+      <Tooltip placement="top" title={tooltip}>
+        <QuestionCircleTwoTone twoToneColor="rgb(45,120,213)" />
+      </Tooltip>
+    </React.Fragment>
+  );
+}
+
+export function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+export function getOption(label, value) {
+  return {
+    label,
+    value,
+  };
+}
+
+function repeat(str, len) {
+  while (str.length < len) {
+    str += str.substr(0, len - str.length);
+  }
+  return str;
+}
+
+function maskString(s) {
+  if (s.length <= 2) {
+    return s;
+  } else {
+    return `${s[0]}${repeat("*", s.length - 2)}${s[s.length - 1]}`;
+  }
+}
+
+export function getMaskedPhone(s) {
+  return s.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
+}
+
+export function getMaskedEmail(email) {
+  if (email === "") {return;}
+  const tokens = email.split("@");
+  let username = tokens[0];
+  username = maskString(username);
+
+  const domain = tokens[1];
+  const domainTokens = domain.split(".");
+  domainTokens[domainTokens.length - 2] = maskString(domainTokens[domainTokens.length - 2]);
+
+  return `${username}@${domainTokens.join(".")}`;
+}
+
+export function getArrayItem(array, key, value) {
+  const res = array.filter(item => item[key] === value)[0];
+  return res;
+}
+
+export function getDeduplicatedArray(array, filterArray, key) {
+  const res = array.filter(item => filterArray.filter(filterItem => filterItem[key] === item[key]).length === 0);
+  return res;
+}
+
+export function getNewRowNameForTable(table, rowName) {
+  const emptyCount = table.filter(row => row.name.includes(rowName)).length;
+  let res = rowName;
+  for (let i = 0; i < emptyCount; i++) {
+    res = res + " ";
+  }
+  return res;
+}
+
+export function getTagColor(s) {
+  return "processing";
+}
+
+export function getTags(tags, urlPrefix = null) {
+  const res = [];
+  if (!tags) {
+    return res;
+  }
+
+  tags.forEach((tag, i) => {
+    if (urlPrefix === null) {
+      res.push(
+        <Tag color={getTagColor(tag)}>
+          {tag}
+        </Tag>
+      );
+    } else {
+      res.push(
+        <Link to={`/${urlPrefix}/${tag}`}>
+          <Tag color={getTagColor(tag)}>
+            {tag}
+          </Tag>
+        </Link>
+      );
+    }
+  });
+  return res;
+}
+
+export function getTag(color, text) {
+  return (
+    <Tag color={color}>
+      {text}
+    </Tag>
+  );
+}
+
+export function getApplicationOrgName(application) {
+  return `${application?.organizationObj.owner}/${application?.organizationObj.name}`;
+}
+
+export function getApplicationName(application) {
+  return `${application?.owner}/${application?.name}`;
+}
+
+export function getRandomName() {
+  return Math.random().toString(36).slice(-6);
+}
+
+export function getRandomNumber() {
+  return Math.random().toString(10).slice(-11);
+}
+
+export function getFromLink() {
+  const from = sessionStorage.getItem("from");
+  if (from === null) {
+    return "/";
+  }
+  return from;
+}
+
+export function scrollToDiv(divId) {
+  if (divId) {
+    const ele = document.getElementById(divId);
+    if (ele) {
+      ele.scrollIntoView({behavior: "smooth"});
+    }
+  }
+}
+
+export function inIframe() {
+  try {
+    return window !== window.parent;
+  } catch (e) {
+    return true;
+  }
+}

web/src/SyncerEditPage.js

@@ -0,0 +1,443 @@
+// 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, InputNumber, Row, Select, Switch} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as SyncerBackend from "./backend/SyncerBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import SyncerTableColumnTable from "./table/SyncerTableColumnTable";
+
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/javascript/javascript");
+
+const {Option} = Select;
+
+class SyncerEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      syncerName: props.match.params.syncerName,
+      syncer: null,
+      organizations: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getSyncer();
+    this.getOrganizations();
+  }
+
+  getSyncer() {
+    SyncerBackend.getSyncer("admin", this.state.syncerName)
+      .then((syncer) => {
+        this.setState({
+          syncer: syncer,
+        });
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  parseSyncerField(key, value) {
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateSyncerField(key, value) {
+    value = this.parseSyncerField(key, value);
+
+    const syncer = this.state.syncer;
+    syncer[key] = value;
+    this.setState({
+      syncer: syncer,
+    });
+  }
+
+  getSyncerTableColumns(syncer) {
+    switch (syncer.type) {
+    case "Keycloak":
+      return [
+        {
+          "name": "ID",
+          "type": "string",
+          "casdoorName": "Id",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "USERNAME",
+          "type": "string",
+          "casdoorName": "Name",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "LAST_NAME+FIRST_NAME",
+          "type": "string",
+          "casdoorName": "DisplayName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "EMAIL",
+          "type": "string",
+          "casdoorName": "Email",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "EMAIL_VERIFIED",
+          "type": "boolean",
+          "casdoorName": "EmailVerified",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "FIRST_NAME",
+          "type": "string",
+          "casdoorName": "FirstName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "LAST_NAME",
+          "type": "string",
+          "casdoorName": "LastName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "CREATED_TIMESTAMP",
+          "type": "string",
+          "casdoorName": "CreatedTime",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "ENABLED",
+          "type": "boolean",
+          "casdoorName": "IsForbidden",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+      ];
+    default:
+      return [];
+    }
+  }
+
+  renderSyncer() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("syncer:New Syncer") : i18next.t("syncer:Edit Syncer")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitSyncerEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitSyncerEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteSyncer()}>{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.syncer.organization} onChange={(value => {this.updateSyncerField("organization", value);})}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.name} onChange={e => {
+              this.updateSyncerField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Type"), i18next.t("provider:Type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.syncer.type} onChange={(value => {
+              this.updateSyncerField("type", value);
+              const syncer = this.state.syncer;
+              syncer["tableColumns"] = this.getSyncerTableColumns(this.state.syncer);
+              syncer.table = (value === "Keycloak") ? "user_entity" : this.state.syncer.table;
+              this.setState({
+                syncer: syncer,
+              });
+            })}>
+              {
+                ["Database", "LDAP", "Keycloak"]
+                  .map((item, index) => <Option key={index} value={item}>{item}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Host"), i18next.t("provider:Host - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.host} onChange={e => {
+              this.updateSyncerField("host", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Port"), i18next.t("provider:Port - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.syncer.port} onChange={value => {
+              this.updateSyncerField("port", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:User"), i18next.t("general:User - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.user} onChange={e => {
+              this.updateSyncerField("user", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Password"), i18next.t("general:Password - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.password} onChange={e => {
+              this.updateSyncerField("password", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Database type"), i18next.t("syncer:Database type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.syncer.databaseType} onChange={(value => {this.updateSyncerField("databaseType", value);})}>
+              {
+                [
+                  {id: "mysql", name: "MySQL"},
+                  {id: "postgres", name: "PostgreSQL"},
+                  {id: "mssql", name: "SQL Server"},
+                  {id: "oracle", name: "Oracle"},
+                  {id: "sqlite3", name: "Sqlite 3"},
+                ].map((databaseType, index) => <Option key={index} value={databaseType.id}>{databaseType.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Database"), i18next.t("syncer:Database - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.database} onChange={e => {
+              this.updateSyncerField("database", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Table"), i18next.t("syncer:Table - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.table}
+              disabled={this.state.syncer.type === "Keycloak"} onChange={e => {
+                this.updateSyncerField("table", e.target.value);
+              }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Table primary key"), i18next.t("syncer:Table primary key - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.tablePrimaryKey} onChange={e => {
+              this.updateSyncerField("tablePrimaryKey", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Table columns"), i18next.t("syncer:Table columns - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <SyncerTableColumnTable
+              title={i18next.t("syncer:Table columns")}
+              table={this.state.syncer.tableColumns}
+              onUpdateTable={(value) => {this.updateSyncerField("tableColumns", value);}}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Affiliation table"), i18next.t("syncer:Affiliation table - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.syncer.affiliationTable} onChange={e => {
+              this.updateSyncerField("affiliationTable", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Avatar base URL"), i18next.t("syncer:Avatar base URL - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined />} value={this.state.syncer.avatarBaseUrl} onChange={e => {
+              this.updateSyncerField("avatarBaseUrl", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Sync interval"), i18next.t("syncer:Sync interval - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.syncer.syncInterval} onChange={value => {
+              this.updateSyncerField("syncInterval", value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("syncer:Error text"), i18next.t("syncer:Error text - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <div style={{width: "100%", height: "300px"}} >
+              <CodeMirror
+                value={this.state.syncer.errorText}
+                options={{mode: "javascript", theme: "material-darker"}}
+                onBeforeChange={(editor, data, value) => {
+                  this.updateSyncerField("errorText", value);
+                }}
+              />
+            </div>
+          </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.syncer.isEnabled} onChange={checked => {
+              this.updateSyncerField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitSyncerEdit(willExist) {
+    const syncer = Setting.deepCopy(this.state.syncer);
+    SyncerBackend.updateSyncer(this.state.syncer.owner, this.state.syncerName, syncer)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            syncerName: this.state.syncer.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/syncers");
+          } else {
+            this.props.history.push(`/syncers/${this.state.syncer.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateSyncerField("name", this.state.syncerName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteSyncer() {
+    SyncerBackend.deleteSyncer(this.state.syncer)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/syncers");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.syncer !== null ? this.renderSyncer() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitSyncerEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitSyncerEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteSyncer()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SyncerEditPage;

web/src/SyncerListPage.js

@@ -0,0 +1,303 @@
+// 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, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as SyncerBackend from "./backend/SyncerBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class SyncerListPage extends BaseListPage {
+  newSyncer() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin",
+      name: `syncer_${randomName}`,
+      createdTime: moment().format(),
+      organization: "built-in",
+      type: "Database",
+      host: "localhost",
+      port: 3306,
+      user: "root",
+      password: "123456",
+      databaseType: "mysql",
+      database: "dbName",
+      table: "tableName",
+      tableColumns: [],
+      affiliationTable: "",
+      avatarBaseUrl: "",
+      syncInterval: 10,
+      isEnabled: false,
+    };
+  }
+
+  addSyncer() {
+    const newSyncer = this.newSyncer();
+    SyncerBackend.addSyncer(newSyncer)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/syncers/${newSyncer.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteSyncer(i) {
+    SyncerBackend.deleteSyncer(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  runSyncer(i) {
+    this.setState({loading: true});
+    SyncerBackend.runSyncer("admin", this.state.data[i].name)
+      .then((res) => {
+        this.setState({loading: false});
+        Setting.showMessage("success", "Syncer sync users successfully");
+      }
+      )
+      .catch(error => {
+        this.setState({loading: false});
+        Setting.showMessage("error", `Syncer failed to sync users: ${error}`);
+      });
+  }
+
+  renderTable(syncers) {
+    const columns = [
+      {
+        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={`/syncers/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "160px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "100px",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {text: "Database", value: "Database"},
+          {text: "LDAP", value: "LDAP"},
+        ],
+      },
+      {
+        title: i18next.t("provider:Host"),
+        dataIndex: "host",
+        key: "host",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("host"),
+      },
+      {
+        title: i18next.t("provider:Port"),
+        dataIndex: "port",
+        key: "port",
+        width: "100px",
+        sorter: true,
+        ...this.getColumnSearchProps("port"),
+      },
+      {
+        title: i18next.t("general:User"),
+        dataIndex: "user",
+        key: "user",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+      },
+      {
+        title: i18next.t("general:Password"),
+        dataIndex: "password",
+        key: "password",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("password"),
+      },
+      {
+        title: i18next.t("syncer:Database type"),
+        dataIndex: "databaseType",
+        key: "databaseType",
+        width: "120px",
+        sorter: (a, b) => a.databaseType.localeCompare(b.databaseType),
+      },
+      {
+        title: i18next.t("syncer:Database"),
+        dataIndex: "database",
+        key: "database",
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("syncer:Table"),
+        dataIndex: "table",
+        key: "table",
+        width: "120px",
+        sorter: true,
+      },
+      {
+        title: i18next.t("syncer:Sync interval"),
+        dataIndex: "syncInterval",
+        key: "syncInterval",
+        width: "130px",
+        sorter: true,
+        ...this.getColumnSearchProps("syncInterval"),
+      },
+      {
+        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: "240px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => this.runSyncer(index)}>{i18next.t("general:Sync")}</Button>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} onClick={() => this.props.history.push(`/syncers/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteSyncer(index)}
+              >
+              </PopconfirmModal>
+            </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={syncers} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Syncers")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addSyncer.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.type !== undefined && params.type !== null) {
+      field = "type";
+      value = params.type;
+    }
+    this.setState({loading: true});
+    SyncerBackend.getSyncers("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default SyncerListPage;

web/src/SystemInfo.js

@@ -0,0 +1,173 @@
+// 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 {Card, Col, Divider, Progress, Row, Spin} from "antd";
+import * as SystemBackend from "./backend/SystemInfo";
+import React from "react";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import PrometheusInfoTable from "./table/PrometheusInfoTable";
+
+class SystemInfo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      systemInfo: {cpuUsage: [], memoryUsed: 0, memoryTotal: 0},
+      versionInfo: {},
+      prometheusInfo: {apiThroughput: [], apiLatency: [], totalThroughput: 0},
+      intervalId: null,
+      loading: true,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    SystemBackend.getSystemInfo().then(res => {
+      this.setState({
+        systemInfo: res.data,
+        loading: false,
+      });
+
+      const id = setInterval(() => {
+        SystemBackend.getSystemInfo().then(res => {
+          this.setState({
+            systemInfo: res.data,
+          });
+        }).catch(error => {
+          Setting.showMessage("error", `System info failed to get: ${error}`);
+        });
+        SystemBackend.getPrometheusInfo().then(res => {
+          this.setState({
+            prometheusInfo: res.data,
+          });
+        });
+      }, 1000 * 2);
+      this.setState({intervalId: id});
+    }).catch(error => {
+      Setting.showMessage("error", `System info failed to get: ${error}`);
+    });
+
+    SystemBackend.getVersionInfo().then(res => {
+      this.setState({
+        versionInfo: res.data,
+      });
+    }).catch(err => {
+      Setting.showMessage("error", `Version info failed to get: ${err}`);
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.state.intervalId !== null) {
+      clearInterval(this.state.intervalId);
+    }
+  }
+
+  render() {
+    const cpuUi = this.state.systemInfo.cpuUsage?.length <= 0 ? i18next.t("system:Failed to get CPU usage") :
+      this.state.systemInfo.cpuUsage.map((usage, i) => {
+        return (
+          <Progress key={i} percent={Number(usage.toFixed(1))} />
+        );
+      });
+
+    const memUi = this.state.systemInfo.memoryUsed && this.state.systemInfo.memoryTotal && this.state.systemInfo.memoryTotal <= 0 ? i18next.t("system:Failed to get memory usage") :
+      <div>
+        {Setting.getFriendlyFileSize(this.state.systemInfo.memoryUsed)} / {Setting.getFriendlyFileSize(this.state.systemInfo.memoryTotal)}
+        <br /> <br />
+        <Progress type="circle" percent={Number((Number(this.state.systemInfo.memoryUsed) / Number(this.state.systemInfo.memoryTotal) * 100).toFixed(2))} />
+      </div>;
+    const latencyUi = this.state.prometheusInfo.apiLatency === null || this.state.prometheusInfo.apiLatency?.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"latency"} />;
+    const throughputUi = this.state.prometheusInfo.apiThroughput === null || this.state.prometheusInfo.apiThroughput?.length <= 0 ? <Spin size="large" /> :
+      <PrometheusInfoTable prometheusInfo={this.state.prometheusInfo} table={"throughput"} />;
+    const link = this.state.versionInfo?.version !== "" ? `https://github.com/casdoor/casdoor/releases/tag/${this.state.versionInfo?.version}` : "";
+    let versionText = this.state.versionInfo?.version !== "" ? this.state.versionInfo?.version : i18next.t("system:Unknown version");
+    if (this.state.versionInfo?.commitOffset > 0) {
+      versionText += ` (ahead+${this.state.versionInfo?.commitOffset})`;
+    }
+
+    if (!Setting.isMobile()) {
+      return (
+        <Row>
+          <Col span={6}></Col>
+          <Col span={12}>
+            <Row gutter={[10, 10]}>
+              <Col span={12}>
+                <Card title={i18next.t("system:CPU Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : cpuUi}
+                </Card>
+              </Col>
+              <Col span={12}>
+                <Card title={i18next.t("system:Memory Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : memUi}
+                </Card>
+              </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Latency")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : latencyUi}
+                </Card>
+              </Col>
+              <Col span={24}>
+                <Card title={i18next.t("system:API Throughput")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                  {this.state.loading ? <Spin size="large" /> : throughputUi}
+                </Card>
+              </Col>
+            </Row>
+            <Divider />
+            <Card title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>
+              <div>{i18next.t("system:An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS")}</div>
+              GitHub: <a target="_blank" rel="noreferrer" href="https://github.com/casdoor/casdoor">Casdoor</a>
+              <br />
+              {i18next.t("system:Version")}: <a target="_blank" rel="noreferrer" href={link}>{versionText}</a>
+              <br />
+              {i18next.t("system:Official website")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org">https://casdoor.org</a>
+              <br />
+              {i18next.t("system:Community")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org/#:~:text=Casdoor%20API-,Community,-GitHub">Get in Touch!</a>
+            </Card>
+          </Col>
+          <Col span={6}></Col>
+        </Row>
+      );
+    } else {
+      return (
+        <Row gutter={[16, 0]}>
+          <Col span={24}>
+            <Card title={i18next.t("system:CPU Usage")} bordered={true} style={{textAlign: "center", width: "100%"}}>
+              {this.state.loading ? <Spin size="large" /> : cpuUi}
+            </Card>
+          </Col>
+          <Col span={24}>
+            <Card title={i18next.t("system:Memory Usage")} bordered={true} style={{textAlign: "center", width: "100%"}}>
+              {this.state.loading ? <Spin size="large" /> : memUi}
+            </Card>
+          </Col>
+          <Col span={24}>
+            <Card title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>
+              <div>{i18next.t("system:An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS")}</div>
+              GitHub: <a target="_blank" rel="noreferrer" href="https://github.com/casdoor/casdoor">Casdoor</a>
+              <br />
+              {i18next.t("system:Version")}: <a target="_blank" rel="noreferrer" href={link}>{versionText}</a>
+              <br />
+              {i18next.t("system:Official website")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org">https://casdoor.org</a>
+              <br />
+              {i18next.t("system:Community")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org/#:~:text=Casdoor%20API-,Community,-GitHub">Get in Touch!</a>
+            </Card>
+          </Col>
+        </Row>
+      );
+    }
+  }
+}
+
+export default SystemInfo;

web/src/TokenEditPage.js

@@ -0,0 +1,221 @@
+// 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} from "antd";
+import * as TokenBackend from "./backend/TokenBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+
+class TokenEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      tokenName: props.match.params.tokenName,
+      token: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getToken();
+  }
+
+  getToken() {
+    TokenBackend.getToken("admin", this.state.tokenName)
+      .then((token) => {
+        this.setState({
+          token: token,
+        });
+      });
+  }
+
+  parseTokenField(key, value) {
+    // if ([].includes(key)) {
+    //   value = Setting.myParseInt(value);
+    // }
+    return value;
+  }
+
+  updateTokenField(key, value) {
+    value = this.parseTokenField(key, value);
+
+    const token = this.state.token;
+    token[key] = value;
+    this.setState({
+      token: token,
+    });
+  }
+
+  renderToken() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("token:New Token") : i18next.t("token:Edit Token")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteToken()}>{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}>
+            {i18next.t("general:Name")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.name} onChange={e => {
+              this.updateTokenField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("general:Application")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.application} onChange={e => {
+              this.updateTokenField("application", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("general:Organization")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.organization} onChange={e => {
+              this.updateTokenField("organization", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("general:User")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.user} onChange={e => {
+              this.updateTokenField("user", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("token:Authorization code")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.code} onChange={e => {
+              this.updateTokenField("code", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("token:Access token")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.accessToken} onChange={e => {
+              this.updateTokenField("accessToken", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("token:Expires in")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.expiresIn} onChange={e => {
+              this.updateTokenField("expiresIn", parseInt(e.target.value));
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("provider:Scope")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.scope} onChange={e => {
+              this.updateTokenField("scope", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("token:Token type")}:
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.token.tokenType} onChange={e => {
+              this.updateTokenField("tokenType", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitTokenEdit(willExist) {
+    const token = Setting.deepCopy(this.state.token);
+    TokenBackend.updateToken(this.state.token.owner, this.state.tokenName, token)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            tokenName: this.state.token.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/tokens");
+          } else {
+            this.props.history.push(`/tokens/${this.state.token.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateTokenField("name", this.state.tokenName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteToken() {
+    TokenBackend.deleteToken(this.state.token)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/tokens");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.token !== null ? this.renderToken() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteToken()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TokenEditPage;

web/src/TokenListPage.js

@@ -0,0 +1,268 @@
+// 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, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as TokenBackend from "./backend/TokenBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class TokenListPage extends BaseListPage {
+  newToken() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.tokenname,
+      name: `token_${randomName}`,
+      createdTime: moment().format(),
+      application: "app-built-in",
+      organization: "built-in",
+      user: "admin",
+      accessToken: "",
+      expiresIn: 7200,
+      scope: "read",
+      tokenType: "Bearer",
+    };
+  }
+
+  addToken() {
+    const newToken = this.newToken();
+    TokenBackend.addToken(newToken)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/tokens/${newToken.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteToken(i) {
+    TokenBackend.deleteToken(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(tokens) {
+    const columns = [
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: (Setting.isMobile()) ? "100px" : "300px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/tokens/${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:Application"),
+        dataIndex: "application",
+        key: "application",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("application"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/applications/${record.organization}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:User"),
+        dataIndex: "user",
+        key: "user",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("user"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${record.organization}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("token:Authorization code"),
+        dataIndex: "code",
+        key: "code",
+        // width: '150px',
+        sorter: true,
+        ...this.getColumnSearchProps("code"),
+        render: (text, record, index) => {
+          return Setting.getClickable(text);
+        },
+      },
+      {
+        title: i18next.t("token:Access token"),
+        dataIndex: "accessToken",
+        key: "accessToken",
+        // width: '150px',
+        sorter: true,
+        ellipsis: true,
+        ...this.getColumnSearchProps("accessToken"),
+        render: (text, record, index) => {
+          return Setting.getClickable(text);
+        },
+      },
+      {
+        title: i18next.t("token:Expires in"),
+        dataIndex: "expiresIn",
+        key: "expiresIn",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("expiresIn"),
+      },
+      {
+        title: i18next.t("provider:Scope"),
+        dataIndex: "scope",
+        key: "scope",
+        width: "110px",
+        sorter: true,
+        ...this.getColumnSearchProps("scope"),
+      },
+      // {
+      //   title: i18next.t("token:Token type"),
+      //   dataIndex: 'tokenType',
+      //   key: 'tokenType',
+      //   width: '130px',
+      //   sorter: (a, b) => a.tokenType.localeCompare(b.tokenType),
+      // },
+      {
+        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(`/tokens/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteToken(index)}
+              >
+              </PopconfirmModal>
+            </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={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addToken.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    this.setState({loading: true});
+    TokenBackend.getTokens("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default TokenListPage;

web/src/UserEditPage.js

@@ -0,0 +1,828 @@
+// 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, InputNumber, Result, Row, Select, Spin, Switch} from "antd";
+import * as UserBackend from "./backend/UserBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import CropperDivModal from "./common/modal/CropperDivModal.js";
+import * as ApplicationBackend from "./backend/ApplicationBackend";
+import PasswordModal from "./common/modal/PasswordModal";
+import ResetModal from "./common/modal/ResetModal";
+import AffiliationSelect from "./common/select/AffiliationSelect";
+import OAuthWidget from "./common/OAuthWidget";
+import SamlWidget from "./common/SamlWidget";
+import RegionSelect from "./common/select/RegionSelect";
+import WebAuthnCredentialTable from "./table/WebauthnCredentialTable";
+import ManagedAccountTable from "./table/ManagedAccountTable";
+import PropertyTable from "./table/propertyTable";
+import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
+
+const {Option} = Select;
+
+class UserEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
+      userName: props.userName !== undefined ? props.userName : props.match.params.userName,
+      user: null,
+      application: null,
+      organizations: [],
+      applications: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+      loading: true,
+      returnUrl: null,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getUser();
+    this.getOrganizations();
+    this.getApplicationsByOrganization(this.state.organizationName);
+    this.getUserApplication();
+    this.setReturnUrl();
+  }
+
+  getUser() {
+    UserBackend.getUser(this.state.organizationName, this.state.userName)
+      .then((data) => {
+        if (data.status === null || data.status !== "error") {
+          this.setState({
+            user: data,
+          });
+        }
+        this.setState({
+          loading: false,
+        });
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getApplicationsByOrganization(organizationName) {
+    ApplicationBackend.getApplicationsByOrganization("admin", organizationName)
+      .then((res) => {
+        this.setState({
+          applications: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  getUserApplication() {
+    ApplicationBackend.getUserApplication(this.state.organizationName, this.state.userName)
+      .then((application) => {
+        this.setState({
+          application: application,
+        });
+      });
+  }
+
+  setReturnUrl() {
+    const searchParams = new URLSearchParams(this.props.location.search);
+    const returnUrl = searchParams.get("returnUrl");
+    if (returnUrl !== null) {
+      this.setState({
+        returnUrl: returnUrl,
+      });
+    }
+  }
+
+  parseUserField(key, value) {
+    if (["score", "karma", "ranking"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateUserField(key, value) {
+    value = this.parseUserField(key, value);
+
+    const user = this.state.user;
+    user[key] = value;
+    this.setState({
+      user: user,
+    });
+  }
+
+  unlinked() {
+    this.getUser();
+  }
+
+  isSelf() {
+    return (this.state.user.id === this.props.account?.id);
+  }
+
+  isSelfOrAdmin() {
+    return this.isSelf() || Setting.isAdminUser(this.props.account);
+  }
+
+  getCountryCode() {
+    return this.props.account.countryCode;
+  }
+
+  renderAccountItem(accountItem) {
+    if (!accountItem.visible) {
+      return null;
+    }
+
+    const isAdmin = Setting.isAdminUser(this.props.account);
+
+    // return (
+    //   <div>
+    //     {
+    //       JSON.stringify({accountItem: accountItem, isSelf: isSelf, isAdmin: isAdmin})
+    //     }
+    //   </div>
+    // )
+
+    if (accountItem.viewRule === "Self") {
+      if (!this.isSelfOrAdmin()) {
+        return null;
+      }
+    } else if (accountItem.viewRule === "Admin") {
+      if (!isAdmin) {
+        return null;
+      }
+    }
+
+    let disabled = false;
+    if (accountItem.modifyRule === "Self") {
+      if (!this.isSelfOrAdmin()) {
+        disabled = true;
+      }
+    } else if (accountItem.modifyRule === "Admin") {
+      if (!isAdmin) {
+        disabled = true;
+      }
+    } else if (accountItem.modifyRule === "Immutable") {
+      disabled = true;
+    }
+
+    if (accountItem.name === "Organization") {
+      return (
+        <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%"}} disabled={disabled} value={this.state.user.owner} onChange={(value => {
+              this.getApplicationsByOrganization(value);
+              this.updateUserField("owner", value);
+            })}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "ID") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel("ID", i18next.t("general:ID - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.id} disabled={disabled} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Name") {
+      return (
+        <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.user.name} disabled={disabled} onChange={e => {
+              this.updateUserField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Display name") {
+      return (
+        <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.user.displayName} onChange={e => {
+              this.updateUserField("displayName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Avatar") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Avatar"), i18next.t("general:Avatar - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {i18next.t("general:Preview")}:
+              </Col>
+              <Col span={22} >
+                <a target="_blank" rel="noreferrer" href={this.state.user.avatar}>
+                  <img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: "20px"}} />
+                </a>
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}}>
+              <CropperDivModal buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />
+            </Row>
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "User type") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:User type"), i18next.t("general:User type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.user.type} onChange={(value => {this.updateUserField("type", value);})}
+              options={["normal-user"].map(item => Setting.getOption(item, item))}
+            />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Password") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Password"), i18next.t("general:Password - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <PasswordModal user={this.state.user} account={this.props.account} disabled={disabled} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Email") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Email"), i18next.t("general:Email - Tooltip"))} :
+          </Col>
+          <Col style={{paddingRight: "20px"}} span={11} >
+            <Input
+              value={this.state.user.email}
+              style={{width: "280Px"}}
+              disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
+              onChange={e => {
+                this.updateUserField("email", e.target.value);
+              }}
+            />
+          </Col>
+          <Col span={Setting.isMobile() ? 22 : 11} >
+            {/* backend auto get the current user, so admin can not edit. Just self can reset*/}
+            {this.isSelf() ? <ResetModal application={this.state.application} disabled={disabled} buttonText={i18next.t("user:Reset Email...")} destType={"email"} /> : null}
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Phone") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={Setting.isMobile() ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Phone"), i18next.t("general:Phone - Tooltip"))} :
+          </Col>
+          <Col style={{paddingRight: "20px"}} span={11} >
+            <Input.Group compact style={{width: "280Px"}}>
+              <CountryCodeSelect
+                style={{width: "30%"}}
+                // disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
+                value={this.state.user.countryCode}
+                onChange={(value) => {
+                  this.updateUserField("countryCode", value);
+                }}
+                countryCodes={this.state.application?.organizationObj.countryCodes}
+              />
+              <Input value={this.state.user.phone}
+                style={{width: "70%"}}
+                disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
+                onChange={e => {
+                  this.updateUserField("phone", e.target.value);
+                }} />
+            </Input.Group>
+          </Col>
+          <Col span={Setting.isMobile() ? 24 : 11} >
+            {this.isSelf() ? (<ResetModal application={this.state.application} countryCode={this.getCountryCode()} disabled={disabled} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null}
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Country/Region") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Country/Region"), i18next.t("user:Country/Region - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <RegionSelect defaultValue={this.state.user.region} onChange={(value) => {
+              this.updateUserField("region", value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Location") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Location"), i18next.t("user:Location - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.location} onChange={e => {
+              this.updateUserField("location", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Address") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Address"), i18next.t("user:Address - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.address} onChange={e => {
+              this.updateUserField("address", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Affiliation") {
+      return (
+        (this.state.application === null || this.state.user === null) ? null : (
+          <AffiliationSelect labelSpan={(Setting.isMobile()) ? 22 : 2} application={this.state.application} user={this.state.user} onUpdateUserField={(key, value) => {return this.updateUserField(key, value);}} />
+        )
+      );
+    } else if (accountItem.name === "Title") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Title"), i18next.t("user:Title - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.title} onChange={e => {
+              this.updateUserField("title", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "ID card type") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:ID card type"), i18next.t("user:ID card type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.idCardType} onChange={e => {
+              this.updateUserField("idCardType", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "ID card") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:ID card"), i18next.t("user:ID card - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.idCard} onChange={e => {
+              this.updateUserField("idCard", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Homepage") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Homepage"), i18next.t("user:Homepage - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.homepage} onChange={e => {
+              this.updateUserField("homepage", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Bio") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Bio"), i18next.t("user:Bio - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.bio} onChange={e => {
+              this.updateUserField("bio", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Tag") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Tag"), i18next.t("user:Tag - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            {
+              this.state.application?.organizationObj.tags?.length > 0 ? (
+                <Select virtual={false} style={{width: "100%"}} value={this.state.user.tag}
+                  onChange={(value => {this.updateUserField("tag", value);})}
+                  options={this.state.application.organizationObj.tags?.map((tag) => {
+                    const tokens = tag.split("|");
+                    const value = tokens[0];
+                    const displayValue = Setting.getLanguage() !== "zh" ? tokens[0] : tokens[1];
+                    return Setting.getOption(displayValue, value);
+                  })} />
+              ) : (
+                <Input value={this.state.user.tag} onChange={e => {
+                  this.updateUserField("tag", e.target.value);
+                }} />
+              )
+            }
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Language") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Language"), i18next.t("user:Language - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.language} onChange={e => {
+              this.updateUserField("language", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Gender") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Gender"), i18next.t("user:Gender - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.gender} onChange={e => {
+              this.updateUserField("gender", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Birthday") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Birthday"), i18next.t("user:Birthday - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.birthday} onChange={e => {
+              this.updateUserField("birthday", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Education") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Education"), i18next.t("user:Education - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.user.education} onChange={e => {
+              this.updateUserField("education", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Score") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Score"), i18next.t("user:Score - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.user.score} onChange={value => {
+              this.updateUserField("score", value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Karma") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Karma"), i18next.t("user:Karma - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.user.karma} onChange={value => {
+              this.updateUserField("karma", value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Ranking") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Ranking"), i18next.t("user:Ranking - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={this.state.user.ranking} onChange={value => {
+              this.updateUserField("ranking", value);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Signup application") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Signup application"), i18next.t("general:Signup application - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} disabled={disabled} value={this.state.user.signupApplication}
+              onChange={(value => {this.updateUserField("signupApplication", value);})}
+              options={this.state.applications.map((application) => Setting.getOption(application.name, application.name))
+              } />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Roles") {
+      return (
+        <Row style={{marginTop: "20px", alignItems: "center"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Roles"), i18next.t("general:Roles - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            {
+              Setting.getTags(this.state.user.roles.map(role => role.name))
+            }
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Permissions") {
+      return (
+        <Row style={{marginTop: "20px", alignItems: "center"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Permissions"), i18next.t("general:Permissions - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            {
+              Setting.getTags(this.state.user.permissions.map(permission => permission.name))
+            }
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "3rd-party logins") {
+      return (
+        !this.isSelfOrAdmin() ? null : (
+          <Row style={{marginTop: "20px"}} >
+            <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+              {Setting.getLabel(i18next.t("user:3rd-party logins"), i18next.t("user:3rd-party logins - Tooltip"))} :
+            </Col>
+            <Col span={22} >
+              <div style={{marginBottom: 20}}>
+                {
+                  (this.state.application === null || this.state.user === null) ? null : (
+                    this.state.application?.providers.filter(providerItem => Setting.isProviderVisible(providerItem)).map((providerItem) =>
+                      (providerItem.provider.category === "OAuth") ? (
+                        <OAuthWidget key={providerItem.name} labelSpan={(Setting.isMobile()) ? 10 : 3} user={this.state.user} application={this.state.application} providerItem={providerItem} account={this.props.account} onUnlinked={() => {return this.unlinked();}} />
+                      ) : (
+                        <SamlWidget key={providerItem.name} labelSpan={(Setting.isMobile()) ? 10 : 3} user={this.state.user} application={this.state.application} providerItem={providerItem} onUnlinked={() => {return this.unlinked();}} />
+                      )
+                    )
+                  )
+                }
+              </div>
+            </Col>
+          </Row>
+        )
+      );
+    } else if (accountItem.name === "Properties") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Properties"), i18next.t("user:Properties - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <PropertyTable properties={this.state.user.properties} onUpdateTable={(value) => {this.updateUserField("properties", value);}} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Is admin") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Is admin"), i18next.t("user:Is admin - Tooltip"))} :
+          </Col>
+          <Col span={(Setting.isMobile()) ? 22 : 2} >
+            <Switch disabled={disabled} checked={this.state.user.isAdmin} onChange={checked => {
+              this.updateUserField("isAdmin", checked);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Is global admin") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Is global admin"), i18next.t("user:Is global admin - Tooltip"))} :
+          </Col>
+          <Col span={(Setting.isMobile()) ? 22 : 2} >
+            <Switch disabled={disabled} checked={this.state.user.isGlobalAdmin} onChange={checked => {
+              this.updateUserField("isGlobalAdmin", checked);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Is forbidden") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Is forbidden"), i18next.t("user:Is forbidden - Tooltip"))} :
+          </Col>
+          <Col span={(Setting.isMobile()) ? 22 : 2} >
+            <Switch checked={this.state.user.isForbidden} onChange={checked => {
+              this.updateUserField("isForbidden", checked);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Is deleted") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Is deleted"), i18next.t("user:Is deleted - Tooltip"))} :
+          </Col>
+          <Col span={(Setting.isMobile()) ? 22 : 2} >
+            <Switch checked={this.state.user.isDeleted} onChange={checked => {
+              this.updateUserField("isDeleted", checked);
+            }} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "WebAuthn credentials") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:WebAuthn credentials"), i18next.t("user:WebAuthn credentials"))} :
+          </Col>
+          <Col span={22} >
+            <WebAuthnCredentialTable isSelf={this.isSelf()} table={this.state.user.webauthnCredentials} updateTable={(table) => {this.updateUserField("webauthnCredentials", table);}} refresh={this.getUser.bind(this)} />
+          </Col>
+        </Row>
+      );
+    } else if (accountItem.name === "Managed accounts") {
+      return (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("user:Managed accounts"), i18next.t("user:Managed accounts"))} :
+          </Col>
+          <Col span={22} >
+            <ManagedAccountTable
+              title={i18next.t("user:Managed accounts")}
+              table={this.state.user.managedAccounts}
+              onUpdateTable={(table) => {this.updateUserField("managedAccounts", table);}}
+              applications={this.state.applications}
+            />
+          </Col>
+        </Row>
+      );
+    }
+  }
+
+  renderUser() {
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("user:New User") : i18next.t("user:Edit User")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteUser()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      } style={(Setting.isMobile()) ? {margin: "5px"} : {}} type="inner">
+        {
+          this.state.application?.organizationObj.accountItems?.map(accountItem => {
+            return (
+              <React.Fragment key={accountItem.name}>
+                {
+                  this.renderAccountItem(accountItem)
+                }
+              </React.Fragment>
+            );
+          })
+        }
+      </Card>
+    );
+  }
+
+  submitUserEdit(needExit) {
+    const user = Setting.deepCopy(this.state.user);
+    UserBackend.updateUser(this.state.organizationName, this.state.userName, user)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            organizationName: this.state.user.owner,
+            userName: this.state.user.name,
+          });
+
+          if (this.props.history !== undefined) {
+            if (needExit) {
+              const userListUrl = sessionStorage.getItem("userListUrl");
+              if (userListUrl !== null) {
+                this.props.history.push(userListUrl);
+              } else {
+                this.props.history.push("/users");
+              }
+            } else {
+              this.props.history.push(`/users/${this.state.user.owner}/${this.state.user.name}`);
+            }
+          } else {
+            if (needExit) {
+              if (this.state.returnUrl) {
+                window.location.href = this.state.returnUrl;
+              }
+            }
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateUserField("owner", this.state.organizationName);
+          this.updateUserField("name", this.state.userName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteUser() {
+    UserBackend.deleteUser(this.state.user)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/users");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.loading ? <Spin size="large" style={{marginLeft: "50%", marginTop: "10%"}} /> : (
+            this.state.user !== null ? this.renderUser() :
+              <Result
+                status="404"
+                title="404 NOT FOUND"
+                subTitle={i18next.t("general:Sorry, the user you visited does not exist or you are not authorized to access this user.")}
+                extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
+              />
+          )
+        }
+        {
+          this.state.user === null ? null :
+            <div style={{marginTop: "20px", marginLeft: "40px"}}>
+              <Button size="large" onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
+              <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+              {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteUser()}>{i18next.t("general:Cancel")}</Button> : null}
+            </div>
+        }
+      </div>
+    );
+  }
+}
+
+export default UserEditPage;

web/src/UserListPage.js

@@ -0,0 +1,464 @@
+// 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, Switch, Table, Upload} from "antd";
+import {UploadOutlined} from "@ant-design/icons";
+import moment from "moment";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import * as UserBackend from "./backend/UserBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class UserListPage extends BaseListPage {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.match.params.organizationName,
+      organization: null,
+    });
+  }
+
+  newUser() {
+    const randomName = Setting.getRandomName();
+    const owner = (this.state.organizationName !== undefined) ? this.state.organizationName : this.props.account.owner;
+    return {
+      owner: owner,
+      name: `user_${randomName}`,
+      createdTime: moment().format(),
+      type: "normal-user",
+      password: "123",
+      passwordSalt: "",
+      displayName: `New User - ${randomName}`,
+      avatar: `${Setting.StaticBaseUrl}/img/casbin.svg`,
+      email: `${randomName}@example.com`,
+      phone: Setting.getRandomNumber(),
+      countryCode: this.state.organization.countryCodes?.length > 0 ? this.state.organization.countryCodes[0] : "",
+      address: [],
+      affiliation: "Example Inc.",
+      tag: "staff",
+      region: "",
+      isAdmin: (owner === "built-in"),
+      isGlobalAdmin: (owner === "built-in"),
+      IsForbidden: false,
+      score: this.state.organization.initScore,
+      isDeleted: false,
+      properties: {},
+      signupApplication: "app-built-in",
+    };
+  }
+
+  addUser() {
+    const newUser = this.newUser();
+    UserBackend.addUser(newUser)
+      .then((res) => {
+        if (res.status === "ok") {
+          sessionStorage.setItem("userListUrl", window.location.pathname);
+          this.props.history.push({pathname: `/users/${newUser.owner}/${newUser.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteUser(i) {
+    UserBackend.deleteUser(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  uploadFile(info) {
+    const {status, response: res} = info.file;
+    if (status === "done") {
+      if (res.status === "ok") {
+        Setting.showMessage("success", "Users uploaded successfully, refreshing the page");
+
+        const {pagination} = this.state;
+        this.fetch({pagination});
+      } else {
+        Setting.showMessage("error", `Users failed to upload: ${res.msg}`);
+      }
+    } else if (status === "error") {
+      Setting.showMessage("error", "File failed to upload");
+    }
+  }
+
+  renderUpload() {
+    const props = {
+      name: "file",
+      accept: ".xlsx",
+      method: "post",
+      action: `${Setting.ServerUrl}/api/upload-users`,
+      withCredentials: true,
+      onChange: (info) => {
+        this.uploadFile(info);
+      },
+    };
+
+    return (
+      <Upload {...props}>
+        <Button type="primary" size="small">
+          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        </Button>
+      </Upload>
+    );
+  }
+
+  renderTable(users) {
+    const columns = [
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "owner",
+        key: "owner",
+        width: (Setting.isMobile()) ? "100px" : "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("owner"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Application"),
+        dataIndex: "signupApplication",
+        key: "signupApplication",
+        width: (Setting.isMobile()) ? "100px" : "120px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("signupApplication"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/applications/${record.owner}/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Name"),
+        dataIndex: "name",
+        key: "name",
+        width: (Setting.isMobile()) ? "80px" : "110px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/users/${record.owner}/${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: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("displayName"),
+      },
+      {
+        title: i18next.t("general:Avatar"),
+        dataIndex: "avatar",
+        key: "avatar",
+        width: "80px",
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" rel="noreferrer" href={text}>
+              <img src={text} alt={text} width={50} />
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Email"),
+        dataIndex: "email",
+        key: "email",
+        width: "160px",
+        sorter: true,
+        ...this.getColumnSearchProps("email"),
+        render: (text, record, index) => {
+          return (
+            <a href={`mailto:${text}`}>
+              {text}
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Phone"),
+        dataIndex: "phone",
+        key: "phone",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("phone"),
+      },
+      // {
+      //   title: 'Phone',
+      //   dataIndex: 'phone',
+      //   key: 'phone',
+      //   width: '120px',
+      //   sorter: (a, b) => a.phone.localeCompare(b.phone),
+      // },
+      {
+        title: i18next.t("user:Affiliation"),
+        dataIndex: "affiliation",
+        key: "affiliation",
+        width: "140px",
+        sorter: true,
+        ...this.getColumnSearchProps("affiliation"),
+      },
+      {
+        title: i18next.t("user:Country/Region"),
+        dataIndex: "region",
+        key: "region",
+        width: "140px",
+        sorter: true,
+        ...this.getColumnSearchProps("region"),
+        render: (text, record, index) => {
+          return Setting.initCountries().getName(record.region, Setting.getLanguage(), {select: "official"});
+        },
+      },
+      {
+        title: i18next.t("user:Tag"),
+        dataIndex: "tag",
+        key: "tag",
+        width: "110px",
+        sorter: true,
+        ...this.getColumnSearchProps("tag"),
+        render: (text, record, index) => {
+          const tagMap = {};
+          this.state.organization?.tags?.map((tag, index) => {
+            const tokens = tag.split("|");
+            const displayValue = Setting.getLanguage() !== "zh" ? tokens[0] : tokens[1];
+            tagMap[tokens[0]] = displayValue;
+          });
+          return tagMap[text];
+        },
+      },
+      {
+        title: i18next.t("user:Is admin"),
+        dataIndex: "isAdmin",
+        key: "isAdmin",
+        width: "110px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        title: i18next.t("user:Is global admin"),
+        dataIndex: "isGlobalAdmin",
+        key: "isGlobalAdmin",
+        width: "140px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        title: i18next.t("user:Is forbidden"),
+        dataIndex: "isForbidden",
+        key: "isForbidden",
+        width: "110px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        title: i18next.t("user:Is deleted"),
+        dataIndex: "isDeleted",
+        key: "isDeleted",
+        width: "110px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
+        width: "190px",
+        fixed: (Setting.isMobile()) ? "false" : "right",
+        render: (text, record, index) => {
+          const disabled = (record.owner === this.props.account.owner && record.name === this.props.account.name);
+          return (
+            <div>
+              <Button style={{marginTop: "10px", marginBottom: "10px", marginRight: "10px"}} type="primary" onClick={() => {
+                sessionStorage.setItem("userListUrl", window.location.pathname);
+                this.props.history.push(`/users/${record.owner}/${record.name}`);
+              }}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteUser(index)}
+                disabled={disabled}
+              >
+              </PopconfirmModal>
+            </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={users} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Users")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={this.addUser.bind(this)}>{i18next.t("general:Add")}</Button>
+              {
+                this.renderUpload()
+              }
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    this.setState({loading: true});
+    if (this.props.match.params.organizationName === undefined) {
+      (Setting.isAdminUser(this.props.account) ? UserBackend.getGlobalUsers(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder) : UserBackend.getUsers(this.props.account.owner, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder))
+        .then((res) => {
+          if (res.status === "ok") {
+            this.setState({
+              loading: false,
+              data: res.data,
+              pagination: {
+                ...params.pagination,
+                total: res.data2,
+              },
+              searchText: params.searchText,
+              searchedColumn: params.searchedColumn,
+            });
+
+            const users = res.data;
+            if (users.length > 0) {
+              this.getOrganization(users[0].owner);
+            } else {
+              this.getOrganization(this.state.organizationName);
+            }
+          } else {
+            if (Setting.isResponseDenied(res)) {
+              this.setState({
+                loading: false,
+                isAuthorized: false,
+              });
+            }
+          }
+        });
+    } else {
+      UserBackend.getUsers(this.props.match.params.organizationName, 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,
+            });
+
+            const users = res.data;
+            if (users.length > 0) {
+              this.getOrganization(users[0].owner);
+            } else {
+              this.getOrganization(this.state.organizationName);
+            }
+          } else {
+            if (Setting.isResponseDenied(res)) {
+              this.setState({
+                loading: false,
+                isAuthorized: false,
+              });
+            }
+          }
+        });
+    }
+  };
+
+  getOrganization(organizationName) {
+    OrganizationBackend.getOrganization("admin", organizationName)
+      .then((organization) => {
+        this.setState({
+          organization: organization,
+        });
+      });
+  }
+}
+
+export default UserListPage;

web/src/WebhookEditPage.js

@@ -0,0 +1,350 @@
+// 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 {LinkOutlined} from "@ant-design/icons";
+import * as WebhookBackend from "./backend/WebhookBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import WebhookHeaderTable from "./table/WebhookHeaderTable";
+
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/javascript/javascript");
+
+const {Option} = Select;
+
+const previewTemplate = {
+  "id": 9078,
+  "owner": "built-in",
+  "name": "68f55b28-7380-46b1-9bde-64fe1576e3b3",
+  "createdTime": "2022-01-01T01:03:42+08:00",
+  "organization": "built-in",
+  "clientIp": "159.89.126.192",
+  "user": "admin",
+  "method": "POST",
+  "requestUri": "/api/login",
+  "action": "login",
+  "isTriggered": false,
+};
+
+const userTemplate = {
+  "owner": "built-in",
+  "name": "admin",
+  "createdTime": "2020-07-16T21:46:52+08:00",
+  "updatedTime": "",
+  "id": "9eb20f79-3bb5-4e74-99ac-39e3b9a171e8",
+  "type": "normal-user",
+  "password": "123",
+  "passwordSalt": "",
+  "displayName": "Admin",
+  "avatar": "https://cdn.casbin.com/usercontent/admin/avatar/1596241359.png",
+  "permanentAvatar": "https://cdn.casbin.com/casdoor/avatar/casbin/admin.png",
+  "email": "admin@example.com",
+  "phone": "",
+  "location": "",
+  "address": null,
+  "affiliation": "",
+  "title": "",
+  "score": 10000,
+  "ranking": 10,
+  "isOnline": false,
+  "isAdmin": true,
+  "isGlobalAdmin": false,
+  "isForbidden": false,
+  "isDeleted": false,
+  "signupApplication": "app-casnode",
+  "properties": {
+    "bio": "",
+    "checkinDate": "20200801",
+    "editorType": "",
+    "emailVerifiedTime": "2020-07-16T21:46:52+08:00",
+    "fileQuota": "50",
+    "location": "",
+    "no": "22",
+    "oauth_QQ_displayName": "",
+    "oauth_QQ_verifiedTime": "",
+    "oauth_WeChat_displayName": "",
+    "oauth_WeChat_verifiedTime": "",
+    "onlineStatus": "false",
+    "phoneVerifiedTime": "",
+    "renameQuota": "3",
+    "tagline": "",
+    "website": "",
+  },
+};
+
+class WebhookEditPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      webhookName: props.match.params.webhookName,
+      webhook: null,
+      organizations: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.getWebhook();
+    this.getOrganizations();
+  }
+
+  getWebhook() {
+    WebhookBackend.getWebhook("admin", this.state.webhookName)
+      .then((webhook) => {
+        this.setState({
+          webhook: webhook,
+        });
+      });
+  }
+
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
+  parseWebhookField(key, value) {
+    if (["port"].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateWebhookField(key, value) {
+    value = this.parseWebhookField(key, value);
+
+    const webhook = this.state.webhook;
+    webhook[key] = value;
+    this.setState({
+      webhook: webhook,
+    });
+  }
+
+  renderWebhook() {
+    const preview = Setting.deepCopy(previewTemplate);
+    if (this.state.webhook.isUserExtended) {
+      preview["extendedUser"] = userTemplate;
+    }
+    const previewText = JSON.stringify(preview, null, 2);
+
+    return (
+      <Card size="small" title={
+        <div>
+          {this.state.mode === "add" ? i18next.t("webhook:New Webhook") : i18next.t("webhook:Edit Webhook")}&nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} onClick={() => this.deleteWebhook()}>{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.webhook.organization} onChange={(value => {this.updateWebhookField("organization", value);})}>
+              {
+                this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Name"), i18next.t("general:Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={this.state.webhook.name} onChange={e => {
+              this.updateWebhookField("name", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input prefix={<LinkOutlined />} value={this.state.webhook.url} onChange={e => {
+              this.updateWebhookField("url", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Method"), i18next.t("webhook:Method - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.webhook.method} onChange={(value => {this.updateWebhookField("method", value);})}>
+              {
+                [
+                  {id: "POST", name: "POST"},
+                  {id: "GET", name: "GET"},
+                  {id: "PUT", name: "PUT"},
+                  {id: "DELETE", name: "DELETE"},
+                ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("webhook:Content type"), i18next.t("webhook:Content type - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={this.state.webhook.contentType} onChange={(value => {this.updateWebhookField("contentType", value);})}>
+              {
+                [
+                  {id: "application/json", name: "application/json"},
+                  {id: "application/x-www-form-urlencoded", name: "application/x-www-form-urlencoded"},
+                ].map((contentType, index) => <Option key={index} value={contentType.id}>{contentType.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("webhook:Headers"), i18next.t("webhook:Headers - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <WebhookHeaderTable
+              title={i18next.t("webhook:Headers")}
+              table={this.state.webhook.headers}
+              onUpdateTable={(value) => {this.updateWebhookField("headers", value);}}
+            />
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("webhook:Events"), i18next.t("webhook:Events - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} mode="tags" style={{width: "100%"}}
+              value={this.state.webhook.events}
+              onChange={value => {
+                this.updateWebhookField("events", value);
+              }} >
+              {
+                (
+                  ["signup", "login", "logout", "add-user", "update-user", "delete-user", "add-organization", "update-organization", "delete-organization", "add-application", "update-application", "delete-application", "add-provider", "update-provider", "delete-provider"].map((option, index) => {
+                    return (
+                      <Option key={option} value={option}>{option}</Option>
+                    );
+                  })
+                )
+              }
+            </Select>
+          </Col>
+        </Row>
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("webhook:Is user extended"), i18next.t("webhook:Is user extended - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.webhook.isUserExtended} onChange={checked => {
+              this.updateWebhookField("isUserExtended", checked);
+            }} />
+          </Col>
+        </Row>
+        <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>
+          <Col span={22} >
+            <div style={{width: "900px", height: "300px"}} >
+              <CodeMirror
+                value={previewText}
+                options={{mode: "javascript", theme: "material-darker"}}
+                onBeforeChange={(editor, data, value) => {}}
+              />
+            </div>
+          </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.webhook.isEnabled} onChange={checked => {
+              this.updateWebhookField("isEnabled", checked);
+            }} />
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
+
+  submitWebhookEdit(willExist) {
+    const webhook = Setting.deepCopy(this.state.webhook);
+    WebhookBackend.updateWebhook(this.state.webhook.owner, this.state.webhookName, webhook)
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully saved"));
+          this.setState({
+            webhookName: this.state.webhook.name,
+          });
+
+          if (willExist) {
+            this.props.history.push("/webhooks");
+          } else {
+            this.props.history.push(`/webhooks/${this.state.webhook.name}`);
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
+          this.updateWebhookField("name", this.state.webhookName);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteWebhook() {
+    WebhookBackend.deleteWebhook(this.state.webhook)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push("/webhooks");
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        {
+          this.state.webhook !== null ? this.renderWebhook() : null
+        }
+        <div style={{marginTop: "20px", marginLeft: "40px"}}>
+          <Button size="large" onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
+          <Button style={{marginLeft: "20px"}} type="primary" size="large" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: "20px"}} size="large" onClick={() => this.deleteWebhook()}>{i18next.t("general:Cancel")}</Button> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WebhookEditPage;

web/src/WebhookListPage.js

@@ -0,0 +1,268 @@
+// 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, Switch, Table} from "antd";
+import moment from "moment";
+import * as Setting from "./Setting";
+import * as WebhookBackend from "./backend/WebhookBackend";
+import i18next from "i18next";
+import BaseListPage from "./BaseListPage";
+import PopconfirmModal from "./common/modal/PopconfirmModal";
+
+class WebhookListPage extends BaseListPage {
+  newWebhook() {
+    const randomName = Setting.getRandomName();
+    return {
+      owner: "admin", // this.props.account.webhookname,
+      name: `webhook_${randomName}`,
+      createdTime: moment().format(),
+      organization: "built-in",
+      url: "https://example.com/callback",
+      method: "POST",
+      contentType: "application/json",
+      headers: [],
+      events: ["signup", "login", "logout", "update-user"],
+      isEnabled: true,
+    };
+  }
+
+  addWebhook() {
+    const newWebhook = this.newWebhook();
+    WebhookBackend.addWebhook(newWebhook)
+      .then((res) => {
+        if (res.status === "ok") {
+          this.props.history.push({pathname: `/webhooks/${newWebhook.name}`, mode: "add"});
+          Setting.showMessage("success", i18next.t("general:Successfully added"));
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  deleteWebhook(i) {
+    WebhookBackend.deleteWebhook(this.state.data[i])
+      .then((res) => {
+        if (res.status === "ok") {
+          Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+          this.setState({
+            data: Setting.deleteRow(this.state.data, i),
+            pagination: {total: this.state.pagination.total - 1},
+          });
+        } else {
+          Setting.showMessage("error", `${i18next.t("general:Failed to delete")}: ${res.msg}`);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `${i18next.t("general:Failed to connect to server")}: ${error}`);
+      });
+  }
+
+  renderTable(webhooks) {
+    const columns = [
+      {
+        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={`/webhooks/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Organization"),
+        dataIndex: "organization",
+        key: "organization",
+        width: "110px",
+        sorter: true,
+        ...this.getColumnSearchProps("organization"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Created time"),
+        dataIndex: "createdTime",
+        key: "createdTime",
+        width: "180px",
+        sorter: true,
+        render: (text, record, index) => {
+          return Setting.getFormattedDate(text);
+        },
+      },
+      {
+        title: i18next.t("general:URL"),
+        dataIndex: "url",
+        key: "url",
+        width: "300px",
+        sorter: true,
+        ...this.getColumnSearchProps("url"),
+        render: (text, record, index) => {
+          return (
+            <a target="_blank" rel="noreferrer" href={text}>
+              {
+                Setting.getShortText(text)
+              }
+            </a>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Method"),
+        dataIndex: "method",
+        key: "method",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("method"),
+      },
+      {
+        title: i18next.t("webhook:Content type"),
+        dataIndex: "contentType",
+        key: "contentType",
+        width: "200px",
+        sorter: true,
+        filterMultiple: false,
+        filters: [
+          {text: "application/json", value: "application/json"},
+          {text: "application/x-www-form-urlencoded", value: "application/x-www-form-urlencoded"},
+        ],
+      },
+      {
+        title: i18next.t("webhook:Events"),
+        dataIndex: "events",
+        key: "events",
+        // width: '100px',
+        sorter: true,
+        ...this.getColumnSearchProps("events"),
+        render: (text, record, index) => {
+          return Setting.getTags(text);
+        },
+      },
+      {
+        title: i18next.t("webhook:Is user extended"),
+        dataIndex: "isUserExtended",
+        key: "isUserExtended",
+        width: "160px",
+        sorter: true,
+        render: (text, record, index) => {
+          return (
+            <Switch disabled checkedChildren="ON" unCheckedChildren="OFF" checked={text} />
+          );
+        },
+      },
+      {
+        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(`/webhooks/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <PopconfirmModal
+                title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}
+                onConfirm={() => this.deleteWebhook(index)}
+              >
+              </PopconfirmModal>
+            </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={webhooks} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+          title={() => (
+            <div>
+              {i18next.t("general:Webhooks")}&nbsp;&nbsp;&nbsp;&nbsp;
+              <Button type="primary" size="small" onClick={this.addWebhook.bind(this)}>{i18next.t("general:Add")}</Button>
+            </div>
+          )}
+          loading={this.state.loading}
+          onChange={this.handleTableChange}
+        />
+      </div>
+    );
+  }
+
+  fetch = (params = {}) => {
+    let field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
+    if (params.contentType !== undefined && params.contentType !== null) {
+      field = "contentType";
+      value = params.contentType;
+    }
+    this.setState({loading: true});
+    WebhookBackend.getWebhooks("admin", 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,
+          });
+        } else {
+          if (Setting.isResponseDenied(res)) {
+            this.setState({
+              loading: false,
+              isAuthorized: false,
+            });
+          }
+        }
+      });
+  };
+}
+
+export default WebhookListPage;

web/src/account/AccountPage.js

@@ -0,0 +1,26 @@
+// 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 UserEditPage from "../UserEditPage";
+
+class AccountPage extends React.Component {
+  render() {
+    return (
+      <UserEditPage organizationName={this.props.account.owner} userName={this.props.account.name} account={this.props.account} location={this.props.location} />
+    );
+  }
+}
+
+export default AccountPage;

web/src/auth/AdfsLoginButton.js

@@ -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.
+
+import {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/adfs.svg`} alt="Sign in with ADFS" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with ADFS",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const AdfsLoginButton = createButton(config);
+
+export default AdfsLoginButton;

web/src/auth/AlipayLoginButton.js

@@ -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.
+
+import {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/alipay.svg`} alt="Sign in with Alipay" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with Alipay",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const AlipayLoginButton = createButton(config);
+
+export default AlipayLoginButton;

web/src/auth/AppleLoginButton.js

@@ -0,0 +1,32 @@
+// 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 {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/apple.svg`} alt="Sign in with Apple" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with Apple",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const AppleLoginButton = createButton(config);
+
+export default AppleLoginButton;

web/src/auth/Auth.js

@@ -0,0 +1,19 @@
+// 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.
+
+export let authConfig = {};
+
+export function initAuthWithConfig(config) {
+  authConfig = config;
+}

web/src/auth/AuthBackend.js

@@ -0,0 +1,151 @@
+// 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 {authConfig} from "./Auth";
+import * as Setting from "../Setting";
+
+export function getAccount(query) {
+  return fetch(`${authConfig.serverUrl}/api/get-account${query}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function signup(values) {
+  return fetch(`${authConfig.serverUrl}/api/signup`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(values),
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function getEmailAndPhone(organization, username) {
+  return fetch(`${authConfig.serverUrl}/api/get-email-and-phone?organization=${organization}&username=${username}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then((res) => res.json());
+}
+
+export function oAuthParamsToQuery(oAuthParams) {
+  // login
+  if (oAuthParams === null) {
+    return "";
+  }
+
+  // code
+  return `?clientId=${oAuthParams.clientId}&responseType=${oAuthParams.responseType}&redirectUri=${encodeURIComponent(oAuthParams.redirectUri)}&scope=${oAuthParams.scope}&state=${oAuthParams.state}&nonce=${oAuthParams.nonce}&code_challenge_method=${oAuthParams.challengeMethod}&code_challenge=${oAuthParams.codeChallenge}`;
+}
+
+export function getApplicationLogin(oAuthParams) {
+  return fetch(`${authConfig.serverUrl}/api/get-app-login${oAuthParamsToQuery(oAuthParams)}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function login(values, oAuthParams) {
+  return fetch(`${authConfig.serverUrl}/api/login${oAuthParamsToQuery(oAuthParams)}`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(values),
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function loginCas(values, params) {
+  return fetch(`${authConfig.serverUrl}/api/login?service=${params.service}`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(values),
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function logout() {
+  return fetch(`${authConfig.serverUrl}/api/logout`, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function unlink(values) {
+  return fetch(`${authConfig.serverUrl}/api/unlink`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(values),
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function getSamlLogin(providerId, relayState) {
+  return fetch(`${authConfig.serverUrl}/api/get-saml-login?id=${providerId}&relayState=${relayState}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function loginWithSaml(values, param) {
+  return fetch(`${authConfig.serverUrl}/api/login${param}`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify(values),
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function getWechatMessageEvent() {
+  return fetch(`${Setting.ServerUrl}/api/get-webhook-event`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
+
+export function getCaptchaStatus(values) {
+  return fetch(`${Setting.ServerUrl}/api/get-captcha-status?organization=${values["organization"]}&user_id=${values["username"]}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}

web/src/auth/AuthCallback.js

@@ -0,0 +1,210 @@
+// 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 {Spin} from "antd";
+import {withRouter} from "react-router-dom";
+import * as AuthBackend from "./AuthBackend";
+import * as Util from "./Util";
+import {authConfig} from "./Auth";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import RedirectForm from "../common/RedirectForm";
+
+class AuthCallback extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      msg: null,
+      samlResponse: "",
+      relayState: "",
+      redirectUrl: "",
+    };
+  }
+
+  getInnerParams() {
+    // For example, for Casbin-OA, realRedirectUri = "http://localhost:9000/login"
+    // realRedirectUrl = "http://localhost:9000"
+    const params = new URLSearchParams(this.props.location.search);
+    const state = params.get("state");
+    const queryString = Util.getQueryParamsFromState(state);
+    return new URLSearchParams(queryString);
+  }
+
+  getResponseType() {
+    // "http://localhost:8000"
+    const authServerUrl = authConfig.serverUrl;
+
+    const innerParams = this.getInnerParams();
+    const method = innerParams.get("method");
+    if (method === "signup") {
+      const realRedirectUri = innerParams.get("redirect_uri");
+      // Casdoor's own login page, so "code" is not necessary
+      if (realRedirectUri === null) {
+        const samlRequest = innerParams.get("SAMLRequest");
+        // cas don't use 'redirect_url', it is called 'service'
+        const casService = innerParams.get("service");
+        if (samlRequest !== null && samlRequest !== undefined && samlRequest !== "") {
+          return "saml";
+        } else if (casService !== null && casService !== undefined && casService !== "") {
+          return "cas";
+        }
+        return "login";
+      }
+
+      const realRedirectUrl = new URL(realRedirectUri).origin;
+
+      // For Casdoor itself, we use "login" directly
+      if (authServerUrl === realRedirectUrl) {
+        return "login";
+      } else {
+        const responseType = innerParams.get("response_type");
+        if (responseType !== null) {
+          return responseType;
+        }
+        return "code";
+      }
+    } else if (method === "link") {
+      return "link";
+    } else {
+      return "unknown";
+    }
+  }
+
+  UNSAFE_componentWillMount() {
+    const params = new URLSearchParams(this.props.location.search);
+    const isSteam = params.get("openid.mode");
+    let code = params.get("code");
+    // WeCom returns "auth_code=xxx" instead of "code=xxx"
+    if (code === null) {
+      code = params.get("auth_code");
+    }
+    // Dingtalk now  returns "authCode=xxx" instead of "code=xxx"
+    if (code === null) {
+      code = params.get("authCode");
+    }
+    // Steam don't use code, so we should use all params as code.
+    if (isSteam !== null && code === null) {
+      code = this.props.location.search;
+    }
+
+    const innerParams = this.getInnerParams();
+    const applicationName = innerParams.get("application");
+    const providerName = innerParams.get("provider");
+    const method = innerParams.get("method");
+    const samlRequest = innerParams.get("SAMLRequest");
+    const casService = innerParams.get("service");
+
+    const redirectUri = `${window.location.origin}/callback`;
+
+    const body = {
+      type: this.getResponseType(),
+      application: applicationName,
+      provider: providerName,
+      code: code,
+      samlRequest: samlRequest,
+      // state: innerParams.get("state"),
+      state: applicationName,
+      redirectUri: redirectUri,
+      method: method,
+    };
+
+    if (this.getResponseType() === "cas") {
+      // user is using casdoor as cas sso server, and wants the ticket to be acquired
+      AuthBackend.loginCas(body, {"service": casService}).then((res) => {
+        if (res.status === "ok") {
+          let msg = "Logged in successfully.";
+          if (casService === "") {
+            // If service was not specified, Casdoor must display a message notifying the client that it has successfully initiated a single sign-on session.
+            msg += "Now you can visit apps protected by Casdoor.";
+          }
+          Setting.showMessage("success", msg);
+
+          if (casService !== "") {
+            const st = res.data;
+            const newUrl = new URL(casService);
+            newUrl.searchParams.append("ticket", st);
+            window.location.href = newUrl.toString();
+          }
+        } else {
+          Setting.showMessage("error", `${i18next.t("application:Failed to sign in")}: ${res.msg}`);
+        }
+      });
+      return;
+    }
+    // OAuth
+    const oAuthParams = Util.getOAuthGetParameters(innerParams);
+    const concatChar = oAuthParams?.redirectUri?.includes("?") ? "&" : "?";
+    AuthBackend.login(body, oAuthParams)
+      .then((res) => {
+        if (res.status === "ok") {
+          const responseType = this.getResponseType();
+          if (responseType === "login") {
+            Setting.showMessage("success", "Logged in successfully");
+            // Setting.goToLinkSoft(this, "/");
+
+            const link = Setting.getFromLink();
+            Setting.goToLink(link);
+          } else if (responseType === "code") {
+            const code = res.data;
+            Setting.goToLink(`${oAuthParams.redirectUri}${concatChar}code=${code}&state=${oAuthParams.state}`);
+            // Setting.showMessage("success", `Authorization code: ${res.data}`);
+          } else if (responseType === "token" || responseType === "id_token") {
+            const token = res.data;
+            Setting.goToLink(`${oAuthParams.redirectUri}${concatChar}${responseType}=${token}&state=${oAuthParams.state}&token_type=bearer`);
+          } else if (responseType === "link") {
+            const from = innerParams.get("from");
+            Setting.goToLinkSoft(this, from);
+          } else if (responseType === "saml") {
+            if (res.data2.method === "POST") {
+              this.setState({
+                samlResponse: res.data,
+                redirectUrl: res.data2.redirectUrl,
+                relayState: oAuthParams.relayState,
+              });
+            } else {
+              const SAMLResponse = res.data;
+              const redirectUri = res.data2.redirectUrl;
+              Setting.goToLink(`${redirectUri}?SAMLResponse=${encodeURIComponent(SAMLResponse)}&RelayState=${oAuthParams.relayState}`);
+            }
+          }
+        } else {
+          this.setState({
+            msg: res.msg,
+          });
+        }
+      });
+  }
+
+  render() {
+    if (this.state.samlResponse !== "") {
+      return <RedirectForm samlResponse={this.state.samlResponse} redirectUrl={this.state.redirectUrl} relayState={this.state.relayState} />;
+    }
+
+    return (
+      <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
+        {
+          (this.state.msg === null) ? (
+            <Spin size="large" tip={i18next.t("login:Signing in...")} style={{paddingTop: "10%"}} />
+          ) : (
+            Util.renderMessageLarge(this, this.state.msg)
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default withRouter(AuthCallback);

web/src/auth/AzureADLoginButton.js

@@ -0,0 +1,32 @@
+// 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 {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/azuread.svg`} alt="Sign in with AzureAD" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with AzureAD",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const AzureADLoginButton = createButton(config);
+
+export default AzureADLoginButton;

web/src/auth/BaiduLoginButton.js

@@ -0,0 +1,32 @@
+// 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 {createButton} from "react-social-login-buttons";
+import {StaticBaseUrl} from "../Setting";
+
+function Icon({width = 24, height = 24, color}) {
+  return <img src={`${StaticBaseUrl}/buttons/baidu.svg`} alt="Sign in with Baidu" style={{width: 24, height: 24}} />;
+}
+
+const config = {
+  text: "Sign in with Baidu",
+  icon: Icon,
+  iconFormat: name => `fa fa-${name}`,
+  style: {background: "#ffffff", color: "#000000"},
+  activeStyle: {background: "#ededee"},
+};
+
+const BaiduLoginButton = createButton(config);
+
+export default BaiduLoginButton;