fix: resolve the problem of cert being unable to be accessed properly (#1850)

* fix: resolve the problem of cert being unable to be accessed properly

* Update CertEditPage.js

---------

Co-authored-by: hsluoyz <hsluoyz@qq.com>

web/src/App.js

@@ -550,7 +550,7 @@ class App extends Component {
         <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="/certs/:organizationName/: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} />)} />

web/src/CertEditPage.js

@@ -15,6 +15,7 @@
 import React from "react";
 import {Button, Card, Col, Input, InputNumber, Row, Select} from "antd";
 import * as CertBackend from "./backend/CertBackend";
+import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import copy from "copy-to-clipboard";
@@ -29,6 +30,7 @@ class CertEditPage extends React.Component {
     this.state = {
       classes: props,
       certName: props.match.params.certName,
+      owner: props.match.params.organizationName,
       cert: null,
       organizations: [],
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
@@ -37,10 +39,11 @@ class CertEditPage extends React.Component {
 
   UNSAFE_componentWillMount() {
     this.getCert();
+    this.getOrganizations();
   }
 
   getCert() {
-    CertBackend.getCert(this.props.account.owner, this.state.certName)
+    CertBackend.getCert(this.state.owner, this.state.certName)
       .then((cert) => {
         this.setState({
           cert: cert,
@@ -48,6 +51,15 @@ class CertEditPage extends React.Component {
       });
   }
 
+  getOrganizations() {
+    OrganizationBackend.getOrganizations("admin")
+      .then((res) => {
+        this.setState({
+          organizations: (res.msg === undefined) ? res : [],
+        });
+      });
+  }
+
   parseCertField(key, value) {
     if (["port"].includes(key)) {
       value = Setting.myParseInt(value);
@@ -230,7 +242,7 @@ class CertEditPage extends React.Component {
 
   submitCertEdit(willExist) {
     const cert = Setting.deepCopy(this.state.cert);
-    CertBackend.updateCert(this.state.cert.owner, this.state.certName, cert)
+    CertBackend.updateCert(this.state.owner, this.state.certName, cert)
       .then((res) => {
         if (res.status === "ok") {
           Setting.showMessage("success", i18next.t("general:Successfully saved"));
@@ -241,7 +253,7 @@ class CertEditPage extends React.Component {
           if (willExist) {
             this.props.history.push("/certs");
           } else {
-            this.props.history.push(`/certs/${this.state.cert.name}`);
+            this.props.history.push(`/certs/${this.state.cert.owner}/${this.state.cert.name}`);
           }
         } else {
           Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);

web/src/CertListPage.js

@@ -45,7 +45,7 @@ class CertListPage extends BaseListPage {
     CertBackend.addCert(newCert)
       .then((res) => {
         if (res.status === "ok") {
-          this.props.history.push({pathname: `/certs/${newCert.name}`, mode: "add"});
+          this.props.history.push({pathname: `/certs/${newCert.owner}/${newCert.name}`, mode: "add"});
           Setting.showMessage("success", i18next.t("general:Successfully added"));
         } else {
           Setting.showMessage("error", `${i18next.t("general:Failed to add")}: ${res.msg}`);
@@ -86,7 +86,7 @@ class CertListPage extends BaseListPage {
         ...this.getColumnSearchProps("name"),
         render: (text, record, index) => {
           return (
-            <Link to={`/certs/${text}`}>
+            <Link to={`/certs/${record.owner}/${text}`}>
               {text}
             </Link>
           );
@@ -176,7 +176,7 @@ class CertListPage extends BaseListPage {
         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(`/certs/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <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(`/certs/${record.owner}/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <PopconfirmModal
                 disabled={!Setting.isAdminUser(this.props.account) && (record.owner !== this.props.account.owner)}
                 title={i18next.t("general:Sure to delete") + `: ${record.name} ?`}