ultimate-jekyll-manager 0.0.117 → 0.0.118

package/dist/assets/js/core/auth.js

@@ -1,4 +1,4 @@
-import fetch from 'wonderful-fetch';
+import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 
 // Auth Module
 export default function (Manager, options) {
@@ -166,9 +166,6 @@ function setAnalyticsUserId(user) {
 // Send user metadata to server (affiliate, UTM params, etc.)
 async function sendUserSignupMetadata(user, webManager) {
   try {
-    // Get the auth token
-    const token = await webManager.auth().getIdToken();
-
     // Get affiliate data from storage
     const affiliateData = webManager.storage().get('marketing.affiliate', null);
     const utmData = webManager.storage().get('marketing.utm', null);
@@ -193,11 +190,10 @@ async function sendUserSignupMetadata(user, webManager) {
     // Get server API URL
     const serverApiURL = webManager.getApiUrl() + '/backend-manager';
 
-    // Make API call to reset API key
-    const response = await fetch(serverApiURL, {
+    // Make API call to send signup metadata
+    const response = await authorizedFetch(serverApiURL, {
       method: 'POST',
       body: {
-        authenticationToken: token,
         command: 'user:sign-up',
         payload: payload
       }

package/dist/assets/js/libs/prerendered-icons.js

@@ -0,0 +1,27 @@
+/**
+ * Prerendered Icons Library
+ * Retrieves pre-rendered icon HTML from the frontmatter icon system
+ */
+
+/**
+ * Get pre-rendered icon by name from frontmatter icon system
+ * @param {string} iconName - Name of the icon to retrieve (matches data-icon attribute)
+ * @returns {string} Icon HTML or empty string if not found
+ *
+ * @example
+ * import { getPrerenderedIcon } from '__main_assets__/js/libs/prerendered-icons.js';
+ *
+ * // Get an icon
+ * const appleIcon = getPrerenderedIcon('apple');
+ */
+export function getPrerenderedIcon(iconName) {
+  // Query the global prerendered icons container
+  const $iconTemplate = document.querySelector(`#prerendered-icons [data-icon="${iconName}"]`);
+
+  if ($iconTemplate) {
+    return $iconTemplate.innerHTML;
+  }
+
+  // Return empty string if not found
+  return '';
+}

package/dist/assets/js/pages/account/index.js

@@ -82,7 +82,7 @@ async function initializeAccount() {
     {
       // Check for test subscription parameter
       const urlParams = new URLSearchParams(window.location.search);
-      const testSubscription = urlParams.get('_test_subscription');
+      const testSubscription = urlParams.get('_dev_subscription');
 
       if (testSubscription && webManager.isDevelopment()) {
         try {

package/dist/assets/js/pages/account/sections/api-keys.js

@@ -1,6 +1,6 @@
 // API Keys section module
 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 resetApiKeyFormManager = null;
@@ -113,20 +113,16 @@ async function handleCopyApiKey() {
 
 // Handle reset API key form submission
 async function handleResetApiKeySubmit() {
-  // Get authentication token
-  const token = await webManager.auth().getIdToken();
-
   // Get server API URL
   const serverApiURL = webManager.getApiUrl() + '/backend-manager';
 
   // Make API call to reset API key
-  const response = await fetch(serverApiURL, {
+  const response = await authorizedFetch(serverApiURL, {
     method: 'POST',
     timeout: 30000,
     response: 'json',
     tries: 2,
     body: {
-      authenticationToken: token,
       command: 'user:regenerate-api-keys',
     },
   });

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/referrals.js

@@ -11,10 +11,10 @@ export function init(wm) {
 // Load referrals data
 export function loadData(account) {
   if (!account) return;
-  
+
   // Update referral code (real code only)
   updateReferralCode(account.affiliate?.code);
-  
+
   // Update referrals list
   updateReferralsList(account.affiliate?.referrals);
 }
@@ -22,7 +22,7 @@ export function loadData(account) {
 // Update referral code display
 function updateReferralCode(code) {
   const $codeInput = document.getElementById('referral-code-input');
-  
+
   if ($codeInput) {
     if (code) {
       const baseUrl = window.location.origin;
@@ -39,19 +39,19 @@ function updateReferralsList(referrals) {
   const $recentReferrals = document.getElementById('recent-referrals');
   const $referralsBadge = document.getElementById('referrals-badge');
   const $referralsList = document.getElementById('referrals-list');
-  
+
   // Initialize referrals array
   let referralData = referrals || [];
-  
-  // Add fake data if _test_prefill=true is in query string
+
+  // Add fake data if _dev_prefill=true is in query string
   const urlParams = new URLSearchParams(window.location.search);
-  if (urlParams.get('_test_prefill') === 'true') {
+  if (urlParams.get('_dev_prefill') === 'true') {
     console.log('Adding fake referral data for testing');
     const fakeReferrals = generateFakeReferrals();
     // Add fake referrals to existing data
     referralData = [...referralData, ...fakeReferrals];
   }
-  
+
   // Handle empty state
   if (!referralData || !Array.isArray(referralData) || referralData.length === 0) {
     // No referrals - show empty state
@@ -67,7 +67,7 @@ function updateReferralsList(referrals) {
     }
     return;
   }
-  
+
   // Calculate stats
   const totalCount = referralData.length;
   const now = new Date();
@@ -76,19 +76,19 @@ function updateReferralsList(referrals) {
     const timestamp = ref.timestamp || ref.timestampUNIX * 1000;
     return timestamp >= thisMonth;
   }).length;
-  
+
   // Update stats
   if ($totalReferrals) $totalReferrals.textContent = totalCount.toString();
   if ($recentReferrals) $recentReferrals.textContent = recentCount.toString();
   if ($referralsBadge) $referralsBadge.textContent = totalCount.toString();
-  
+
   // Sort referrals by timestamp in reverse order (newest first)
   const sortedReferrals = [...referralData].sort((a, b) => {
     const timeA = a.timestamp || (a.timestampUNIX * 1000) || 0;
     const timeB = b.timestamp || (b.timestampUNIX * 1000) || 0;
     return timeB - timeA; // Reverse order
   });
-  
+
   // Generate referral list HTML
   if ($referralsList) {
     if (sortedReferrals.length === 0) {
@@ -103,7 +103,7 @@ function updateReferralsList(referrals) {
         const date = timestamp ? new Date(timestamp) : null;
         const dateStr = date ? formatDate(date) : 'Unknown date';
         const timeStr = date ? formatTime(date) : '';
-        
+
         return `
           <div class="list-group-item px-0">
             <div class="d-flex justify-content-between align-items-center">
@@ -123,7 +123,7 @@ function updateReferralsList(referrals) {
           </div>
         `;
       }).join('');
-      
+
       $referralsList.innerHTML = referralHTML;
     }
   }
@@ -149,45 +149,45 @@ function formatTime(date) {
 // Get time since string
 function getTimeSince(timestamp) {
   if (!timestamp) return '<small class="text-muted">Unknown</small>';
-  
+
   const now = Date.now();
   const diff = now - timestamp;
-  
+
   // Less than 1 minute
   if (diff < 60000) {
     return '<small class="text-success">Just now</small>';
   }
-  
+
   // Less than 1 hour
   if (diff < 3600000) {
     const minutes = Math.floor(diff / 60000);
     return `<small class="text-muted">${minutes} min${minutes > 1 ? 's' : ''} ago</small>`;
   }
-  
+
   // Less than 24 hours
   if (diff < 86400000) {
     const hours = Math.floor(diff / 3600000);
     return `<small class="text-muted">${hours} hour${hours > 1 ? 's' : ''} ago</small>`;
   }
-  
+
   // Less than 7 days
   if (diff < 604800000) {
     const days = Math.floor(diff / 86400000);
     return `<small class="text-muted">${days} day${days > 1 ? 's' : ''} ago</small>`;
   }
-  
+
   // Less than 30 days
   if (diff < 2592000000) {
     const weeks = Math.floor(diff / 604800000);
     return `<small class="text-muted">${weeks} week${weeks > 1 ? 's' : ''} ago</small>`;
   }
-  
+
   // More than 30 days
   const months = Math.floor(diff / 2592000000);
   if (months < 12) {
     return `<small class="text-muted">${months} month${months > 1 ? 's' : ''} ago</small>`;
   }
-  
+
   const years = Math.floor(months / 12);
   return `<small class="text-muted">${years} year${years > 1 ? 's' : ''} ago</small>`;
 }
@@ -205,31 +205,31 @@ function setupButtons() {
 async function handleCopyReferralCode() {
   const $codeInput = document.getElementById('referral-code-input');
   const $copyBtn = document.getElementById('copy-referral-code-btn');
-  
+
   if (!$codeInput || !$codeInput.value || $codeInput.value === 'No referral link available') {
     webManager.utilities().showNotification('No referral link to copy', 'warning');
     return;
   }
-  
+
   try {
     // Copy the full URL directly from the input (it now contains the full URL)
     await webManager.utilities().clipboardCopy($codeInput);
-    
+
     // Update button text temporarily
     const $text = $copyBtn.querySelector('.button-text');
     const originalText = $text.textContent;
-    
+
     $text.textContent = 'Copied!';
     $copyBtn.classList.remove('btn-primary');
     $copyBtn.classList.add('btn-success');
-    
+
     // Reset after 2 seconds
     setTimeout(() => {
       $text.textContent = originalText;
       $copyBtn.classList.remove('btn-success');
       $copyBtn.classList.add('btn-primary');
     }, 2000);
-    
+
   } catch (err) {
     console.error('Failed to copy referral link:', err);
     webManager.utilities().showNotification('Failed to copy referral link', 'danger');
@@ -240,7 +240,7 @@ async function handleCopyReferralCode() {
 function generateFakeReferrals() {
   const now = Date.now();
   const oneDay = 24 * 60 * 60 * 1000;
-  
+
   return [
     {
       uid: 'user_k9m2n8p4q1r7',