LeoVasanko/passkey-auth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carolina.

Browse Source
This commit is contained in:
Leo Vasanko
2025-07-08 18:05:05 -06:00
parent e7f0e4ac1b
commit d4e5497406
5 changed files with 77 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
static/add-device.html
View File

@@ -1,93 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Add Device - 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">
<!-- Device Addition View -->
<div id="deviceAdditionView" class="view active">
<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="window.location.href='/auth/profile'" class="btn-secondary">
Back to Profile
</button>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Initialize the device addition view when page loads
document.addEventListener('DOMContentLoaded', function() {
initializeApp();
// Auto-generate device link when page loads
generateDeviceLink();
});
// Generate device link function
function generateDeviceLink() {
clearStatus('deviceAdditionStatus');
showStatus('deviceAdditionStatus', 'Generating device link...', 'info');
fetch('/api/create-device-link', {
method: 'POST',
credentials: 'include'
})
.then(response => response.json())
.then(result => {
if (result.error) throw new Error(result.error);
// Update UI with the link
document.getElementById('deviceLinkText').textContent = result.addition_link;
document.getElementById('deviceToken').textContent = result.token;
// Store link globally for copy function
window.currentDeviceLink = result.addition_link;
// Generate QR code
const qrCodeEl = document.getElementById('qrCode');
qrCodeEl.innerHTML = '';
new QRCode(qrCodeEl, {
text: result.addition_link,
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.M
});
showStatus('deviceAdditionStatus', 'Device link generated successfully!', 'success');
})
.catch(error => {
console.error('Error generating device link:', error);
showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error');
});
}
</script>
</body>
</html>

36
static/profile-dialog.css Normal file
View File

@@ -0,0 +1,36 @@
/* Profile page dialog styles */
.container.dialog-open {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
/* Dialog styling */
#deviceLinkDialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
color: black;
background: white;
border: none;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 2rem;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}
#deviceLinkDialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* Prevent scrolling when dialog is open */
body.dialog-open {
overflow: hidden;
}

14
static/profile.html
View File

@@ -40,19 +40,15 @@
<div id="deviceLinkSection"> <div id="deviceLinkSection">
<h2>Device Addition Link</h2> <h2>Device Addition Link</h2>
<div class="token-info"> <div class="token-info">
<p><strong>Share this link to add this account to another device:</strong></p>
<div class="qr-container"> <div class="qr-container">
<div id="qrCode" class="qr-code"></div> <div id="qrCode" class="qr-code"></div>
<p><small>Scan this QR code with your other device</small></p> <p><a href="#" id="deviceLinkText"></a></p>
</div> </div>
<div class="link-container"> <p>
<p class="link-text" id="deviceLinkText">Loading...</p> <strong>Scan the above code and visit the URL on another device.</strong><br>
<button class="copy-button" onclick="copyDeviceLink()">Copy Link</button> <small>⚠️ Expires in 24 hours and can only be used once.</small>
</div> </p>
<p><small>⚠️ This link expires in 24 hours and can only be used once.</small></p>
</div> </div>
</div> </div>

36
static/profile.js
View File

@@ -61,28 +61,39 @@ function closeDeviceLinkDialog() {
} }
// Generate device link function // Generate device link function
function generateDeviceLink() { async function generateDeviceLink() {
clearStatus('deviceAdditionStatus') clearStatus('deviceAdditionStatus')
showStatus('deviceAdditionStatus', 'Generating device link...', 'info') showStatus('deviceAdditionStatus', 'Generating device link...', 'info')
fetch('/api/create-device-link', { try {
const response = await fetch('/api/create-device-link', {
method: 'POST', method: 'POST',
credentials: 'include' credentials: 'include'
}) })
.then(response => response.json())
.then(result => { const result = await response.json()
if (result.error) throw new Error(result.error)
if (result.error) {
throw new Error(result.error)
}
// Update UI with the link // Update UI with the link
const deviceLinkText = document.getElementById('deviceLinkText') const deviceLinkText = document.getElementById('deviceLinkText')
const deviceToken = document.getElementById('deviceToken')
if (deviceLinkText) { if (deviceLinkText) {
deviceLinkText.textContent = result.addition_link deviceLinkText.href = result.addition_link
} deviceLinkText.textContent = result.addition_link.replace(/^[a-z]+:\/\//i, '')
if (deviceToken) { // Add click event listener for copying the link
deviceToken.textContent = result.token deviceLinkText.addEventListener('click', function(e) {
e.preventDefault() // Prevent navigation
navigator.clipboard.writeText(deviceLinkText.href).then(() => {
closeDeviceLinkDialog() // Close the dialog
showStatus('deviceAdditionStatus', 'Device registration link copied', 'success') // Display status
}).catch(() => {
showStatus('deviceAdditionStatus', 'Failed to copy device registration link', 'error')
})
})
} }
// Store link globally for copy function // Store link globally for copy function
@@ -103,10 +114,9 @@ function generateDeviceLink() {
} }
clearStatus('deviceAdditionStatus') clearStatus('deviceAdditionStatus')
}) } catch (error) {
.catch(error => {
showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error') showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error')
}) }
} }
// Make functions available globally for onclick handlers // Make functions available globally for onclick handlers

15
static/style.css
View File

@@ -326,18 +326,3 @@ button:disabled {
color: #495057; color: #495057;
margin: 0; margin: 0;
} }
.copy-button {
background: #28a745;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
.copy-button:hover {
background: #218838;
}