diff --git a/static/add-device.html b/static/add-device.html deleted file mode 100644 index 8c89388..0000000 --- a/static/add-device.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - Add Device - Passkey Authentication - - - - - - -
- -
-

📱 Add Device

-
- - - - -
-
- - - - - diff --git a/static/profile-dialog.css b/static/profile-dialog.css new file mode 100644 index 0000000..6b97944 --- /dev/null +++ b/static/profile-dialog.css @@ -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; +} diff --git a/static/profile.html b/static/profile.html index 8b5c949..bcd9551 100644 --- a/static/profile.html +++ b/static/profile.html @@ -15,12 +15,12 @@

👋 Welcome!

- +

Your Passkeys

Loading credentials...

- + @@ -31,31 +31,27 @@ Logout - +

📱 Add Device

- + - + diff --git a/static/profile.js b/static/profile.js index 9325362..55343d0 100644 --- a/static/profile.js +++ b/static/profile.js @@ -61,28 +61,39 @@ function closeDeviceLinkDialog() { } // Generate device link function -function generateDeviceLink() { +async 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) + try { + const response = await fetch('/api/create-device-link', { + method: 'POST', + credentials: 'include' + }) + + const result = await response.json() + + if (result.error) { + throw new Error(result.error) + } // Update UI with the link const deviceLinkText = document.getElementById('deviceLinkText') - const deviceToken = document.getElementById('deviceToken') if (deviceLinkText) { - deviceLinkText.textContent = result.addition_link - } + deviceLinkText.href = result.addition_link + deviceLinkText.textContent = result.addition_link.replace(/^[a-z]+:\/\//i, '') - if (deviceToken) { - deviceToken.textContent = result.token + // Add click event listener for copying the link + 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 @@ -103,10 +114,9 @@ function generateDeviceLink() { } clearStatus('deviceAdditionStatus') - }) - .catch(error => { + } catch (error) { showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error') - }) + } } // Make functions available globally for onclick handlers diff --git a/static/style.css b/static/style.css index 32bd8e9..c3fe9a8 100644 --- a/static/style.css +++ b/static/style.css @@ -1,7 +1,7 @@ /* Passkey Authentication - Main Styles */ -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); @@ -11,7 +11,7 @@ body { justify-content: center; } -.container { +.container { background: white; padding: 40px; border-radius: 15px; @@ -59,7 +59,7 @@ input[type="text"]:focus { border-color: #667eea; } -button { +button { width: 100%; padding: 15px; margin-bottom: 15px; @@ -326,18 +326,3 @@ button:disabled { color: #495057; 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; -}