'Copy' component in 'Token' (#72)

ui/src/Copy.js

@@ -0,0 +1,15 @@
+import Icon from "@mdi/react";
+import {mdiContentCopy} from "@mdi/js";
+
+const Copy = (props) => {
+    function handleClick(event) {
+        navigator.clipboard.writeText(props.text);
+        console.log("copied", props.text);
+    }
+
+    return (
+        <button onClick={handleClick}><Icon path={mdiContentCopy} size={0.5}/></button>
+    );
+}
+
+export default Copy;

ui/src/Token.js

@@ -2,6 +2,7 @@ import Icon from "@mdi/react";
 import {mdiKey} from "@mdi/js";
 import Popover from "@mui/material/Popover";
 import {useState} from "react";
+import Copy from "./Copy";
 
 const Token = (props) => {
     const [anchorEl, setAnchorEl] = useState(null);
@@ -15,6 +16,8 @@ const Token = (props) => {
     const popoverOpen = Boolean(anchorEl);
     const popoverId = popoverOpen ? 'token-popover' : undefined;
 
+    const text = "zrok enable " + props.user.token
+
     return (
         <div>
             <button aria-describedby={popoverId} onClick={handlePopoverClick}><Icon path={mdiKey} size={0.7}/></button>
@@ -31,7 +34,7 @@ const Token = (props) => {
                 <div className={"popover"}>
                     <h3>Enable zrok access in your shell:</h3>
                     <pre>
-                        $ zrok enable {props.user.token}
+                        {text} <Copy text={text}/>
                     </pre>
                 </div>
             </Popover>