feat: Integrate built-in user authentication (Login/Register Glassmorphism Modal with JWT) into Viewer GUI

history/2026-07-26.md

@@ -51,7 +51,11 @@
 - [x] Created `service/helios-remote.service` systemd unit file for OS auto-start on boot.
 - [x] Created `service/install_service.sh` and `service/uninstall_service.sh` service management scripts.
 
+### remote.jkwoo.com Domain & NGINX SSL Integration Completed
+- [x] Created `/etc/nginx/conf.d/remote_jkwoo.conf` configured with Let's Encrypt SSL certificate and WSS WebSocket proxy.
+- [x] Created `nginx/install_nginx.sh` deployment script.
+- [x] Verified `sudo nginx -t` syntax check and successfully reloaded NGINX daemon.
+
 ## Current Status
-- 🏆 **HELIOS Remote v5.0.0 Final Release & Systemd Auto-Start Configuration COMPLETED!**
+- 🏆 **HELIOS Remote v5.0.0 Final Release & remote.jkwoo.com HTTPS Domain Integration COMPLETED!**
-- All 11 Phases across the entire development roadmap and Option A systemd service configuration are fully realized, verified, and packaged.
+- System is securely served at **`https://remote.jkwoo.com`** with HTTPS/WSS encryption.
-- System is running persistently in background at `http://192.168.0.253:8085` / `http://localhost:8085`.

nginx/install_nginx.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+set -e
+
+echo "=== Installing remote.jkwoo.com NGINX Configuration to /etc/nginx/conf.d/ ==="
+
+SRC_CONF="/home/jkwoo/workspace/helios_remote/nginx/remote_jkwoo.conf"
+DEST_CONF="/etc/nginx/conf.d/remote_jkwoo.conf"
+
+if [ "$EUID" -ne 0 ]; then
+    echo "Running with sudo..."
+    sudo cp "$SRC_CONF" "$DEST_CONF"
+    echo "Testing NGINX configuration..."
+    sudo nginx -t
+    echo "Reloading NGINX..."
+    sudo systemctl reload nginx
+else
+    cp "$SRC_CONF" "$DEST_CONF"
+    echo "Testing NGINX configuration..."
+    nginx -t
+    echo "Reloading NGINX..."
+    systemctl reload nginx
+fi
+
+echo "=========================================================="
+echo "✅ remote.jkwoo.com NGINX configuration installed successfully!"
+echo "👉 Domain URL: https://remote.jkwoo.com"
+echo "=========================================================="

nginx/remote_jkwoo.conf

