kdrakontidis/webrtc_http_tunnel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added views

Browse Source
This commit is contained in:
admin
2025-07-25 16:25:16 +03:00
parent 9c69271de8
commit a182befeb6
2 changed files with 171 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/frontend/app/views/login.html
+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body
style="padding-left: 20%; padding-right: 20%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;">
<input type="text" class="form-control" id="username" placeholder="Username">
<input type="password" class="form-control" id="password" placeholder="Password">
<div style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
<button type="button" class="btn btn-outline-danger" id="cancel">Cancel</button>
<button type="submit" class="btn btn-primary" id="submit">Login</button>
</div>
<script>
const { ipcRenderer } = require("electron");
function submit() {
ipcRenderer.send("login-submit", {
username: document.getElementById("username").value,
password: document.getElementById("password").value,
});
};
document.getElementById("username").focus();
document.getElementById("password").onkeypress = (ev) => {
if (ev.key == "Enter") {
submit();
}
};
document.getElementById("submit").onclick = submit;
document.getElementById("cancel").onclick = () => { ipcRenderer.send("login-cancel") };
</script>
</body>
</html>
client/frontend/app/views/main.html
+127
View File
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Main</title>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body style="overflow: hidden;">
<label style="font-size: 260%;">WebRTC Tunnel</label>
<div id="status_div" style="display: flex; height: 200px; flex-direction: column; justify-content: space-evenly;">
<div style="display: flex; align-items: center;">
<div class="spinner-border m-3" role="status">
<span class="sr-only"></span>
</div>
<label>Electron app started</label>
</div>
<div style="display: flex; align-items: center;">
<div class="spinner-border m-3" role="status">
<span class="sr-only"></span>
</div>
<label>Client backend started</label>
</div>
<div style="display: flex; align-items: center;">
<div class="spinner-border m-3" role="status">
<span class="sr-only"></span>
</div>
<label>Peer connection established</label>
</div>
<div style="display: flex; align-items: center;">
<textarea class="form-control" id="logger" rows="12" style="resize: none;" readonly></textarea>
</div>
</div>
<script>
const { ipcRenderer } = require("electron");
const status_div = document.getElementById("status_div");
const logger = document.getElementById("logger");
const SVG_NS = "http://www.w3.org/2000/svg";
const STEPS = Object.freeze({
APP_START: 0,
BACKEND_START: 1,
CONNECTED: 2
});
const STATUS = Object.freeze({
FAIL: 0,
DONE: 1
});
function setStatus(step, status) {
if (status == STATUS.DONE) {
const STATUS_DOM = document.createElementNS(SVG_NS, "svg");
STATUS_DOM.setAttribute("width", "64");
STATUS_DOM.setAttribute("height", "64");
STATUS_DOM.setAttribute("viewBox", "0 0 16 16");
const SVG_PATH = document.createElementNS(SVG_NS, "path");
STATUS_DOM.setAttribute("fill", "lightGreen");
SVG_PATH.setAttribute("d", "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z");
STATUS_DOM.appendChild(SVG_PATH);
status_div.children[step].replaceChild(STATUS_DOM, status_div.children[step].firstElementChild);
} else {
for (var STATUS_i = step; STATUS_i < Object.keys(STEPS).length; STATUS_i++) {
const STATUS_DOM = document.createElementNS(SVG_NS, "svg");
STATUS_DOM.setAttribute("width", "64");
STATUS_DOM.setAttribute("height", "64");
STATUS_DOM.setAttribute("viewBox", "0 0 16 16");
const SVG_PATH = document.createElementNS(SVG_NS, "path");
STATUS_DOM.setAttribute("fill", "red");
SVG_PATH.setAttribute("d", "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708");
STATUS_DOM.appendChild(SVG_PATH);
status_div.children[STATUS_i].replaceChild(STATUS_DOM, status_div.children[STATUS_i].firstElementChild);
}
}
}
setStatus(STEPS.APP_START, STATUS.DONE);
function loggerAppend(message) {
logger.textContent += message;
logger.scrollTop = logger.scrollHeight;
}
ipcRenderer.on("backend_spawn", (event, data) => {
setStatus(STEPS.BACKEND_START, STATUS.DONE);
});
ipcRenderer.on("backend_info", (event, data) => {
loggerAppend(`[INFO] ${data}`);
});
ipcRenderer.on("backend_error", (event, data) => {
loggerAppend(`[ERROR] ${data}`);
setStatus(STEPS.BACKEND_START, STATUS.FAIL);
});
ipcRenderer.on("backend_dc", (event, data) => {
setStatus(STEPS.CONNECTED, STATUS.DONE);
window.location.href = `http://127.0.0.1:${data}`;
});
ipcRenderer.on("backend_quit", (event, data) => {
setStatus(STEPS.BACKEND_START, STATUS.FAIL);
loggerAppend("[ERROR] WebSocket connection closed\n");
});
</script>
</body>
</html>