copy to clipboard, hopefully done to a much better standard (#724)

ui100/src/AccountPanel.tsx

@@ -6,9 +6,10 @@ import SecretToggle from "./SecretToggle.tsx";
 import useApiConsoleStore from "./model/store.ts";
 import PasswordIcon from "@mui/icons-material/Password";
 import TokenIcon from "@mui/icons-material/Key";
-import {useState} from "react";
+import React, {useState} from "react";
 import AccountPasswordChangeModal from "./AccountPasswordChangeModal.tsx";
 import RegenerateAccountTokenModal from "./RegenerateAccountTokenModal.tsx";
+import ClipboardText from "./ClipboardText.tsx";
 
 interface AccountPanelProps {
     account: Node;
@@ -32,7 +33,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
     }
 
     const customProps = {
-        token: row => <SecretToggle secret={row.value} />
+        token: row => <Grid2 container><SecretToggle secret={row.value} /><ClipboardText text={row.value} /></Grid2>
     }
 
     const label = {

ui100/src/ClipboardText.tsx

@@ -0,0 +1,35 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import {useEffect, useState} from "react";
+import {Button, Popover, Typography} from "@mui/material";
+
+interface ClipboardTextProps {
+    text: string;
+}
+
+const ClipboardText = ({ text }: ClipboardTextProps) => {
+    const [copied, setCopied] = useState<boolean>(false);
+    const [color, setColor] = useState<string>("black");
+
+    useEffect(() => {
+        if(copied) {
+            setColor("red");
+        } else {
+            setColor("black");
+        }
+    }, [copied]);
+
+    const copy = async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
+
+    return (
+        <>
+            <Button onClick={copy} sx={{ minWidth: "30px" }} style={{ color: color }} ><ContentCopyIcon /></Button>
+            <Popover anchorOrigin={{ vertical: "top", horizontal: "right" }} open={copied}><Typography sx={{ p: 2 }}>Copied!</Typography></Popover>
+        </>
+    );
+}
+
+export default ClipboardText;

ui100/src/RegenerateAccountTokenModal.tsx

@@ -4,6 +4,7 @@ import {modalStyle} from "./styling/theme.ts";
 import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
 import {getAccountApi, getMetadataApi} from "./model/api.ts";
 import useApiConsoleStore from "./model/store.ts";
+import ClipboardText from "./ClipboardText.tsx";
 
 interface RegenerateAccountTokenModalProps {
     close: () => void;
@@ -43,7 +44,7 @@ const RegenerateAccountTokenModal = ({ close, isOpen, user }: RegenerateAccountT
                 localStorage.setItem("user", JSON.stringify(newUser));
                 document.dispatchEvent(new Event("userUpdated"));
                 setSuccessMessage(<><Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
-                    <Typography variant="h6" sx={{ mt: 2, p: 1 }}>Your new account token is: <code>{d.token}</code></Typography>
+                    <Typography variant="h6" sx={{ mt: 2, p: 1 }}>Your new account token is: <code>{d.token}</code> <ClipboardText text={String(d.token)} /></Typography>
                 </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <Button type="primary" variant="contained" onClick={reload}>Reload API Console</Button>

ui100/src/SecretToggle.tsx

@@ -1,6 +1,6 @@
 import {useState} from "react";
-import ShowIcon from "@mui/icons-material/Visibility";
-import HideIcon from "@mui/icons-material/VisibilityOff";
+import HideIcon from "@mui/icons-material/Visibility";
+import ShowIcon from "@mui/icons-material/VisibilityOff";
 import {Grid2} from "@mui/material";
 
 interface SecretToggleProps {