Refactoring in progress, needs cleanup.

This commit is contained in:
LeoVasanko committed 2025-07-08 03:00:02 +00:00
1 parent ef01fde84a
commit 3135def2d7
15 files changed
+907 -116

No files matched your search

+1 -1
View File
@@ -191,7 +191,7 @@ async def get_index():
<html>
<head>
<title>WebAuthn Registration Demo</title>
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
<script src="/static/simplewebauthn-browser.min.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
.container { text-align: center; }
+36 -2
View File
@@ -297,8 +297,42 @@ app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
@app.get("/")
async def get_index():
"""Serve the main HTML page"""
return FileResponse(STATIC_DIR / "index.html")
"""Redirect to login page"""
from fastapi.responses import RedirectResponse
return RedirectResponse(url="/auth/login", status_code=302)
@app.get("/auth/login")
async def get_login_page():
"""Serve the login page"""
return FileResponse(STATIC_DIR / "login.html")
@app.get("/auth/register")
async def get_register_page():
"""Serve the register page"""
return FileResponse(STATIC_DIR / "register.html")
@app.get("/auth/dashboard")
async def get_dashboard_page():
"""Redirect to profile (dashboard is now profile)"""
from fastapi.responses import RedirectResponse
return RedirectResponse(url="/auth/profile", status_code=302)
@app.get("/auth/profile")
async def get_profile_page():
"""Serve the profile page"""
return FileResponse(STATIC_DIR / "profile.html")
@app.get("/auth/reset")
async def get_reset_page_without_token():
"""Serve the reset page without a token"""
return FileResponse(STATIC_DIR / "reset.html")
@app.get("/reset/{token}")
+93
View File
@@ -0,0 +1,93 @@
<!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>
+113 -111
View File
@@ -51,32 +51,51 @@ async function setSessionCookie(sessionToken) {
function showView(viewId) {
document.querySelectorAll('.view').forEach(view => view.classList.remove('active'))
document.getElementById(viewId).classList.add('active')
const targetView = document.getElementById(viewId)
if (targetView) {
targetView.classList.add('active')
}
}
function showLoginView() {
if (window.location.pathname !== '/auth/login') {
window.location.href = '/auth/login'
return
}
showView('loginView')
clearStatus('loginStatus')
}
function showRegisterView() {
if (window.location.pathname !== '/auth/register') {
window.location.href = '/auth/register'
return
}
showView('registerView')
clearStatus('registerStatus')
}
function showDeviceAdditionView() {
showView('deviceAdditionView')
clearStatus('deviceAdditionStatus')
// This function is no longer needed as device addition is now a dialog
// Redirect to profile page if someone tries to access the old route
if (window.location.pathname === '/auth/add-device') {
window.location.href = '/auth/profile'
return
}
}
function showDashboardView() {
showView('dashboardView')
clearStatus('dashboardStatus')
if (window.location.pathname !== '/auth/profile') {
window.location.href = '/auth/profile'
return
}
showView('profileView')
clearStatus('profileStatus')
loadUserInfo().then(() => {
updateUserInfo()
loadCredentials()
}).catch(error => {
showStatus('dashboardStatus', `Failed to load user info: ${error.message}`, 'error')
showStatus('profileStatus', `Failed to load user info: ${error.message}`, 'error')
})
}
@@ -97,61 +116,6 @@ function clearStatus(elementId) {
// Device Addition & QR Code
// ========================================
async function generateAndShowDeviceLink() {
showView('deviceAdditionView')
clearStatus('deviceAdditionStatus')
try {
showStatus('deviceAdditionStatus', 'Generating device link...', 'info')
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
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 qrCodeContainer = document.getElementById('qrCode')
try {
if (typeof QRCode === 'undefined') {
throw new Error('QRCode library not loaded')
}
qrCodeContainer.innerHTML = ''
new QRCode(qrCodeContainer, {
text: result.addition_link,
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.M
})
} catch (qrError) {
console.error('QR code generation failed:', qrError)
qrCodeContainer.innerHTML = `
<div style="font-family: monospace; font-size: 12px; line-height: 1; background: white; padding: 10px; border: 1px solid #ccc; display: inline-block;">
QR Code generation failed. Use the link below instead.
</div>
`
}
showStatus('deviceAdditionStatus', 'Device link generated successfully!', 'success')
} catch (error) {
showStatus('deviceAdditionStatus', `Failed to generate device link: ${error.message}`, 'error')
}
}
async function copyDeviceLink() {
try {
if (window.currentDeviceLink) {
@@ -324,7 +288,8 @@ async function authenticate() {
// Load user credentials
async function loadCredentials() {
try {
showStatus('dashboardStatus', 'Loading credentials...', 'info')
const statusElement = document.getElementById('profileStatus') ? 'profileStatus' : 'dashboardStatus'
showStatus(statusElement, 'Loading credentials...', 'info')
const response = await fetch('/api/user-credentials', {
method: 'GET',
@@ -337,9 +302,10 @@ async function loadCredentials() {
currentCredentials = result.credentials
aaguidInfo = result.aaguid_info || {}
updateCredentialList()
clearStatus('dashboardStatus')
clearStatus(statusElement)
} catch (error) {
showStatus('dashboardStatus', `Failed to load credentials: ${error.message}`, 'error')
const statusElement = document.getElementById('profileStatus') ? 'profileStatus' : 'dashboardStatus'
showStatus(statusElement, `Failed to load credentials: ${error.message}`, 'error')
}
}
@@ -459,72 +425,108 @@ async function logout() {
currentUser = null
currentCredentials = []
aaguidInfo = {}
showLoginView()
window.location.href = '/auth/login'
}
// Check if user is already logged in on page load
async function checkExistingSession() {
if (await validateStoredToken()) {
showDashboardView()
const isLoggedIn = await validateStoredToken()
const path = window.location.pathname
// Protected routes that require authentication
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'
} else if (path === '/auth/add-device') {
// Redirect old add-device route to 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')
})
}
}
} else {
showLoginView()
// 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'
}
}
}
// Initialize the app based on current page
function initializeApp() {
checkExistingSession()
}
// Form event handlers
document.addEventListener('DOMContentLoaded', function() {
// Check for existing session on page load
checkExistingSession()
initializeApp()
// Registration form
const regForm = document.getElementById('registrationForm')
const regSubmitBtn = regForm.querySelector('button[type="submit"]')
regForm.addEventListener('submit', async (ev) => {
ev.preventDefault()
regSubmitBtn.disabled = true
clearStatus('registerStatus')
if (regForm) {
const regSubmitBtn = regForm.querySelector('button[type="submit"]')
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')
regForm.addEventListener('submit', async (ev) => {
ev.preventDefault()
regSubmitBtn.disabled = true
clearStatus('registerStatus')
// Auto-login after successful registration
setTimeout(() => {
showDashboardView()
}, 1500)
} catch (err) {
showStatus('registerStatus', `Registration failed: ${err.message}`, 'error')
} finally {
regSubmitBtn.disabled = false
}
})
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')
// Auto-login after successful registration
setTimeout(() => {
window.location.href = '/auth/profile'
}, 1500)
} catch (err) {
showStatus('registerStatus', `Registration failed: ${err.message}`, 'error')
} finally {
regSubmitBtn.disabled = false
}
})
}
// Authentication form
const authForm = document.getElementById('authenticationForm')
const authSubmitBtn = authForm.querySelector('button[type="submit"]')
authForm.addEventListener('submit', async (ev) => {
ev.preventDefault()
authSubmitBtn.disabled = true
clearStatus('loginStatus')
if (authForm) {
const authSubmitBtn = authForm.querySelector('button[type="submit"]')
try {
showStatus('loginStatus', 'Starting authentication...', 'info')
await authenticate()
showStatus('loginStatus', 'Authentication successful!', 'success')
authForm.addEventListener('submit', async (ev) => {
ev.preventDefault()
authSubmitBtn.disabled = true
clearStatus('loginStatus')
// Navigate to dashboard
setTimeout(() => {
showDashboardView()
}, 1000)
} catch (err) {
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error')
} finally {
authSubmitBtn.disabled = false
}
})
try {
showStatus('loginStatus', 'Starting authentication...', 'info')
await authenticate()
showStatus('loginStatus', 'Authentication successful!', 'success')
// Navigate to profile
setTimeout(() => {
window.location.href = '/auth/profile'
}, 1000)
} catch (err) {
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error')
} finally {
authSubmitBtn.disabled = false
}
})
}
})
+106
View File
@@ -0,0 +1,106 @@
<!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>
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<title>Passkey Authentication</title>
<link rel="stylesheet" href="/static/style.css">
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
<script src="/static/simplewebauthn-browser.min.js"></script>
<script src="/static/qrcodejs/qrcode.min.js"></script>
<script src="/static/awaitable-websocket.js"></script>
</head>
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Login - Passkey Authentication</title>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/simplewebauthn-browser.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="window.location.href='/auth/register'">
Don't have an account? Register here
</p>
</div>
</div>
<script src="/static/app.js"></script>
<script src="/static/util.js"></script>
<script src="/static/login.js"></script>
</body>
</html>
+33
View File
@@ -0,0 +1,33 @@
// Login page specific functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize the app
initializeApp();
// Authentication form handler
const authForm = document.getElementById('authenticationForm');
if (authForm) {
const authSubmitBtn = authForm.querySelector('button[type="submit"]');
authForm.addEventListener('submit', async (ev) => {
ev.preventDefault();
authSubmitBtn.disabled = true;
clearStatus('loginStatus');
try {
showStatus('loginStatus', 'Starting authentication...', 'info');
await authenticate();
showStatus('loginStatus', 'Authentication successful!', 'success');
// Navigate to profile
setTimeout(() => {
window.location.href = '/auth/profile';
}, 1000);
} catch (err) {
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error');
} finally {
authSubmitBtn.disabled = false;
}
});
}
});
+211
View File
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html>
<head>
<title>Profile - 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>
<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">
<!-- 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">
<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>
</div>
</div>
<button onclick="closeDeviceLinkDialog()" class="btn-secondary">
Close
</button>
</dialog>
</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>
</body>
</html>
+115
View File
@@ -0,0 +1,115 @@
// Profile page specific functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize the app
initializeApp();
// Setup dialog event handlers
setupDialogHandlers();
});
// Setup dialog event handlers
function setupDialogHandlers() {
// Close dialog when clicking outside
const dialog = document.getElementById('deviceLinkDialog');
if (dialog) {
dialog.addEventListener('click', function(e) {
if (e.target === this) {
closeDeviceLinkDialog();
}
});
}
// Close dialog when pressing Escape key
document.addEventListener('keydown', function(e) {
const dialog = document.getElementById('deviceLinkDialog');
if (e.key === 'Escape' && dialog && dialog.open) {
closeDeviceLinkDialog();
}
});
}
// Open device link dialog
function openDeviceLinkDialog() {
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();
}
}
// Close device link dialog
function closeDeviceLinkDialog() {
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();
}
}
// 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
const deviceLinkText = document.getElementById('deviceLinkText');
const deviceToken = document.getElementById('deviceToken');
if (deviceLinkText) {
deviceLinkText.textContent = result.addition_link;
}
if (deviceToken) {
deviceToken.textContent = result.token;
}
// Store link globally for copy function
window.currentDeviceLink = result.addition_link;
// Generate QR code
const qrCodeEl = document.getElementById('qrCode');
if (qrCodeEl && typeof QRCode !== 'undefined') {
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');
});
}
// Make functions available globally for onclick handlers
window.openDeviceLinkDialog = openDeviceLinkDialog;
window.closeDeviceLinkDialog = closeDeviceLinkDialog;
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Register - Passkey Authentication</title>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/simplewebauthn-browser.min.js"></script>
<script src="/static/awaitable-websocket.js"></script>
</head>
<body>
<div class="container">
<!-- Register View -->
<div id="registerView" class="view active">
<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="window.location.href='/auth/login'">
Already have an account? Login here
</p>
</div>
</div>
<script src="/static/app.js"></script>
<script src="/static/util.js"></script>
<script src="/static/register.js"></script>
</body>
</html>
+35
View File
@@ -0,0 +1,35 @@
// Register page specific functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize the app
initializeApp();
// Registration form handler
const regForm = document.getElementById('registrationForm');
if (regForm) {
const regSubmitBtn = regForm.querySelector('button[type="submit"]');
regForm.addEventListener('submit', async (ev) => {
ev.preventDefault();
regSubmitBtn.disabled = true;
clearStatus('registerStatus');
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');
// Auto-login after successful registration
setTimeout(() => {
window.location.href = '/auth/profile';
}, 1500);
} catch (err) {
showStatus('registerStatus', `Registration failed: ${err.message}`, 'error');
} finally {
regSubmitBtn.disabled = false;
}
});
}
});
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<title>Add Device - Passkey Authentication</title>
<link rel="stylesheet" href="/static/style.css">
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
<script src="/static/simplewebauthn-browser.min.js"></script>
<script src="/static/qrcodejs/qrcode.min.js"></script>
<script src="/static/awaitable-websocket.js"></script>
</head>
+2
View File
@@ -0,0 +1,2 @@
/* [@simplewebauthn/browser@13.1.2] */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).SimpleWebAuthnBrowser={})}(this,(function(e){"use strict";function t(e){const t=new Uint8Array(e);let r="";for(const e of t)r+=String.fromCharCode(e);return btoa(r).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}function r(e){const t=e.replace(/-/g,"+").replace(/_/g,"/"),r=(4-t.length%4)%4,n=t.padEnd(t.length+r,"="),o=atob(n),i=new ArrayBuffer(o.length),a=new Uint8Array(i);for(let e=0;e<o.length;e++)a[e]=o.charCodeAt(e);return i}function n(){return o.stubThis(void 0!==globalThis?.PublicKeyCredential&&"function"==typeof globalThis.PublicKeyCredential)}const o={stubThis:e=>e};function i(e){const{id:t}=e;return{...e,id:r(t),transports:e.transports}}function a(e){return"localhost"===e||/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/i.test(e)}class s extends Error{constructor({message:e,code:t,cause:r,name:n}){super(e,{cause:r}),Object.defineProperty(this,"code",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.name=n??r.name,this.code=t}}const l=new class{constructor(){Object.defineProperty(this,"controller",{enumerable:!0,configurable:!0,writable:!0,value:void 0})}createNewAbortSignal(){if(this.controller){const e=new Error("Cancelling existing WebAuthn API call for new one");e.name="AbortError",this.controller.abort(e)}const e=new AbortController;return this.controller=e,e.signal}cancelCeremony(){if(this.controller){const e=new Error("Manually cancelling existing WebAuthn API call");e.name="AbortError",this.controller.abort(e),this.controller=void 0}}},c=["cross-platform","platform"];function u(e){if(e&&!(c.indexOf(e)<0))return e}function d(e,t){console.warn(`The browser extension that intercepted this WebAuthn API call incorrectly implemented ${e}. You should report this error to them.\n`,t)}function h(){if(!n())return p.stubThis(new Promise((e=>e(!1))));const e=globalThis.PublicKeyCredential;return void 0===e?.isConditionalMediationAvailable?p.stubThis(new Promise((e=>e(!1)))):p.stubThis(e.isConditionalMediationAvailable())}const p={stubThis:e=>e};e.WebAuthnAbortService=l,e.WebAuthnError=s,e._browserSupportsWebAuthnAutofillInternals=p,e._browserSupportsWebAuthnInternals=o,e.base64URLStringToBuffer=r,e.browserSupportsWebAuthn=n,e.browserSupportsWebAuthnAutofill=h,e.bufferToBase64URLString=t,e.platformAuthenticatorIsAvailable=function(){return n()?PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable():new Promise((e=>e(!1)))},e.startAuthentication=async function(e){!e.optionsJSON&&e.challenge&&(console.warn("startAuthentication() was not called correctly. It will try to continue with the provided options, but this call should be refactored to use the expected call structure instead. See https://simplewebauthn.dev/docs/packages/browser#typeerror-cannot-read-properties-of-undefined-reading-challenge for more information."),e={optionsJSON:e});const{optionsJSON:o,useBrowserAutofill:c=!1,verifyBrowserAutofillInput:d=!0}=e;if(!n())throw new Error("WebAuthn is not supported in this browser");let p;0!==o.allowCredentials?.length&&(p=o.allowCredentials?.map(i));const f={...o,challenge:r(o.challenge),allowCredentials:p},b={};if(c){if(!await h())throw Error("Browser does not support WebAuthn autofill");if(document.querySelectorAll("input[autocomplete$='webauthn']").length<1&&d)throw Error('No <input> with "webauthn" as the only or last value in its `autocomplete` attribute was detected');b.mediation="conditional",f.allowCredentials=[]}let R;b.publicKey=f,b.signal=l.createNewAbortSignal();try{R=await navigator.credentials.get(b)}catch(e){throw function({error:e,options:t}){const{publicKey:r}=t;if(!r)throw Error("options was missing required publicKey property");if("AbortError"===e.name){if(t.signal instanceof AbortSignal)return new s({message:"Authentication ceremony was sent an abort signal",code:"ERROR_CEREMONY_ABORTED",cause:e})}else{if("NotAllowedError"===e.name)return new s({message:e.message,code:"ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY",cause:e});if("SecurityError"===e.name){const t=globalThis.location.hostname;if(!a(t))return new s({message:`${globalThis.location.hostname} is an invalid domain`,code:"ERROR_INVALID_DOMAIN",cause:e});if(r.rpId!==t)return new s({message:`The RP ID "${r.rpId}" is invalid for this domain`,code:"ERROR_INVALID_RP_ID",cause:e})}else if("UnknownError"===e.name)return new s({message:"The authenticator was unable to process the specified options, or could not create a new assertion signature",code:"ERROR_AUTHENTICATOR_GENERAL_ERROR",cause:e})}return e}({error:e,options:b})}if(!R)throw new Error("Authentication was not completed");const{id:g,rawId:w,response:A,type:E}=R;let m;return A.userHandle&&(m=t(A.userHandle)),{id:g,rawId:t(w),response:{authenticatorData:t(A.authenticatorData),clientDataJSON:t(A.clientDataJSON),signature:t(A.signature),userHandle:m},type:E,clientExtensiLine truncated
+103
View File
@@ -0,0 +1,103 @@
// Shared utility functions for all views
// Initialize the app based on current page
function initializeApp() {
checkExistingSession();
}
// Show status message
function showStatus(elementId, message, type = 'info') {
const statusEl = document.getElementById(elementId);
if (statusEl) {
statusEl.innerHTML = `<div class="status ${type}">${message}</div>`;
}
}
// Clear status message
function clearStatus(elementId) {
const statusEl = document.getElementById(elementId);
if (statusEl) {
statusEl.innerHTML = '';
}
}
// Check if user is already logged in on page load
async function checkExistingSession() {
const isLoggedIn = await validateStoredToken();
const path = window.location.pathname;
// Protected routes that require authentication
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';
} else if (path === '/auth/add-device') {
// Redirect old add-device route to 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');
});
}
}
} 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';
}
}
}
// Validate stored token
async function validateStoredToken() {
try {
const response = await fetch('/api/validate-token', {
method: 'GET',
credentials: 'include'
});
const result = await response.json();
return result.status === 'success';
} catch (error) {
return false;
}
}
// Copy device link to clipboard
async function copyDeviceLink() {
try {
if (window.currentDeviceLink) {
await navigator.clipboard.writeText(window.currentDeviceLink);
const copyButton = document.querySelector('.copy-button');
if (copyButton) {
const originalText = copyButton.textContent;
copyButton.textContent = 'Copied!';
copyButton.style.background = '#28a745';
setTimeout(() => {
copyButton.textContent = originalText;
copyButton.style.background = '#28a745';
}, 2000);
}
}
} catch (error) {
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);
}
}
}