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

tooltip in enable modal (#146)

Browse Source
This commit is contained in:
Michael Quigley 2023-01-05 13:03:28 -05:00
parent 9de293adef
commit 8c2f71d28a
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/console/modals/Enable.js
View File

@ -1,13 +1,20 @@
import Modal from "react-bootstrap/Modal";
import {mdiContentCopy} from "@mdi/js";
import Icon from "@mdi/react";
import {useRef, useState} from "react";
import {Overlay, Tooltip} from "react-bootstrap";
const Enable = (props) => {
const target = useRef(null);
const [showTooltip, setShowTooltip] = useState(false);
const handleCopy = async () => {
let copiedText = document.getElementById("zrok-enable-command").innerHTML;
try {
await navigator.clipboard.writeText(copiedText);
props.onHide();
setShowTooltip(true);
setTimeout(() => setShowTooltip(false), 1000);
} catch(err) {
console.error("failed to copy", err);
@ -15,16 +22,25 @@ const Enable = (props) => {
}
return (
<Modal show={props.show} onHide={props.onHide} centered>
<Modal.Header closeButton>Enable Your Environment</Modal.Header>
<Modal.Body>
<p>To enable your shell for zrok, use this command:</p>
<pre>
<div>
<Modal show={props.show} onHide={props.onHide} centered>
<Modal.Header closeButton>Enable Your Environment</Modal.Header>
<Modal.Body>
<p>To enable your shell for zrok, use this command:</p>
<pre>
$ <span id={"zrok-enable-command"}>zrok enable {props.token}</span>{' '}
<Icon path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
<Icon ref={target} path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
</pre>
</Modal.Body>
</Modal>
</Modal.Body>
</Modal>
<Overlay target={target.current} show={showTooltip} placement={"bottom"}>
{(props) => (
<Tooltip id={"copy-tooltip"} {...props}>
Copied!
</Tooltip>
)}
</Overlay>
</div>
);
}

2
ui/src/register/Success.js
View File

@ -14,7 +14,7 @@ const Success = (props) => {
console.log("copied enable command");
setShowTooltip(true);
setTimeout(() => setShowTooltip(false), 2000);
setTimeout(() => setShowTooltip(false), 1000);
} catch(err) {
console.error("failed to copy", err);