diff --git a/ui/src/components/VncCard/index.js b/ui/src/components/VncCard/index.js index 8021b12f..f7d0d729 100644 --- a/ui/src/components/VncCard/index.js +++ b/ui/src/components/VncCard/index.js @@ -3,11 +3,12 @@ import { Link } from "react-router-dom"; import VncScreen from "./VncScreen"; import { StyledVNC } from "./style.css"; +import { ajax } from "rxjs/ajax"; export default class VncCard extends Component { state = { connection: "connecting" }; - connection = connection => { + connection = (connection) => { this.setState({ connection: connection }); }; @@ -38,16 +39,32 @@ export default class VncCard extends Component { {connected && } {connected && } + {connected && ( + + )} + {connected && ( + + )}
{ + ref={(instance) => { this.screen = instance; }} session={session} origin={origin} - onUpdateState={state => this.connection(state)} + onUpdateState={(state) => this.connection(state)} />
@@ -59,6 +76,34 @@ export default class VncCard extends Component { ); } } +function copyFromDocker(sessionId) { + const request = { + url: "/clipboard/" + sessionId, + method: "GET", + async: false, + responseType: "text", + }; + ajax(request).subscribe((x) => { + if (navigator.clipboard) { + navigator.clipboard.writeText(x.response); + } + }); +} + +function pasteToDocker(sessionId) { + if (navigator.clipboard) { + navigator.clipboard.readText().then((text) => { + let request = { + url: "/clipboard/" + sessionId, + method: "POST", + body: text, + async: false, + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + }; + ajax(request).subscribe((msg) => msg); + }); + } +} function Back() { return ( @@ -70,7 +115,7 @@ function Back() { function Connection(props) { const { connection } = props; - const icon = function(connection) { + const icon = function (connection) { switch (connection) { default: case "disconnected": { @@ -99,6 +144,15 @@ function Fullscreen(props) { ); } +function Clipboard(props) { + const { upload, session, title, operator } = props; + return ( +
+
upload(session)}>
+
+ ); +} + function Lock(props) { const { locked, handleLock } = props; return ( diff --git a/ui/src/components/VncCard/style.css.js b/ui/src/components/VncCard/style.css.js index b9e26be7..acc6c7ba 100644 --- a/ui/src/components/VncCard/style.css.js +++ b/ui/src/components/VncCard/style.css.js @@ -5,6 +5,7 @@ const colorConnecting = "#6883d3"; const colorDisconnecting = " #ca9eff"; const colorFullscreen = "#59a781"; const backgroundColorLighter = "#3d444c"; +const copyAndPaste = "#405048"; export const StyledVNC = styled.div` display: flex; @@ -146,6 +147,28 @@ export const StyledVNC = styled.div` &_disconnecting { background-color: ${colorDisconnecting}; } + + &_copy { + cursor: pointer; + background-color: ${copyAndPaste}; + color: ${colorFullscreen}; + margin-left: auto; + + &:hover { + color: #fff; + } + } + + &_upload { + cursor: pointer; + background-color: ${copyAndPaste}; + color: ${colorFullscreen}; + margin-right: 10px; + + &:hover { + color: #fff; + } + } } } diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js index 23891669..a34bfb9e 100644 --- a/ui/src/setupProxy.js +++ b/ui/src/setupProxy.js @@ -15,6 +15,7 @@ module.exports = function (app) { agent: agent, }) ); + app.use(createProxyMiddleware("/clipboard", { target: "http://localhost:4444" })); app.use(createProxyMiddleware("/status", { target: "http://localhost:8080" })); app.use(createProxyMiddleware("/video/", { target: "http://localhost:8080" })); app.use(createProxyMiddleware("/wd/hub/", { target: "http://localhost:8080" }));