mirror of
https://github.com/openziti/zrok.git
synced 2025-02-22 05:01:01 +01:00
refactor and cleanup token regeneration ui (#191)
This commit is contained in:
parent
4437d44553
commit
73340f0f6f
12
ui/package-lock.json
generated
12
ui/package-lock.json
generated
@ -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",
|
||||
|
@ -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> ${HOME}/.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;
|
@ -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> ${HOME}/.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> ${HOME}/.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>
|
||||
|
Loading…
Reference in New Issue
Block a user