gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor OneDrive integration to use session storage for credentials and enhance error handling

Browse Source 
feat: updated System Status Dashboard
This commit is contained in:
Christian Krakau-Louis
2025-04-03 12:44:17 +02:00
parent 94889e9e41
commit af1a76a813
6 changed files with 701 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/onedrive.html
+139 -14
View File
@@ -112,6 +112,12 @@
<p class="text-xs text-gray-500 mt-1">Use "common" for personal accounts or your organization's Tenant ID for corporate accounts</p>
</div>
<div>
<label for="folder-path" class="block text-sm font-medium text-gray-700">Folder Path (Optional)</label>
<input type="text" id="folder-path" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Documents/Uploads" value="{{ folder_path }}">
<p class="text-xs text-gray-500 mt-1">Enter the folder path where files should be uploaded (e.g., Documents/Uploads)</p>
</div>
<div>
<button id="start-auth-flow" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Start Authentication Flow
@@ -203,6 +209,28 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
Back to Status
</a>
</div>
<!-- Result Modal -->
<div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
<!-- Icon will be injected by JS -->
</div>
<h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">Success</h3>
<div class="mt-2 px-7 py-3">
<p id="modalMessage" class="text-sm text-gray-500">
Operation completed successfully.
</p>
</div>
<div class="items-center px-4 py-3">
<button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
Close
</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
@@ -216,25 +244,78 @@ document.addEventListener('DOMContentLoaded', function() {
const tokenStatus = document.getElementById('token-status');
const clientSecretInput = document.getElementById('client-secret');
// Modal elements
const resultModal = document.getElementById('resultModal');
const modalTitle = document.getElementById('modalTitle');
const modalMessage = document.getElementById('modalMessage');
const modalIcon = document.getElementById('modalIcon');
const modalClose = document.getElementById('modalClose');
// Modal functions
function showModal(status, title, message) {
modalTitle.textContent = title;
modalMessage.textContent = message;
// Set the appropriate icon
if (status === 'success') {
modalIcon.innerHTML = `
<svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
`;
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
} else {
modalIcon.innerHTML = `
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
`;
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
}
resultModal.classList.remove('hidden');
}
function hideModal() {
resultModal.classList.add('hidden');
}
// Close modal when clicking the close button
modalClose.addEventListener('click', hideModal);
// Close modal when clicking outside of it
resultModal.addEventListener('click', function(e) {
if (e.target === resultModal) {
hideModal();
}
});
// Start Authentication Flow button click
startAuthFlowBtn.addEventListener('click', function() {
const clientId = document.getElementById('client-id').value.trim();
const clientSecret = clientSecretInput.value.trim();
const redirectUri = window.location.origin + "/onedrive-callback";
const tenantId = document.getElementById('tenant-id').value.trim() || 'common';
const folderPath = document.getElementById('folder-path') ? document.getElementById('folder-path').value.trim() : '';
if (!clientId) {
alert('Please enter your Client ID');
showModal('error', 'Validation Error', 'Please enter your Client ID');
return;
}
if (!clientSecret) {
alert('Please enter your Client Secret');
showModal('error', 'Validation Error', 'Please enter your Client Secret');
return;
}
// Save client secret to session storage temporarily
// Save all entered values to session storage temporarily
sessionStorage.setItem('onedrive_client_id', clientId);
sessionStorage.setItem('onedrive_client_secret', clientSecret);
sessionStorage.setItem('onedrive_tenant_id', tenantId);
if (folderPath) {
sessionStorage.setItem('onedrive_folder_path', folderPath);
}
// Generate the authorization URL with .default scope
const authUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?client_id=${encodeURIComponent(clientId)}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&response_mode=query&scope=${encodeURIComponent('https://graph.microsoft.com/.default offline_access')}&prompt=consent`;
@@ -253,19 +334,25 @@ document.addEventListener('DOMContentLoaded', function() {
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
alert('Token is valid! Successfully connected to OneDrive.');
showModal('success', 'Token Valid', 'Successfully connected to OneDrive!');
} else {
if (data.message && data.message.includes('invalid_grant')) {
if (confirm('Your OneDrive token has expired or is invalid. Would you like to obtain a new token now?')) {
showModal('error', 'Token Invalid', 'Your OneDrive token has expired or is invalid. Please obtain a new token.');
// Give option to start new auth flow
modalClose.textContent = "Get New Token";
modalClose.addEventListener('click', function onGetNewToken() {
startAuthFlowBtn.click();
}
// Remove this special event handler after use
modalClose.removeEventListener('click', onGetNewToken);
modalClose.textContent = "Close";
}, { once: true });
} else {
alert('Token validation failed: ' + data.message);
showModal('error', 'Token Test Failed', data.message);
}
}
})
.catch(error => {
alert('Error testing token: ' + error.message);
showModal('error', 'Connection Error', 'Error testing token: ' + error.message);
})
.finally(() => {
testTokenBtn.innerHTML = 'Test Token';
@@ -277,9 +364,31 @@ document.addEventListener('DOMContentLoaded', function() {
// Refresh Token button click
if (refreshTokenBtn) {
refreshTokenBtn.addEventListener('click', function() {
if (confirm('This will start a new authentication flow to obtain a fresh token from Microsoft. Continue?')) {
showModal('info', 'Confirm', 'This will start a new authentication flow to obtain a fresh token from Microsoft. Continue?');
modalClose.textContent = "Cancel";
// Add a confirm button
const confirmBtn = document.createElement('button');
confirmBtn.className = 'ml-2 px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300';
confirmBtn.textContent = 'Continue';
confirmBtn.addEventListener('click', function() {
hideModal();
startAuthFlowBtn.click();
}
});
// Add to modal
modalClose.parentNode.appendChild(confirmBtn);
// Make sure to remove the confirm button when modal is closed
const removeConfirmBtn = function() {
if (confirmBtn.parentNode) {
confirmBtn.parentNode.removeChild(confirmBtn);
}
modalClose.textContent = "Close";
modalClose.removeEventListener('click', removeConfirmBtn);
};
modalClose.addEventListener('click', removeConfirmBtn, { once: true });
});
}
@@ -300,16 +409,32 @@ document.addEventListener('DOMContentLoaded', function() {
})
.catch(err => {
console.error('Failed to copy: ', err);
alert('Failed to copy text to clipboard');
showModal('error', 'Copy Failed', 'Failed to copy text to clipboard');
});
});
}
// Try to retrieve client secret from session storage (if coming back from auth)
// Try to retrieve values from session storage (if coming back from auth or browser refresh)
if (clientSecretInput && !clientSecretInput.value && sessionStorage.getItem('onedrive_client_secret')) {
clientSecretInput.value = sessionStorage.getItem('onedrive_client_secret');
// Clear it after use
sessionStorage.removeItem('onedrive_client_secret');
}
// Also check for client ID in session storage
const clientIdInput = document.getElementById('client-id');
if (clientIdInput && !clientIdInput.value && sessionStorage.getItem('onedrive_client_id')) {
clientIdInput.value = sessionStorage.getItem('onedrive_client_id');
}
// Check for tenant ID in session storage
const tenantIdInput = document.getElementById('tenant-id');
if (tenantIdInput && !tenantIdInput.value && sessionStorage.getItem('onedrive_tenant_id')) {
tenantIdInput.value = sessionStorage.getItem('onedrive_tenant_id');
}
// Check for folder path in session storage
const folderPathInput = document.getElementById('folder-path');
if (folderPathInput && !folderPathInput.value && sessionStorage.getItem('onedrive_folder_path')) {
folderPathInput.value = sessionStorage.getItem('onedrive_folder_path');
}
// If token is not configured but we have a client ID, show the token status section