112 lines
3.0 KiB
JavaScript
112 lines
3.0 KiB
JavaScript
// 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'
|
|
})
|
|
}
|
|
})
|
|
.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
|