Compare commits
3 Commits
0f71f80446
...
d4e5497406
| Author | SHA1 | Date | |
|---|---|---|---|
|
d4e5497406 | ||
|
|
e7f0e4ac1b | ||
|
|
28911d117e |
@ -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>
|
||||
@ -84,19 +84,21 @@ function showDeviceAdditionView() {
|
||||
}
|
||||
}
|
||||
|
||||
function showDashboardView() {
|
||||
async function showDashboardView() {
|
||||
if (window.location.pathname !== '/auth/profile') {
|
||||
window.location.href = '/auth/profile'
|
||||
return
|
||||
}
|
||||
showView('profileView')
|
||||
clearStatus('profileStatus')
|
||||
loadUserInfo().then(() => {
|
||||
|
||||
try {
|
||||
await loadUserInfo()
|
||||
updateUserInfo()
|
||||
loadCredentials()
|
||||
}).catch(error => {
|
||||
await loadCredentials()
|
||||
} catch (error) {
|
||||
showStatus('profileStatus', `Failed to load user info: ${error.message}`, 'error')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dashboard - 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">
|
||||
<!-- Dashboard View -->
|
||||
<div id="dashboardView" class="view active">
|
||||
<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>
|
||||
|
||||
<!-- Device Addition Section -->
|
||||
<div id="deviceLinkSection" style="display: none;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
<script>
|
||||
// Initialize the dashboard view when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeApp();
|
||||
});
|
||||
|
||||
// Override the generateAndShowDeviceLink function to show the device link section
|
||||
function generateAndShowDeviceLink() {
|
||||
clearStatus('dashboardStatus');
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
// Show the device link section
|
||||
document.getElementById('deviceLinkSection').style.display = 'block';
|
||||
|
||||
showStatus('dashboardStatus', 'Device link generated successfully!', 'success');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error generating device link:', error);
|
||||
showStatus('dashboardStatus', `Failed to generate device link: ${error.message}`, 'error');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,32 +2,32 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize the app
|
||||
initializeApp();
|
||||
initializeApp()
|
||||
|
||||
// Authentication form handler
|
||||
const authForm = document.getElementById('authenticationForm');
|
||||
const authForm = document.getElementById('authenticationForm')
|
||||
if (authForm) {
|
||||
const authSubmitBtn = authForm.querySelector('button[type="submit"]');
|
||||
const authSubmitBtn = authForm.querySelector('button[type="submit"]')
|
||||
|
||||
authForm.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault();
|
||||
authSubmitBtn.disabled = true;
|
||||
clearStatus('loginStatus');
|
||||
ev.preventDefault()
|
||||
authSubmitBtn.disabled = true
|
||||
clearStatus('loginStatus')
|
||||
|
||||
try {
|
||||
showStatus('loginStatus', 'Starting authentication...', 'info');
|
||||
await authenticate();
|
||||
showStatus('loginStatus', 'Authentication successful!', 'success');
|
||||
showStatus('loginStatus', 'Starting authentication...', 'info')
|
||||
await authenticate()
|
||||
showStatus('loginStatus', 'Authentication successful!', 'success')
|
||||
|
||||
// Navigate to profile
|
||||
setTimeout(() => {
|
||||
window.location.href = '/auth/profile';
|
||||
}, 1000);
|
||||
window.location.href = '/auth/profile'
|
||||
}, 1000)
|
||||
} catch (err) {
|
||||
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error');
|
||||
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error')
|
||||
} finally {
|
||||
authSubmitBtn.disabled = false;
|
||||
authSubmitBtn.disabled = false
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
36
static/profile-dialog.css
Normal file
36
static/profile-dialog.css
Normal 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;
|
||||
}
|
||||
@ -3,69 +3,10 @@
|
||||
<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>
|
||||
<style>
|
||||
/* Dialog backdrop and blur effects */
|
||||
.dialog-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 998;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog-backdrop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
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);
|
||||
}
|
||||
|
||||
/* Dark mode dialog styling */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#deviceLinkDialog {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent scrolling when dialog is open */
|
||||
body.dialog-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@ -74,12 +15,12 @@
|
||||
<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>
|
||||
@ -90,31 +31,27 @@
|
||||
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">
|
||||
<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>
|
||||
<p><a href="#" id="deviceLinkText"></a></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>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>
|
||||
@ -122,90 +59,6 @@
|
||||
</div>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
<script>
|
||||
// Initialize the profile view when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeApp();
|
||||
});
|
||||
|
||||
// Open device link dialog
|
||||
function openDeviceLinkDialog() {
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const container = document.querySelector('.container');
|
||||
const body = document.body;
|
||||
|
||||
// Add blur and disable effects
|
||||
container.classList.add('dialog-open');
|
||||
body.classList.add('dialog-open');
|
||||
|
||||
dialog.showModal();
|
||||
generateDeviceLink();
|
||||
}
|
||||
|
||||
// Close device link dialog
|
||||
function closeDeviceLinkDialog() {
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const container = document.querySelector('.container');
|
||||
const body = document.body;
|
||||
|
||||
// Remove blur and disable effects
|
||||
container.classList.remove('dialog-open');
|
||||
body.classList.remove('dialog-open');
|
||||
|
||||
dialog.close();
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
// 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
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error generating device link:', error);
|
||||
showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
// Close dialog when clicking outside
|
||||
document.getElementById('deviceLinkDialog').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeDeviceLinkDialog();
|
||||
}
|
||||
});
|
||||
|
||||
// Close dialog when pressing Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && document.getElementById('deviceLinkDialog').open) {
|
||||
closeDeviceLinkDialog();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="/static/profile.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,96 +2,107 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize the app
|
||||
initializeApp();
|
||||
|
||||
initializeApp()
|
||||
|
||||
// Setup dialog event handlers
|
||||
setupDialogHandlers();
|
||||
});
|
||||
setupDialogHandlers()
|
||||
})
|
||||
|
||||
// Setup dialog event handlers
|
||||
function setupDialogHandlers() {
|
||||
// Close dialog when clicking outside
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const dialog = document.getElementById('deviceLinkDialog')
|
||||
if (dialog) {
|
||||
dialog.addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeDeviceLinkDialog();
|
||||
closeDeviceLinkDialog()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// Close dialog when pressing Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const dialog = document.getElementById('deviceLinkDialog')
|
||||
if (e.key === 'Escape' && dialog && dialog.open) {
|
||||
closeDeviceLinkDialog();
|
||||
closeDeviceLinkDialog()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// Open device link dialog
|
||||
function openDeviceLinkDialog() {
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const container = document.querySelector('.container');
|
||||
const body = document.body;
|
||||
|
||||
const dialog = document.getElementById('deviceLinkDialog')
|
||||
const container = document.querySelector('.container')
|
||||
const body = document.body
|
||||
|
||||
if (dialog && container && body) {
|
||||
// Add blur and disable effects
|
||||
container.classList.add('dialog-open');
|
||||
body.classList.add('dialog-open');
|
||||
|
||||
dialog.showModal();
|
||||
generateDeviceLink();
|
||||
container.classList.add('dialog-open')
|
||||
body.classList.add('dialog-open')
|
||||
|
||||
dialog.showModal()
|
||||
generateDeviceLink()
|
||||
}
|
||||
}
|
||||
|
||||
// Close device link dialog
|
||||
function closeDeviceLinkDialog() {
|
||||
const dialog = document.getElementById('deviceLinkDialog');
|
||||
const container = document.querySelector('.container');
|
||||
const body = document.body;
|
||||
|
||||
const dialog = document.getElementById('deviceLinkDialog')
|
||||
const container = document.querySelector('.container')
|
||||
const body = document.body
|
||||
|
||||
if (dialog && container && body) {
|
||||
// Remove blur and disable effects
|
||||
container.classList.remove('dialog-open');
|
||||
body.classList.remove('dialog-open');
|
||||
|
||||
dialog.close();
|
||||
container.classList.remove('dialog-open')
|
||||
body.classList.remove('dialog-open')
|
||||
|
||||
dialog.close()
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
async function generateDeviceLink() {
|
||||
clearStatus('deviceAdditionStatus')
|
||||
showStatus('deviceAdditionStatus', 'Generating device link...', 'info')
|
||||
|
||||
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');
|
||||
|
||||
const deviceLinkText = document.getElementById('deviceLinkText')
|
||||
|
||||
if (deviceLinkText) {
|
||||
deviceLinkText.textContent = result.addition_link;
|
||||
deviceLinkText.href = result.addition_link
|
||||
deviceLinkText.textContent = result.addition_link.replace(/^[a-z]+:\/\//i, '')
|
||||
|
||||
// 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')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (deviceToken) {
|
||||
deviceToken.textContent = result.token;
|
||||
}
|
||||
|
||||
|
||||
// Store link globally for copy function
|
||||
window.currentDeviceLink = result.addition_link;
|
||||
|
||||
window.currentDeviceLink = result.addition_link
|
||||
|
||||
// Generate QR code
|
||||
const qrCodeEl = document.getElementById('qrCode');
|
||||
const qrCodeEl = document.getElementById('qrCode')
|
||||
if (qrCodeEl && typeof QRCode !== 'undefined') {
|
||||
qrCodeEl.innerHTML = '';
|
||||
qrCodeEl.innerHTML = ''
|
||||
new QRCode(qrCodeEl, {
|
||||
text: result.addition_link,
|
||||
width: 200,
|
||||
@ -99,17 +110,15 @@ function generateDeviceLink() {
|
||||
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');
|
||||
});
|
||||
|
||||
clearStatus('deviceAdditionStatus')
|
||||
} catch (error) {
|
||||
showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// Make functions available globally for onclick handlers
|
||||
window.openDeviceLinkDialog = openDeviceLinkDialog;
|
||||
window.closeDeviceLinkDialog = closeDeviceLinkDialog;
|
||||
window.openDeviceLinkDialog = openDeviceLinkDialog
|
||||
window.closeDeviceLinkDialog = closeDeviceLinkDialog
|
||||
|
||||
@ -2,34 +2,34 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize the app
|
||||
initializeApp();
|
||||
initializeApp()
|
||||
|
||||
// Registration form handler
|
||||
const regForm = document.getElementById('registrationForm');
|
||||
const regForm = document.getElementById('registrationForm')
|
||||
if (regForm) {
|
||||
const regSubmitBtn = regForm.querySelector('button[type="submit"]');
|
||||
const regSubmitBtn = regForm.querySelector('button[type="submit"]')
|
||||
|
||||
regForm.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault();
|
||||
regSubmitBtn.disabled = true;
|
||||
clearStatus('registerStatus');
|
||||
ev.preventDefault()
|
||||
regSubmitBtn.disabled = true
|
||||
clearStatus('registerStatus')
|
||||
|
||||
const user_name = (new FormData(regForm)).get('username');
|
||||
const user_name = (new FormData(regForm)).get('username')
|
||||
|
||||
try {
|
||||
showStatus('registerStatus', 'Starting registration...', 'info');
|
||||
await register(user_name);
|
||||
showStatus('registerStatus', `Registration successful for ${user_name}!`, 'success');
|
||||
showStatus('registerStatus', 'Starting registration...', 'info')
|
||||
await register(user_name)
|
||||
showStatus('registerStatus', `Registration successful for ${user_name}!`, 'success')
|
||||
|
||||
// Auto-login after successful registration
|
||||
setTimeout(() => {
|
||||
window.location.href = '/auth/profile';
|
||||
}, 1500);
|
||||
window.location.href = '/auth/profile'
|
||||
}, 1500)
|
||||
} catch (err) {
|
||||
showStatus('registerStatus', `Registration failed: ${err.message}`, 'error');
|
||||
showStatus('registerStatus', `Registration failed: ${err.message}`, 'error')
|
||||
} finally {
|
||||
regSubmitBtn.disabled = false;
|
||||
regSubmitBtn.disabled = false
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -2,57 +2,58 @@
|
||||
|
||||
// Initialize the app based on current page
|
||||
function initializeApp() {
|
||||
checkExistingSession();
|
||||
checkExistingSession()
|
||||
}
|
||||
|
||||
// Show status message
|
||||
function showStatus(elementId, message, type = 'info') {
|
||||
const statusEl = document.getElementById(elementId);
|
||||
const statusEl = document.getElementById(elementId)
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = `<div class="status ${type}">${message}</div>`;
|
||||
statusEl.innerHTML = `<div class="status ${type}">${message}</div>`
|
||||
}
|
||||
}
|
||||
|
||||
// Clear status message
|
||||
function clearStatus(elementId) {
|
||||
const statusEl = document.getElementById(elementId);
|
||||
const statusEl = document.getElementById(elementId)
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = '';
|
||||
statusEl.innerHTML = ''
|
||||
}
|
||||
}
|
||||
|
||||
// Check if user is already logged in on page load
|
||||
async function checkExistingSession() {
|
||||
const isLoggedIn = await validateStoredToken();
|
||||
const path = window.location.pathname;
|
||||
const isLoggedIn = await validateStoredToken()
|
||||
const path = window.location.pathname
|
||||
|
||||
// Protected routes that require authentication
|
||||
const protectedRoutes = ['/auth/profile'];
|
||||
const protectedRoutes = ['/auth/profile']
|
||||
|
||||
if (isLoggedIn) {
|
||||
// User is logged in
|
||||
if (path === '/auth/login' || path === '/auth/register' || path === '/') {
|
||||
// Redirect to profile if accessing login/register pages while logged in
|
||||
window.location.href = '/auth/profile';
|
||||
window.location.href = '/auth/profile'
|
||||
} else if (path === '/auth/add-device') {
|
||||
// Redirect old add-device route to profile
|
||||
window.location.href = '/auth/profile';
|
||||
window.location.href = '/auth/profile'
|
||||
} else if (protectedRoutes.includes(path)) {
|
||||
// Stay on current protected page and load user data
|
||||
if (path === '/auth/profile') {
|
||||
loadUserInfo().then(() => {
|
||||
updateUserInfo();
|
||||
loadCredentials();
|
||||
}).catch(error => {
|
||||
showStatus('profileStatus', `Failed to load user info: ${error.message}`, 'error');
|
||||
});
|
||||
try {
|
||||
await loadUserInfo()
|
||||
updateUserInfo()
|
||||
await loadCredentials()
|
||||
} catch (error) {
|
||||
showStatus('profileStatus', `Failed to load user info: ${error.message}`, 'error')
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// User is not logged in
|
||||
if (protectedRoutes.includes(path) || path === '/auth/add-device') {
|
||||
// Redirect to login if accessing protected pages without authentication
|
||||
window.location.href = '/auth/login';
|
||||
window.location.href = '/auth/login'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -63,12 +64,12 @@ async function validateStoredToken() {
|
||||
const response = await fetch('/api/validate-token', {
|
||||
method: 'GET',
|
||||
credentials: 'include'
|
||||
});
|
||||
})
|
||||
|
||||
const result = await response.json();
|
||||
return result.status === 'success';
|
||||
const result = await response.json()
|
||||
return result.status === 'success'
|
||||
} catch (error) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,28 +77,28 @@ async function validateStoredToken() {
|
||||
async function copyDeviceLink() {
|
||||
try {
|
||||
if (window.currentDeviceLink) {
|
||||
await navigator.clipboard.writeText(window.currentDeviceLink);
|
||||
await navigator.clipboard.writeText(window.currentDeviceLink)
|
||||
|
||||
const copyButton = document.querySelector('.copy-button');
|
||||
const copyButton = document.querySelector('.copy-button')
|
||||
if (copyButton) {
|
||||
const originalText = copyButton.textContent;
|
||||
copyButton.textContent = 'Copied!';
|
||||
copyButton.style.background = '#28a745';
|
||||
const originalText = copyButton.textContent
|
||||
copyButton.textContent = 'Copied!'
|
||||
copyButton.style.background = '#28a745'
|
||||
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = originalText;
|
||||
copyButton.style.background = '#28a745';
|
||||
}, 2000);
|
||||
copyButton.textContent = originalText
|
||||
copyButton.style.background = '#28a745'
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to copy link:', error);
|
||||
const linkText = document.getElementById('deviceLinkText');
|
||||
console.error('Failed to copy link:', error)
|
||||
const linkText = document.getElementById('deviceLinkText')
|
||||
if (linkText) {
|
||||
const range = document.createRange();
|
||||
range.selectNode(linkText);
|
||||
window.getSelection().removeAllRanges();
|
||||
window.getSelection().addRange(range);
|
||||
const range = document.createRange()
|
||||
range.selectNode(linkText)
|
||||
window.getSelection().removeAllRanges()
|
||||
window.getSelection().addRange(range)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user