refactor and cleanup token regeneration ui (#191)

This commit is contained in:
Michael Quigley 2024-02-15 13:58:36 -05:00
parent 4437d44553
commit 73340f0f6f
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 44 additions and 39 deletions

12
ui/package-lock.json generated
View File

@ -6196,9 +6196,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001519",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
"integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
"version": "1.0.30001587",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
"integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
"funding": [
{
"type": "opencollective",
@ -24274,9 +24274,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001519",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
"integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg=="
"version": "1.0.30001587",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
"integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA=="
},
"canvas-color-tracker": {
"version": "1.1.6",

View File

@ -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;

View File

@ -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,13 +33,19 @@ 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);
@ -48,29 +53,26 @@ const ResetToken = (props) => {
}
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>