more progress on TOTP/2FA

This commit is contained in:
2025-10-10 01:45:02 +01:00
parent b13cb5086a
commit 4a6c3bc49c
12 changed files with 189 additions and 197 deletions
+30 -38
View File
@@ -3,54 +3,46 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discord Clone - Group Chat</title>
<title>Discord Clone - Sign Up</title>
<link rel="stylesheet" href="static/css/index.css"/>
</head>
<body>
<div class="chat-container">
<!--<div class="chat-container" style="background-image: url('cdn/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
<!-- Chat Header -->
<div class="chat-header">
<div class="chat-title">
<img class="user-avatar" src="cdn/profile/0"></img>
<h1>Chat title</h1>
</div>
<div class="signup-container">
<div class="signup-header">
<div class="logo">DC</div>
<h1>2FA Setup</h1>
</div>
<!-- Live Location Notification Bubble -->
<div class="notification-container">
<div class="live-location-bubble" id="locationBubble">
<div class="map-container">
<img src="cdn/map.png" alt="Map" />
</div>
<div class="location-content">
<div class="location-icon">
<img src="cdn/icons/location.svg" alt="Location"></img>
</div>
<button class="join-button" id="joinButton">
Join
</button>
<div class="location-text">Live Location</div>
<div class="location-users" id="locationUsers">
<!-- Users will be added dynamically -->
</div>
</div>
<div class="signup-form">
<div class="success-message" id="successMessage">
Login successful, Redirecting
</div>
</div>
<!-- Messages Container -->
<!--<div class="messages-container" style="background-image: url('cdn/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
<div class="messages-container"></div>
<img id="qr-code" alt="QR Code" style="width: 100%; height: auto; filter: brightness(0.925) invert(1);">
<!-- Input Container -->
<div class="input-container">
<div class="input-wrapper">
<input type="text" placeholder="Start Typing..." />
<button class="send-button">
<img src="cdn/icons/send.svg" alt="Send" />
</button>
<div class="form-group">
<input
type="text"
inputmode="numeric"
pattern="[0-9]*"
maxlength="6"
placeholder="000000"
style="font-size: 24px; letter-spacing: 0.5em; text-align: center; width: 100%;"
>
</div>
<button type="button" class="submit-button" id="submitButton">
Confirm!
</button>
</div>
</div>
<script>
fetch('/api/totp.jpg')
.then(response => response.json())
.then(data => {
document.getElementById('qr-code').src = data.qr_code;
});
</script>
</body>
</html>