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

Merge pull request #577 from christianlouis/copilot/create-user-auth-workflow

Browse Source 
fix(templates): remove orphan `</div>` in google_drive.html breaking HTML accessibility lint
This commit is contained in:
Christian Krakau-Louis
2026-03-10 00:00:39 +01:00
committed by GitHub
parent 5d5784f069 256d9cb674
commit 5fd3f0661b
16 changed files with 874 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/dropbox.html
+72 -15
View File
@@ -4,6 +4,37 @@
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="mb-8">
{% if user_mode %}
<!-- ── User-mode header ──────────────────────────────────────────── -->
<div class="mb-4">
<a href="/integrations" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800">
<i class="fas fa-arrow-left mr-1" aria-hidden="true"></i> Back to Integrations
</a>
</div>
<h1 class="text-3xl font-bold mb-2">
Connect Dropbox
{% if integration_name %}<span class="text-gray-500 text-2xl font-normal">— {{ integration_name }}</span>{% endif %}
</h1>
<p class="text-gray-600 mb-4">
Authorize DocuElevate to access your Dropbox account. Your credentials are stored securely in your personal integration record.
</p>
{% if is_configured %}
<div class="bg-green-50 border-l-4 border-green-500 text-green-700 p-4 my-4" role="alert">
<p class="font-semibold">✓ Already authorized</p>
<p class="text-sm mt-1">This integration already has credentials. You can re-authorize below to refresh or update them.
{% if folder_path %}<br><strong>Folder:</strong> {{ folder_path }}{% endif %}
</p>
</div>
{% else %}
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
<p class="font-semibold">Authorization required</p>
<p class="text-sm mt-1">Complete the wizard below to grant access to your Dropbox account.
{% if folder_path %}<br><strong>Target folder:</strong> {{ folder_path }}{% endif %}
</p>
</div>
{% endif %}
{% else %}
<!-- ── Admin-mode header ─────────────────────────────────────────── -->
<h1 class="text-3xl font-bold mb-2">Dropbox Integration Setup</h1>
<p class="text-gray-600 mb-4">
Configure the Dropbox integration for DocuElevate using our setup wizard.
@@ -37,6 +68,7 @@
</div>
</div>
</div>
{% endif %}
</div>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
@@ -79,24 +111,35 @@
</div>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4">Complete Setup with Wizard</h2>
<h2 class="text-2xl font-semibold mb-4">
{% if user_mode %}OAuth Wizard{% else %}Complete Setup with Wizard{% endif %}
</h2>
<div class="space-y-4">
<div>
<label for="app-key" class="block text-sm font-medium text-gray-700">App Key</label>
<label for="app-key" class="block text-sm font-medium text-gray-700">App Key <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="text" id="app-key" 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="Enter your Dropbox app key" value="{{ app_key_value }}">
</div>
<div>
<label for="app-secret" class="block text-sm font-medium text-gray-700">App Secret</label>
<label for="app-secret" class="block text-sm font-medium text-gray-700">App Secret <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="password" id="app-secret" 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="Enter your Dropbox app secret" value="{{ app_secret_value }}">
</div>
{% if not user_mode %}
<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>
{% else %}
{% if folder_path %}
<div class="bg-gray-50 border border-gray-200 rounded-md px-3 py-2">
<p class="text-xs text-gray-500">Target folder (from integration settings)</p>
<p class="text-sm font-mono text-gray-700">{{ folder_path }}</p>
</div>
{% endif %}
{% endif %}
<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">
@@ -104,7 +147,8 @@
</button>
</div>
<!-- Token validation and status -->
<!-- Token validation and status (admin mode only) -->
{% if not user_mode %}
<div id="token-status" class="mt-6 {{ 'hidden' if not is_configured else '' }}">
<div class="rounded-md {{ 'bg-green-50' if is_configured else 'bg-yellow-50' }} p-4">
<div class="flex">
@@ -140,7 +184,7 @@
</button>
</div>
<!-- Configuration for Worker Nodes section -->
<!-- Configuration for Worker Nodes section (admin only) -->
<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">
@@ -163,6 +207,7 @@ DROPBOX_FOLDER={{ folder_path|default('/Documents/Uploads', true) }}</code></pre
</p>
</div>
</div>
{% endif %}
</div>
</div>
@@ -184,13 +229,19 @@ DROPBOX_FOLDER={{ folder_path|default('/Documents/Uploads', true) }}</code></pre
</div>
<div class="mt-8">
{% if user_mode %}
<a href="/integrations" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="fas fa-arrow-left mr-2" aria-hidden="true"></i> Back to Integrations
</a>
{% else %}
<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">
Back to Status
</a>
{% endif %}
</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 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" aria-labelledby="modalTitle">
<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">
@@ -216,6 +267,8 @@ DROPBOX_FOLDER={{ folder_path|default('/Documents/Uploads', true) }}</code></pre
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const userMode = {{ 'true' if user_mode else 'false' }};
// Store integration_id if provided (for per-user OAuth flow)
const integrationId = "{{ integration_id or '' }}";
if (integrationId) {
@@ -279,7 +332,6 @@ document.addEventListener('DOMContentLoaded', function() {
startAuthFlowBtn.addEventListener('click', function() {
const appKey = document.getElementById('app-key').value.trim();
const appSecret = appSecretInput.value.trim();
const folderPath = document.getElementById('folder-path').value.trim();
const redirectUri = window.location.origin + "/dropbox-callback";
if (!appKey) {
@@ -292,11 +344,16 @@ document.addEventListener('DOMContentLoaded', function() {
return;
}
// Save app key, app secret and folder path to session storage temporarily
// Save app key and app secret to session storage temporarily
sessionStorage.setItem('dropbox_app_key', appKey);
sessionStorage.setItem('dropbox_app_secret', appSecret);
if (folderPath) {
sessionStorage.setItem('dropbox_folder_path', folderPath);
// In admin mode also store folder path; in user mode the config is already set
if (!userMode) {
const folderPathEl = document.getElementById('folder-path');
if (folderPathEl && folderPathEl.value.trim()) {
sessionStorage.setItem('dropbox_folder_path', folderPathEl.value.trim());
}
}
// Generate the authorization URL
@@ -306,7 +363,7 @@ document.addEventListener('DOMContentLoaded', function() {
window.location.href = authUrl;
});
// Test Token button click
// Test Token button click (admin mode only)
if (testTokenBtn) {
testTokenBtn.addEventListener('click', function() {
testTokenBtn.innerHTML = '<span class="animate-spin inline-block mr-2">⟳</span> Testing...';
@@ -343,7 +400,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Refresh Token button click
// Refresh Token button click (admin mode only)
if (refreshTokenBtn) {
refreshTokenBtn.addEventListener('click', function() {
showModal('info', 'Confirm', 'This will start a new authentication flow to obtain a fresh token from Dropbox. Continue?');
@@ -374,7 +431,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Copy Environment Variables Button
// Copy Environment Variables Button (admin mode only)
const copyEnvVarsBtn = document.getElementById('copy-env-vars');
if (copyEnvVarsBtn) {
copyEnvVarsBtn.addEventListener('click', function() {
@@ -403,8 +460,8 @@ document.addEventListener('DOMContentLoaded', function() {
sessionStorage.removeItem('dropbox_app_secret');
}
// If token is not configured but we have an app key, show the token status section
if (document.getElementById('app-key').value && !tokenStatus.classList.contains('hidden')) {
// If token is not configured but we have an app key, show the token status section (admin mode)
if (tokenStatus && document.getElementById('app-key').value && !tokenStatus.classList.contains('hidden')) {
tokenStatus.classList.remove('hidden');
}
});
frontend/templates/dropbox_callback.html
+18 -11
View File
@@ -5,7 +5,7 @@
<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">
<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>
@@ -13,18 +13,18 @@
</div>
<div class="flex justify-center my-6">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
<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">
<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">
<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">
<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>
@@ -37,17 +37,17 @@
</div>
</div>
<div class="mt-4">
<a href="/dropbox-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">
<a id="return-to-setup-link" href="/dropbox-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">
<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">
<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>
@@ -99,6 +99,14 @@ document.addEventListener('DOMContentLoaded', function() {
const folderPath = sessionStorage.getItem('dropbox_folder_path') || "{{ folder_path }}" || '/Documents/Uploads';
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 = `/dropbox-setup?integration_id=${encodeURIComponent(integrationId)}`;
}
}
const redirectUri = window.location.origin + "/dropbox-callback";
// Automatically exchange the code for a refresh token
@@ -145,11 +153,10 @@ document.addEventListener('DOMContentLoaded', function() {
app_key: appKey,
app_secret: appSecret,
};
const cfgUpdate = {};
if (folderPath) cfgUpdate.folder = folderPath;
// Only send credentials — the integration's config (folder, source_type, etc.)
// is already set and must not be overwritten here.
const body = { credentials: creds };
if (Object.keys(cfgUpdate).length > 0) body.config = cfgUpdate;
document.getElementById('processing-message').innerHTML =
'<p>Saving credentials to your integration...</p>';
frontend/templates/google_drive.html
+122 -53
View File
@@ -4,6 +4,37 @@
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="mb-8">
{% if user_mode %}
<!-- ── User-mode header ──────────────────────────────────────────── -->
<div class="mb-4">
<a href="/integrations" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800">
<i class="fas fa-arrow-left mr-1" aria-hidden="true"></i> Back to Integrations
</a>
</div>
<h1 class="text-3xl font-bold mb-2">
Connect Google Drive
{% if integration_name %}<span class="text-gray-500 text-2xl font-normal">— {{ integration_name }}</span>{% endif %}
</h1>
<p class="text-gray-600 mb-4">
Authorize DocuElevate to access your Google Drive account. Your credentials are stored securely in your personal integration record.
</p>
{% if is_configured %}
<div class="bg-green-50 border-l-4 border-green-500 text-green-700 p-4 my-4" role="alert">
<p class="font-semibold">✓ Already authorized</p>
<p class="text-sm mt-1">This integration already has credentials. You can re-authorize below to refresh or update them.
{% if folder_id %}<br><strong>Folder ID:</strong> {{ folder_id }}{% endif %}
</p>
</div>
{% else %}
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
<p class="font-semibold">Authorization required</p>
<p class="text-sm mt-1">Complete the wizard below to grant access to your Google Drive account.
{% if folder_id %}<br><strong>Target folder ID:</strong> {{ folder_id }}{% endif %}
</p>
</div>
{% endif %}
{% else %}
<!-- ── Admin-mode header ─────────────────────────────────────────── -->
<h1 class="text-3xl font-bold mb-2">Google Drive Integration Setup</h1>
<p class="text-gray-600 mb-4">
Configure the Google Drive integration for DocuElevate using our setup wizard.
@@ -42,8 +73,10 @@
</div>
</div>
</div>
{% endif %}
</div>
{% if not user_mode %}
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<div class="flex justify-between items-start mb-4">
<h2 class="text-2xl font-semibold">Authentication Method</h2>
@@ -224,7 +257,38 @@
</div>
</div>
<!-- Token validation and status -->
{% endif %}{# end if not user_mode for admin auth-method block #}
<!-- ── User-mode OAuth wizard ────────────────────────────────────────── -->
{% if user_mode %}
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4">OAuth Wizard</h2>
<div class="space-y-4">
<div>
<label for="client-id" class="block text-sm font-medium text-gray-700">Client ID <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="text" id="client-id" 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="Enter your OAuth Client ID" value="{{ client_id_value }}">
</div>
<div>
<label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="password" id="client-secret" 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="Enter your OAuth Client Secret" value="{{ client_secret_value }}">
</div>
{% if folder_id %}
<div class="bg-gray-50 border border-gray-200 rounded-md px-3 py-2">
<p class="text-xs text-gray-500">Target folder ID (from integration settings)</p>
<p class="text-sm font-mono text-gray-700">{{ folder_id }}</p>
</div>
{% endif %}
<div>
<button id="start-oauth-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
</button>
</div>
</div>
</div>
{% endif %}
<!-- Token validation and status (admin mode only) -->
{% if not user_mode %}
<div id="token-status" class="mt-6 bg-white shadow-md rounded-lg p-6 {{ 'hidden' if not is_configured else '' }}">
<h2 class="text-xl font-semibold mb-4">Connection Status</h2>
@@ -262,7 +326,7 @@
</button>
</div>
<!-- Configuration for Worker Nodes section -->
<!-- Configuration for Worker Nodes section (admin only) -->
<div id="oauth-env-section" class="mt-6 p-4 bg-gray-100 rounded-md {{ 'hidden' if not use_oauth else '' }}">
<h3 class="font-medium text-lg mb-2">OAuth Configuration for Worker Nodes</h3>
<p class="text-sm text-gray-600 mb-3">
@@ -307,6 +371,7 @@ GOOGLE_DRIVE_FOLDER_ID={{ folder_id|default('YOUR_FOLDER_ID', true) }}
</p>
</div>
</div>
{% endif %}
<div class="bg-white shadow-md rounded-lg p-6 mt-8 mb-8">
<div class="flex items-start">
@@ -326,13 +391,19 @@ GOOGLE_DRIVE_FOLDER_ID={{ folder_id|default('YOUR_FOLDER_ID', true) }}
</div>
<div class="mt-8">
{% if user_mode %}
<a href="/integrations" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="fas fa-arrow-left mr-2" aria-hidden="true"></i> Back to Integrations
</a>
{% else %}
<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">
Back to Status
</a>
{% endif %}
</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 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" aria-labelledby="modalTitle">
<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">
@@ -358,18 +429,14 @@ GOOGLE_DRIVE_FOLDER_ID={{ folder_id|default('YOUR_FOLDER_ID', true) }}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const userMode = {{ 'true' if user_mode else 'false' }};
// Store integration_id if provided (for per-user OAuth flow)
const integrationId = "{{ integration_id or '' }}";
if (integrationId) {
sessionStorage.setItem('oauth_integration_id', integrationId);
}
// Tab elements
const oauthTabBtn = document.getElementById('oauth-tab-btn');
const saTabBtn = document.getElementById('sa-tab-btn');
const oauthTab = document.getElementById('oauth-tab');
const saTab = document.getElementById('sa-tab');
// Form elements
const clientIdInput = document.getElementById('client-id');
const clientSecretInput = document.getElementById('client-secret');
@@ -379,12 +446,14 @@ document.addEventListener('DOMContentLoaded', function() {
const saveSaSettingsBtn = document.getElementById('save-sa-settings');
const selectFolderBtn = document.getElementById('select-folder-btn');
// Status and test elements
// Admin-mode elements (may be null in user mode)
const oauthTabBtn = document.getElementById('oauth-tab-btn');
const saTabBtn = document.getElementById('sa-tab-btn');
const oauthTab = document.getElementById('oauth-tab');
const saTab = document.getElementById('sa-tab');
const tokenStatus = document.getElementById('token-status');
const testConnectionBtn = document.getElementById('test-connection');
const refreshTokenBtn = document.getElementById('refresh-token-btn');
// Environment sections
const oauthEnvSection = document.getElementById('oauth-env-section');
const saEnvSection = document.getElementById('sa-env-section');
@@ -485,7 +554,7 @@ document.addEventListener('DOMContentLoaded', function() {
const folderName = folder[google.picker.Document.NAME];
// Update the folder ID input
folderIdInput.value = folderId;
if (folderIdInput) folderIdInput.value = folderId;
if (saFolderIdInput) {
saFolderIdInput.value = folderId;
}
@@ -501,7 +570,7 @@ document.addEventListener('DOMContentLoaded', function() {
// New function to save folder ID after picker selection
function saveFolderId(folderId) {
// Check which tab is active to determine if we're using OAuth or Service Account
const isOauthActive = !oauthTab.classList.contains('hidden');
const isOauthActive = !oauthTab || !oauthTab.classList.contains('hidden');
// Prepare form data
const formData = new FormData();
@@ -509,9 +578,9 @@ document.addEventListener('DOMContentLoaded', function() {
formData.append('use_oauth', isOauthActive ? 'true' : 'false');
// If using OAuth, also include client credentials if available
if (isOauthActive) {
if (isOauthActive && clientIdInput) {
const clientId = clientIdInput.value.trim();
const clientSecret = clientSecretInput.value.trim();
const clientSecret = clientSecretInput ? clientSecretInput.value.trim() : '';
if (clientId) formData.append('client_id', clientId);
if (clientSecret) formData.append('client_secret', clientSecret);
@@ -535,8 +604,8 @@ document.addEventListener('DOMContentLoaded', function() {
console.error('Error saving folder ID:', data.message);
} else {
console.log('Folder ID saved successfully');
// Make the token status visible if it was hidden
tokenStatus.classList.remove('hidden');
// Make the token status visible if it was hidden (admin mode)
if (tokenStatus) tokenStatus.classList.remove('hidden');
// Update environment variables display if they exist
updateEnvVarsDisplay();
@@ -549,13 +618,13 @@ document.addEventListener('DOMContentLoaded', function() {
// Function to update environment variables display
function updateEnvVarsDisplay() {
const folderId = folderIdInput.value || saFolderIdInput.value || 'YOUR_FOLDER_ID';
const folderId = (folderIdInput && folderIdInput.value) || (saFolderIdInput && saFolderIdInput.value) || 'YOUR_FOLDER_ID';
// Update OAuth env vars if the element exists
const oauthEnvVarsCode = document.querySelector('#oauth-env-vars code');
if (oauthEnvVarsCode) {
const clientId = clientIdInput.value || 'YOUR_CLIENT_ID';
const clientSecret = clientSecretInput.value ? 'YOUR_CLIENT_SECRET' : 'YOUR_CLIENT_SECRET';
const clientId = (clientIdInput && clientIdInput.value) || 'YOUR_CLIENT_ID';
const clientSecret = 'YOUR_CLIENT_SECRET';
oauthEnvVarsCode.textContent = `GOOGLE_DRIVE_USE_OAUTH=true
GOOGLE_DRIVE_CLIENT_ID=${clientId}
@@ -615,33 +684,33 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
selectFolderBtn.addEventListener('click', createPicker);
}
// Tab switching
oauthTabBtn.addEventListener('click', function() {
oauthTabBtn.className = 'px-4 py-2 rounded-md text-white bg-blue-600';
saTabBtn.className = 'px-4 py-2 rounded-md text-gray-700 bg-gray-200';
oauthTab.classList.remove('hidden');
saTab.classList.add('hidden');
oauthEnvSection.classList.remove('hidden');
saEnvSection.classList.add('hidden');
});
// Tab switching (admin mode only)
if (oauthTabBtn && saTabBtn && oauthTab && saTab) {
oauthTabBtn.addEventListener('click', function() {
oauthTabBtn.className = 'px-4 py-2 rounded-md text-white bg-blue-600';
saTabBtn.className = 'px-4 py-2 rounded-md text-gray-700 bg-gray-200';
oauthTab.classList.remove('hidden');
saTab.classList.add('hidden');
if (oauthEnvSection) oauthEnvSection.classList.remove('hidden');
if (saEnvSection) saEnvSection.classList.add('hidden');
});
saTabBtn.addEventListener('click', function() {
saTabBtn.className = 'px-4 py-2 rounded-md text-white bg-blue-600';
oauthTabBtn.className = 'px-4 py-2 rounded-md text-gray-700 bg-gray-200';
saTab.classList.remove('hidden');
oauthTab.classList.add('hidden');
saEnvSection.classList.remove('hidden');
oauthEnvSection.classList.add('hidden');
});
saTabBtn.addEventListener('click', function() {
saTabBtn.className = 'px-4 py-2 rounded-md text-white bg-blue-600';
oauthTabBtn.className = 'px-4 py-2 rounded-md text-gray-700 bg-gray-200';
saTab.classList.remove('hidden');
oauthTab.classList.add('hidden');
if (saEnvSection) saEnvSection.classList.remove('hidden');
if (oauthEnvSection) oauthEnvSection.classList.add('hidden');
});
}
// Sync folder IDs between tabs
folderIdInput.addEventListener('input', function() {
if (saFolderIdInput) {
// Sync folder IDs between tabs (admin mode only)
if (folderIdInput && saFolderIdInput) {
folderIdInput.addEventListener('input', function() {
saFolderIdInput.value = folderIdInput.value;
}
});
});
if (saFolderIdInput) {
saFolderIdInput.addEventListener('input', function() {
folderIdInput.value = saFolderIdInput.value;
});
@@ -652,7 +721,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
startOauthFlowBtn.addEventListener('click', function() {
const clientId = clientIdInput.value.trim();
const clientSecret = clientSecretInput.value.trim();
const folderId = folderIdInput.value.trim();
const folderId = folderIdInput ? folderIdInput.value.trim() : '';
if (!clientId) {
showModal('error', 'Validation Error', 'Please enter your Client ID');
@@ -664,12 +733,12 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
return;
}
// Don't require folder ID, make it optional
// Save values to session storage for use after redirect
sessionStorage.setItem('google_drive_client_id', clientId);
sessionStorage.setItem('google_drive_client_secret', clientSecret);
if (folderId) {
// In admin mode store folder_id; in user mode the config is already set
if (!userMode && folderId) {
sessionStorage.setItem('google_drive_folder_id', folderId);
}
sessionStorage.setItem('google_drive_use_oauth', 'true');
@@ -682,7 +751,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
});
}
// Save service account settings button
// Save service account settings button (admin mode only)
if (saveSaSettingsBtn) {
saveSaSettingsBtn.addEventListener('click', function() {
const folderId = saFolderIdInput.value.trim();
@@ -717,7 +786,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
.then(data => {
if (data.status === 'success') {
showModal('success', 'Settings Saved', 'Google Drive service account settings have been saved');
tokenStatus.classList.remove('hidden');
if (tokenStatus) tokenStatus.classList.remove('hidden');
// Update environment variables display
const saEnvVarsCode = document.querySelector('#sa-env-vars code');
@@ -740,7 +809,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
});
}
// Test connection button
// Test connection button (admin mode only)
if (testConnectionBtn) {
testConnectionBtn.addEventListener('click', function() {
const originalText = testConnectionBtn.textContent;
@@ -770,7 +839,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
});
}
// Refresh token button
// Refresh token button (admin mode only)
if (refreshTokenBtn) {
refreshTokenBtn.addEventListener('click', function() {
showModal('info', 'Confirm', 'This will start a new OAuth flow to obtain a fresh token. Continue?');
@@ -808,7 +877,7 @@ GOOGLE_DRIVE_FOLDER_ID=${folderId}
});
}
// Copy environment variables buttons
// Copy environment variables buttons (admin mode only)
const copyOAuthEnvVarsBtn = document.getElementById('copy-oauth-env-vars');
const copySAEnvVarsBtn = document.getElementById('copy-sa-env-vars');
frontend/templates/google_drive_callback.html
+21 -14
View File
@@ -5,7 +5,7 @@
<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">
<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>
@@ -13,18 +13,18 @@
</div>
<div class="flex justify-center my-6">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
<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">
<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">
<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">
<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>
@@ -37,17 +37,17 @@
</div>
</div>
<div class="mt-4">
<a href="/google-drive-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">
<a id="return-to-setup-link" href="/google-drive-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="folder-selection-container" class="hidden mt-6">
<div id="folder-selection-container" class="hidden mt-6" aria-live="polite">
<div class="rounded-md bg-blue-50 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
@@ -65,7 +65,7 @@
<div class="mt-1 flex rounded-md shadow-sm">
<input type="text" id="folder-id-input" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" placeholder="Enter Google Drive folder ID">
<button id="folder-select-picker-btn" type="button" class="ml-3 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">
<svg class="h-4 w-4 mr-1 text-white-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<svg class="h-4 w-4 mr-1 text-white-100" 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" />
</svg>
Select Folder
@@ -84,11 +84,11 @@
</div>
</div>
<div id="success-container" class="hidden mt-6">
<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">
<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>
@@ -140,6 +140,14 @@ document.addEventListener('DOMContentLoaded', function() {
const folderId = sessionStorage.getItem('google_drive_folder_id');
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 = `/google-drive-setup?integration_id=${encodeURIComponent(integrationId)}`;
}
}
const redirectUri = window.location.origin + "/google-drive-callback";
let accessToken = null;
@@ -200,11 +208,10 @@ document.addEventListener('DOMContentLoaded', function() {
client_secret: clientSecret,
refresh_token: data.refresh_token,
};
const cfgUpdate = {};
if (folderId) cfgUpdate.folder_id = folderId;
// Only send credentials — the integration's config (folder_id, etc.)
// is already set and must not be overwritten here.
const body = { credentials: creds };
if (Object.keys(cfgUpdate).length > 0) body.config = cfgUpdate;
document.getElementById('processing-message').innerHTML =
'<p>Saving credentials to your integration...</p>';
frontend/templates/integrations_dashboard.html
+35 -12
View File
@@ -206,14 +206,17 @@
</div>
<!-- Actions -->
<div class="flex items-center gap-2 shrink-0">
<template x-if="isOAuthType(intg.integration_type) && !intg.has_credentials">
<template x-if="isOAuthType(intg)">
<a
:href="oauthLink(intg.integration_type) + '?integration_id=' + intg.id"
class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-yellow-400 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500"
:href="oauthLink(intg) + '?integration_id=' + intg.id"
:class="intg.has_credentials
? 'inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500'
: 'inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-yellow-400 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500'"
style="min-height:36px;"
:aria-label="`Authorize ${intg.name}`"
:aria-label="`${intg.has_credentials ? 'Re-authorize' : 'Authorize'} ${intg.name}`"
>
<i class="fas fa-key mr-1" aria-hidden="true"></i>Authorize
<i class="fas fa-key mr-1" aria-hidden="true"></i>
<span x-text="intg.has_credentials ? 'Re-Authorize' : 'Authorize'"></span>
</a>
</template>
<button
@@ -289,14 +292,17 @@
</div>
<!-- Actions -->
<div class="flex items-center gap-2 shrink-0">
<template x-if="isOAuthType(intg.integration_type) && !intg.has_credentials">
<template x-if="isOAuthType(intg)">
<a
:href="oauthLink(intg.integration_type) + '?integration_id=' + intg.id"
class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-yellow-400 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500"
:href="oauthLink(intg) + '?integration_id=' + intg.id"
:class="intg.has_credentials
? 'inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-blue-300 text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500'
: 'inline-flex items-center px-3 py-1.5 text-xs font-medium rounded border border-yellow-400 text-yellow-700 bg-yellow-50 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500'"
style="min-height:36px;"
:aria-label="`Authorize ${intg.name}`"
:aria-label="`${intg.has_credentials ? 'Re-authorize' : 'Authorize'} ${intg.name}`"
>
<i class="fas fa-key mr-1" aria-hidden="true"></i>Authorize
<i class="fas fa-key mr-1" aria-hidden="true"></i>
<span x-text="intg.has_credentials ? 'Re-Authorize' : 'Authorize'"></span>
</a>
</template>
<button
@@ -1133,12 +1139,29 @@ function integrationsDashboard() {
typeLabel(t) { return TYPE_LABELS[t] || t; },
typeIcon(t) { return TYPE_ICONS[t] || 'fa-plug text-gray-400'; },
hasFormFields(t) { return TYPES_WITH_FORM_FIELDS.has(t); },
isOAuthType(t) { return OAUTH_TYPES.has(t); },
_watchFolderOAuthSource(intg) {
if (intg.integration_type !== 'WATCH_FOLDER') return null;
const src = ((intg.config || {}).source_type || '').toLowerCase();
if (src === 'dropbox' || src === 'onedrive' || src === 'google_drive') return src;
return null;
},
oauthLink(t) {
isOAuthType(intg) {
// Direct OAuth types: DROPBOX, GOOGLE_DRIVE, ONEDRIVE
if (OAUTH_TYPES.has(intg.integration_type)) return true;
// WATCH_FOLDER with an OAuth-backed source type
return this._watchFolderOAuthSource(intg) !== null;
},
oauthLink(intg) {
const t = intg.integration_type;
if (t === 'DROPBOX') return '/dropbox-setup';
if (t === 'GOOGLE_DRIVE') return '/google-drive-setup';
if (t === 'ONEDRIVE') return '/onedrive-setup';
const src = this._watchFolderOAuthSource(intg);
if (src === 'dropbox') return '/dropbox-setup';
if (src === 'onedrive') return '/onedrive-setup';
if (src === 'google_drive') return '/google-drive-setup';
return '#';
},
frontend/templates/onedrive.html
+70 -20
View File
@@ -4,6 +4,37 @@
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="mb-8">
{% if user_mode %}
<!-- ── User-mode header ──────────────────────────────────────────── -->
<div class="mb-4">
<a href="/integrations" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800">
<i class="fas fa-arrow-left mr-1" aria-hidden="true"></i> Back to Integrations
</a>
</div>
<h1 class="text-3xl font-bold mb-2">
Connect OneDrive
{% if integration_name %}<span class="text-gray-500 text-2xl font-normal">— {{ integration_name }}</span>{% endif %}
</h1>
<p class="text-gray-600 mb-4">
Authorize DocuElevate to access your OneDrive account. Your credentials are stored securely in your personal integration record.
</p>
{% if is_configured %}
<div class="bg-green-50 border-l-4 border-green-500 text-green-700 p-4 my-4" role="alert">
<p class="font-semibold">✓ Already authorized</p>
<p class="text-sm mt-1">This integration already has credentials. You can re-authorize below to refresh or update them.
{% if folder_path %}<br><strong>Folder:</strong> {{ folder_path }}{% endif %}
</p>
</div>
{% else %}
<div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
<p class="font-semibold">Authorization required</p>
<p class="text-sm mt-1">Complete the wizard below to grant access to your OneDrive account.
{% if folder_path %}<br><strong>Target folder:</strong> {{ folder_path }}{% endif %}
</p>
</div>
{% endif %}
{% else %}
<!-- ── Admin-mode header ─────────────────────────────────────────── -->
<h1 class="text-3xl font-bold mb-2">OneDrive Integration Setup</h1>
<p class="text-gray-600 mb-4">
Configure the Microsoft OneDrive integration for DocuElevate using our setup wizard.
@@ -37,6 +68,7 @@
</div>
</div>
</div>
{% endif %}
</div>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
@@ -93,16 +125,18 @@
</div>
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
<h2 class="text-2xl font-semibold mb-4">Complete Setup with Wizard</h2>
<h2 class="text-2xl font-semibold mb-4">
{% if user_mode %}OAuth Wizard{% else %}Complete Setup with Wizard{% endif %}
</h2>
<div class="space-y-4">
<div>
<label for="client-id" class="block text-sm font-medium text-gray-700">Client ID</label>
<label for="client-id" class="block text-sm font-medium text-gray-700">Client ID <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="text" id="client-id" 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="Enter your Azure AD application client ID" value="{{ client_id_value }}">
</div>
<div>
<label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret</label>
<label for="client-secret" class="block text-sm font-medium text-gray-700">Client Secret <span class="text-red-500" aria-hidden="true">*</span></label>
<input type="password" id="client-secret" 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="Enter your Azure AD application client secret" value="{{ client_secret_value }}">
</div>
@@ -112,11 +146,20 @@
<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>
{% if not user_mode %}
<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>
{% else %}
{% if folder_path %}
<div class="bg-gray-50 border border-gray-200 rounded-md px-3 py-2">
<p class="text-xs text-gray-500">Target folder (from integration settings)</p>
<p class="text-sm font-mono text-gray-700">{{ folder_path }}</p>
</div>
{% endif %}
{% endif %}
<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">
@@ -124,7 +167,8 @@
</button>
</div>
<!-- Token validation and status -->
<!-- Token validation and status (admin mode only) -->
{% if not user_mode %}
<div id="token-status" class="mt-6 {{ 'hidden' if not is_configured else '' }}">
<div class="rounded-md {{ 'bg-green-50' if is_configured else 'bg-yellow-50' }} p-4">
<div class="flex">
@@ -160,7 +204,7 @@
</button>
</div>
<!-- Configuration for Worker Nodes section -->
<!-- Configuration for Worker Nodes section (admin only) -->
<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">
@@ -184,6 +228,7 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
</p>
</div>
</div>
{% endif %}
</div>
</div>
@@ -205,13 +250,19 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
</div>
<div class="mt-8">
{% if user_mode %}
<a href="/integrations" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<i class="fas fa-arrow-left mr-2" aria-hidden="true"></i> Back to Integrations
</a>
{% else %}
<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">
Back to Status
</a>
{% endif %}
</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 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" aria-labelledby="modalTitle">
<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">
@@ -237,6 +288,8 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const userMode = {{ 'true' if user_mode else 'false' }};
// Store integration_id if provided (for per-user OAuth flow)
const integrationId = "{{ integration_id or '' }}";
if (integrationId) {
@@ -302,7 +355,6 @@ document.addEventListener('DOMContentLoaded', function() {
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) {
showModal('error', 'Validation Error', 'Please enter your Client ID');
@@ -319,8 +371,12 @@ document.addEventListener('DOMContentLoaded', function() {
sessionStorage.setItem('onedrive_client_secret', clientSecret);
sessionStorage.setItem('onedrive_tenant_id', tenantId);
if (folderPath) {
sessionStorage.setItem('onedrive_folder_path', folderPath);
// In admin mode also store folder path; in user mode the config is already set
if (!userMode) {
const folderPathEl = document.getElementById('folder-path');
if (folderPathEl && folderPathEl.value.trim()) {
sessionStorage.setItem('onedrive_folder_path', folderPathEl.value.trim());
}
}
// Generate the authorization URL with .default scope
@@ -330,7 +386,7 @@ document.addEventListener('DOMContentLoaded', function() {
window.location.href = authUrl;
});
// Test Token button click
// Test Token button click (admin mode only)
if (testTokenBtn) {
testTokenBtn.addEventListener('click', function() {
testTokenBtn.innerHTML = '<span class="animate-spin inline-block mr-2">⟳</span> Testing...';
@@ -367,7 +423,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Refresh Token button click
// Refresh Token button click (admin mode only)
if (refreshTokenBtn) {
refreshTokenBtn.addEventListener('click', function() {
showModal('info', 'Confirm', 'This will start a new authentication flow to obtain a fresh token from Microsoft. Continue?');
@@ -398,7 +454,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Copy Environment Variables Button
// Copy Environment Variables Button (admin mode only)
const copyEnvVarsBtn = document.getElementById('copy-env-vars');
if (copyEnvVarsBtn) {
copyEnvVarsBtn.addEventListener('click', function() {
@@ -437,14 +493,8 @@ document.addEventListener('DOMContentLoaded', function() {
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
if (document.getElementById('client-id').value && !tokenStatus.classList.contains('hidden')) {
// If token is configured and we have a client ID, show the token status section (admin mode)
if (tokenStatus && document.getElementById('client-id').value && !tokenStatus.classList.contains('hidden')) {
tokenStatus.classList.remove('hidden');
}
});
frontend/templates/onedrive_callback.html
+18 -11
View File
@@ -5,7 +5,7 @@
<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">
<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>
@@ -13,18 +13,18 @@
</div>
<div class="flex justify-center my-6">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
<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">
<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">
<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">
<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>
@@ -37,17 +37,17 @@
</div>
</div>
<div class="mt-4">
<a 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">
<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">
<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">
<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>
@@ -100,6 +100,14 @@ document.addEventListener('DOMContentLoaded', function() {
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
@@ -149,11 +157,10 @@ document.addEventListener('DOMContentLoaded', function() {
refresh_token: data.refresh_token,
tenant_id: tenantId,
};
const cfgUpdate = {};
if (folderPath) cfgUpdate.folder_path = folderPath;
// 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 };
if (Object.keys(cfgUpdate).length > 0) body.config = cfgUpdate;
document.getElementById('processing-message').innerHTML =
'<p>Saving credentials to your integration...</p>';