refactor and cleanup token regeneration ui (#191)

ui/src/console/detail/account/ActionsTab.js

@@ -1,31 +1,34 @@
 import React, {useState} from "react";
 import ResetToken from "./actions/ResetToken";
+import {Button} from "react-bootstrap";
 
 const ActionsTab = (props) => {
-    const [actionState, setActionState] = useState("menu")
-
     const [showResetTokenModal, setShowResetTokenModal] = useState(false);
     const openResetTokenModal = () => setShowResetTokenModal(true);
     const closeResetTokenModal = () => setShowResetTokenModal(false);
 
-    let defaultActionsTabComponent = (
-        <div>
-            <button onClick={openResetTokenModal}>Regenerate Token</button>
+    return (
+        <div className={"actions-tab"}>
+            <h3>Regenerate your account token <strong>(DANGER!)</strong>?</h3>
+            <p>
+                Regenerating your account token will stop all environments and shares from operating properly!
+            </p>
+            <p>
+                You will need to <strong>manually</strong> edit your
+                <code> &#36;&#123;HOME&#125;/.zrok/environment.json</code> files (in each environment) to use the new
+                <code> zrok_token</code> . Updating these files will restore the functionality of your environments.
+            </p>
+            <p>
+                Alternatively, you can just <code>zrok disable</code> any enabled environments and re-enable using the
+                new account token. Running <code>zrok disable</code> will <strong>delete</strong> your environments and
+                any shares they contain (including reserved shares). So if you have environments and reserved shares you
+                need to preserve, your best bet is to update the <code>zrok_token</code> in those environments as
+                described above.
+            </p>
+            <Button variant={"danger"} onClick={openResetTokenModal}>Regenerate Account Token</Button>
             <ResetToken show={showResetTokenModal} onHide={closeResetTokenModal} user={props.user}/>
         </div>
     )
-
-    const renderActions = () => {
-        switch (actionState) {
-            default:
-                return defaultActionsTabComponent
-        }
-    }
-
-    return (
-        renderActions()
-    )
 }
 
-export default ActionsTab;
-
+export default ActionsTab;

ui/src/console/detail/account/actions/ResetToken.js

@@ -23,7 +23,6 @@ const ResetToken = (props) => {
     }
 
     let resetToken = () => {
-        console.log("I should reset my token")
         account.resetToken({ body: { "emailAddress": props.user.email } }).then(resp => {
             console.log(resp)
             let user = JSON.parse(localStorage.getItem('user'))
@@ -34,43 +33,46 @@ const ResetToken = (props) => {
             document.dispatchEvent(new Event('storage'))
             setModalBody((
                 <div>
-                    <p>You will need to update your environment file ($HOME/.zrok/environmetn.json)</p>
-                    Token: <span id={"zrok-token"}>{resp.data.token}</span>{' '}
+                    <p>
+                        You will need to update your environment files <code> &#36;&#123;HOME&#125;/.zrok/environment.json </code>
+                        with the new <code> zrok_token </code>.
+                    </p>
+                    <p>
+                        Your new <code> zrok_token </code> is: <code><span id={"zrok-token"}>{resp.data.token}</span></code>{' '}
                         <Icon ref={target} path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
+                    </p>
+
                 </div>
             ));
             setModalHeader((
-                <span>Token Reset Successful</span>
+                <span>Account Token Regenerated!</span>
             ))
         }).catch(err => {
             console.log("err", err);
         });
     }
 
     let hide = () => {
+        setModalHeader(defaultHeader)
         setModalBody(defaultModal)
         props.onHide()
     }
 
-    let defaultHeader = (<span>WARNING - Are you Sure?</span>)
+    let defaultHeader = (<span>Are you sure?</span>)
     let defaultModal = (
         <div>
-            <div>
-                <div>Reseting your token will revoke access from any CLI environments.</div>
-                <div>You will need to update $HOME/.zrok/environments.yml with your new token.</div>
-            </div>
-            <div style={{display: 'flex', alignItems:'center', justifyContent: 'center'}}>
-                <Button variant={"light"} onClick={resetToken}>Reset Token</Button>
-                <Button variant={"dark"} onClick={props.onHide}>Cancel</Button>
-            </div>
+            <p>Did you read the warning on the previous screen? This action will reset all of your active environments and shares!</p>
+            <p>You will need to update each of your <code> &#36;&#123;HOME&#125;/.zrok/environments.yml</code> files with your new token!</p>
+            <p align={"right"}>
+                <Button onClick={props.onHide}>Cancel</Button>
+                <Button variant={"danger"} onClick={resetToken}>Regenerate Token</Button>
+            </p>
         </div>
     );
 
     const [modalBody, setModalBody] = useState(defaultModal);
     const [modalHeader, setModalHeader] = useState(defaultHeader);
 
-
-
     return (
         <div>
             <Modal show={props.show} onHide={hide} centered>