@@ -0,0 +1,49 @@
+server {
+    server_name remote.jkwoo.com;
+
+    client_max_body_size 500M;
+    proxy_read_timeout 3600s;
+    proxy_send_timeout 3600s;
+    proxy_connect_timeout 60s;
+
+    # HELIOS Webview Viewer GUI & Dashboard (Port 8085)
+    location / {
+        proxy_pass http://127.0.0.1:8085;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # WebSocket Secure (wss://) Upgrade Headers
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+
+    # HELIOS Control Plane API Server (Port 3000)
+    location /api/ {
+        proxy_pass http://127.0.0.1:3000/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    listen [::]:443 ssl; # managed by Certbot
+    listen 443 ssl; # managed by Certbot
+    ssl_certificate /etc/letsencrypt/live/remote.jkwoo.com/fullchain.pem; # managed by Certbot
+    ssl_certificate_key /etc/letsencrypt/live/remote.jkwoo.com/privkey.pem; # managed by Certbot
+    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+}
+
+server {
+    if ($host = remote.jkwoo.com) {
+        return 301 https://$host$request_uri;
+    } # managed by Certbot
+
+    listen 80;
+    listen [::]:80;
+    server_name remote.jkwoo.com;
+    return 404; # managed by Certbot
+}

nginx/setup_certbot.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+set -e
+
+echo "=== Issuing Let's Encrypt SSL Certificate for remote.jkwoo.com ==="
+if [ "$EUID" -ne 0 ]; then
+    echo "Running certbot with sudo..."
+    sudo certbot --nginx -d remote.jkwoo.com --non-interactive --agree-tos --register-unsafely-without-email || sudo certbot --nginx -d remote.jkwoo.com
+else
+    certbot --nginx -d remote.jkwoo.com --non-interactive --agree-tos --register-unsafely-without-email || certbot --nginx -d remote.jkwoo.com
+fi
+
+echo "=========================================================="
+echo "✅ SSL Certificate issued and remote.jkwoo.com NGINX configured!"
+echo "👉 Access URL: https://remote.jkwoo.com"
+echo "=========================================================="

start_system.sh

@@ -6,12 +6,19 @@ echo "=== HELIOS Remote System Starting (Persistent Mode) ==="
 pkill -9 -f "target/debug/relay" 2>/dev/null || true
 pkill -9 -f "target/debug/agent" 2>/dev/null || true
 pkill -9 -f "target/debug/viewer" 2>/dev/null || true
+pkill -9 -f "target/debug/server" 2>/dev/null || true
 sleep 1
 
 echo "Building binaries..."
 cargo build --workspace
 
+echo "--- 0. Starting Control Plane API Server (Port 3000) ---"
+./target/debug/server > logs/server.log 2>&1 &
+SERVER_PID=$!
+sleep 2
+
 echo "--- 1. Starting Relay Server (Port 4000) ---"
+
 ./target/debug/relay > logs/relay.log 2>&1 &
 RELAY_PID=$!
 sleep 2

stop_system.sh

@@ -4,4 +4,6 @@ echo "=== Stopping HELIOS Remote System ==="
 pkill -9 -f "target/debug/relay" 2>/dev/null || true
 pkill -9 -f "target/debug/agent" 2>/dev/null || true
 pkill -9 -f "target/debug/viewer" 2>/dev/null || true
+pkill -9 -f "target/debug/server" 2>/dev/null || true
 echo "All HELIOS processes stopped."
+

viewer/ui/app.js

@@ -1,4 +1,110 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // Auth Elements
+    const authModal = document.getElementById('authModal');
+    const loginForm = document.getElementById('loginForm');
+    const registerForm = document.getElementById('registerForm');
+    const showRegisterBtn = document.getElementById('showRegisterBtn');
+    const showLoginBtn = document.getElementById('showLoginBtn');
+    const loginError = document.getElementById('loginError');
+    const registerError = document.getElementById('registerError');
+
+    // Toggle Forms
+    if (showRegisterBtn) {
+        showRegisterBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            loginForm.classList.add('hidden');
+            registerForm.classList.remove('hidden');
+            loginError.textContent = '';
+        });
+    }
+
+    if (showLoginBtn) {
+        showLoginBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            registerForm.classList.add('hidden');
+            loginForm.classList.remove('hidden');
+            registerError.textContent = '';
+        });
+    }
+
+    // Check JWT Token
+    const storedToken = localStorage.getItem('helios_jwt');
+    if (storedToken) {
+        authModal.classList.add('hidden');
+        initViewerApp();
+    } else {
+        authModal.classList.remove('hidden');
+    }
+
+    // Handle Login Submit
+    if (loginForm) {
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            loginError.textContent = '';
+            const email = document.getElementById('loginEmail').value;
+            const password = document.getElementById('loginPassword').value;
+
+            try {
+                const res = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, password })
+                });
+
+                if (!res.ok) {
+                    const errText = await res.text();
+                    loginError.textContent = errText || 'Login failed. Invalid credentials.';
+                    return;
+                }
+
+                const data = await res.json();
+                if (data.token) {
+                    localStorage.setItem('helios_jwt', data.token);
+                    authModal.classList.add('hidden');
+                    initViewerApp();
+                }
+            } catch (err) {
+                loginError.textContent = 'Server connection error. Please try again.';
+            }
+        });
+    }
+
+    // Handle Register Submit
+    if (registerForm) {
+        registerForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            registerError.textContent = '';
+            const username = document.getElementById('regUsername').value;
+            const email = document.getElementById('regEmail').value;
+            const password = document.getElementById('regPassword').value;
+
+            try {
+                const res = await fetch('/api/auth/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, email, password })
+                });
+
+                if (!res.ok) {
+                    const errText = await res.text();
+                    registerError.textContent = errText || 'Registration failed. Email may already be in use.';
+                    return;
+                }
+
+                const data = await res.json();
+                if (data.token) {
+                    localStorage.setItem('helios_jwt', data.token);
+                    authModal.classList.add('hidden');
+                    initViewerApp();
+                }
+            } catch (err) {
+                registerError.textContent = 'Server connection error. Please try again.';
+            }
+        });
+    }
+
+    function initViewerApp() {
+
     const canvas = document.getElementById('remoteCanvas');
     const ctx = canvas.getContext('2d');
     const overlay = document.getElementById('overlayBanner');
@@ -268,4 +374,7 @@ document.addEventListener('DOMContentLoaded', () => {
         };
         ws.send(JSON.stringify(msg));
     }
+
+    } // End of initViewerApp
 });
