116 lines
3.2 KiB
JavaScript
116 lines
3.2 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',
|
|
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;
|