ultimate-jekyll-manager 0.0.117 → 0.0.119

package/dist/assets/js/pages/account/sections/connections.js

@@ -1,6 +1,6 @@
 // Connections section module for OAuth account linking
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
-import fetch from 'wonderful-fetch';
+import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';;
 
 let webManager = null;
 let appData = null;
@@ -32,6 +32,8 @@ export async function loadData(account, sharedAppData) {
 
 // Display available and connected OAuth providers
 function displayConnections() {
+  console.log('[DEBUG] displayConnections() called');
+
   // Hide loading state
   const $loading = document.getElementById('connections-loading');
   if ($loading) {
@@ -40,6 +42,7 @@ function displayConnections() {
 
   // Check if appData is loaded
   if (!appData) {
+    console.log('[DEBUG] No appData, showing loading state');
     // Show loading if no app data yet
     if ($loading) {
       $loading.classList.remove('d-none');
@@ -51,36 +54,51 @@ function displayConnections() {
   const availableProviders = appData?.oauth2 || {};
   const userConnections = accountData?.oauth2 || {};
 
+  console.log('[DEBUG] Available OAuth providers:', availableProviders);
+  console.log('[DEBUG] User connections:', userConnections);
+
   // Check if any providers are configured
   let hasEnabledProviders = false;
 
   // Process each supported provider
   supportedProviders.forEach(providerId => {
+    console.log(`[DEBUG] Processing provider: ${providerId}`);
+
     const providerSettings = availableProviders[providerId];
     const $providerElement = document.getElementById(`connection-${providerId}`);
 
+    console.log(`[DEBUG] ${providerId} - providerSettings:`, providerSettings);
+    console.log(`[DEBUG] ${providerId} - providerSettings.enabled:`, providerSettings?.enabled);
+    console.log(`[DEBUG] ${providerId} - $providerElement exists:`, !!$providerElement);
+
     if (!$providerElement) {
+      console.warn(`[DEBUG] ${providerId} - Provider element not found in DOM`);
       return;
     }
 
     // Check if provider is enabled
     const isEnabled = providerSettings && providerSettings.enabled !== false;
+    console.log(`[DEBUG] ${providerId} - isEnabled:`, isEnabled);
 
     if (isEnabled) {
       hasEnabledProviders = true;
 
-      // Show the provider element
+      // Show the provider element first
+      console.log(`[DEBUG] ${providerId} - Removing d-none class`);
       $providerElement.classList.remove('d-none');
 
-      // CRITICAL: Update button status BEFORE initializing FormManager
-      // This ensures FormManager stores the CORRECT button state from the start
+      // Initialize FormManager for this provider before updating status
+      console.log(`[DEBUG] ${providerId} - About to initialize FormManager`);
+      initializeProviderForm(providerId);
+
+      // Update provider status based on user connection
       const userConnection = userConnections[providerId];
+      console.log(`[DEBUG] ${providerId} - userConnection:`, userConnection);
+      console.log(`[DEBUG] ${providerId} - About to update provider status`);
       updateProviderStatus(providerId, userConnection, providerSettings);
-
-      // Initialize FormManager AFTER setting correct button state
-      initializeProviderForm(providerId);
     } else {
       // Hide disabled providers
+      console.log(`[DEBUG] ${providerId} - Provider disabled, adding d-none class`);
       $providerElement.classList.add('d-none');
     }
   });
@@ -98,14 +116,28 @@ function displayConnections() {
 
 // Update provider status display
 function updateProviderStatus(providerId, userConnection, providerSettings) {
+  console.log(`[DEBUG] updateProviderStatus() called for ${providerId}`);
+  console.log(`[DEBUG] ${providerId} - userConnection:`, userConnection);
+  console.log(`[DEBUG] ${providerId} - userConnection truthy:`, !!userConnection);
+  console.log(`[DEBUG] ${providerId} - userConnection.identity:`, userConnection?.identity);
+  console.log(`[DEBUG] ${providerId} - providerSettings:`, providerSettings);
+
   const $status = document.getElementById(`${providerId}-connection-status`);
   const $description = document.getElementById(`${providerId}-connection-description`);
   const $form = document.getElementById(`connection-form-${providerId}`);
-  const $button = $form?.querySelector('button[type="submit"]');
-  const $buttonText = $button?.querySelector('.button-text');
-  const $action = $form?.querySelector('input[name="action"]');
+  const $connectButton = $form?.querySelector('button[data-action="connect"]');
+  const $disconnectButton = $form?.querySelector('button[data-action="disconnect"]');
+
+  console.log(`[DEBUG] ${providerId} - DOM elements found:`, {
+    $status: !!$status,
+    $description: !!$description,
+    $form: !!$form,
+    $connectButton: !!$connectButton,
+    $disconnectButton: !!$disconnectButton
+  });
 
   const isConnected = userConnection && userConnection.identity;
+  console.log(`[DEBUG] ${providerId} - isConnected:`, isConnected);
 
   // Always show description on the left
   if ($description) {
@@ -117,9 +149,8 @@ function updateProviderStatus(providerId, userConnection, providerSettings) {
       facebook: 'Connect your Facebook account for social features'
     };
 
-    const descriptionText = providerSettings?.description
-      || defaultDescriptions[providerId]
-      || `Connect your ${providerId.charAt(0).toUpperCase() + providerId.slice(1)} account`;
+    // Use provider description or fallback to default
+    const descriptionText = providerSettings?.description || defaultDescriptions[providerId] || `Connect your ${providerId.charAt(0).toUpperCase() + providerId.slice(1)} account`;
     $description.textContent = descriptionText;
     $description.classList.remove('d-none');
   }
@@ -144,39 +175,26 @@ function updateProviderStatus(providerId, userConnection, providerSettings) {
       $status.textContent = statusText;
       $status.classList.remove('d-none');
     } else {
-      // Not connected - hide status under button
+      // Not connected - hide status text
       $status.textContent = '';
       $status.classList.add('d-none');
     }
   }
 
-  if ($button && $buttonText && $action) {
+  // Show/hide appropriate button
+  if ($connectButton && $disconnectButton) {
+    console.log(`[DEBUG] ${providerId} - Updating buttons. isConnected:`, isConnected);
+
     if (isConnected) {
-      // Update to disconnect state (RED button)
-      $button.classList.remove('btn-primary');
-      $button.classList.add('btn-outline-danger');
-      $buttonText.textContent = 'Disconnect';
-      $action.value = 'disconnect';
-
-      // Replace icon
-      const $icon = $button.querySelector('.fa-icon');
-      if ($icon) {
-        $icon.classList.remove('fa-link');
-        $icon.classList.add('fa-unlink');
-      }
+      // Hide connect button, show disconnect button
+      $connectButton.classList.add('d-none');
+      $disconnectButton.classList.remove('d-none');
+      console.log(`[DEBUG] ${providerId} - Showing disconnect button`);
     } else {
-      // Update to connect state (BLUE button)
-      $button.classList.remove('btn-outline-danger');
-      $button.classList.add('btn-primary');
-      $buttonText.textContent = 'Connect';
-      $action.value = 'connect';
-
-      // Replace icon
-      const $icon = $button.querySelector('.fa-icon');
-      if ($icon) {
-        $icon.classList.remove('fa-unlink');
-        $icon.classList.add('fa-link');
-      }
+      // Show connect button, hide disconnect button
+      $connectButton.classList.remove('d-none');
+      $disconnectButton.classList.add('d-none');
+      console.log(`[DEBUG] ${providerId} - Showing connect button`);
     }
   }
 }
@@ -185,12 +203,13 @@ function updateProviderStatus(providerId, userConnection, providerSettings) {
 function getConnectionDisplayName(connection) {
   if (!connection || !connection.identity) return 'Unknown';
 
-  return connection.identity.global_name
-    || connection.identity.username
-    || connection.identity.name
-    || connection.identity.email
-    || connection.identity.id
-    || 'Connected';
+  // Try different fields based on provider
+  return connection.identity.global_name ||
+         connection.identity.username ||
+         connection.identity.name ||
+         connection.identity.email ||
+         connection.identity.id ||
+         'Connected';
 }
 
 // Initialize FormManager for a provider
@@ -205,9 +224,12 @@ function initializeProviderForm(providerId) {
 
   // Skip if already initialized
   if (connectionForms.has(providerId)) {
+    console.log(`FormManager already initialized for ${providerId}`);
     return;
   }
 
+  console.log(`Initializing FormManager for ${providerId}`);
+
   // Create new FormManager
   const formManager = new FormManager(`#${formId}`, {
     autoDisable: true,
@@ -217,14 +239,32 @@ function initializeProviderForm(providerId) {
   // Store the FormManager instance
   connectionForms.set(providerId, formManager);
 
+  // Listen for state changes to update button after FormManager is ready
+  formManager.addEventListener('statechange', (event) => {
+    const { status } = event.detail;
+    console.log(`[DEBUG] ${providerId} - FormManager state changed to:`, status);
+
+    // When FormManager transitions to ready, update the button status
+    if (status === 'ready') {
+      console.log(`[DEBUG] ${providerId} - FormManager is ready, updating button status`);
+      const userConnection = accountData?.oauth2?.[providerId];
+      const providerSettings = appData?.oauth2?.[providerId];
+      updateProviderStatus(providerId, userConnection, providerSettings);
+    }
+  });
+
   // Handle form submission
   formManager.addEventListener('submit', async (event) => {
     event.preventDefault();
 
-    const { data } = event.detail;
-    const action = data.action;
+    const { data, submitButton } = event.detail;
     const provider = data.provider;
 
+    // Determine action from the clicked button's data-action attribute
+    const action = submitButton?.getAttribute('data-action');
+
+    console.log(`[DEBUG] ${providerId} - Form submitted. Action:`, action, 'Provider:', provider);
+
     try {
       if (action === 'connect') {
         await handleConnect(provider);
@@ -233,10 +273,13 @@ function initializeProviderForm(providerId) {
         if (success) {
           // Reset form state and update UI after successful disconnect
           formManager.setFormState('ready');
+          // Get provider settings to pass for description display
           const providerSettings = appData?.oauth2?.[provider];
           updateProviderStatus(provider, null, providerSettings);
         }
       }
+
+      // Success - FormManager will handle state automatically
     } catch (error) {
       // Show error and reset form state
       formManager.showError(error);
@@ -252,19 +295,15 @@ async function handleConnect(providerId) {
     throw new Error('This connection service is not available.');
   }
 
-  // Get user token
-  const token = await webManager.auth().getIdToken();
-
   // Get scope from provider settings (pass as array)
   const scope = provider.scope || [];
 
-  const response = await fetch(getApiUrl(), {
+  const response = await authorizedFetch(getApiUrl(), {
     method: 'POST',
     timeout: 30000,
     response: 'json',
     tries: 2,
     body: {
-      authenticationToken: token,
       command: 'user:oauth2',
       payload: {
         redirect: false,
@@ -276,6 +315,8 @@ async function handleConnect(providerId) {
     },
   });
 
+  console.log('OAuth connect response:', response);
+
   // For authorize requests, server returns an object with URL to redirect to
   if (response.url) {
     window.location.href = response.url;
@@ -296,20 +337,16 @@ async function handleDisconnect(providerId) {
     throw new Error('Disconnection cancelled');
   }
 
-  // Get user token
-  const token = await webManager.auth().getIdToken();
-
   // Get provider settings for scope (pass as array)
   const provider = appData?.oauth2?.[providerId] || {};
   const scope = provider.scope || [];
 
-  const response = await fetch(getApiUrl(), {
+  const response = await authorizedFetch(getApiUrl(), {
     method: 'POST',
     timeout: 30000,
     response: 'json',
     tries: 2,
     body: {
-      authenticationToken: token,
       command: 'user:oauth2',
       payload: {
         redirect: false,
@@ -321,12 +358,15 @@ async function handleDisconnect(providerId) {
     },
   });
 
+  console.log('OAuth disconnect response:', response);
+
   if (response.success) {
     // Update local account data
     if (accountData.oauth2 && accountData.oauth2[providerId]) {
       delete accountData.oauth2[providerId];
     }
 
+    // Return success
     return true;
   } else {
     throw new Error(response.message || 'Failed to disconnect');
@@ -335,6 +375,8 @@ async function handleDisconnect(providerId) {
 
 // Called when section is shown
 export function onShow() {
-  // Don't re-run displayConnections() - it's already been called from loadData()
-  // Re-running it would re-initialize FormManager and cause race conditions
+  // Refresh connections display when section is shown
+  if (accountData && appData) {
+    displayConnections();
+  }
 }

package/dist/assets/js/pages/account/sections/delete.js

@@ -1,7 +1,9 @@
 // Delete account section module
-import fetch from 'wonderful-fetch';
+import { FormManager } from '__main_assets__/js/libs/form-manager.js';
+import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 
 let webManager = null;
+let formManager = null;
 
 // Initialize delete section
 export async function init(wm) {
@@ -15,9 +17,21 @@ function setupDeleteAccountForm() {
   const $checkbox = document.getElementById('delete-confirm-checkbox');
   const $deleteBtn = document.getElementById('delete-account-btn');
   const $cancelBtn = document.getElementById('cancel-delete-btn');
-  const $reason = document.getElementById('delete-reason');
 
-  if (!$form || !$checkbox || !$deleteBtn) return;
+  if (!$form || !$checkbox || !$deleteBtn) {
+    return;
+  }
+
+  // Initialize FormManager
+  formManager = new FormManager('#delete-account-form', {
+    autoDisable: true,
+    showSpinner: true,
+    validateOnSubmit: false, // We'll handle validation manually due to custom confirmation flow
+    allowMultipleSubmissions: false,
+    resetOnSuccess: false,
+    submitButtonLoadingText: 'Deleting account...',
+    initialState: 'ready',
+  });
 
   // Enable/disable delete button based on checkbox
   $checkbox.addEventListener('change', (e) => {
@@ -32,75 +46,80 @@ function setupDeleteAccountForm() {
     });
   }
 
-  // Handle form submission
-  $form.addEventListener('submit', async (e) => {
-    e.preventDefault();
+  // Listen to FormManager submit event
+  formManager.addEventListener('submit', handleFormSubmit);
+}
 
-    // Check if checkbox is checked
-    if (!$checkbox.checked) {
-      alert('Please confirm that you understand this action is permanent.');
-      return;
-    }
+// Handle form submission
+async function handleFormSubmit(event) {
+  // Prevent default FormManager submission
+  event.preventDefault();
 
-    // Show confirmation dialog
-    const confirmMessage = `Are you absolutely sure you want to delete your account?\n\nThis action CANNOT be undone.\n\nType "DELETE" to confirm:`;
-    const userInput = prompt(confirmMessage);
+  const formData = event.detail.data;
+  const $checkbox = document.getElementById('delete-confirm-checkbox');
 
-    if (userInput !== 'DELETE') {
-      alert('Account deletion cancelled. You must type "DELETE" exactly to confirm.');
-      return;
-    }
+  // Check if checkbox is checked
+  if (!$checkbox.checked) {
+    formManager.showError('Please confirm that you understand this action is permanent.');
+    formManager.setFormState('ready');
+    return;
+  }
 
-    // Final confirmation
-    const finalConfirm = confirm('This is your last chance to cancel.\n\nAre you sure you want to permanently delete your account?');
-    
-    if (!finalConfirm) {
-      return;
-    }
+  // Show confirmation dialog
+  const confirmMessage = `Are you absolutely sure you want to delete your account?\n\nThis action CANNOT be undone.\n\nType "DELETE" to confirm:`;
+  const userInput = prompt(confirmMessage);
 
-    // Disable button and show loading
-    $deleteBtn.disabled = true;
-    $deleteBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span><span class="button-text">Deleting account...</span>`;
-
-    try {
-      // Get API base URL
-      const apiBaseUrl = webManager.isDevelopment()
-        ? 'http://localhost:5002'
-        : 'https://api.itwcreativeworks.com';
-
-      // Send delete request to server
-      const response = await fetch(`${apiBaseUrl}/account/delete`, {
-        method: 'POST',
-        response: 'json',
-        body: {
-          reason: $reason.value || '',
+  if (userInput !== 'DELETE') {
+    formManager.showError('Account deletion cancelled. You must type "DELETE" exactly to confirm.');
+    formManager.setFormState('ready');
+    return;
+  }
+
+  // Final confirmation
+  const finalConfirm = confirm('This is your last chance to cancel.\n\nAre you sure you want to permanently delete your account?');
+
+  if (!finalConfirm) {
+    formManager.setFormState('ready');
+    return;
+  }
+
+  try {
+    // Send delete request to server
+    const response = await authorizedFetch(webManager.getApiUrl(), {
+      method: 'POST',
+      timeout: 30000,
+      response: 'json',
+      tries: 2,
+      body: {
+        command: 'user:delete',
+        payload: {
+          reason: formData.reason || '',
           confirmed: true
         }
-      });
-
-      console.log('Delete account response:', response);
-
-      if (response.success) {
-        // Show success message
-        alert('Your account has been successfully deleted. You will now be signed out.');
-        
-        // Sign out the user
-        await webManager.auth().signOut();
-        
-        // Redirect to home page
-        window.location.href = '/';
-      } else {
-        throw new Error(response.message || 'Failed to delete account');
       }
-    } catch (error) {
-      console.error('Failed to delete account:', error);
-      alert(`Failed to delete account: ${error.message}`);
-      
-      // Re-enable button
-      $deleteBtn.disabled = !$checkbox.checked;
-      $deleteBtn.innerHTML = `<i class="fa-solid fa-trash fa-sm me-2"></i><span class="button-text">Delete My Account Permanently</span>`;
+    });
+
+    console.log('Delete account response:', response);
+
+    if (response.success) {
+      // Show success message
+      formManager.showSuccess('Your account has been successfully deleted. You will now be signed out.');
+
+      // Sign out the user
+      await webManager.auth().signOut();
+
+      // Redirect to home page
+      setTimeout(() => {
+        window.location.href = '/';
+      }, 1500);
+    } else {
+      throw new Error(response.message || 'Failed to delete account');
     }
-  });
+  } catch (error) {
+    console.error('Failed to delete account:', error);
+    formManager.showError(`Failed to delete account: ${error.message}`);
+    formManager.setFormState('ready');
+  }
 }
 
 // Load delete section data (if needed)
@@ -111,25 +130,5 @@ export async function loadData(account) {
 
 // Called when section is shown
 export function onShow() {
-  // Reset form when shown
-  const $form = document.getElementById('delete-account-form');
-  const $checkbox = document.getElementById('delete-confirm-checkbox');
-  const $deleteBtn = document.getElementById('delete-account-btn');
-  const $reason = document.getElementById('delete-reason');
 
-  if ($form) {
-    $form.reset();
-  }
-
-  if ($checkbox) {
-    $checkbox.checked = false;
-  }
-
-  if ($deleteBtn) {
-    $deleteBtn.disabled = true;
-  }
-
-  if ($reason) {
-    $reason.value = '';
-  }
-}
+}