From 5a2d5fcbb1938df6b68f28fd0098d6c8e19fcc26 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Wed, 26 Oct 2022 13:39:36 -0400
Subject: [PATCH] copy zrok enable command for registration component (#72)

---
 ui/src/Register.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/src/Register.js b/ui/src/Register.js
index 71c0c564..782fd321 100644
--- a/ui/src/Register.js
+++ b/ui/src/Register.js
@@ -1,5 +1,7 @@
+import Icon from "@mdi/react";
 import { useParams } from 'react-router-dom';
 import {useEffect, useState} from "react";
+import {mdiContentCopy} from "@mdi/js";
 import * as identity from "./api/identity";
 
 const RegistrationForm = (props) => {
@@ -70,6 +72,16 @@ const NoAccountRequest = () => {
 }
 
 const Success = (props) => {
+    const handleCopy = async () => {
+        let copiedText = document.getElementById("zrok-enable-command").innerHTML;
+        try {
+            await navigator.clipboard.writeText(copiedText);
+            console.log("copied enable command");
+        } catch(err) {
+            console.error("failed to copy", err);
+        }
+    }
+
     // clear local storage on new account registration success.
     localStorage.clear();
 
@@ -83,7 +95,7 @@ const Success = (props) => {
             <p>To enable your shell for zrok, use this command:</p>
 
             <pre>
-                $ zrok enable {props.token}
+                $ <span id={"zrok-enable-command"}>zrok enable {props.token}</span> <Icon path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
             </pre>
         </div>
     )