From a182befeb67bce1991c139b3ffe55fbeeb21077c Mon Sep 17 00:00:00 2001
From: Kostas Drakontidis <gedra100sh@gmail.com>
Date: Fri, 25 Jul 2025 16:25:16 +0300
Subject: [PATCH] Added views

---
 client/frontend/app/views/login.html |  44 ++++++++++
 client/frontend/app/views/main.html  | 127 +++++++++++++++++++++++++++
 2 files changed, 171 insertions(+)
 create mode 100644 client/frontend/app/views/login.html
 create mode 100644 client/frontend/app/views/main.html
diff --git a/client/frontend/app/views/login.html b/client/frontend/app/views/login.html
new file mode 100644
index 0000000..67a3d21
--- /dev/null
+++ b/client/frontend/app/views/login.html
@@ -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>
\ No newline at end of file
diff --git a/client/frontend/app/views/main.html b/client/frontend/app/views/main.html
new file mode 100644
index 0000000..398ba8f
--- /dev/null
+++ b/client/frontend/app/views/main.html
@@ -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>
\ No newline at end of file
