extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-02-23 05:31:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor and cleanup token regeneration ui (#191)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/package-lock.json generated
View File

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

37
ui/src/console/detail/account/ActionsTab.js
View File

@ -1,31 +1,34 @@
import React, {useState} from "react"; import React, {useState} from "react";
import ResetToken from "./actions/ResetToken"; import ResetToken from "./actions/ResetToken";
import {Button} from "react-bootstrap";
const ActionsTab = (props) => { const ActionsTab = (props) => {
const [actionState, setActionState] = useState("menu")
const [showResetTokenModal, setShowResetTokenModal] = useState(false); const [showResetTokenModal, setShowResetTokenModal] = useState(false);
const openResetTokenModal = () => setShowResetTokenModal(true); const openResetTokenModal = () => setShowResetTokenModal(true);
const closeResetTokenModal = () => setShowResetTokenModal(false); const closeResetTokenModal = () => setShowResetTokenModal(false);
let defaultActionsTabComponent = ( return (
<div> <div className={"actions-tab"}>
<button onClick={openResetTokenModal}>Regenerate Token</button> <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}/> <ResetToken show={showResetTokenModal} onHide={closeResetTokenModal} user={props.user}/>
</div> </div>
) )
const renderActions = () => {
switch (actionState) {
default:
return defaultActionsTabComponent
}
}
return (
renderActions()
)
} }
export default ActionsTab; export default ActionsTab;

32
ui/src/console/detail/account/actions/ResetToken.js
View File

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