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

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 {
-    flex: 1;
-    background: none;
-    border: none;
-    outline: none;
-    color: #fff;
-    font-family: 'Consolas', 'Courier New', monospace;
-    font-size: 0.85rem;
+/* Glassmorphism Auth Overlay & Form Card */
+.auth-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    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;
+}
+
+