125 lines
3.6 KiB
JavaScript
125 lines
3.6 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
|
|
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')
|
|
|
|
if (deviceLinkText) {
|
|
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')
|
|
})
|
|
})
|
|
}
|
|
|
|
// 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
|
|
})
|
|
}
|
|
|
|
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
|