Only proceed if you've copied/downloaded

2 files changed, 35 insertions, 8 deletions

diff --git a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx

index 35bd5f6951..469b857490 100644
--- a/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx
+++ b/synapse_topology/webui/src/js/components/DownloadOrCopy.jsx
@@ -16,11 +16,28 @@ const download = (filename, text) => {
 
 }
 
-export default ({ content, fileName }) =>
-    <ButtonDisplay>
+export default ({ content, fileName, onClick = () => undefined }) => {
+
+    const downloadOnClick = () => {
+
+        download(fileName, content);
+        onClick();
+
+    }
+
+    const copyOnClick = () => {
+
+        navigator.clipboard.writeText(content);
+        onClick();
+
+    }
+
+    return <ButtonDisplay>
         <div className='buttonGroup'>
-            <button onClick={() => download(fileName, content)}>Download</button>
+            <button onClick={downloadOnClick}>Download</button>
             <span className='or'>or</span>
-            <button onClick={() => navigator.clipboard.writeText(content)}>Copy</button>
+            <button onClick={copyOnClick}>Copy</button>
         </div>
     </ButtonDisplay>
+
+}
diff --git a/synapse_topology/webui/src/js/components/ExportKeys.jsx b/synapse_topology/webui/src/js/components/ExportKeys.jsx

index 8d64ad8009..2bb4b94047 100644
--- a/synapse_topology/webui/src/js/components/ExportKeys.jsx
+++ b/synapse_topology/webui/src/js/components/ExportKeys.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
@@ -14,6 +14,7 @@ import { nextUI } from '../reducers/setup-ui-reducer';
 
 export default ({ secretKeyLoaded, secretKey, onClick }) => {
 
+    const [downloadedOrCopied, setDownloadedOrCopied] = useState(false);
     const toggle = useAccordionToggle(nextUI(KEY_EXPORT_UI));
 
     const decoratedOnClick = () => {
@@ -38,11 +39,20 @@ export default ({ secretKeyLoaded, secretKey, onClick }) => {
                 is inaccessible:
       </p>
             <pre><code>{secretKey}</code></pre>
-            <p>Keep a copy of this key somewhere safe by downloading or copying the key to your clipboard to continue.</p>
-            <DownloadOrCopy content={secretKey} fileName="secret_key.txt" />
+            <p>
+                Keep a copy of this key somewhere safe by downloading or copying
+                the key to your clipboard to continue.
+            </p>
+            <DownloadOrCopy
+                content={secretKey}
+                fileName="secret_key.txt"
+                onClick={() => setDownloadedOrCopied(true)} />
             <div className='blockWrapper'>
                 <ButtonDisplay>
-                    <button onClick={decoratedOnClick}>Next</button>
+                    <button
+                        onClick={decoratedOnClick}
+                        disabled={downloadedOrCopied ? undefined : "true"}
+                    >Next</button>
                 </ButtonDisplay>
             </div>
         </Card.Body>