extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-07 08:44:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

SecretToggle (#142)

Browse Source
This commit is contained in:
Michael Quigley 2023-01-05 16:22:40 -05:00
parent 918fa06ca0
commit bd0212ba09
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
5 changed files with 36 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/console/SecretToggle.js Normal file
View File

@ -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;

7
ui/src/console/Utils.js
View File

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

13
ui/src/console/detail/account/AccountDetail.js
View File

@ -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 {secretString} from "../../Utils";
import SecretToggle from "../../SecretToggle";
const AccountDetail = (props) => {
const [showToken, setShowToken] = useState(false);
const customProperties = {
token: row => {
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>
}
}
token: row => <SecretToggle secret={row.value} />
}
return (

15
ui/src/console/detail/environment/DetailTab.js
View File

@ -1,20 +1,9 @@
import PropertyTable from "../../PropertyTable";
import Icon from "@mdi/react";
import {mdiEyeOffOutline, mdiEyeOutline} from "@mdi/js";
import {secretString} from "../../Utils";
import {useState} from "react";
import SecretToggle from "../../SecretToggle";
const DetailTab = (props) => {
const [showZId, setShowZId] = useState(false);
const customProperties = {
zId: row => {
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>
}
}
zId: row => <SecretToggle secret={row.value} />
}
return (

13
ui/src/console/detail/share/ShareDetail.js
View File

@ -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 => {
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>
}
}
zId: row => <SecretToggle secret={row.value} />
}
if(detail) {