feat: make secrets viewable (hidden by default);

chore: improve style.

logion-network/logion-internal#1253

src/components/toggle/Checkbox.tsx

@@ -1,8 +1,9 @@
 import './Checkbox.css';
 import './Toggle.css';
+import './Eye.css';
 import { customClassName } from "../../common/types/Helpers";
 
-export type Skin = "Checkbox" | "Toggle white" | "Toggle black";
+export type Skin = "Checkbox" | "Toggle white" | "Toggle black" | "Eye";
 
 export interface Props {
     checked: boolean;

src/components/toggle/Eye.css

@@ -0,0 +1,34 @@
+.Eye {
+    content: " ";
+    position: relative;
+    height: 37px;
+    width: 50px;
+}
+
+.Eye.clickable {
+    cursor: pointer;
+}
+
+.Eye.checked:after {
+    background-image: url("../../img/eye.svg");
+}
+.Eye:not(.checked):after {
+    background-image: url("../../img/eye-closed.svg");
+}
+
+.Eye:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.Eye.disabled,
+.Eye.clickable.disabled {
+    cursor: default;
+    opacity: 0.5;
+}

src/loc/secrets/AddSecretDialog.tsx

@@ -47,6 +47,7 @@ export default function AddSecretDialog(props: Props) {
             ] }
             onSubmit={ handleSubmit(submit) }
         >
+            <h3>Add a Recoverable Secret</h3>
             <FormGroup
                 id="name"
                 label="Name"

src/loc/secrets/RemoveSecretDialog.css

@@ -0,0 +1,3 @@
+.RemoveSecretDialog img {
+    margin-bottom: 20px;
+}

src/loc/secrets/RemoveSecretDialog.tsx

@@ -2,6 +2,9 @@ import { Secret } from "@logion/client";
 import Dialog from "../../common/Dialog";
 import { useForm } from "react-hook-form";
 import { useCallback } from "react";
+import Icon from "../../common/Icon";
+import ViewableSecret from "./ViewableSecret";
+import "./RemoveSecretDialog.css"
 
 export interface Props {
     secret: Secret | undefined;
@@ -24,6 +27,7 @@ export default function RemoveSecretDialog(props: Props) {
 
     return (
         <Dialog
+            className="RemoveSecretDialog"
             show={ props.secret !== undefined }
             size="lg"
             actions={ [
@@ -42,8 +46,10 @@ export default function RemoveSecretDialog(props: Props) {
             ] }
             onSubmit={ handleSubmit(submit) }
         >
-            <p>You are about to remove the secret <strong>{ props.secret?.name }</strong>.</p>
-            <p>It will be impossible to recover it after, so make your own backup</p>
+            <Icon icon={{id: "big-warning"}} type="png" height="70px"/>
+            <p>You are about to remove the secret <strong>{ props.secret?.name }</strong>:</p>
+            <p>It will be impossible to recover it after, so make your <strong>own backup</strong> of the value:</p>
+            <ViewableSecret value={ props.secret?.value || ""}/>
         </Dialog>
     )
 }

src/loc/secrets/SecretsTable.tsx

@@ -1,6 +1,8 @@
 import Table, { EmptyTableMessage, Cell, ActionCell } from "../../common/Table";
 import { Secret } from "@logion/client";
 import Button from "react-bootstrap/Button";
+import Icon from "../../common/Icon";
+import ViewableSecret from "./ViewableSecret";
 
 export interface Properties {
     secrets: Secret[];
@@ -16,17 +18,24 @@ export default function SecretsTable(props: Properties) {
                 columns={ [
                     {
                         header: "Name",
+                        width: "200px",
                         render: secret => <Cell content={ secret.name } />
                     },
                     {
                         header: "Value",
-                        render: secret => <Cell content={ secret.value } />
+                        render: secret => <ViewableSecret value={ secret.value } />
                     },
                     {
                         header: "",
+                        width: "70px",
                         render: secret =>
                             <ActionCell>
-                                <Button onClick={ () => props.onRemoveSecret(secret) }>X</Button>
+                                <Button
+                                    variant="danger"
+                                    onClick={ () => props.onRemoveSecret(secret) }
+                                >
+                                    <Icon icon={ { id: 'trash' } } />
+                                </Button>
                             </ActionCell>
                     },
                 ] }

src/loc/secrets/ViewableSecret.css

@@ -0,0 +1,5 @@
+.ViewableSecret {
+    display: flex;
+    justify-content: center;
+    line-height: 40px;
+}

src/loc/secrets/ViewableSecret.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import Checkbox from "../../components/toggle/Checkbox";
+import "./ViewableSecret.css";
+
+export interface Props {
+    value: string;
+}
+
+export default function ViewableSecret(props: Props) {
+    const [ hidden, setHidden ] = useState<boolean>(true);
+    return (
+        <div className="ViewableSecret">
+            { !hidden && <span>{ props.value }</span> }
+            { hidden && <span>******</span> }
+            <Checkbox checked={ hidden } setChecked={ setHidden } skin="Eye" />
+        </div>
+    )
+}