Teliod cgi web WIP

A mostly working cgi ui, work in porgress Look over TODO:
NordSecurity · Jan 13, 2025 · b827145 · b827145
1 parent d558afa
commit b827145
Show file tree

Hide file tree

Showing 22 changed files with 784 additions and 171 deletions.
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,4 @@ nat-lab/**/report.html
 events-moose.log
 qnap/**/teliod
 report.json
+/contrib/http_root/cgi-bin/builder
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Justfile b/Justfile
@@ -69,8 +69,15 @@ pylint:
 
 # Start a dev web cgi server, for local teliod cgi development
 web:
-    @echo "Go to http://127.0.0.1:8080/cgi-bin/teliod.cgi"
-    python3 -m http.server --cgi -d $(pwd)/contrib/http_root/ -b 127.0.0.1 8080
+    if ! [ -e 'busybox' ]; then \
+        echo "install mini_httpd:\n$ apt install busybox"; \
+    fi
+
+    @echo "Go to http://127.0.0.1:8080/cgi-bin/teliod.cgi/"
+
+    cd $(pwd)/contrib/http_root; \
+    echo -n $(whoami) > cgi-bin/builder; \
+    sudo busybox httpd -f -p 127.0.0.1:8080 -vv -u root -h $(pwd)
 
 _udeps-install: _nightly-install
     cargo +{{ nightly }} install cargo-udeps@0.1.47 --locked

diff --git a/clis/teliod/Cargo.toml b/clis/teliod/Cargo.toml
@@ -34,6 +34,10 @@ anyhow.workspace = true
 smart-default = "0.7.1"
 base64 = "0.22.1"
 dirs = "4.0.0"
+
+form_urlencoded = { version = "1.2.1", optional = true }
+maud = { version = "0.26.0", optional = true }
+lazy_static = { workspace = true, optional = true}
 const_format = { version = "0.2.33", optional = true }
 rust-cgi = { version = "0.7.1", optional = true }
 
@@ -42,6 +46,9 @@ rand = "0.8.5"
 serial_test = "3.2.0"
 
 [features]
-cgi = ["const_format", "rust-cgi"]
+# TODO: remove
+default = ["cgi"]
+
+cgi = ["const_format", "rust-cgi", "lazy_static", "maud", "form_urlencoded"]
 qnap = ["cgi"]
 
diff --git a/clis/teliod/assets/index.html b/clis/teliod/assets/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- TODO: probably should be generated from param to cgi, currently a fix for bussybox httpd
+    as it dies not allow bin.cgi/ :|  -->
+    <base href="http://127.0.0.1:8080/cgi-bin/teliod.cgi/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nord Security Meshnet</title>
+
+    <!-- TODO: move into asset folder -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        'nord-blue': '#5E81AC',
+                        'nord-green': '#A3BE8C',
+                        'nord-orange': '#D08770',
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- TODO: move into asset folder -->
+    <script src="https://unpkg.com/[email protected]"></script>
+    <style>
+        <!-- TODO: move into asset folder -->
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .htmx-indicator{
+            display: none;
+        }
+        .htmx-request .htmx-indicator{
+            display: inline;
+        }
+        .htmx-request.htmx-indicator{
+            display: inline;
+        }
+    </style>
+    <script src="static/telio.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen p-8">
+    <div class="max-w-2xl mx-auto space-y-6">
+        <div class="bg-gray-800 rounded-lg p-4 flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-nord-blue rounded-lg flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                    </svg>
+                </div>
+                <h1 class="text-xl font-semibold">Nord Security Meshnet</h1>
+            </div>
+            <a href="https://meshnet.nordvpn.com/" class="text-nord-blue hover:underline">Docs &gt;</a>
+        </div>
+
+        <div id="pannel" hx-get="pannel" hx-trigger="load"></div>
+</body>
+</html>
diff --git a/qnap/shared/web/script.js → clis/teliod/assets/script.js b/qnap/shared/web/script.js → clis/teliod/assets/script.js
diff --git a/clis/teliod/assets/spinner.svg b/clis/teliod/assets/spinner.svg
diff --git a/clis/teliod/assets/style.css b/clis/teliod/assets/style.css
@@ -0,0 +1,111 @@
+/* General Styles */
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    background-color: #f9f9f9;
+    color: #2a2b32;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    align-items: center;
+
+}
+
+.container {
+    margin: 0;
+    padding: 0;
+    /* display: flex; */
+    flex-direction: column;
+    justify-content: flex-start;
+    /* align-items: center; */
+    min-height: 100vh;
+    max-width: 600px
+}
+
+/* Container */
+.pannel {
+    /* width: 90%; */
+    /* max-width: 600px; */
+    background: #ffffff;
+    /* height: auto; */
+    box-shadow:
+        0 0 0 1px rgba(56,60,67,.05),
+        0 1px 3px 0 rgba(56,60,67,.15);
+    padding: 24px;
+    margin: 40px 24px 0px;
+
+    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
+    border-radius: 12px;
+    overflow: hidden;
+    text-align: left;
+
+    /* displa */
+}
+
+/* Header */
+/* .container header { */
+    /* padding: 20px; */
+    /* background: #0078d7; */
+    /* color: white; */
+/* } */
+
+/* Main Section */
+/* main { */
+    /* padding: 20px; */
+/* } */
+
+/* .pannel-body { */
+    /* font-size: 20px; */
+    /* margin-bottom: 10px; */
+/* } */
+
+/* form { */
+    /* display: flex; */
+    /* flex-direction: column; */
+    /* align-items: center; */
+/* } */
+
+/* form label { */
+    /* margin-bottom: 5px; */
+    /* font-weight: bold; */
+/* } */
+
+/* form input { */
+    /* padding: 8px; */
+    /* width: 80%; */
+    /* margin-bottom: 10px; */
+    /* border: 1px solid #ccc; */
+    /* border-radius: 4px; */
+    /* font-size: 16px; */
+/* } */
+
+/* form button { */
+    /* background-color: #0078d7; */
+    /* color: white; */
+    /* padding: 10px 20px; */
+    /* border: none; */
+    /* border-radius: 4px; */
+    /* cursor: pointer; */
+    /* font-size: 16px; */
+    /* transition: background-color 0.3s ease; */
+/* } */
+
+/* form button:hover { */
+    /* background-color: #005bb5; */
+/* } */
+
+/* Response Message */
+/* #response-message { */
+    /* margin-top: 20px; */
+    /* font-size: 16px; */
+    /* color: #0078d7; */
+/* } */
+
+/* Footer */
+/* footer { */
+    /* padding: 10px; */
+    /* background: #f1f1f1; */
+    /* font-size: 14px; */
+/* } */
diff --git a/clis/teliod/assets/telio.js b/clis/teliod/assets/telio.js
@@ -0,0 +1,19 @@
+window.telio = {
+  validateToken: input => {
+    const valid = /^[0-9a-f]{64}$/.test(input.value);
+    if (valid) {
+      input.setCustomValidity("");
+    } else {
+      input.setCustomValidity("Token must be a valid 64char hex number");
+    }
+  },
+
+  validateTunnel: input =>  {
+    const valid = /^[a-zA-Z][a-zA-Z0-9\-\.:]{0,14}$/.test(input.value);
+    if (valid) {
+      input.setCustomValidity("");
+    } else {
+      input.setCustomValidity("Must be a valid linux interface name");
+    }
+  }, 
+};