93 lines
3.5 KiB
HTML
93 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Passkey Authentication</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="/static/simplewebauthn-browser.min.js"></script>
|
|
<script src="/static/qrcodejs/qrcode.min.js"></script>
|
|
<script src="/static/awaitable-websocket.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Login View -->
|
|
<div id="loginView" class="view active">
|
|
<h1>🔐 Passkey Login</h1>
|
|
<div id="loginStatus"></div>
|
|
<form id="authenticationForm">
|
|
<button type="submit" class="btn-primary">Login with Your Device</button>
|
|
</form>
|
|
<p class="toggle-link" onclick="showRegisterView()">
|
|
Don't have an account? Register here
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Register View -->
|
|
<div id="registerView" class="view">
|
|
<h1>🔐 Create Account</h1>
|
|
<div id="registerStatus"></div>
|
|
<form id="registrationForm">
|
|
<input type="text" name="username" placeholder="Enter username" required>
|
|
<button type="submit" class="btn-primary">Register Passkey</button>
|
|
</form>
|
|
<p class="toggle-link" onclick="showLoginView()">
|
|
Already have an account? Login here
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Dashboard View -->
|
|
<div id="dashboardView" class="view">
|
|
<h1>👋 Welcome!</h1>
|
|
<div id="userInfo" class="user-info"></div>
|
|
<div id="dashboardStatus"></div>
|
|
|
|
<h2>Your Passkeys</h2>
|
|
<div id="credentialList" class="credential-list">
|
|
<p>Loading credentials...</p>
|
|
</div>
|
|
|
|
<button onclick="addNewCredential()" class="btn-primary">
|
|
Add New Passkey
|
|
</button>
|
|
<button onclick="generateAndShowDeviceLink()" class="btn-secondary">
|
|
Generate Device Link
|
|
</button>
|
|
<button onclick="logout()" class="btn-danger">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Device Addition View -->
|
|
<div id="deviceAdditionView" class="view">
|
|
<h1>📱 Add Device</h1>
|
|
<div id="deviceAdditionStatus"></div>
|
|
|
|
<div id="deviceLinkSection">
|
|
<h2>Device Addition Link</h2>
|
|
<div class="token-info">
|
|
<p><strong>Share this link to add this account to another device:</strong></p>
|
|
|
|
<div class="qr-container">
|
|
<div id="qrCode" class="qr-code"></div>
|
|
<p><small>Scan this QR code with your other device</small></p>
|
|
</div>
|
|
|
|
<div class="link-container">
|
|
<p class="link-text" id="deviceLinkText">Loading...</p>
|
|
<button class="copy-button" onclick="copyDeviceLink()">Copy Link</button>
|
|
</div>
|
|
|
|
<p><small>⚠️ This link expires in 24 hours and can only be used once.</small></p>
|
|
<p><strong>Human-readable code:</strong> <code id="deviceToken"></code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="showDashboardView()" class="btn-secondary">
|
|
Back to Dashboard
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/app.js"></script>
|
|
</body>
|
|
</html>
|