+

viewer/ui/index.html

@@ -105,10 +105,63 @@
                     </div>
                 </div>
             </section>
-
         </main>
     </div>
 
+    <!-- Glassmorphism Authentication Modal Overlay -->
+    <div id="authModal" class="auth-overlay">
+        <div class="auth-card">
+            <div class="auth-header">
+                <div class="brand">
+                    <span class="logo-icon">⚡</span>
+                    <h2>HELIOS Remote Secure Login</h2>
+                </div>
+                <p>Enter your credentials to access the remote desktop dashboard</p>
+            </div>
+
+            <!-- Login Form -->
+            <form id="loginForm" class="auth-form">
+                <div class="input-group">
+                    <label for="loginEmail">Email Address</label>
+                    <input type="email" id="loginEmail" placeholder="admin@helios.remote" required autocomplete="username">
+                </div>
+                <div class="input-group">
+                    <label for="loginPassword">Password</label>
+                    <input type="password" id="loginPassword" placeholder="••••••••" required autocomplete="current-password">
+                </div>
+                <button type="submit" class="btn auth-btn">Sign In</button>
+                <div id="loginError" class="auth-error"></div>
+                <div class="auth-toggle">
+                    <span>Don't have an account?</span>
+                    <a href="#" id="showRegisterBtn">Register Here</a>
+                </div>
+            </form>
+
+            <!-- Registration Form (Hidden by default) -->
+            <form id="registerForm" class="auth-form hidden">
+                <div class="input-group">
+                    <label for="regUsername">Full Name / Username</label>
+                    <input type="text" id="regUsername" placeholder="John Doe" required>
+                </div>
+                <div class="input-group">
+                    <label for="regEmail">Email Address</label>
+                    <input type="email" id="regEmail" placeholder="user@helios.remote" required autocomplete="email">
+                </div>
+                <div class="input-group">
+                    <label for="regPassword">Password</label>
+                    <input type="password" id="regPassword" placeholder="••••••••" required autocomplete="new-password">
+                </div>
+                <button type="submit" class="btn auth-btn accent">Create Account</button>
+                <div id="registerError" class="auth-error"></div>
+                <div class="auth-toggle">
+                    <span>Already have an account?</span>
+                    <a href="#" id="showLoginBtn">Sign In Here</a>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script src="app.js"></script>
+
 </body>
 </html>

viewer/ui/style.css

@@ -381,13 +381,122 @@ body {
     font-weight: bold;
 }
 
-#terminalInput {
+/* Glassmorphism Auth Overlay & Form Card */
-    flex: 1;
+.auth-overlay {
-    background: none;
+    position: fixed;
-    border: none;
+    top: 0;
-    outline: none;
+    left: 0;
-    color: #fff;
+    right: 0;
-    font-family: 'Consolas', 'Courier New', monospace;
+    bottom: 0;
-    font-size: 0.85rem;
+    background: rgba(10, 15, 30, 0.85);
+    backdrop-filter: blur(20px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
+.auth-card {
+    width: 420px;
+    background: rgba(15, 23, 42, 0.9);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    padding: 36px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
+}
+
+.auth-header {
+    margin-bottom: 28px;
+    text-align: center;
+}
+
+.auth-header h2 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+.auth-header p {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 6px;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.auth-form.hidden {
+    display: none;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-align: left;
+}
+
+.input-group label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.input-group input {
+    background: rgba(30, 41, 59, 0.8);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 10px 14px;
+    color: #fff;
+    font-size: 0.9rem;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.input-group input:focus {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
+}
+
+.btn.auth-btn {
+    width: 100%;
+    margin-top: 8px;
+    padding: 12px;
+    font-weight: 700;
+    border-radius: 10px;
+}
+
+.btn.auth-btn.accent {
+    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
+}
+
+.auth-error {
+    color: #ef4444;
+    font-size: 0.8rem;
+    text-align: center;
+    margin-top: 4px;
+    min-height: 18px;
+}
+
+.auth-toggle {
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 12px;
+}
+
+.auth-toggle a {
+    color: var(--accent-blue);
+    text-decoration: none;
+    font-weight: 600;
+    margin-left: 4px;
+}
+
+.auth-toggle a:hover {
+    text-decoration: underline;
+}
+
+