feat: Test whether the page can be accessed (#1517)

* feat: add new line

* feat: Test whether the page can be accessed

* feat: Change the e2e order

* feat: add Test Retries

* feat: change yarn.lock

* feat: add new line

.github/workflows/build.yml

@@ -79,7 +79,7 @@ jobs:
   e2e:
     name: e2e-test
     runs-on: ubuntu-latest
-    needs: [ frontend, backend, linter ]
+    needs: [ go-tests ]
     services:
       mysql:
           image: mysql:5.7

controllers/ldapserver.go

@@ -105,14 +105,34 @@ func handleSearch(w ldapserver.ResponseWriter, m *ldapserver.Message) {
 	}
 	for i := 0; i < len(users); i++ {
 		user := users[i]
-		dn := fmt.Sprintf("cn=%s,%s", user.DisplayName, string(r.BaseObject()))
+		dn := fmt.Sprintf("cn=%s,%s", user.Name, string(r.BaseObject()))
 		e := ldapserver.NewSearchResultEntry(dn)
 		e.AddAttribute("cn", message.AttributeValue(user.Name))
 		e.AddAttribute("uid", message.AttributeValue(user.Name))
 		e.AddAttribute("email", message.AttributeValue(user.Email))
 		e.AddAttribute("mobile", message.AttributeValue(user.Phone))
+		e.AddAttribute("userPassword", message.AttributeValue(getUserPasswordWithType(user)))
 		// e.AddAttribute("postalAddress", message.AttributeValue(user.Address[0]))
 		w.Write(e)
 	}
 	w.Write(res)
 }
+
+// get user password with hash type prefix
+// TODO not handle salt yet
+// @return {md5}5f4dcc3b5aa765d61d8327deb882cf99
+func getUserPasswordWithType(user *object.User) string {
+	org := object.GetOrganizationByUser(user)
+	if org.PasswordType == "" || org.PasswordType == "plain" {
+		return user.Password
+	}
+	prefix := org.PasswordType
+	if prefix == "salt" {
+		prefix = "sha256"
+	} else if prefix == "md5-salt" {
+		prefix = "md5"
+	} else if prefix == "pbkdf2-salt" {
+		prefix = "pbkdf2"
+	}
+	return fmt.Sprintf("{%s}%s", prefix, user.Password)
+}

object/token_jwt.go

@@ -174,6 +174,7 @@ func getUserWithoutThirdIdp(user *User) *UserWithoutThirdIdp {
 		LastSigninWrongTime: user.LastSigninWrongTime,
 		SigninWrongTimes:    user.SigninWrongTimes,
 	}
+
 	return res
 }
 
@@ -200,12 +201,32 @@ func getClaimsWithoutThirdIdp(claims Claims) ClaimsWithoutThirdIdp {
 	return res
 }
 
+func refineUser(user *User) *User {
+	user.Password = ""
+
+	if user.Address == nil {
+		user.Address = []string{}
+	}
+	if user.Properties == nil {
+		user.Properties = map[string]string{}
+	}
+	if user.Roles == nil {
+		user.Roles = []*Role{}
+	}
+	if user.Permissions == nil {
+		user.Permissions = []*Permission{}
+	}
+
+	return user
+}
+
 func generateJwtToken(application *Application, user *User, nonce string, scope string, host string) (string, string, string, error) {
 	nowTime := time.Now()
 	expireTime := nowTime.Add(time.Duration(application.ExpireInHours) * time.Hour)
 	refreshExpireTime := nowTime.Add(time.Duration(application.RefreshExpireInHours) * time.Hour)
 
-	user.Password = ""
+	user = refineUser(user)
+
 	_, originBackend := getOriginFromHost(host)
 
 	name := util.GenerateId()

web/cypress.config.js

@@ -1,7 +1,10 @@
-module.exports = {
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    "retries": {
+      "runMode": 2,
+      "openMode": 0
+    }
   },
-};
+});

web/cypress/e2e/adapter.cy.js

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

web/cypress/e2e/application.cy.js

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

web/cypress/e2e/certs.cy.js

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

web/cypress/e2e/models.cy.js

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

web/cypress/e2e/orgnazition.cy.js

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

web/cypress/e2e/payments.cy.js

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

web/cypress/e2e/permissions.cy.js

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

web/cypress/e2e/products.cy.js

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

web/cypress/e2e/providers.cy.js

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

web/cypress/e2e/records.cy.js

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

web/cypress/e2e/resource.cy.js

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

web/cypress/e2e/role.cy.js

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

web/cypress/e2e/sessions.cy.js

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

