feat: Integrate built-in user authentication (Login/Register Glassmorphism Modal with JWT) into Viewer GUI
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user