65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Profile - Passkey Authentication</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link rel="stylesheet" href="/static/profile-dialog.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">
|
|
<!-- Profile View -->
|
|
<div id="profileView" class="view active">
|
|
<h1>👋 Welcome!</h1>
|
|
<div id="userInfo" class="user-info"></div>
|
|
<div id="profileStatus"></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="openDeviceLinkDialog()" class="btn-secondary">
|
|
Generate Device Link
|
|
</button>
|
|
<button onclick="logout()" class="btn-danger">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Device Link Dialog -->
|
|
<dialog id="deviceLinkDialog">
|
|
<h1>📱 Add Device</h1>
|
|
<div id="deviceAdditionStatus"></div>
|
|
|
|
<div id="deviceLinkSection">
|
|
<h2>Device Addition Link</h2>
|
|
<div class="token-info">
|
|
<div class="qr-container">
|
|
<div id="qrCode" class="qr-code"></div>
|
|
<p><a href="#" id="deviceLinkText"></a></p>
|
|
</div>
|
|
|
|
<p>
|
|
<strong>Scan the above code and visit the URL on another device.</strong><br>
|
|
<small>⚠️ Expires in 24 hours and can only be used once.</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="closeDeviceLinkDialog()" class="btn-secondary">
|
|
Close
|
|
</button>
|
|
</dialog>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
<script src="/static/profile.js"></script>
|
|
</body>
|
|
</html>
|