web/cypress/e2e/syncers.cy.js

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

web/cypress/e2e/sysinfo.cy.js

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

web/cypress/e2e/tokens.cy.js

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

web/cypress/e2e/user.cy.js

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

web/cypress/e2e/webhooks.cy.js

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

web/cypress/support/commands.js

@@ -22,4 +22,21 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// 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",
+          "phonePrefix": "86",
+        },
+      }).then((Response) => {
+        expect(Response).property("body").property("status").to.equal("ok");
+      });
+})

web/package.json

@@ -69,6 +69,7 @@
     "@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",

web/src/AdapterEditPage.js

@@ -109,7 +109,10 @@ class AdapterEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.organization} onChange={(value => {this.updateAdapterField("organization", value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.organization} onChange={(value => {
+              this.getModels(value);
+              this.updateAdapterField("organization", value);
+            })}>
               {
                 this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
               }

web/src/App.js

@@ -85,6 +85,7 @@ class App extends Component {
       menuVisible: false,
       themeAlgorithm: ["default"],
       themeData: Setting.ThemeDefault,
+      logo: this.getLogo(Setting.getAlgorithmNames(Setting.ThemeDefault)),
     };
 
     Setting.initServerUrl();
@@ -330,12 +331,12 @@ class App extends Component {
           {
             this.renderAvatar()
           }
-           
-           
+             
+             
           {Setting.isMobile() ? null : Setting.getShortName(this.state.account.displayName)} &nbsp; <DownOutlined />
-          &nbsp;
-          &nbsp;
-          &nbsp;
+            &nbsp;
+            &nbsp;
+            &nbsp;
         </div>
       </Dropdown>
     );
@@ -484,8 +485,8 @@ class App extends Component {
 
   isStartPages() {
     return window.location.pathname.startsWith("/login") ||
-      window.location.pathname.startsWith("/signup") ||
-      window.location.pathname === "/";
+        window.location.pathname.startsWith("/signup") ||
+        window.location.pathname === "/";
   }
 
   renderRouter() {
@@ -559,7 +560,7 @@ class App extends Component {
         <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.getLogo(Setting.getAlgorithmNames(this.state.themeData))})`}} />
+              <div className="logo" style={{background: `url(${this.state.logo})`}} />
             </Link>
           )}
           {Setting.isMobile() ?
@@ -611,7 +612,7 @@ class App extends Component {
             textAlign: "center",
           }
         }>
-          Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={this.getLogo(Setting.getAlgorithmNames(this.state.themeData))} /></a>
+            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>
     );
@@ -623,11 +624,11 @@ class App extends Component {
 
   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");
+        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() {
@@ -643,12 +644,7 @@ class App extends Component {
                   onUpdateAccount={(account) => {
                     this.onUpdateAccount(account);
                   }}
-                  updataThemeData={(nextThemeData) => {
-                    this.setState({
-                      themeData: nextThemeData,
-                    });
-                    localStorage.setItem("themeAlgorithm", Setting.getAlgorithmNames(nextThemeData).toString());
-                  }}
+                  updataThemeData={this.setTheme}
                 /> :
                 <Switch>
                   <Route exact path="/callback" component={AuthCallback} />

web/src/ApplicationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, List, Popconfirm, Result, Row, Table, Tooltip} from "antd";
+import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from "antd";
 import {EditOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -25,19 +25,12 @@ import BaseListPage from "./BaseListPage";
 class ApplicationListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
-      classes: props,
-      organizationName: props.account.owner,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.account.owner,
+    });
   }
 
   newApplication() {
@@ -259,17 +252,6 @@ class ApplicationListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ManagedAccountTable.js

@@ -25,11 +25,25 @@ class ManagedAccountTable extends React.Component {
     super(props);
     this.state = {
       classes: props,
+      managedAccounts: this.props.table !== null ? this.props.table.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [],
     };
   }
 
+  count = this.props.table?.length ?? 0;
+
   updateTable(table) {
-    this.props.onUpdateTable(table);
+    this.setState({
+      managedAccounts: table,
+    });
+
+    this.props.onUpdateTable([...table].map((item) => {
+      const newItem = Setting.deepCopy(item);
+      delete newItem.key;
+      return newItem;
+    }));
   }
 
   updateField(table, index, key, value) {
@@ -38,10 +52,12 @@ class ManagedAccountTable extends React.Component {
   }
 
   addRow(table) {
-    const row = {application: "", username: "", password: ""};
+    const row = {key: this.count, application: "", username: "", password: ""};
     if (table === undefined || table === null) {
       table = [];
     }
+
+    this.count += 1;
     table = Setting.addRow(table, row);
     this.updateTable(table);
   }
@@ -131,7 +147,7 @@ class ManagedAccountTable extends React.Component {
     ];
 
     return (
-      <Table scroll={{x: "max-content"}} rowKey="name" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+      <Table scroll={{x: "max-content"}} rowKey="key" columns={columns} dataSource={table} size="middle" bordered pagination={false}
         title={() => (
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -148,7 +164,7 @@ class ManagedAccountTable extends React.Component {
         <Row style={{marginTop: "20px"}} >
           <Col span={24}>
             {
-              this.renderTable(this.props.table)
+              this.renderTable(this.state.managedAccounts)
             }
           </Col>
         </Row>

web/src/OrganizationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Switch, Table} from "antd";
+import {Button, Popconfirm, Switch, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -246,17 +246,6 @@ class OrganizationListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ProviderListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Table} from "antd";
+import {Button, Popconfirm, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
@@ -25,20 +25,14 @@ import BaseListPage from "./BaseListPage";
 class ProviderListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
-      classes: props,
-      owner: Setting.isAdminUser(props.account) ? "admin" : props.account.owner,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
   }
+
+  componentDidMount() {
+    this.setState({
+      owner: Setting.isAdminUser(this.props.account) ? "admin" : this.props.account.owner,
+    });
+  }
+
   newProvider() {
     const randomName = Setting.getRandomName();
     return {
@@ -228,17 +222,6 @@ class ProviderListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ResourceListPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Popconfirm, Result, Table, Upload} from "antd";
+import {Button, Popconfirm, Table, Upload} from "antd";
 import {UploadOutlined} from "@ant-design/icons";
 import copy from "copy-to-clipboard";
 import * as Setting from "./Setting";
@@ -25,20 +25,13 @@ import BaseListPage from "./BaseListPage";
 class ResourceListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
-      classes: props,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
+  }
+
+  componentDidMount() {
+    this.setState({
       fileList: [],
       uploading: false,
-      isAuthorized: true,
-    };
+    });
   }
 
   deleteResource(i) {
@@ -273,17 +266,6 @@ class ResourceListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={resources} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/UserEditPage.js

@@ -182,7 +182,10 @@ class UserEditPage extends React.Component {
             {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.updateUserField("owner", value);})}>
+            <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>)
               }
@@ -571,7 +574,7 @@ class UserEditPage extends React.Component {
           <Col span={22} >
             <ManagedAccountTable
               title={i18next.t("user:Managed accounts")}
-              table={this.state.user.managedAccounts ?? []}
+              table={this.state.user.managedAccounts}
               onUpdateTable={(table) => {this.updateUserField("managedAccounts", table);}}
               applications={this.state.applications}
             />

web/src/UserListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Switch, Table, Upload} from "antd";
+import {Button, Popconfirm, Switch, Table, Upload} from "antd";
 import {UploadOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -26,20 +26,13 @@ import BaseListPage from "./BaseListPage";
 class UserListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
-      classes: props,
-      organizationName: props.match.params.organizationName,
+  }
+
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.match.params.organizationName,
       organization: null,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
+    });
   }
 
   newUser() {
@@ -371,17 +364,6 @@ class UserListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={users} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}

web/src/common/PoliciyTable.js

@@ -28,9 +28,18 @@ class PolicyTable extends React.Component {
       editingIndex: "",
       oldPolicy: "",
       add: false,
+      page: 1,
     };
   }
 
+  count = 0;
+  pageSize = 10;
+
+  getIndex(index) {
+    // Need to be used in all place when modify table. Parameter is the row index in table, need to calculate the index in dataSource.
+    return index + (this.state.page - 1) * 10;
+  }
+
   UNSAFE_componentWillMount() {
     if (this.props.mode === "edit") {
       this.synPolicies();
@@ -46,8 +55,8 @@ class PolicyTable extends React.Component {
   };
 
   cancel = (table, index) => {
-    Object.keys(table[index]).forEach((key) => {
-      table[index][key] = this.state.oldPolicy[key];
+    Object.keys(table[this.getIndex(index)]).forEach((key) => {
+      table[this.getIndex(index)][key] = this.state.oldPolicy[key];
     });
     this.updateTable(table);
     this.setState({editingIndex: "", oldPolicy: ""});
@@ -62,23 +71,28 @@ class PolicyTable extends React.Component {
   }
 
   updateField(table, index, key, value) {
-    table[index][key] = value;
+    table[this.getIndex(index)][key] = value;
     this.updateTable(table);
   }
 
   addRow(table) {
-    const row = {Ptype: "p"};
+    const row = {key: this.count, Ptype: "p"};
     if (table === undefined) {
       table = [];
     }
     table = Setting.addRow(table, row, "top");
+
+    this.count = this.count + 1;
     this.updateTable(table);
     this.edit(row, 0);
-    this.setState({add: true});
+    this.setState({
+      page: 1,
+      add: true,
+    });
   }
 
-  deleteRow(table, i) {
-    table = Setting.deleteRow(table, i);
+  deleteRow(table, index) {
+    table = Setting.deleteRow(table, this.getIndex(index));
     this.updateTable(table);
   }
 
@@ -91,8 +105,14 @@ class PolicyTable extends React.Component {
     AdapterBackend.syncPolicies(this.props.owner, this.props.name)
       .then((res) => {
         if (res.status === "ok") {
-          this.setState({policyLists: res.data});
           Setting.showMessage("success", i18next.t("adapter:Sync policies successfully"));
+
+          const policyList = res.data;
+          policyList.map((policy, index) => {
+            policy.key = index;
+          });
+          this.count = policyList.length;
+          this.setState({policyLists: policyList});
         } else {
           Setting.showMessage("error", `${i18next.t("adapter:Failed to sync policies")}: ${res.msg}`);
         }
@@ -129,12 +149,12 @@ class PolicyTable extends React.Component {
     });
   }
 
-  deletePolicy(table, i) {
-    AdapterBackend.RemovePolicy(this.props.owner, this.props.name, table[i]).then(res => {
+  deletePolicy(table, index) {
+    AdapterBackend.RemovePolicy(this.props.owner, this.props.name, table[this.getIndex(index)]).then(res => {
       if (res.status === "ok") {
-        table = Setting.deleteRow(table, i);
-        this.updateTable(table);
         Setting.showMessage("success", i18next.t("general:Successfully deleted"));
+
+        this.deleteRow(table, index);
       } else {
         Setting.showMessage("error", i18next.t("general:Failed to delete"));
       }
@@ -279,9 +299,14 @@ class PolicyTable extends React.Component {
     return (
       <Table
         pagination={{
-          defaultPageSize: 10,
+          defaultPageSize: this.pageSize,
+          onChange: (page) => this.setState({
+            page: page,
+          }),
+          disabled: this.state.editingIndex !== "",
+          current: this.state.page,
         }}
-        columns={columns} dataSource={table} rowKey="index" size="middle" bordered
+        columns={columns} dataSource={table} rowKey="key" size="middle" bordered
         loading={this.state.loading}
         title={() => (
           <div>

web/src/propertyTable.js

@@ -23,18 +23,19 @@ class PropertyTable extends React.Component {
     super(props);
     this.state = {
       properties: [],
-      count: this.props.properties !== null ? Object.entries(this.props.properties).length : 0,
     };
+
     // transfer the Object to object[]
     if (this.props.properties !== null) {
       Object.entries(this.props.properties).map((item, index) => {
         this.state.properties.push({key: index, name: item[0], value: item[1]});
       });
     }
-
   }
 
   page = 1;
+  pageSize = 10;
+  count = this.props.properties !== null ? Object.entries(this.props.properties).length : 0;
 
   updateTable(table) {
     this.setState({properties: table});
@@ -46,12 +47,12 @@ class PropertyTable extends React.Component {
   }
 
   addRow(table) {
-    const row = {key: this.state.count, name: "", value: ""};
+    const row = {key: this.count, name: "", value: ""};
     if (table === undefined) {
       table = [];
     }
     table = Setting.addRow(table, row);
-    this.setState({count: this.state.count + 1});
+    this.count = this.count + 1;
     this.updateTable(table);
   }
 
@@ -61,8 +62,8 @@ class PropertyTable extends React.Component {
   }
 
   getIndex(index) {
-    // Parameter is the row index in table, need to calculate the index in dataSource. 10 is the pageSize.
-    return index + (this.page - 1) * 10;
+    // Need to be used in all place when modify table. Parameter is the row index in table, need to calculate the index in dataSource.
+    return index + (this.page - 1) * this.pageSize;
   }
 
   updateField(table, index, key, value) {
@@ -114,7 +115,10 @@ class PropertyTable extends React.Component {
           <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
         </div>
       )}
-      pagination={{onChange: page => {this.page = page;}}}
+      pagination={{
+        defaultPageSize: this.pageSize,
+        onChange: page => {this.page = page;},
+      }}
       columns={columns} dataSource={table} rowKey="key" size="middle" bordered
       />
     );