feat: Integrate built-in user authentication (Login/Register Glassmorphism Modal with JWT) into Viewer GUI
Some checks failed
HELIOS Remote CI/CD Pipeline / Check & Test Workspace (push) Has been cancelled
HELIOS Remote CI/CD Pipeline / Build Release Binaries (push) Has been cancelled

This commit is contained in:
2026-07-26 20:31:36 +09:00
parent 9818047b87
commit 9ebf965c27
5 changed files with 289 additions and 9 deletions

View File

@@ -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>