[DLAB-1119]: terminal debugging
diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.html b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.html
index d99bf42..fc960b7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.html
@@ -17,4 +17,44 @@
~ under the License.
-->
-<div id="display" #display></div>
+<!-- Main UI - hidden until login succeeds -->
+<div id="main-guacamole-ui">
+
+ <div id="menu">
+
+ <!-- Clipboard -->
+ <button id="showClipboard">Show Clipboard</button>
+ <div id="clipboardDiv">
+ <h2>Clipboard</h2>
+ <!-- <p>
+ Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and
+ will be pastable within the remote desktop. Use the textbox below as an interface between the client and server
+ clipboards.
+ </p> -->
+ <textarea #clip rows="10" cols="40" id="clipboard"></textarea>
+ </div>
+
+ <button id="showKeyboard">Show Keyboard</button>
+ <button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
+ </div>
+
+ <div id="state"> {{ state }} </div>
+
+ <!-- Display -->
+ <div id="display" class="guac-display guac-loading">
+ <!-- On-screen keyboard -->
+ <div id="keyboardContainer"></div>
+ </div>
+
+
+ <!-- Error Dialog-->
+ <div id="errorDialog" class="errorDialogOuter">
+ <div class="errorDialogMiddle">
+ <div class="errorDialog">
+ <p id="errorText"></p>
+ <div class="buttons"><button id="reconnect">Reconnect</button></div>
+ </div>
+ </div>
+ </div>
+</div>
+<!-- <div id="display" class="text-center" #display></div> -->
diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.scss b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.scss
index cdf9269..8fe5c97 100644
--- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.scss
@@ -16,13 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-
+
#terminal {
- height: 100vh;
+ // height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
+ background-attachment: red;
}
+
@media screen and (min-width: 1281px) {
#terminal {
justify-content: center;
diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
index a24999a..36147b2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts
@@ -22,6 +22,11 @@
import { ActivatedRoute } from '@angular/router';
import Guacamole from 'guacamole-common-js';
+import { environment } from '../../environments/environment';
+
+// we can now access environment.apiUrl
+const API_URL = environment.apiUrl;
+
import { StorageService } from '../core/services';
@Component({
@@ -32,7 +37,9 @@
export class WebterminalComponent implements OnInit {
public id: string;
public endpoint: string;
+ public state: string = '';
@ViewChild('terminal', { read: ViewContainerRef, static: false }) terminal: ViewContainerRef;
+ @ViewChild('clip', { static: true }) clip;
constructor(
@@ -47,32 +54,88 @@
this.open(this.id);
}
+ // public open(id_parameter: string) {
+ // // added to simplify development process
+ // const url = environment.production ? window.location.origin : API_URL;
+ // const tunnel = new Guacamole.HTTPTunnel(
+ // `${url}/api/tunnel`, false,
+ // { 'Authorization': `Bearer ${this.storageService.getToken()}` }
+ // );
+
+ // const guac = new Guacamole.Client(tunnel);
+ // const display = document.getElementById('display');
+
+ // display.appendChild(guac.getDisplay().getElement());
+ // const guacDisplay = guac.getDisplay();
+ // const layer = guacDisplay.getDefaultLayer();
+
+ // guac.connect(id_parameter);
+
+ // // Error handler
+ // guac.onerror = (error) => console.log(error.message);
+ // window.onunload = () => guac.disconnect();
+
+ // // Mouse
+ // const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
+ // mouse.onmousemove = (mouseState) => guac.sendMouseState(mouseState);
+
+ // const keyboard = new Guacamole.Keyboard(document);
+ // keyboard.onkeydown = (keysym) => guac.sendKeyEvent(1, keysym);
+ // keyboard.onkeyup = (keysym) => guac.sendKeyEvent(0, keysym);
+ // }
+
public open(id_parameter: string) {
+ // added to simplify development process
+ const url = environment.production ? window.location.origin : API_URL;
const tunnel = new Guacamole.HTTPTunnel(
- `${window.location.origin}/api/tunnel`, false,
+ `${url}/api/tunnel`, false,
{ 'Authorization': `Bearer ${this.storageService.getToken()}` }
);
- const guac = new Guacamole.Client(tunnel);
- const display = document.getElementById('display');
+ var display = document.getElementById('display');
+ var menu = document.getElementById('menu');
+ var clipboardElement = document.getElementById('clipboard');
+
+ var guac = new Guacamole.Client(tunnel);
display.appendChild(guac.getDisplay().getElement());
- const guacDisplay = guac.getDisplay();
- const layer = guacDisplay.getDefaultLayer();
+ // const guacDisplay = guac.getDisplay();
- guac.connect(id_parameter);
-
- // Error handler
- guac.onerror = (error) => console.log(error.message);
- window.onunload = () => guac.disconnect();
-
- // Mouse
- const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
- mouse.onmousemove = (mouseState) => guac.sendMouseState(mouseState);
-
- // Keyboard
const keyboard = new Guacamole.Keyboard(document);
keyboard.onkeydown = (keysym) => guac.sendKeyEvent(1, keysym);
keyboard.onkeyup = (keysym) => guac.sendKeyEvent(0, keysym);
+
+ const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
+ mouse.onmousedown =
+ mouse.onmouseup =
+ mouse.onmousemove = function (mouseState) {
+ guac.sendMouseState(mouseState);
+ };
+
+
+ guac.onclipboard = (stream, mimetype) => {
+ var f;
+ if (/^text\//.exec(mimetype)) {
+ f = new Guacamole.StringReader(stream);
+ var e = "";
+ f.ontext = (a) => {
+ e += a
+ };
+ f.onend = () => {
+ debugger
+ this.clip.nativeElement.value = decodeUnicode(e);
+ }
+ }
+ }
+
+ function decodeUnicode(str) {
+ str = str.replace(/\\/g, "%");
+ return unescape(str);
+ }
+
+ guac.connect(id_parameter);
}
+
+
+
}
