Add caps checking on Home tiles.

src/api/sys/getCapabilities.ts

@@ -4,11 +4,11 @@ import { removeDoubleSlash } from "../../utils";
 export type CapabilitiesType = {
   [path: string]: string[];
   capabilities?: string[];
-}
+};
 
 export async function getCapabilitiesPath(path: string | string[]): Promise<CapabilitiesType> {
   if (!Array.isArray(path)) {
-    path = [removeDoubleSlash(path)]
+    path = [removeDoubleSlash(path)];
   } else {
     path = path.map((s) => removeDoubleSlash(s));
   }

src/elements/Tile.tsx

@@ -1,7 +1,7 @@
 import { Component, JSX } from "preact";
 
 export type TileParams = {
-  condition?: boolean;
+  disabled?: boolean;
   color?: string;
   title: string;
   description: string;
@@ -12,25 +12,33 @@ export type TileParams = {
 
 export class Tile extends Component<TileParams, unknown> {
   render(): JSX.Element {
-    if (this.props.condition == false) return <></>;
+    const defaultColor = this.props.disabled == true ? "secondary" : "primary";
 
-    return (
-      <a class="uk-link-heading" onClick={this.props.onclick}>
-        <div class={"uk-padding-small uk-background-" + (this.props.color || "primary")}>
-          <p class="uk-h4">
-            {this.props.title}
-            {typeof this.props.icon == "string" && (
-              <span
-                class="uk-icon uk-margin-small-left"
-                uk-icon={`icon: ${this.props.icon}`}
-                role="img"
-                aria-label={this.props.iconText}
-              ></span>
-            )}
-          </p>
-          <span class="uk-text-muted">{this.props.description}</span>
-        </div>
-      </a>
+    const tileInner = (
+      <div class={"uk-padding-small uk-background-" + (this.props.color || defaultColor)}>
+        <p class="uk-h4">
+          {this.props.title}
+          {typeof this.props.icon == "string" && (
+            <span
+              class="uk-icon uk-margin-small-left"
+              uk-icon={`icon: ${this.props.icon}`}
+              role="img"
+              aria-label={this.props.iconText}
+            ></span>
+          )}
+        </p>
+        <span class="uk-text-muted">{this.props.description}</span>
+      </div>
     );
+
+    if (this.props.disabled == true) {
+      return <p>{tileInner}</p>;
+    } else {
+      return (
+        <a class="uk-link-heading" onClick={this.props.onclick}>
+          {tileInner}
+        </a>
+      );
+    }
   }
 }

src/pages/Home.tsx

@@ -3,6 +3,7 @@ import { Margin } from "../elements/Margin";
 import { Page } from "../types/Page";
 import { Tile } from "../elements/Tile";
 import { TokenInfo } from "../api/types/token";
+import { getCapabilitiesPath } from "../api/sys/getCapabilities";
 import { lookupSelf } from "../api/sys/lookupSelf";
 import { prePageChecks, setErrorText } from "../pageUtils";
 import { render } from "preact";
@@ -33,6 +34,10 @@ export class HomePage extends Page {
       }
     }
 
+    const caps = await getCapabilitiesPath(["sys/auth", "sys/policies"]);
+    const authCaps = caps["sys/auth"];
+    const policiesCaps = caps["sys/auth"];
+
     render(
       <div>
         <ul id="textList" class="uk-nav">
@@ -70,6 +75,7 @@ export class HomePage extends Page {
               title={i18next.t("home_access_title")}
               description={i18next.t("home_access_description")}
               icon="users"
+              disabled={!authCaps.includes("read")}
               onclick={async () => {
                 await this.router.changePage("ACCESS_HOME");
               }}
@@ -78,6 +84,7 @@ export class HomePage extends Page {
               title={i18next.t("home_policies_title")}
               description={i18next.t("home_policies_description")}
               icon="pencil"
+              disabled={!policiesCaps.includes("read")}
               onclick={async () => {
                 await this.router.changePage("POLICIES_HOME");
               }}

src/pages/Secrets/KeyValue/KeyValueSecret.tsx

@@ -55,11 +55,9 @@ export class KeyValueSecretPage extends Page {
     }
   }
   async render(): Promise<void> {
-    const caps = (await getCapabilities(
-      this.state.baseMount,
-      this.state.secretPath,
-      this.state.secretItem,
-    )).capabilities;
+    const caps = (
+      await getCapabilities(this.state.baseMount, this.state.secretPath, this.state.secretItem)
+    ).capabilities;
 
     const secretInfo = await getSecret(
       this.state.baseMount,