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

2026-07-26 20:31:36 +09:00
parent 9818047b87
commit 9ebf965c27
5 changed files with 289 additions and 9 deletions
--- a/viewer/ui/app.js
+++ b/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
 });
+
--- a/viewer/ui/index.html
+++ b/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>
--- a/viewer/ui/style.css
+++ b/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;
+}
+
+