SecretToggle (#142)

ui/src/console/SecretToggle.js

@@ -0,0 +1,29 @@
+import {useState} from "react";
+import Icon from "@mdi/react";
+import {mdiEyeOffOutline, mdiEyeOutline} from "@mdi/js";
+
+const SecretToggle = (props) => {
+    const [showSecret, setShowSecret] = useState(false);
+
+    const secretString = (s) => {
+        let out = "";
+        for(let i = 0; i < s.length; i++) {
+            out += "*";
+        }
+        return out;
+    }
+
+    const toggleShow = () => setShowSecret(!showSecret);
+
+    if(showSecret) {
+        return (
+            <span>{props.secret} <Icon path={mdiEyeOffOutline} size={0.7} onClick={toggleShow} /></span>
+        );
+    } else {
+        return (
+            <span>{secretString(props.secret)} <Icon path={mdiEyeOutline} size={0.7} onClick={toggleShow} /></span>
+        )
+    }
+};
+
+export default SecretToggle;

ui/src/console/Utils.js

@@ -1,7 +0,0 @@
-export const secretString = (s) => {
-    let out = "";
-    for(let i = 0; i < s.length; i++) {
-        out += "*";
-    }
-    return out;
-}

ui/src/console/detail/account/AccountDetail.js

@@ -2,20 +2,11 @@ import {mdiCardAccountDetails, mdiEyeOutline, mdiEyeOffOutline} from "@mdi/js";
 import Icon from "@mdi/react";
 import PropertyTable from "../../PropertyTable";
 import {Tab, Tabs} from "react-bootstrap";
-import {useState} from "react";
+import SecretToggle from "../../SecretToggle";
-import {secretString} from "../../Utils";
 
 const AccountDetail = (props) => {
-    const [showToken, setShowToken] = useState(false);
-
     const customProperties = {
-        token: row => {
+        token: row => <SecretToggle secret={row.value} />
-            if(showToken) {
-                return <span>{row.value} <Icon path={mdiEyeOffOutline} size={0.7} onClick={() => setShowToken(false)} /></span>
-            } else {
-                return <span>{secretString(row.value)} <Icon path={mdiEyeOutline} size={0.7} onClick={() => setShowToken(true)} /></span>
-            }
-        }
     }
 
     return (

ui/src/console/detail/environment/DetailTab.js

@@ -1,20 +1,9 @@
 import PropertyTable from "../../PropertyTable";
-import Icon from "@mdi/react";
+import SecretToggle from "../../SecretToggle";
-import {mdiEyeOffOutline, mdiEyeOutline} from "@mdi/js";
-import {secretString} from "../../Utils";
-import {useState} from "react";
 
 const DetailTab = (props) => {
-    const [showZId, setShowZId] = useState(false);
-
     const customProperties = {
-        zId: row => {
+        zId: row => <SecretToggle secret={row.value} />
-            if(showZId) {
-                return <span>{row.value} <Icon path={mdiEyeOffOutline} size={0.7} onClick={() => setShowZId(false)} /></span>
-            } else {
-                return <span>{secretString(row.value)} <Icon path={mdiEyeOutline} size={0.7} onClick={() => setShowZId(true)} /></span>
-            }
-        }
     }
 
     return (

ui/src/console/detail/share/ShareDetail.js

@@ -1,16 +1,15 @@
 import * as metadata from "../../../api/metadata";
 import {Sparklines, SparklinesLine, SparklinesSpots} from "react-sparklines";
 import {useEffect, useState} from "react";
-import {mdiEyeOffOutline, mdiEyeOutline, mdiShareVariant} from "@mdi/js";
+import {mdiShareVariant} from "@mdi/js";
 import Icon from "@mdi/react";
 import PropertyTable from "../../PropertyTable";
 import {Tab, Tabs} from "react-bootstrap";
-import {secretString} from "../../Utils";
 import ActionsTab from "./ActionsTab";
+import SecretToggle from "../../SecretToggle";
 
 const ShareDetail = (props) => {
     const [detail, setDetail] = useState({});
-    const [showZId, setShowZId] = useState(false);
 
     useEffect(() => {
         metadata.getShareDetail(props.selection.id)
@@ -53,13 +52,7 @@ const ShareDetail = (props) => {
             }
             return row.value;
         },
-        zId: row => {
+        zId: row => <SecretToggle secret={row.value} />
-            if(showZId) {
-                return <span>{row.value} <Icon path={mdiEyeOffOutline} size={0.7} onClick={() => setShowZId(false)} /></span>
-            } else {
-                return <span>{secretString(row.value)} <Icon path={mdiEyeOutline} size={0.7} onClick={() => setShowZId(true)} /></span>
-            }
-        }
     }
 
     if(detail) {