Major refactor: HTTP-only cookies, passkey management, and UI improvements
- Refactor session management from WebSocket tokens to HTTP-only cookies - Move user/credential endpoints from WebSocket to HTTP REST API - Add comprehensive passkey management (add/delete with safety checks) - Implement AAGUID-based authenticator info with icons and names - Add human-readable date formatting and clean grid layout - Create modular architecture with session_manager, api_handlers, aaguid_manager
This commit is contained in:
Leo Vasanko
448
static/app.js
448
static/app.js
@@ -1,54 +1,434 @@
|
||||
const { startRegistration, startAuthentication } = SimpleWebAuthnBrowser
|
||||
|
||||
// Global state
|
||||
let currentUser = null
|
||||
let currentCredentials = []
|
||||
let aaguidInfo = {}
|
||||
|
||||
// Session management - now using HTTP-only cookies
|
||||
async function validateStoredToken() {
|
||||
try {
|
||||
const response = await fetch('/api/validate-token', {
|
||||
method: 'GET',
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.status === 'success') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to set session cookie using JWT token
|
||||
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')
|
||||
}
|
||||
|
||||
// Update dashboard view to load user info
|
||||
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 = ''
|
||||
}
|
||||
|
||||
// User registration
|
||||
async function register(user_name) {
|
||||
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)
|
||||
ws.send(JSON.stringify(await startRegistration({optionsJSON})))
|
||||
const result = JSON.parse(await ws.recv())
|
||||
if (result.error) throw new Error(`Server: ${result.error}`)
|
||||
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() {
|
||||
// Authentication chat
|
||||
const ws = await aWebSocket('/ws/authenticate')
|
||||
const optionsJSON = JSON.parse(await ws.recv())
|
||||
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
||||
await ws.send(JSON.stringify(await startAuthentication({optionsJSON})))
|
||||
const result = JSON.parse(await ws.recv())
|
||||
if (result.error) throw new Error(`Server: ${result.error}`)
|
||||
return result
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
(function() {
|
||||
// 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>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
// 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()
|
||||
}
|
||||
}
|
||||
|
||||
// Add new credential for logged-in user
|
||||
async function addNewCredential() {
|
||||
try {
|
||||
showStatus('dashboardStatus', 'Starting new passkey registration...', 'info')
|
||||
|
||||
const ws = await aWebSocket('/ws/add_credential')
|
||||
|
||||
// Registration chat - no need to send user data since we're authenticated
|
||||
const optionsJSON = JSON.parse(await ws.recv())
|
||||
if (optionsJSON.error) throw new Error(optionsJSON.error)
|
||||
|
||||
showStatus('dashboardStatus', 'Save new passkey 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()
|
||||
|
||||
showStatus('dashboardStatus', 'New passkey added successfully!', 'success')
|
||||
|
||||
// Refresh credentials list to show the new credential
|
||||
await loadCredentials()
|
||||
clearStatus('dashboardStatus')
|
||||
|
||||
} catch (error) {
|
||||
showStatus('dashboardStatus', `Failed to add new passkey: ${error.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// Delete credential
|
||||
async function deleteCredential(credentialId) {
|
||||
if (!confirm('Are you sure you want to delete this passkey? This action cannot be undone.')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('dashboardStatus', 'Deleting passkey...', 'info')
|
||||
|
||||
const response = await fetch('/api/delete-credential', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
credential_id: credentialId
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.error) {
|
||||
throw new Error(result.error)
|
||||
}
|
||||
|
||||
showStatus('dashboardStatus', 'Passkey deleted successfully!', 'success')
|
||||
|
||||
// Refresh credentials list
|
||||
await loadCredentials()
|
||||
clearStatus('dashboardStatus')
|
||||
|
||||
} catch (error) {
|
||||
showStatus('dashboardStatus', `Failed to delete passkey: ${error.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
// 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', ev => {
|
||||
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')
|
||||
register(user_name).then(() => {
|
||||
alert(`Registration successful for ${user_name}!`)
|
||||
}).catch(err => {
|
||||
alert(`Registration failed: ${err.message}`)
|
||||
}).finally(() => {
|
||||
|
||||
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', ev => {
|
||||
const authSubmitBtn = authForm.querySelector('button[type="submit"]')
|
||||
|
||||
authForm.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault()
|
||||
authSubmitBtn.disabled = true
|
||||
authenticate().then(result => {
|
||||
alert(`Authentication successful!`)
|
||||
}).catch(err => {
|
||||
alert(`Authentication failed: ${err.message}`)
|
||||
}).finally(() => {
|
||||
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
|
||||
})
|
||||
}
|
||||
})
|
||||
})()
|
||||
})
|
||||
|
||||
@@ -1,65 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebAuthn Registration Demo</title>
|
||||
<title>Passkey Authentication</title>
|
||||
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
|
||||
<script src="/static/awaitable-websocket.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
text-align: center;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
padding: 40px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
.view.active {
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 300;
|
||||
font-size: 28px;
|
||||
}
|
||||
h2 {
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
}
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
width: 250px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
margin: 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
background: #ccc !important;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.status {
|
||||
padding: 10px;
|
||||
margin: 15px 0;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
.status.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
.status.info {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
.credential-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.credential-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
text-align: left;
|
||||
}
|
||||
.credential-item.current-session {
|
||||
border: 2px solid #007bff;
|
||||
background: #f8f9ff;
|
||||
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
.credential-item.current-session .credential-info h4 {
|
||||
color: #0056b3;
|
||||
}
|
||||
.credential-header {
|
||||
display: grid;
|
||||
grid-template-columns: 32px 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.credential-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.auth-icon {
|
||||
border-radius: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.auth-emoji {
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.credential-info {
|
||||
min-width: 0;
|
||||
}
|
||||
.credential-info h4 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.credential-dates {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 5px 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.date-label {
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.date-value {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.user-info {
|
||||
background: #e7f3ff;
|
||||
border: 1px solid #bee5eb;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.user-info h3 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #0c5460;
|
||||
}
|
||||
.user-info p {
|
||||
margin: 5px 0;
|
||||
color: #0c5460;
|
||||
}
|
||||
.toggle-link {
|
||||
color: #667eea;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.toggle-link:hover {
|
||||
color: #764ba2;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.credential-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-delete-credential {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #dc3545;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-delete-credential:hover:not(:disabled) {
|
||||
background-color: #f8d7da;
|
||||
}
|
||||
.btn-delete-credential:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>WebAuthn Demo</h1>
|
||||
|
||||
<div style="margin-bottom: 30px;">
|
||||
<h2>Register</h2>
|
||||
<form id="registrationForm">
|
||||
<input type="text" name="username" placeholder="Username" required>
|
||||
<br>
|
||||
<button type="submit">Register Passkey</button>
|
||||
<!-- 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="showRegisterView()">
|
||||
Don't have an account? Register here
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Authenticate</h2>
|
||||
<form id="authenticationForm">
|
||||
<button type="submit">Authenticate with Passkey</button>
|
||||
<!-- Register View -->
|
||||
<div id="registerView" class="view">
|
||||
<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="showLoginView()">
|
||||
Already have an account? Login here
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard View -->
|
||||
<div id="dashboardView" class="view">
|
||||
<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="logout()" class="btn-danger">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user