update

web/babel.config.json

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

web/craco.config.js

@@ -1,53 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

web/cypress/e2e/adapter.cy.js

@@ -1,16 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,41 +0,0 @@
-// ***********************************************
-// 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

@@ -1,20 +0,0 @@
-// ***********************************************************
-// 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

@@ -1,96 +0,0 @@
-{
-  "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

@@ -1,43 +0,0 @@
-<!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

@@ -1,323 +0,0 @@
-// 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

@@ -1,275 +0,0 @@
-// 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

@@ -1,773 +0,0 @@
-// 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

@@ -1,136 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-// 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

@@ -1,936 +0,0 @@
-// 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

@@ -1,301 +0,0 @@
-// 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

@@ -1,152 +0,0 @@
-// 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

@@ -1,272 +0,0 @@
-// 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

@@ -1,242 +0,0 @@
-// 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

@@ -1,199 +0,0 @@
-// 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

@@ -1,243 +0,0 @@
-// 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

@@ -1,294 +0,0 @@
-// 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

@@ -1,167 +0,0 @@
-// 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

@@ -1,242 +0,0 @@
-// 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

@@ -1,30 +0,0 @@
-// 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

@@ -1,95 +0,0 @@
-// 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

@@ -1,268 +0,0 @@
-// 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

@@ -1,260 +0,0 @@
-// 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

@@ -1,220 +0,0 @@
-// 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

@@ -1,236 +0,0 @@
-// 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

@@ -1,212 +0,0 @@
-// 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

@@ -1,215 +0,0 @@
-// 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

@@ -1,423 +0,0 @@
-// 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

@@ -1,298 +0,0 @@
-// 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

@@ -1,500 +0,0 @@
-// 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

@@ -1,293 +0,0 @@
-// 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

@@ -1,115 +0,0 @@
-// 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

@@ -1,452 +0,0 @@
-// 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

@@ -1,373 +0,0 @@
-// 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

@@ -1,248 +0,0 @@
-// 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

@@ -1,335 +0,0 @@
-// 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

@@ -1,310 +0,0 @@
-// 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

@@ -1,942 +0,0 @@
-// 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

@@ -1,281 +0,0 @@
-// 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

@@ -1,237 +0,0 @@
-// 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

@@ -1,316 +0,0 @@
-// 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

@@ -1,241 +0,0 @@
-// 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

@@ -1,246 +0,0 @@
-// 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

@@ -1,162 +0,0 @@
-// 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

@@ -1,1156 +0,0 @@
-// 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

@@ -1,443 +0,0 @@
-// 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

@@ -1,303 +0,0 @@
-// 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

@@ -1,173 +0,0 @@
-// 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

@@ -1,221 +0,0 @@
-// 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

@@ -1,268 +0,0 @@
-// 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

@@ -1,828 +0,0 @@
-// 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

@@ -1,464 +0,0 @@
-// 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

@@ -1,350 +0,0 @@
-// 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

@@ -1,268 +0,0 @@
-// 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

@@ -1,26 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,151 +0,0 @@
-// 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

@@ -1,210 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-// 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;

web/src/auth/BilibiliLoginButton.js

@@ -1,32 +0,0 @@
-// 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/bilibili.svg`} alt="Sign in with Bilibili" />;
-}
-
-const config = {
-  text: "Sign in with Bilibili",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#0191e0"},
-  activeStyle: {background: "rgb(76,143,208)"},
-};
-
-const BilibiliLoginButton = createButton(config);
-
-export default BilibiliLoginButton;

web/src/auth/CasLogout.js

@@ -1,70 +0,0 @@
-// 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 {Card, Spin} from "antd";
-import {withRouter} from "react-router-dom";
-import * as AuthBackend from "./AuthBackend";
-import * as Setting from "../Setting";
-import i18next from "i18next";
-
-class CasLogout extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      classes: props,
-      msg: null,
-    };
-    if (props.match?.params.casApplicationName !== undefined) {
-      this.state.owner = props.match?.params.owner;
-      this.state.applicationName = props.match?.params.casApplicationName;
-    }
-  }
-
-  UNSAFE_componentWillMount() {
-    const params = new URLSearchParams(this.props.location.search);
-
-    AuthBackend.logout()
-      .then((res) => {
-        if (res.status === "ok") {
-          Setting.showMessage("success", "Logged out successfully");
-          this.props.onUpdateAccount(null);
-          const redirectUri = res.data2;
-          if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
-            Setting.goToLink(redirectUri);
-          } else if (params.has("service")) {
-            Setting.goToLink(params.get("service"));
-          } else {
-            Setting.goToLinkSoft(this, `/cas/${this.state.owner}/${this.state.applicationName}/login`);
-          }
-        } else {
-          Setting.showMessage("error", `Failed to log out: ${res.msg}`);
-        }
-      });
-
-  }
-
-  render() {
-    return (
-      <Card>
-        <div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
-          {
-            <Spin size="large" tip={i18next.t("login:Logging out...")} style={{paddingTop: "10%"}} />
-          }
-        </div>
-      </Card>
-    );
-  }
-}
-export default withRouter(CasLogout);

