Skip to content

Commit a1c1112

Browse files
vadimproninvadimpronin
committed
test-guac interface improvements
1 parent d5fbade commit a1c1112

File tree

5 files changed

+467
-194
lines changed

5 files changed

+467
-194
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -285,8 +285,8 @@ callbacks and events, the advanced configuration guide has you covered.
285285

286286
**Components:**
287287
* `guacd`: The core Guacamole proxy daemon.
288-
* `desktop-linux`: A sample Ubuntu Linux desktop with XFCE and XRDP installed, serving as the remote machine.
289-
* `guacamole-lite-server`: An instance of your `guacamole-lite` server running within a Node.js container.
288+
* `desktop-linux`: A sample Ubuntu Linux desktop with RDP and VNC installed, serving as the remote machine.
289+
* `guacamole-lite-server`: An instance of `guacamole-lite` server running within a Node.js container.
290290
* `guacamole-lite-client`: A simple Nginx container serving an HTML page that uses the official `guacamole-common-js` library to connect to the `guacamole-lite-server`. It includes example code for generating the connection token (though this should be done server-side in production).
291291

292292
**How to Use `test-guac`:**

‎test-guac/guacamole-lite-client/html/css/style.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
html, body { height: 100%; margin: 0; font-family: Arial, sans-serif; }
2+
3+
#app-container {
4+
height: 100%;
5+
width: 100%;
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
#connection-screen {
11+
display: flex;
12+
flex-direction: column;
13+
height: 100%;
14+
justify-content: center;
15+
align-items: center;
16+
background-color: #f5f5f5;
17+
}
18+
19+
#connection-form {
20+
background-color: white;
21+
border-radius: 8px;
22+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
23+
padding: 25px;
24+
width: 90%;
25+
max-width: 600px;
26+
}
27+
28+
.form-header {
29+
text-align: center;
30+
margin-bottom: 20px;
31+
color: #333;
32+
}
33+
34+
.form-row {
35+
margin-bottom: 15px;
36+
display: flex;
37+
flex-direction: column;
38+
}
39+
40+
#remote-host-details {
41+
display: none;
42+
flex-direction: column;
43+
gap: 15px;
44+
}
45+
46+
#remote-host-details.visible {
47+
display: flex;
48+
}
49+
50+
label {
51+
margin-bottom: 5px;
52+
font-weight: bold;
53+
color: #555;
54+
}
55+
56+
input, select {
57+
padding: 10px;
58+
border: 1px solid #ddd;
59+
border-radius: 4px;
60+
font-size: 14px;
61+
}
62+
63+
button {
64+
padding: 12px 20px;
65+
background-color: #4285f4;
66+
color: white;
67+
border: none;
68+
border-radius: 4px;
69+
cursor: pointer;
70+
font-size: 16px;
71+
transition: background-color 0.2s;
72+
}
73+
74+
button:hover {
75+
background-color: #3367d6;
76+
}
77+
78+
#display-screen {
79+
display: none;
80+
flex-direction: column;
81+
height: 100%;
82+
width: 100%;
83+
}
84+
85+
#display-header {
86+
display: flex;
87+
padding: 10px;
88+
background-color: #333;
89+
color: white;
90+
justify-content: space-between;
91+
align-items: center;
92+
}
93+
94+
#display-title {
95+
font-weight: bold;
96+
}
97+
98+
#close-button {
99+
padding: 8px 15px;
100+
background-color: #f44336;
101+
color: white;
102+
border: none;
103+
border-radius: 4px;
104+
cursor: pointer;
105+
}
106+
107+
#display {
108+
flex-grow: 1;
109+
width: 100%;
110+
cursor: default;
111+
}
112+
113+
.guac-hide-cursor {
114+
cursor: url('../dot.gif'), default;
115+
}
116+
117+
/* Radio button styles */
118+
.radio-group {
119+
display: flex;
120+
flex-direction: column;
121+
gap: 8px;
122+
}
123+
124+
.radio-option {
125+
display: flex;
126+
align-items: center;
127+
}
128+
129+
.radio-option label {
130+
margin-left: 8px;
131+
margin-bottom: 0;
132+
cursor: pointer;
133+
}

