531 lines
16 KiB
JavaScript
531 lines
16 KiB
JavaScript
const { startRegistration, startAuthentication } = SimpleWebAuthnBrowser
|
|
|
|
// Global state
|
|
let currentUser = null
|
|
let currentCredentials = []
|
|
let aaguidInfo = {}
|
|
|
|
// ========================================
|
|
// Session Management
|
|
// ========================================
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
async function setSessionCookie(sessionToken) {
|
|
try {
|
|
const response = await fetch('/api/set-session', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${sessionToken}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
credentials: 'include'
|
|
})
|
|
|
|
const result = await response.json()
|
|
if (result.error) {
|
|
throw new Error(result.error)
|
|
}
|
|
|
|
return result
|
|
} catch (error) {
|
|
throw new Error(`Failed to set session cookie: ${error.message}`)
|
|
}
|
|
}
|
|
|
|
// ========================================
|
|
// View Management
|
|
// ========================================
|
|
|
|
function showView(viewId) {
|
|
document.querySelectorAll('.view').forEach(view => view.classList.remove('active'))
|
|
document.getElementById(viewId).classList.add('active')
|
|
}
|
|
|
|
function showLoginView() {
|
|
showView('loginView')
|
|
clearStatus('loginStatus')
|
|
}
|
|
|
|
function showRegisterView() {
|
|
showView('registerView')
|
|
clearStatus('registerStatus')
|
|
}
|
|
|
|
function showDeviceAdditionView() {
|
|
showView('deviceAdditionView')
|
|
clearStatus('deviceAdditionStatus')
|
|
}
|
|
|
|
function showDashboardView() {
|
|
showView('dashboardView')
|
|
clearStatus('dashboardStatus')
|
|
loadUserInfo().then(() => {
|
|
updateUserInfo()
|
|
loadCredentials()
|
|
}).catch(error => {
|
|
showStatus('dashboardStatus', `Failed to load user info: ${error.message}`, 'error')
|
|
})
|
|
}
|
|
|
|
// ========================================
|
|
// Status Management
|
|
// ========================================
|
|
|
|
function showStatus(elementId, message, type = 'info') {
|
|
const statusEl = document.getElementById(elementId)
|
|
statusEl.innerHTML = `<div class="status ${type}">${message}</div>`
|
|
}
|
|
|
|
function clearStatus(elementId) {
|
|
document.getElementById(elementId).innerHTML = ''
|
|
}
|
|
|
|
// ========================================
|
|
// 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) {
|
|
await navigator.clipboard.writeText(window.currentDeviceLink)
|
|
|
|
const copyButton = document.querySelector('.copy-button')
|
|
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')
|
|
const range = document.createRange()
|
|
range.selectNode(linkText)
|
|
window.getSelection().removeAllRanges()
|
|
window.getSelection().addRange(range)
|
|
}
|
|
}
|
|
|
|
// ========================================
|
|
// WebAuthn Operations
|
|
// ========================================
|
|
|
|
async function register(user_name) {
|
|
const ws = await aWebSocket('/ws/new_user_registration')
|
|
|
|
ws.send(JSON.stringify({ user_name }))
|
|
|
|
const optionsJSON = JSON.parse(await ws.recv())
|
|
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
|
|
|
const registrationResponse = await startRegistration({ optionsJSON })
|
|
ws.send(JSON.stringify(registrationResponse))
|
|
|
|
const result = JSON.parse(await ws.recv())
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
await setSessionCookie(result.session_token)
|
|
ws.close()
|
|
}
|
|
|
|
async function authenticate() {
|
|
const ws = await aWebSocket('/ws/authenticate')
|
|
|
|
const optionsJSON = JSON.parse(await ws.recv())
|
|
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
|
|
|
const authenticationResponse = await startAuthentication({ optionsJSON })
|
|
ws.send(JSON.stringify(authenticationResponse))
|
|
|
|
const result = JSON.parse(await ws.recv())
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
await setSessionCookie(result.session_token)
|
|
ws.close()
|
|
}
|
|
|
|
async function addNewCredential() {
|
|
try {
|
|
showStatus('dashboardStatus', 'Adding new passkey...', 'info')
|
|
|
|
const ws = await aWebSocket('/ws/add_credential')
|
|
|
|
const optionsJSON = JSON.parse(await ws.recv())
|
|
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
|
|
|
const registrationResponse = await startRegistration({ optionsJSON })
|
|
ws.send(JSON.stringify(registrationResponse))
|
|
|
|
const result = JSON.parse(await ws.recv())
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
ws.close()
|
|
|
|
showStatus('dashboardStatus', 'New passkey added successfully!', 'success')
|
|
|
|
setTimeout(() => {
|
|
loadCredentials()
|
|
clearStatus('dashboardStatus')
|
|
}, 2000)
|
|
|
|
} catch (error) {
|
|
showStatus('dashboardStatus', `Failed to add passkey: ${error.message}`, 'error')
|
|
}
|
|
}
|
|
|
|
// ========================================
|
|
// User Data Management
|
|
// ========================================
|
|
|
|
// User registration
|
|
async function register(user_name) {
|
|
try {
|
|
const ws = await aWebSocket('/ws/new_user_registration')
|
|
ws.send(JSON.stringify({user_name}))
|
|
|
|
// Registration chat
|
|
const optionsJSON = JSON.parse(await ws.recv())
|
|
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
|
|
|
showStatus('registerStatus', 'Save to your authenticator...', 'info')
|
|
|
|
const registrationResponse = await startRegistration({optionsJSON})
|
|
ws.send(JSON.stringify(registrationResponse))
|
|
|
|
const result = JSON.parse(await ws.recv())
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
ws.close()
|
|
|
|
// Set session cookie using the JWT token
|
|
await setSessionCookie(result.session_token)
|
|
|
|
// Set current user from registration result
|
|
currentUser = {
|
|
user_id: result.user_id,
|
|
user_name: user_name,
|
|
last_seen: new Date().toISOString()
|
|
}
|
|
|
|
return result
|
|
} catch (error) {
|
|
throw error
|
|
}
|
|
}
|
|
|
|
// User authentication
|
|
async function authenticate() {
|
|
try {
|
|
const ws = await aWebSocket('/ws/authenticate')
|
|
const optionsJSON = JSON.parse(await ws.recv())
|
|
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
|
|
|
showStatus('loginStatus', 'Please touch your authenticator...', 'info')
|
|
|
|
const authResponse = await startAuthentication({optionsJSON})
|
|
await ws.send(JSON.stringify(authResponse))
|
|
|
|
const result = JSON.parse(await ws.recv())
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
ws.close()
|
|
|
|
// Set session cookie using the JWT token
|
|
await setSessionCookie(result.session_token)
|
|
|
|
// Authentication successful, now get user info using HTTP endpoint
|
|
const userResponse = await fetch('/api/user-info', {
|
|
method: 'GET',
|
|
credentials: 'include'
|
|
})
|
|
|
|
const userInfo = await userResponse.json()
|
|
if (userInfo.error) throw new Error(`Server: ${userInfo.error}`)
|
|
|
|
currentUser = userInfo.user
|
|
|
|
return result
|
|
} catch (error) {
|
|
throw error
|
|
}
|
|
}
|
|
|
|
// Load user credentials
|
|
async function loadCredentials() {
|
|
try {
|
|
showStatus('dashboardStatus', 'Loading credentials...', 'info')
|
|
|
|
const response = await fetch('/api/user-credentials', {
|
|
method: 'GET',
|
|
credentials: 'include'
|
|
})
|
|
|
|
const result = await response.json()
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
currentCredentials = result.credentials
|
|
aaguidInfo = result.aaguid_info || {}
|
|
updateCredentialList()
|
|
clearStatus('dashboardStatus')
|
|
} catch (error) {
|
|
showStatus('dashboardStatus', `Failed to load credentials: ${error.message}`, 'error')
|
|
}
|
|
}
|
|
|
|
// Load user info using HTTP endpoint
|
|
async function loadUserInfo() {
|
|
try {
|
|
const response = await fetch('/api/user-info', {
|
|
method: 'GET',
|
|
credentials: 'include'
|
|
})
|
|
|
|
const result = await response.json()
|
|
if (result.error) throw new Error(`Server: ${result.error}`)
|
|
|
|
currentUser = result.user
|
|
} catch (error) {
|
|
throw error
|
|
}
|
|
}
|
|
|
|
// Update user info display
|
|
function updateUserInfo() {
|
|
const userInfoEl = document.getElementById('userInfo')
|
|
if (currentUser) {
|
|
userInfoEl.innerHTML = `
|
|
<h3>👤 ${currentUser.user_name}</h3>
|
|
<p><strong>Visits:</strong> ${currentUser.visits || 0}</p>
|
|
<p><strong>Member since:</strong> ${currentUser.created_at ? formatHumanReadableDate(currentUser.created_at) : 'N/A'}</p>
|
|
<p><strong>Last seen:</strong> ${currentUser.last_seen ? formatHumanReadableDate(currentUser.last_seen) : 'N/A'}</p>
|
|
`
|
|
}
|
|
}
|
|
|
|
// Update credential list display
|
|
function updateCredentialList() {
|
|
const credentialListEl = document.getElementById('credentialList')
|
|
|
|
if (currentCredentials.length === 0) {
|
|
credentialListEl.innerHTML = '<p>No passkeys found.</p>'
|
|
return
|
|
}
|
|
|
|
credentialListEl.innerHTML = currentCredentials.map(cred => {
|
|
// Get authenticator information from AAGUID
|
|
const authInfo = aaguidInfo[cred.aaguid]
|
|
const authName = authInfo ? authInfo.name : 'Unknown Authenticator'
|
|
|
|
// Determine which icon to use based on current theme (you can implement theme detection)
|
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
const iconKey = isDarkMode ? 'icon_dark' : 'icon_light'
|
|
const authIcon = authInfo && authInfo[iconKey] ? authInfo[iconKey] : null
|
|
|
|
// Check if this is the current session credential
|
|
const isCurrentSession = cred.is_current_session || false
|
|
|
|
return `
|
|
<div class="credential-item${isCurrentSession ? ' current-session' : ''}">
|
|
<div class="credential-header">
|
|
<div class="credential-icon">
|
|
${authIcon ? `<img src="${authIcon}" alt="${authName}" class="auth-icon" width="32" height="32">` : '<span class="auth-emoji">🔑</span>'}
|
|
</div>
|
|
<div class="credential-info">
|
|
<h4>${authName}</h4>
|
|
</div>
|
|
<div class="credential-dates">
|
|
<span class="date-label">Created:</span>
|
|
<span class="date-value">${formatHumanReadableDate(cred.created_at)}</span>
|
|
<span class="date-label">Last used:</span>
|
|
<span class="date-value">${formatHumanReadableDate(cred.last_used)}</span>
|
|
</div>
|
|
<div class="credential-actions">
|
|
<button onclick="deleteCredential('${cred.credential_id}')"
|
|
class="btn-delete-credential"
|
|
${isCurrentSession ? 'disabled title="Cannot delete current session credential"' : ''}>
|
|
🗑️
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}).join('')
|
|
}
|
|
|
|
// Helper function to format dates in a human-readable way
|
|
function formatHumanReadableDate(dateString) {
|
|
if (!dateString) return 'Never'
|
|
|
|
const date = new Date(dateString)
|
|
const now = new Date()
|
|
const diffMs = now - date
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
|
|
|
if (diffHours < 1) {
|
|
return 'Just now'
|
|
} else if (diffHours < 24) {
|
|
return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`
|
|
} else if (diffDays <= 7) {
|
|
return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`
|
|
} else {
|
|
// For dates older than 7 days, show just the date without time
|
|
return date.toLocaleDateString()
|
|
}
|
|
}
|
|
|
|
// Logout
|
|
async function logout() {
|
|
try {
|
|
await fetch('/api/logout', {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
})
|
|
} catch (error) {
|
|
console.error('Logout error:', error)
|
|
}
|
|
|
|
currentUser = null
|
|
currentCredentials = []
|
|
aaguidInfo = {}
|
|
showLoginView()
|
|
}
|
|
|
|
// Check if user is already logged in on page load
|
|
async function checkExistingSession() {
|
|
if (await validateStoredToken()) {
|
|
showDashboardView()
|
|
} else {
|
|
showLoginView()
|
|
}
|
|
}
|
|
|
|
// Form event handlers
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check for existing session on page load
|
|
checkExistingSession()
|
|
|
|
// 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')
|
|
|
|
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(() => {
|
|
showDashboardView()
|
|
}, 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')
|
|
|
|
try {
|
|
showStatus('loginStatus', 'Starting authentication...', 'info')
|
|
await authenticate()
|
|
showStatus('loginStatus', 'Authentication successful!', 'success')
|
|
|
|
// Navigate to dashboard
|
|
setTimeout(() => {
|
|
showDashboardView()
|
|
}, 1000)
|
|
} catch (err) {
|
|
showStatus('loginStatus', `Authentication failed: ${err.message}`, 'error')
|
|
} finally {
|
|
authSubmitBtn.disabled = false
|
|
}
|
|
})
|
|
})
|