extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-01 15:48:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

tooltip indicating copy success on registration success page (#146)

Browse Source
This commit is contained in:
Michael Quigley 2023-01-04 15:21:01 -05:00
parent 3943aef40a
commit 9de293adef
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,21 @@
import Icon from "@mdi/react"; import Icon from "@mdi/react";
import {mdiContentCopy} from "@mdi/js"; import {mdiContentCopy} from "@mdi/js";
import {Container, Row} from "react-bootstrap"; import {Container, Overlay, Row, Tooltip} from "react-bootstrap";
import React from "react"; import React, {useRef, useState} from "react";
const Success = (props) => { const Success = (props) => {
const [showTooltip, setShowTooltip] = useState(false);
const target = useRef(null);
const handleCopy = async () => { const handleCopy = async () => {
let copiedText = document.getElementById("zrok-enable-command").innerHTML; let copiedText = document.getElementById("zrok-enable-command").innerHTML;
try { try {
await navigator.clipboard.writeText(copiedText); await navigator.clipboard.writeText(copiedText);
console.log("copied enable command"); console.log("copied enable command");
setShowTooltip(true);
setTimeout(() => setShowTooltip(false), 2000);
} catch(err) { } catch(err) {
console.error("failed to copy", err); console.error("failed to copy", err);
} }
@ -35,8 +42,15 @@ const Success = (props) => {
</Row> </Row>
<Row> <Row>
<pre> <pre>
$ <span id={"zrok-enable-command"}>zrok enable {props.token}</span> <Icon path={mdiContentCopy} size={0.7} onClick={handleCopy}/> $ <span id={"zrok-enable-command"}>zrok enable {props.token}</span> <Icon ref={target} path={mdiContentCopy} size={0.7} onClick={handleCopy}/>
</pre> </pre>
<Overlay target={target.current} show={showTooltip} placement={"bottom"}>
{(props) => (
<Tooltip id={"copy-tooltip"} {...props}>
Copied!
</Tooltip>
)}
</Overlay>
</Row> </Row>
</Container> </Container>
</Row> </Row>