‎test-guac/guacamole-lite-client/html/index.html‎

Lines changed: 67 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,78 @@
22
<meta charset="utf-8">
33
<title>guacamole-lite test</title>
44

5-
<style>
6-
html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }
7-
#display { flex-grow: 1; width: 100%; cursor: default; }
8-
.guac-hide-cursor { cursor: url('dot.gif'), default; }
9-
#connection-form { padding: 10px; border-bottom: 1px solid #ccc; display: flex; gap: 15px; align-items: center; }
10-
#remote-host-details { display: none; gap: 10px; }
11-
#remote-host-details.visible { display: flex; }
12-
label { margin-right: 5px; }
13-
input, select, button { padding: 5px; }
14-
</style>
15-
16-
<!-- Connection Form -->
17-
<div id="connection-form">
18-
<label for="connect-target">Connect to:</label>
19-
<select id="connect-target">
20-
<option value="test-host" selected>Test Host (Linux Desktop)</option>
21-
<option value="remote-host">Remote Host</option>
22-
</select>
23-
24-
<label for="protocol">Protocol:</label>
25-
<select id="protocol">
26-
<option value="rdp" selected>RDP</option>
27-
<option value="vnc">VNC</option>
28-
</select>
29-
30-
<div id="remote-host-details">
31-
<label for="remote-hostname">Host:</label>
32-
<input type="text" id="remote-hostname" placeholder="hostname or IP">
33-
<label for="remote-username">Username:</label>
34-
<input type="text" id="remote-username">
35-
<label for="remote-password">Password:</label>
36-
<input type="password" id="remote-password">
5+
<link rel="stylesheet" href="css/style.css">
6+
7+
<div id="app-container">
8+
<!-- Connection Screen -->
9+
<div id="connection-screen">
10+
<div id="connection-form">
11+
<h2 class="form-header">Guacamole Remote Connection</h2>
12+
13+
<div class="form-row">
14+
<label>Connect to:</label>
15+
<div id="connect-target" class="radio-group">
16+
<div class="radio-option">
17+
<input type="radio" id="connect-target-test" name="connect-target" value="test-host" checked>
18+
<label for="connect-target-test">Test Host</label>
19+
</div>
20+
<div class="radio-option">
21+
<input type="radio" id="connect-target-remote" name="connect-target" value="remote-host">
22+
<label for="connect-target-remote">Remote Host</label>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div class="form-row">
28+
<label>Protocol:</label>
29+
<div id="protocol" class="radio-group">
30+
<div class="radio-option">
31+
<input type="radio" id="protocol-rdp" name="protocol" value="rdp" checked>
32+
<label for="protocol-rdp">RDP</label>
33+
</div>
34+
<div class="radio-option">
35+
<input type="radio" id="protocol-vnc" name="protocol" value="vnc">
36+
<label for="protocol-vnc">VNC</label>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div id="remote-host-details">
42+
<div class="form-row">
43+
<label for="remote-hostname">Host:</label>
44+
<input type="text" id="remote-hostname" placeholder="hostname or IP">
45+
</div>
46+
<div class="form-row">
47+
<label for="remote-username">Username:</label>
48+
<input type="text" id="remote-username">
49+
</div>
50+
<div class="form-row">
51+
<label for="remote-password">Password:</label>
52+
<input type="password" id="remote-password">
53+
</div>
54+
</div>
55+
56+
<div class="form-row" style="margin-top: 20px;">
57+
<button id="connect-button">Connect</button>
58+
</div>
59+
</div>
3760
</div>
3861

39-
<button id="connect-button">Connect</button>
62+
<!-- Display Screen -->
63+
<div id="display-screen">
64+
<div id="display-header">
65+
<div id="display-title">Remote Connection</div>
66+
<button id="close-button">Disconnect</button>
67+
</div>
68+
<!-- The remote-desktop surface -->
69+
<div id="display"></div>
70+
</div>
4071
</div>
4172