web/src/auth/CasdoorLoginButton.js

@@ -1,32 +0,0 @@
-// 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/casdoor.svg`} alt="Sign in with Casdoor" style={{width: 24, height: 24}} />;
-}
-
-const config = {
-  text: "Sign in with Casdoor",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#ffffff", color: "#000000"},
-  activeStyle: {background: "#ededee"},
-};
-
-const CasdoorLoginButton = createButton(config);
-
-export default CasdoorLoginButton;

web/src/auth/DingTalkLoginButton.js

@@ -1,32 +0,0 @@
-// 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/dingtalk.svg`} alt="Sign in with DingTalk" />;
-}
-
-const config = {
-  text: "Sign in with DingTalk",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#0191e0"},
-  activeStyle: {background: "rgb(76,143,208)"},
-};
-
-const DingTalkLoginButton = createButton(config);
-
-export default DingTalkLoginButton;

web/src/auth/DouyinLoginButton.js

@@ -1,32 +0,0 @@
-// 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/douyin.svg`} alt="Sign in with Douyin" style={{width: 24, height: 24}} />;
-}
-
-const config = {
-  text: "Sign in with Douyin",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#ffffff", color: "#000000"},
-  activeStyle: {background: "#ededee"},
-};
-
-const DouyinLoginButton = createButton(config);
-
-export default DouyinLoginButton;

web/src/auth/FacebookLoginButton.js

@@ -1,32 +0,0 @@
-// 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/facebook.svg`} alt="Sign in with Facebook" />;
-}
-
-const config = {
-  text: "Sign in with Facebook",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#3b5998"},
-  activeStyle: {background: "#2b3f65"},
-};
-
-const FacebookLoginButton = createButton(config);
-
-export default FacebookLoginButton;

web/src/auth/ForgetPage.js

