feat(integrations): add per-user OAuth wizard with user-mode for Dropbox, OneDrive, Google Drive

- Add user_mode to dropbox/onedrive/google_drive setup views that loads integration config
- Show user-friendly auth wizard when integration_id is provided (user mode)
- In user mode: show integration name, current folder, back-to-integrations link
- In callback templates: only save credentials (not config) for user integrations
- In integrations dashboard: show Authorize/Re-Authorize button for all OAuth types
- Add WATCH_FOLDER OAuth support: detect source_type in config for auth button
- isOAuthType() and oauthLink() now accept full integration object

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/templates/dropbox.html

@@ -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,9 +229,15 @@ 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 -->
@@ -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');
   }
 });