copilot-swe-agent[bot]
1a195a96bd
- Merge origin/main into branch (resolve conflict in integrations_dashboard.html) - Add defensive JSON parsing with try/except for integration.config - Wrap tester() call in try/except to prevent 500 errors from bad config - Add i18n key integrations.connection_test_failed_fallback in en.json - Reference i18n key in template JS fallback message - Update SECURITY_AUDIT.md: add fix date (2026-03-23), update doc date - Remove accidental revert.sh file - Fix missing MagicMock/patch imports in test file - Add tests for invalid JSON config and tester exception error paths Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com> Agent-Logs-Url: https://github.com/christianlouis/DocuElevate/sessions/daebb70e-059a-4601-8864-88eef49f99cf
448 lines
20 KiB
HTML
448 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}OneDrive Authorization Processing{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="bg-white shadow-md rounded-lg p-6">
|
|
<div class="text-center mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
<h2 class="text-2xl font-bold mt-4">Processing Authorization</h2>
|
|
<p class="text-gray-600 mt-2">Please wait while we complete the OneDrive authorization process...</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center my-6">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" role="status" aria-label="Loading"></div>
|
|
</div>
|
|
|
|
<div id="processing-message" class="text-center text-gray-700" aria-live="polite">
|
|
<p>Exchanging authorization code for refresh token...</p>
|
|
</div>
|
|
|
|
<div id="error-container" class="hidden mt-6" role="alert" aria-live="assertive">
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-red-800">Error details:</h3>
|
|
<div class="mt-2 text-sm text-red-700" id="error-message">
|
|
<!-- Error message will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<a id="return-to-setup-link" href="/onedrive-setup" 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">
|
|
Return to Setup
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="success-container" class="hidden mt-6" aria-live="polite">
|
|
<div class="rounded-md bg-green-50 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium text-green-800">
|
|
OneDrive authorization successful! Your refresh token has been saved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Folder selector (shown after authorization) -->
|
|
<div id="folder-selector" class="hidden mt-6 p-4 bg-white border border-gray-200 rounded-lg">
|
|
<h3 class="font-medium text-lg mb-3">
|
|
<svg class="inline-block h-5 w-5 mr-1 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" />
|
|
<path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" />
|
|
</svg>
|
|
Select Folder
|
|
</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Browse your OneDrive to select a folder for this integration.</p>
|
|
|
|
<div class="mb-3">
|
|
<div id="folder-breadcrumb" class="flex items-center text-sm text-gray-500 mb-2">
|
|
<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="folder-list" class="border border-gray-200 rounded-md max-h-64 overflow-y-auto">
|
|
<div class="p-4 text-center text-gray-500">
|
|
<div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div>
|
|
<p class="text-sm">Loading folders…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-center gap-3">
|
|
<label for="selected-folder-path" class="text-sm font-medium text-gray-700 whitespace-nowrap">Selected folder:</label>
|
|
<input id="selected-folder-path" type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="/" />
|
|
<button id="save-folder-btn" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Save Folder
|
|
</button>
|
|
</div>
|
|
<p id="folder-save-status" class="mt-2 text-sm hidden" aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="mt-6 p-4 bg-gray-100 rounded-md">
|
|
<h3 class="font-medium text-lg mb-2">Configuration for Worker Nodes</h3>
|
|
<p class="text-sm text-gray-600 mb-3">
|
|
Copy these environment variables to configure all worker nodes:
|
|
</p>
|
|
|
|
<div class="relative">
|
|
<pre id="env-vars" class="bg-gray-800 text-green-400 text-sm p-3 rounded overflow-x-auto"><code></code></pre>
|
|
|
|
<button id="copy-env-vars" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white text-xs py-1 px-2 rounded">
|
|
Copy
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-xs text-gray-500 mt-2">
|
|
Add these variables to your .env file or environment configuration.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<a href="/status" 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">
|
|
Go to Status Page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const code = "{{ code }}";
|
|
|
|
// Get credentials from session storage (these take precedence over server-provided values)
|
|
const clientId = sessionStorage.getItem('onedrive_client_id') || "{{ client_id_value }}";
|
|
const clientSecret = sessionStorage.getItem('onedrive_client_secret') || "{{ client_secret_value }}";
|
|
const tenantId = sessionStorage.getItem('onedrive_tenant_id') || "{{ tenant_id }}" || "common";
|
|
const folderPath = sessionStorage.getItem('onedrive_folder_path') || "";
|
|
const integrationId = sessionStorage.getItem('oauth_integration_id');
|
|
|
|
// In user mode, point the "Return to Setup" link back to the wizard with integration_id
|
|
if (integrationId) {
|
|
const returnLink = document.getElementById('return-to-setup-link');
|
|
if (returnLink) {
|
|
returnLink.href = `/onedrive-setup?integration_id=${encodeURIComponent(integrationId)}`;
|
|
}
|
|
}
|
|
|
|
const redirectUri = window.location.origin + "/onedrive-callback";
|
|
|
|
// Automatically exchange the code for a refresh token
|
|
if (code) {
|
|
if (!clientId || !clientSecret) {
|
|
showError("Missing Client ID or Client Secret. Please go back to the setup page and try again.");
|
|
return;
|
|
}
|
|
|
|
exchangeCode(code, clientId, clientSecret, redirectUri, tenantId, folderPath);
|
|
} else {
|
|
showError("No authorization code was found in the URL");
|
|
}
|
|
|
|
function exchangeCode(code, clientId, clientSecret, redirectUri, tenantId, folderPath) {
|
|
const formData = new FormData();
|
|
formData.append('client_id', clientId);
|
|
formData.append('client_secret', clientSecret);
|
|
formData.append('redirect_uri', redirectUri);
|
|
formData.append('code', code);
|
|
formData.append('tenant_id', tenantId);
|
|
|
|
// Show more details in processing message
|
|
document.getElementById('processing-message').innerHTML =
|
|
'<p>Exchanging authorization code for refresh token...</p>' +
|
|
'<p class="text-xs text-gray-500 mt-2">Using tenant: ' + (tenantId || 'common') + '</p>';
|
|
|
|
fetch('/api/onedrive/exchange-token', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error(err.detail || 'Failed to exchange token');
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.refresh_token) {
|
|
// Per-user flow: save to the user's integration record
|
|
if (integrationId) {
|
|
const creds = {
|
|
client_id: clientId,
|
|
client_secret: clientSecret,
|
|
refresh_token: data.refresh_token,
|
|
tenant_id: tenantId,
|
|
};
|
|
|
|
// Only send credentials — the integration's config (folder_path, source_type, etc.)
|
|
// is already set and must not be overwritten here.
|
|
const body = { credentials: creds };
|
|
|
|
document.getElementById('processing-message').innerHTML =
|
|
'<p>Saving credentials to your integration...</p>';
|
|
|
|
return fetch(`/api/integrations/${integrationId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
}).then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error('Failed to save credentials: ' + (err.detail || 'Unknown error'));
|
|
});
|
|
}
|
|
return response.json();
|
|
}).then(() => {
|
|
// Clean up session storage
|
|
sessionStorage.removeItem('onedrive_client_id');
|
|
sessionStorage.removeItem('onedrive_client_secret');
|
|
sessionStorage.removeItem('onedrive_tenant_id');
|
|
sessionStorage.removeItem('onedrive_folder_path');
|
|
sessionStorage.removeItem('oauth_integration_id');
|
|
sessionStorage.removeItem('onedrive_use_system_creds');
|
|
|
|
// Hide processing spinner, show success
|
|
document.querySelector('.animate-spin').parentNode.classList.add('hidden');
|
|
document.getElementById('processing-message').innerHTML =
|
|
'<p class="text-green-600 font-semibold">✓ OneDrive authorized successfully!</p>';
|
|
document.getElementById('success-container').classList.remove('hidden');
|
|
|
|
// Show folder browser with the access token
|
|
initFolderBrowser(data.access_token, integrationId);
|
|
});
|
|
}
|
|
|
|
// Global flow: update settings in memory
|
|
const updateFormData = new FormData();
|
|
updateFormData.append('refresh_token', data.refresh_token);
|
|
|
|
// Use the values from session storage
|
|
updateFormData.append('client_id', clientId);
|
|
updateFormData.append('client_secret', clientSecret);
|
|
updateFormData.append('tenant_id', tenantId);
|
|
|
|
if (folderPath) {
|
|
updateFormData.append('folder_path', folderPath);
|
|
}
|
|
|
|
document.getElementById('processing-message').innerHTML =
|
|
'<p>Updating system settings with new token...</p>';
|
|
|
|
return fetch('/api/onedrive/update-settings', {
|
|
method: 'POST',
|
|
body: updateFormData
|
|
}).then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => {
|
|
throw new Error('Token received but failed to update settings: ' + (err.detail || 'Unknown error'));
|
|
});
|
|
}
|
|
return response.json();
|
|
}).then(() => {
|
|
// Show the success message and environment variables
|
|
showSuccess(data.refresh_token, clientId, clientSecret, tenantId, folderPath);
|
|
|
|
// In 10 seconds, redirect to status page (giving more time to copy)
|
|
setTimeout(() => {
|
|
window.location.href = '/status';
|
|
}, 10000);
|
|
|
|
// Clean up session storage
|
|
sessionStorage.removeItem('onedrive_client_id');
|
|
sessionStorage.removeItem('onedrive_client_secret');
|
|
sessionStorage.removeItem('onedrive_tenant_id');
|
|
sessionStorage.removeItem('onedrive_folder_path');
|
|
});
|
|
} else {
|
|
throw new Error('No refresh token was received from the server');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showError(error.message);
|
|
});
|
|
}
|
|
|
|
function showError(message) {
|
|
document.getElementById('processing-message').classList.add('hidden');
|
|
document.getElementById('error-container').classList.remove('hidden');
|
|
document.getElementById('error-message').innerText = message;
|
|
|
|
// Hide the spinner when showing error
|
|
document.querySelector('.animate-spin').parentNode.classList.add('hidden');
|
|
}
|
|
|
|
function showSuccess(refreshToken, clientId, clientSecret, tenantId, folderPath) {
|
|
document.getElementById('processing-message').classList.add('hidden');
|
|
document.getElementById('success-container').classList.remove('hidden');
|
|
|
|
// Hide the spinner when showing success
|
|
document.querySelector('.animate-spin').parentNode.classList.add('hidden');
|
|
|
|
// Update the environment variables pre block with the new token
|
|
const envVarsCode = document.querySelector('#env-vars code');
|
|
if (envVarsCode) {
|
|
envVarsCode.textContent = `ONEDRIVE_CLIENT_ID=${clientId}
|
|
ONEDRIVE_CLIENT_SECRET=${clientSecret}
|
|
ONEDRIVE_TENANT_ID=${tenantId || 'common'}
|
|
ONEDRIVE_REFRESH_TOKEN=${refreshToken}
|
|
ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
|
|
}
|
|
|
|
// Add copy functionality
|
|
const copyEnvVarsBtn = document.getElementById('copy-env-vars');
|
|
if (copyEnvVarsBtn) {
|
|
copyEnvVarsBtn.addEventListener('click', function() {
|
|
const envVarsText = document.getElementById('env-vars').textContent;
|
|
navigator.clipboard.writeText(envVarsText)
|
|
.then(() => {
|
|
const originalText = copyEnvVarsBtn.textContent;
|
|
copyEnvVarsBtn.textContent = 'Copied!';
|
|
copyEnvVarsBtn.classList.add('bg-green-700');
|
|
setTimeout(() => {
|
|
copyEnvVarsBtn.textContent = originalText;
|
|
copyEnvVarsBtn.classList.remove('bg-green-700');
|
|
}, 2000);
|
|
})
|
|
.catch(err => {
|
|
console.error('Failed to copy: ', err);
|
|
alert('Failed to copy text to clipboard');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// ── Folder browser ────────────────────────────────────────────────
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(str));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function initFolderBrowser(accessToken, integrationId) {
|
|
const folderSelector = document.getElementById('folder-selector');
|
|
if (!folderSelector || !integrationId || !accessToken) return;
|
|
|
|
folderSelector.classList.remove('hidden');
|
|
|
|
const folderList = document.getElementById('folder-list');
|
|
const breadcrumb = document.getElementById('folder-breadcrumb');
|
|
const selectedInput = document.getElementById('selected-folder-path');
|
|
const saveBtn = document.getElementById('save-folder-btn');
|
|
const saveStatus = document.getElementById('folder-save-status');
|
|
|
|
function loadFolders(path) {
|
|
folderList.innerHTML = '<div class="p-4 text-center text-gray-500"><div class="animate-spin inline-block h-5 w-5 border-2 border-gray-300 border-t-indigo-600 rounded-full mb-2" role="status" aria-label="Loading folders"></div><p class="text-sm">Loading folders…</p></div>';
|
|
|
|
const formData = new FormData();
|
|
formData.append('access_token', accessToken);
|
|
formData.append('path', path);
|
|
|
|
fetch('/api/onedrive/list-folders', { method: 'POST', body: formData })
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.folders && data.folders.length > 0) {
|
|
folderList.innerHTML = data.folders.map(f =>
|
|
`<button type="button" class="folder-item w-full text-left px-4 py-3 hover:bg-indigo-50 border-b border-gray-100 flex items-center gap-3 text-sm focus:outline-none focus:bg-indigo-50" data-path="${escapeHtml(f.path)}" aria-label="Open folder ${escapeHtml(f.name)}">` +
|
|
`<svg class="h-5 w-5 text-blue-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg>` +
|
|
`<span class="font-medium text-gray-700">${escapeHtml(f.name)}</span>` +
|
|
`</button>`
|
|
).join('');
|
|
|
|
folderList.querySelectorAll('.folder-item').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const p = btn.getAttribute('data-path');
|
|
selectedInput.value = p;
|
|
loadFolders(p.replace(/^\//, ''));
|
|
});
|
|
});
|
|
} else {
|
|
folderList.innerHTML = '<div class="p-4 text-center text-gray-400 text-sm">No subfolders found</div>';
|
|
}
|
|
updateBreadcrumb(path);
|
|
})
|
|
.catch(err => {
|
|
folderList.innerHTML = `<div class="p-4 text-center text-red-500 text-sm">Failed to load folders: ${escapeHtml(err.message)}</div>`;
|
|
});
|
|
}
|
|
|
|
function updateBreadcrumb(path) {
|
|
const parts = path.split('/').filter(Boolean);
|
|
let html = '<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="" aria-label="Navigate to root folder">/ Root</button>';
|
|
let accumulated = '';
|
|
for (const part of parts) {
|
|
accumulated += '/' + part;
|
|
html += `<span class="mx-1 text-gray-400">/</span>`;
|
|
html += `<button type="button" class="folder-nav-btn text-indigo-600 hover:text-indigo-800 font-medium" data-path="${escapeHtml(accumulated.replace(/^\//, ''))}" aria-label="Navigate to ${escapeHtml(part)}">${escapeHtml(part)}</button>`;
|
|
}
|
|
breadcrumb.innerHTML = html;
|
|
breadcrumb.querySelectorAll('.folder-nav-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const p = btn.getAttribute('data-path');
|
|
selectedInput.value = p ? '/' + p : '/';
|
|
loadFolders(p);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Save selected folder to integration config
|
|
saveBtn.addEventListener('click', () => {
|
|
const folderPath = selectedInput.value.trim() || '/';
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = 'Saving…';
|
|
|
|
fetch(`/api/integrations/${integrationId}`)
|
|
.then(r => r.json())
|
|
.then(intg => {
|
|
const cfg = intg.config || {};
|
|
cfg.folder_path = folderPath;
|
|
return fetch(`/api/integrations/${integrationId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ config: cfg }),
|
|
});
|
|
})
|
|
.then(r => {
|
|
if (!r.ok) throw new Error('Failed to save folder');
|
|
return r.json();
|
|
})
|
|
.then(() => {
|
|
saveStatus.textContent = '✓ Folder saved! Redirecting…';
|
|
saveStatus.className = 'mt-2 text-sm text-green-600';
|
|
saveStatus.classList.remove('hidden');
|
|
saveBtn.textContent = 'Saved ✓';
|
|
setTimeout(() => { window.location.href = '/integrations'; }, 1500);
|
|
})
|
|
.catch(err => {
|
|
saveStatus.textContent = 'Error: ' + err.message;
|
|
saveStatus.className = 'mt-2 text-sm text-red-600';
|
|
saveStatus.classList.remove('hidden');
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = 'Save Folder';
|
|
});
|
|
});
|
|
|
|
// Load root folders initially
|
|
loadFolders('');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|