@@ -1,503 +0,0 @@
-// 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, Col, Form, Input, Row, Select, Steps} from "antd";
-import * as AuthBackend from "./AuthBackend";
-import * as ApplicationBackend from "../backend/ApplicationBackend";
-import * as Util from "./Util";
-import * as Setting from "../Setting";
-import i18next from "i18next";
-import {SendCodeInput} from "../common/SendCodeInput";
-import * as UserBackend from "../backend/UserBackend";
-import {CheckCircleOutlined, KeyOutlined, LockOutlined, SolutionOutlined, UserOutlined} from "@ant-design/icons";
-import CustomGithubCorner from "../common/CustomGithubCorner";
-import {withRouter} from "react-router-dom";
-const {Option} = Select;
-
-class ForgetPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      classes: props,
-      applicationName: props.applicationName ?? props.match.params?.applicationName,
-      msg: null,
-      name: "",
-      username: "",
-      phone: "",
-      email: "",
-      dest: "",
-      isVerifyTypeFixed: false,
-      verifyType: "", // "email", "phone"
-      current: 0,
-    };
-
-    this.form = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.getApplicationObj() === undefined) {
-      if (this.state.applicationName !== undefined) {
-        this.getApplication();
-      } else {
-        Setting.showMessage("error", i18next.t("forget:Unknown forget type") + ": " + this.state.type);
-      }
-    }
-  }
-
-  getApplication() {
-    if (this.state.applicationName === undefined) {
-      return;
-    }
-
-    ApplicationBackend.getApplication("admin", this.state.applicationName)
-      .then((application) => {
-        this.onUpdateApplication(application);
-      });
-  }
-
-  getApplicationObj() {
-    return this.props.application;
-  }
-
-  onUpdateApplication(application) {
-    this.props.onUpdateApplication(application);
-  }
-
-  onFormFinish(name, info, forms) {
-    switch (name) {
-    case "step1":
-      const username = forms.step1.getFieldValue("username");
-      AuthBackend.getEmailAndPhone(forms.step1.getFieldValue("organization"), username)
-        .then((res) => {
-          if (res.status === "ok") {
-            const phone = res.data.phone;
-            const email = res.data.email;
-
-            if (!phone && !email) {
-              Setting.showMessage("error", "no verification method!");
-            } else {
-              this.setState({
-                name: res.data.name,
-                phone: phone,
-                email: email,
-              });
-
-              const saveFields = (type, dest, fixed) => {
-                this.setState({
-                  verifyType: type,
-                  isVerifyTypeFixed: fixed,
-                  dest: dest,
-                });
-              };
-
-              switch (res.data2) {
-              case "email":
-                saveFields("email", email, true);
-                break;
-              case "phone":
-                saveFields("phone", phone, true);
-                break;
-              case "username":
-                phone !== "" ? saveFields("phone", phone, false) : saveFields("email", email, false);
-              }
-
-              this.setState({
-                current: 1,
-              });
-            }
-          } else {
-            Setting.showMessage("error", res.msg);
-          }
-        });
-      break;
-    case "step2":
-      UserBackend.verifyCode({
-        application: forms.step2.getFieldValue("application"),
-        organization: forms.step2.getFieldValue("organization"),
-        username: forms.step2.getFieldValue("dest"),
-        name: this.state.name,
-        code: forms.step2.getFieldValue("code"),
-        type: "login",
-      }).then(res => {
-        if (res.status === "ok") {
-          this.setState({current: 2, code: forms.step2.getFieldValue("code")});
-        } else {
-          Setting.showMessage("error", res.msg);
-        }
-      });
-
-      break;
-    default:
-      break;
-    }
-  }
-
-  onFinish(values) {
-    values.username = this.state.name;
-    values.userOwner = this.getApplicationObj()?.organizationObj.name;
-    UserBackend.setPassword(values.userOwner, values.username, "", values?.newPassword, this.state.code).then(res => {
-      if (res.status === "ok") {
-        Setting.redirectToLoginPage(this.getApplicationObj(), this.props.history);
-      } else {
-        Setting.showMessage("error", res.msg);
-      }
-    });
-  }
-
-  onFinishFailed(values, errorFields) {}
-
-  renderOptions() {
-    const options = [];
-
-    if (this.state.phone !== "") {
-      options.push(
-        <Option key={"phone"} value={this.state.phone} >
-          &nbsp;&nbsp;{this.state.phone}
-        </Option>
-      );
-    }
-
-    if (this.state.email !== "") {
-      options.push(
-        <Option key={"email"} value={this.state.email} >
-          &nbsp;&nbsp;{this.state.email}
-        </Option>
-      );
-    }
-
-    return options;
-  }
-
-  renderForm(application) {
-    return (
-      <Form.Provider onFormFinish={(name, {info, forms}) => {
-        this.onFormFinish(name, info, forms);
-      }}>
-        {/* STEP 1: input username -> get email & phone */}
-        {this.state.current === 0 ?
-          <Form
-            ref={this.form}
-            name="step1"
-            // eslint-disable-next-line no-console
-            onFinishFailed={(errorInfo) => console.log(errorInfo)}
-            initialValues={{
-              application: application.name,
-              organization: application.organization,
-            }}
-            style={{width: "300px"}}
-            size="large"
-          >
-            <Form.Item
-              hidden
-              name="application"
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("application:Please input your application!"),
-                },
-              ]}
-            />
-            <Form.Item
-              hidden
-              name="organization"
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("application:Please input your organization!"),
-                },
-              ]}
-            />
-            <Form.Item
-              name="username"
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("forget:Please input your username!"),
-                  whitespace: true,
-                },
-              ]}
-            >
-              <Input
-                prefix={<UserOutlined />}
-                placeholder={i18next.t("login:username, Email or phone")}
-              />
-            </Form.Item>
-            <br />
-            <Form.Item>
-              <Button block type="primary" htmlType="submit">
-                {i18next.t("forget:Next Step")}
-              </Button>
-            </Form.Item>
-          </Form> : null}
-
-        {/* STEP 2: verify email or phone */}
-        {this.state.current === 1 ? <Form
-          ref={this.form}
-          name="step2"
-          onFinishFailed={(errorInfo) =>
-            this.onFinishFailed(
-              errorInfo.values,
-              errorInfo.errorFields,
-              errorInfo.outOfDate
-            )
-          }
-          onValuesChange={(changedValues, allValues) => {
-            const verifyType = changedValues.dest?.indexOf("@") === -1 ? "phone" : "email";
-            this.setState({
-              dest: changedValues.dest,
-              verifyType: verifyType,
-            });
-          }}
-          initialValues={{
-            application: application.name,
-            organization: application.organization,
-            dest: this.state.dest,
-          }}
-          style={{width: "300px"}}
-          size="large"
-        >
-          <Form.Item
-            style={{height: 0, visibility: "hidden"}}
-            name="application"
-            rules={[
-              {
-                required: true,
-                message: i18next.t("application:Please input your application!"),
-              },
-            ]}
-          />
-          <Form.Item
-            hidden
-            name="organization"
-            rules={[
-              {
-                required: true,
-                message: i18next.t("application:Please input your organization!"),
-              },
-            ]}
-          />
-          <Form.Item
-            name="dest"
-            validateFirst
-            hasFeedback
-          >
-            {
-              <Select virtual={false}
-                disabled={this.state.isVerifyTypeFixed}
-                style={{textAlign: "left"}}
-                placeholder={i18next.t("forget:Choose email or phone")}
-              >
-                {
-                  this.renderOptions()
-                }
-              </Select>
-            }
-          </Form.Item>
-          <Form.Item
-            name="code"
-            rules={[
-              {
-                required: true,
-                message: i18next.t("code:Please input your verification code!"),
-              },
-            ]}
-          >
-            <SendCodeInput disabled={this.state.dest === ""}
-              method={"forget"}
-              onButtonClickArgs={[this.state.dest, this.state.verifyType, Setting.getApplicationName(this.getApplicationObj()), this.state.name]}
-              application={application}
-            />
-          </Form.Item>
-          <br />
-          <Form.Item>
-            <Button
-              block
-              type="primary"
-              htmlType="submit"
-            >
-              {i18next.t("forget:Next Step")}
-            </Button>
-          </Form.Item>
-        </Form> : null}
-
-        {/* STEP 3 */}
-        {this.state.current === 2 ?
-          <Form
-            ref={this.form}
-            name="step3"
-            onFinish={(values) => this.onFinish(values)}
-            onFinishFailed={(errorInfo) =>
-              this.onFinishFailed(
-                errorInfo.values,
-                errorInfo.errorFields,
-                errorInfo.outOfDate
-              )
-            }
-            initialValues={{
-              application: application.name,
-              organization: application.organization,
-            }}
-            style={{width: "300px"}}
-            size="large"
-          >
-            <Form.Item
-              hidden
-              name="application"
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("application:Please input your application!"),
-                },
-              ]}
-            />
-            <Form.Item
-              hidden
-              name="organization"
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("application:Please input your organization!"),
-                },
-              ]}
-            />
-            <Form.Item
-              name="newPassword"
-              hidden={this.state.current !== 2}
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("login:Please input your password!"),
-                },
-              ]}
-              hasFeedback
-            >
-              <Input.Password
-                prefix={<LockOutlined />}
-                placeholder={i18next.t("general:Password")}
-              />
-            </Form.Item>
-            <Form.Item
-              name="confirm"
-              dependencies={["newPassword"]}
-              hasFeedback
-              rules={[
-                {
-                  required: true,
-                  message: i18next.t("signup:Please confirm your password!"),
-                },
-                ({getFieldValue}) => ({
-                  validator(rule, value) {
-                    if (!value || getFieldValue("newPassword") === value) {
-                      return Promise.resolve();
-                    }
-                    return Promise.reject(
-                      i18next.t("signup:Your confirmed password is inconsistent with the password!")
-                    );
-                  },
-                }),
-              ]}
-            >
-              <Input.Password
-                prefix={<CheckCircleOutlined />}
-                placeholder={i18next.t("signup:Confirm")}
-              />
-            </Form.Item>
-            <br />
-            <Form.Item hidden={this.state.current !== 2}>
-              <Button block type="primary" htmlType="submit">
-                {i18next.t("forget:Change Password")}
-              </Button>
-            </Form.Item>
-          </Form> : null}
-      </Form.Provider>
-    );
-  }
-
-  render() {
-    const application = this.getApplicationObj();
-    if (application === undefined) {
-      return null;
-    }
-    if (application === null) {
-      return Util.renderMessageLarge(this, this.state.msg);
-    }
-
-    return (
-      <React.Fragment>
-        <CustomGithubCorner />
-        <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
-          <Row>
-            <Col span={24} style={{justifyContent: "center"}}>
-              <Row>
-                <Col span={24}>
-                  <div style={{marginTop: "80px", marginBottom: "10px", textAlign: "center"}}>
-                    {
-                      Setting.renderHelmet(application)
-                    }
-                    {
-                      Setting.renderLogo(application)
-                    }
-                  </div>
-                </Col>
-              </Row>
-              <Row>
-                <Col span={24}>
-                  <div style={{textAlign: "center", fontSize: "28px"}}>
-                    {i18next.t("forget:Retrieve password")}
-                  </div>
-                </Col>
-              </Row>
-              <Row>
-                <Col span={24}>
-                  <Steps
-                    current={this.state.current}
-                    items={[
-                      {
-                        title: i18next.t("forget:Account"),
-                        icon: <UserOutlined />,
-                      },
-                      {
-                        title: i18next.t("forget:Verify"),
-                        icon: <SolutionOutlined />,
-                      },
-                      {
-                        title: i18next.t("forget:Reset"),
-                        icon: <KeyOutlined />,
-                      },
-                    ]}
-                    style={{
-                      width: "90%",
-                      maxWidth: "500px",
-                      margin: "auto",
-                      marginTop: "80px",
-                    }}
-                  >
-                  </Steps>
-                </Col>
-              </Row>
-            </Col>
-            <Col span={24} style={{display: "flex", justifyContent: "center"}}>
-              <div style={{marginTop: "40px", textAlign: "center"}}>
-                {this.renderForm(application)}
-              </div>
-            </Col>
-          </Row>
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-
-export default withRouter(ForgetPage);

web/src/auth/GitHubLoginButton.js

@@ -1,32 +0,0 @@
-// 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/github.svg`} alt="Sign in with GitHub" />;
-}
-
-const config = {
-  text: "Sign in with GitHub",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#333333"},
-  activeStyle: {background: "#393934"},
-};
-
-const GitHubLoginButton = createButton(config);
-
-export default GitHubLoginButton;

web/src/auth/GitLabLoginButton.js

@@ -1,32 +0,0 @@
-// 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/gitlab.svg`} alt="Sign in with GitLab" style={{width: 24, height: 24}} />;
-}
-
-const config = {
-  text: "Sign in with GitLab",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "rgb(255,255,255)", color: "#000000"},
-  activeStyle: {background: "rgb(100,150,250)"},
-};
-
-const GitLabLoginButton = createButton(config);
-
-export default GitLabLoginButton;