42-
<!-- official guacamole-common-js bundle copied by the Dockerfile -->
43-
<script src="js/all.min.js"></script>
44-
45-
<!-- The remote-desktop surface -->
46-
<div id="display"></div>
47-
4873
<!-- Hidden textarea for clipboard integration -->
4974
<textarea id="clipboard-textarea" style="position: absolute; left: -9999px;"></textarea>
5075

76+
<!-- official guacamole-common-js bundle copied by the Dockerfile -->
77+
<script src="js/all.min.js"></script>
5178
<script src="js/token-generator.js"></script>
52-
<script src="js/guacamole-init.js"></script>
53-
54-
<script>
55-
const connectTargetSelect = document.getElementById('connect-target');
56-
const remoteHostDetailsDiv = document.getElementById('remote-host-details');
57-
const connectButton = document.getElementById('connect-button');
58-
const protocolSelect = document.getElementById('protocol');
59-
const remoteHostnameInput = document.getElementById('remote-hostname');
60-
const remoteUsernameInput = document.getElementById('remote-username');
61-
const remotePasswordInput = document.getElementById('remote-password');
62-
63-
connectTargetSelect.addEventListener('change', () => {
64-
if (connectTargetSelect.value === 'remote-host') {
65-
remoteHostDetailsDiv.classList.add('visible');
66-
} else {
67-
remoteHostDetailsDiv.classList.remove('visible');
68-
}
69-
});
70-
71-
connectButton.addEventListener('click', async () => {
72-
const target = connectTargetSelect.value;
73-
const protocol = protocolSelect.value;
74-
let connectionSettings;
75-
76-
if (target === 'test-host') {
77-
connectionSettings = {
78-
hostname: "desktop-linux", // Service name in docker-compose
79-
username: "testuser",
80-
password: "Passw0rd!",
81-
security: "any",
82-
"ignore-cert": true,
83-
"enable-drive": protocol === 'rdp', // Drive redirection only for RDP
84-
"drive-path": protocol === 'rdp' ? "/tmp/guac-drive" : undefined,
85-
"create-drive-path": protocol === 'rdp',
86-
"enable-printing": protocol === 'rdp', // Printing only for RDP
87-
"audio": protocol === 'rdp' ? ["audio/L16;rate=44100"] : undefined // Audio only for RDP
88-
};
89-
// Adjust port based on protocol for test-host
90-
if (protocol === 'vnc') {
91-
connectionSettings.port = 5900; // Default VNC port
92-
}
93-
// RDP port is handled by default (3389) unless specified
94-
} else { // remote-host
95-
connectionSettings = {
96-
hostname: remoteHostnameInput.value,
97-
username: remoteUsernameInput.value,
98-
password: remotePasswordInput.value,
99-
// Add common settings or let Guacamole use defaults
100-
"ignore-cert": protocol === 'rdp' ? true : undefined, // Common for RDP self-signed certs
101-
};
102-
// Add port setting if needed, Guacamole uses defaults (3389 for RDP, 5900 for VNC)
103-
}
104-
105-
const tokenObj = {
106-
connection: {
107-
type: protocol,
108-
settings: connectionSettings
109-
}
110-
};
111-
112-
try {
113-
// Clear previous display if any
114-
const displayDiv = document.getElementById('display');
115-
while (displayDiv.firstChild) {
116-
displayDiv.removeChild(displayDiv.firstChild);
117-
}
118-
119-
console.log("Generating token for:", tokenObj);
120-
const token = await generateGuacamoleToken(tokenObj);
121-
console.log("Token generated, initializing Guacamole...");
122-
await initGuacamole(token, protocol); // Pass protocol to initGuacamole
123-
console.log("Guacamole initialization called.");
124-
} catch (error) {
125-
console.error("Failed to connect:", error);
126-
alert("Connection failed: " + error.message);
127-
}
128-
});
129-
</script>
79+
<script src="js/main.js"></script>

0 commit comments

Comments
 (0)