web/src/auth/GiteeLoginButton.js

@@ -1,32 +0,0 @@
-// 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/gitee.svg`} alt="Sign in with Gitee" />;
-}
-
-const config = {
-  text: "Sign in with Gitee",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "rgb(199,29,35)"},
-  activeStyle: {background: "rgb(147,22,26)"},
-};
-
-const GiteeLoginButton = createButton(config);
-
-export default GiteeLoginButton;

web/src/auth/GoogleLoginButton.js

@@ -1,32 +0,0 @@
-// 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/google.svg`} alt="Sign in with Google" />;
-}
-
-const config = {
-  text: "Sign in with Google",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#ffffff", color: "#000000"},
-  activeStyle: {background: "#eff0ee"},
-};
-
-const GoogleLoginButton = createButton(config);
-
-export default GoogleLoginButton;

web/src/auth/InfoflowLoginButton.js

@@ -1,32 +0,0 @@
-// 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/infoflow.svg`} alt="Sign in with Infoflow" style={{width: 24, height: 24}} />;
-}
-
-const config = {
-  text: "Sign in with Infoflow",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#ffffff", color: "#000000"},
-  activeStyle: {background: "#ededee"},
-};
-
-const InfoflowLoginButton = createButton(config);
-
-export default InfoflowLoginButton;

web/src/auth/LarkLoginButton.js

@@ -1,32 +0,0 @@
-// 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/lark.svg`} alt="Sign in with Lark" style={{width: 24, height: 24}} />;
-}
-
-const config = {
-  text: "Sign in with Lark",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "#ffffff", color: "#000000"},
-  activeStyle: {background: "#ededee"},
-};
-
-const LarkLoginButton = createButton(config);
-
-export default LarkLoginButton;

web/src/auth/LinkedInLoginButton.js

@@ -1,32 +0,0 @@
-// 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/linkedin.svg`} alt="Sign in with LinkedIn" />;
-}
-
-const config = {
-  text: "Sign in with LinkedIn",
-  icon: Icon,
-  iconFormat: name => `fa fa-${name}`,
-  style: {background: "rgb(255,255,255)", color: "#000000"},
-  activeStyle: {background: "rgb(240,240,250)"},
-};
-
-const LinkedInLoginButton = createButton(config);
-
-export default LinkedInLoginButton;