ultimate-jekyll-manager 0.0.116 → 0.0.118

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

@@ -1,6 +1,7 @@
 // Security section module
-import fetch from 'wonderful-fetch';
+import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import { FormManager } from '__main_assets__/js/libs/form-manager.js';
+import { getPrerenderedIcon } from '__main_assets__/js/libs/prerendered-icons.js';
 
 let webManager = null;
 let firebaseAuth = null;
@@ -11,7 +12,6 @@ let signoutAllForm = null; // FormManager instance for sign out all sessions
 export function init(wm) {
   webManager = wm;
   initializeSigninMethods();
-  initializeSigninMethodForms();
   initializeSignoutAllForm();
 }
 
@@ -19,9 +19,15 @@ export function init(wm) {
 export function loadData(account) {
   if (!account) return;
 
-  // Update signin methods
+  console.log('[DEBUG] security.js - loadData() called with account:', account);
+
+  // CRITICAL: Update signin methods BEFORE initializing FormManagers
+  // This ensures FormManager stores the correct button state from the start
   updateSigninMethods();
 
+  // Initialize FormManagers AFTER setting correct button states
+  initializeSigninMethodForms();
+
   // Update 2FA status
   update2FAStatus(account.security?.twoFactor);
 
@@ -31,6 +37,8 @@ export function loadData(account) {
 
 // Initialize signin methods
 async function initializeSigninMethods() {
+  console.log('[DEBUG] security.js - initializeSigninMethods() called');
+
   // Get Firebase auth instance
   firebaseAuth = webManager.firebaseAuth;
 
@@ -61,13 +69,23 @@ async function checkRedirectResult() {
 
 // Update signin methods display
 async function updateSigninMethods() {
+  console.log('[DEBUG] security.js - updateSigninMethods() called');
+
   // Use Firebase auth directly for most up-to-date provider information
   const firebaseUser = firebaseAuth?.currentUser;
-  if (!firebaseUser) return;
+  if (!firebaseUser) {
+    console.log('[DEBUG] security.js - No firebaseUser, returning');
+    return;
+  }
 
   // Get the formatted user from webManager for consistency, but we'll use firebaseUser for provider data
   const user = webManager.auth().getUser();
-  if (!user) return;
+  if (!user) {
+    console.log('[DEBUG] security.js - No user from webManager, returning');
+    return;
+  }
+
+  console.log('[DEBUG] security.js - firebaseUser.providerData:', firebaseUser.providerData);
 
   // Update password email display
   const $passwordEmail = document.getElementById('password-email');
@@ -75,42 +93,43 @@ async function updateSigninMethods() {
     // Check if user has password provider using firebaseUser for most up-to-date data
     const hasPassword = firebaseUser.providerData?.some(provider => provider.providerId === 'password');
     $passwordEmail.textContent = hasPassword ? user.email : 'Not set';
+    console.log('[DEBUG] security.js - hasPassword:', hasPassword);
   }
 
   // Update Google signin display
   const $googleEmail = document.getElementById('google-email');
   const $googleForm = document.getElementById('signin-method-google-form');
-  const $googleBtn = $googleForm?.querySelector('button[type="submit"]');
-  const $googleBtnText = $googleBtn?.querySelector('.button-text');
-  const $googleAction = $googleForm?.querySelector('input[name="action"]');
-  const $googleIcon = $googleBtn?.querySelector('.fa-icon');
+  const $connectButton = $googleForm?.querySelector('button[data-action="connect"]');
+  const $disconnectButton = $googleForm?.querySelector('button[data-action="disconnect"]');
 
-  if ($googleEmail && $googleBtn) {
+  console.log('[DEBUG] security.js - Google DOM elements:', {
+    $googleEmail: !!$googleEmail,
+    $googleForm: !!$googleForm,
+    $connectButton: !!$connectButton,
+    $disconnectButton: !!$disconnectButton
+  });
+
+  if ($googleEmail && $connectButton && $disconnectButton) {
     // Check if user has Google provider using firebaseUser for most up-to-date data
     const googleProvider = firebaseUser.providerData?.find(provider => provider.providerId === 'google.com');
 
+    console.log('[DEBUG] security.js - googleProvider:', googleProvider);
+    console.log('[DEBUG] security.js - googleProvider found:', !!googleProvider);
+
     if (googleProvider) {
+      console.log('[DEBUG] security.js - Showing disconnect button');
+
       $googleEmail.textContent = googleProvider.email || 'Connected';
-      if ($googleBtnText) $googleBtnText.textContent = 'Disconnect';
-      if ($googleAction) $googleAction.value = 'disconnect';
-      $googleBtn.classList.remove('btn-primary');
-      $googleBtn.classList.add('btn-outline-danger');
-      // Update icon from link to unlink
-      if ($googleIcon) {
-        $googleIcon.classList.remove('fa-link');
-        $googleIcon.classList.add('fa-unlink');
-      }
+      // Hide connect button, show disconnect button
+      $connectButton.classList.add('d-none');
+      $disconnectButton.classList.remove('d-none');
     } else {
+      console.log('[DEBUG] security.js - Showing connect button');
+
       $googleEmail.textContent = 'Not connected';
-      if ($googleBtnText) $googleBtnText.textContent = 'Connect';
-      if ($googleAction) $googleAction.value = 'connect';
-      $googleBtn.classList.remove('btn-outline-danger');
-      $googleBtn.classList.add('btn-primary');
-      // Update icon from unlink to link
-      if ($googleIcon) {
-        $googleIcon.classList.remove('fa-unlink');
-        $googleIcon.classList.add('fa-link');
-      }
+      // Show connect button, hide disconnect button
+      $connectButton.classList.remove('d-none');
+      $disconnectButton.classList.add('d-none');
     }
   }
 }
@@ -167,16 +186,14 @@ async function updateActiveSessions(account) {
 
   // Fetch other active sessions from server
   try {
-    const token = await webManager.auth().getIdToken();
     const serverApiURL = webManager.getApiUrl() + '/backend-manager';
 
-    const data = await fetch(serverApiURL, {
+    const data = await authorizedFetch(serverApiURL, {
       method: 'POST',
       timeout: 60000,
       response: 'json',
       tries: 2,
       body: {
-        authenticationToken: token,
         command: 'user:get-active-sessions',
         payload: {
           // id: 'app',
@@ -184,14 +201,12 @@ async function updateActiveSessions(account) {
       },
     });
 
-    console.log('Active sessions data from server:', data);
-
     // Process sessions from server response
     let sessionData = data || {};
 
-    // 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 session data for testing');
       const fakeSessions = generateFakeSessions();
       // Merge fake sessions with existing data (fake sessions don't override real ones)
@@ -248,9 +263,9 @@ async function updateActiveSessions(account) {
     };
 
     // Only add if it's different from current session (different IP or timestamp)
-    if (!sessions[0] ||
-        (lastSession.ip !== sessions[0].ip ||
-         lastSession.timestampUNIX !== sessions[0].timestampUNIX)) {
+    if (!sessions[0]
+        || (lastSession.ip !== sessions[0].ip
+        || lastSession.timestampUNIX !== sessions[0].timestampUNIX)) {
       sessions.push(lastSession);
     }
   }
@@ -261,23 +276,24 @@ async function updateActiveSessions(account) {
     return;
   }
 
-  const sessionHTML = sessions.map(session => {
+  const sessionHTML = sessions.map((session, index) => {
     const deviceName = session.device || 'Unknown Device';
     const browserName = session.browser || 'Unknown Browser';
     const location = formatSessionLocation(session);
+    const isLast = index === sessions.length - 1;
 
     return `
-    <div class="list-group-item px-0 bg-body-tertiary">
+    <div class="px-0 py-3${isLast ? '' : ' border-bottom'}">
       <div class="d-flex justify-content-between align-items-start">
-        <div class="d-flex align-items-start">
-          <div class="me-3 mt-1">
+        <div class="d-flex align-items-center">
+          <div class="d-flex align-items-center justify-content-center me-3 flex-shrink-0 text-muted">
             ${getDeviceIcon(session.platform || deviceName)}
           </div>
           <div>
-            <div class="fw-semibold">${deviceName}</div>
-            <small class="text-muted d-block">${browserName}${session.mobile !== undefined ? ` • ${session.mobile ? 'Mobile' : 'Desktop'}` : ''}</small>
-            ${location ? `<small class="text-muted d-block">${location}</small>` : ''}
-            ${session.ip ? `<small class="text-muted d-block">IP: ${session.ip}</small>` : ''}
+            <strong>${deviceName}</strong>
+            <div class="text-muted small">${browserName}${session.mobile !== undefined ? ` • ${session.mobile ? 'Mobile' : 'Desktop'}` : ''}</div>
+            ${location ? `<div class="text-muted small">${location}</div>` : ''}
+            ${session.ip ? `<div class="text-muted small">IP: ${session.ip}</div>` : ''}
           </div>
         </div>
         <div class="text-end">
@@ -294,10 +310,14 @@ async function updateActiveSessions(account) {
 
 // Initialize FormManager for signin methods
 function initializeSigninMethodForms() {
+  console.log('[DEBUG] security.js - initializeSigninMethodForms() called');
+
   // Initialize password form
   const $passwordForm = document.getElementById('signin-method-password-form');
 
   if ($passwordForm && !signinMethodForms.has('password')) {
+    console.log('[DEBUG] security.js - Initializing password FormManager');
+
     const formManager = new FormManager($passwordForm, {
       allowMultipleSubmissions: false,
       autoDisable: true,
@@ -321,42 +341,43 @@ function initializeSigninMethodForms() {
   const $googleForm = document.getElementById('signin-method-google-form');
 
   if ($googleForm && !signinMethodForms.has('google')) {
+    console.log('[DEBUG] security.js - About to initialize Google FormManager');
+    console.log('[DEBUG] security.js - Google form exists:', !!$googleForm);
+
     const formManager = new FormManager($googleForm, {
       autoDisable: true,
       showSpinner: true
     });
 
     signinMethodForms.set('google', formManager);
+    console.log('[DEBUG] security.js - Google FormManager initialized and stored');
 
     formManager.addEventListener('submit', async (event) => {
       event.preventDefault();
-      const { data } = event.detail;
+      const { submitButton } = event.detail;
+
+      // Determine action from the clicked button's data-action attribute
+      const action = submitButton?.getAttribute('data-action');
 
       try {
-        if (data.action === 'disconnect') {
+        if (action === 'disconnect') {
           await disconnectGoogleProvider();
-        } else {
+        } else if (action === 'connect') {
           await connectGoogleProvider();
         }
 
         // Set form state back to ready first
         formManager.setFormState('ready');
 
-        // Then update display (after FormManager has restored button)
-        // Use setTimeout to ensure FormManager has finished updating
-        setTimeout(() => {
-          updateSigninMethods();
-        }, 0);
+        // Then update display (this will set the button text correctly again)
+        updateSigninMethods();
       } catch (error) {
         // Reset form state
         formManager.setFormState('ready');
 
         // If user cancelled, also update the display to ensure button state is correct
         if (error.message === 'Disconnection cancelled') {
-          // Update display to ensure button reflects current state
-          setTimeout(() => {
-            updateSigninMethods();
-          }, 0);
+          updateSigninMethods();
         } else {
           // Show error for other failures
           formManager.showError(error);
@@ -429,9 +450,9 @@ async function connectGoogleProvider() {
     return result;
   } catch (error) {
     // Check if we should fallback to redirect
-    if (error.code === 'auth/popup-blocked' ||
-        error.code === 'auth/popup-closed-by-user' ||
-        error.code === 'auth/cancelled-popup-request') {
+    if (error.code === 'auth/popup-blocked'
+        || error.code === 'auth/popup-closed-by-user'
+        || error.code === 'auth/cancelled-popup-request') {
 
       console.log('Popup failed, falling back to redirect:', error.code);
 
@@ -583,20 +604,25 @@ function getPlatformName(platform) {
 // Get device icon based on device type
 function getDeviceIcon(device) {
   const deviceLower = (device || '').toLowerCase();
+  let iconName = 'desktop'; // default
 
-  if (deviceLower.includes('iphone') || deviceLower.includes('ipad') || deviceLower.includes('ios') || deviceLower.includes('mac')) {
-    return '<i class="fa-brands fa-apple fa-lg"></i>';
+  if (deviceLower.includes('iphone')
+      || deviceLower.includes('ipad')
+      || deviceLower.includes('ios')
+      || deviceLower.includes('mac')) {
+    iconName = 'apple';
   } else if (deviceLower.includes('android')) {
-    return '<i class="fa-brands fa-android fa-lg"></i>';
+    iconName = 'android';
   } else if (deviceLower.includes('windows')) {
-    return '<i class="fa-brands fa-windows fa-lg"></i>';
+    iconName = 'windows';
   } else if (deviceLower.includes('linux')) {
-    return '<i class="fa-brands fa-linux fa-lg"></i>';
+    iconName = 'linux';
   } else if (deviceLower.includes('chrome')) {
-    return '<i class="fa-brands fa-chrome fa-lg"></i>';
-  } else {
-    return '<i class="fa-solid fa-desktop fa-lg"></i>';
+    iconName = 'chrome';
   }
+
+  // Get the pre-rendered icon
+  return getPrerenderedIcon(iconName);
 }
 
 // Format location from session data
@@ -703,4 +729,3 @@ function formatDate(timestamp) {
   // More than 7 days - show full date
   return date.toLocaleDateString() + ' at ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
-

package/dist/assets/js/pages/payment/checkout/index.js

@@ -298,8 +298,8 @@ async function initializeCheckout() {
     const urlParams = new URLSearchParams(window.location.search);
     const productId = urlParams.get('product');
     const frequency = urlParams.get('frequency') || 'annually';
-    const _test_appId = urlParams.get('_test_appId');
-    const _test_trialEligible = urlParams.get('_test_trialEligible');
+    const _dev_appId = urlParams.get('_dev_appId');
+    const _dev_trialEligible = urlParams.get('_dev_trialEligible');
 
     // Product ID is required
     if (!productId) {
@@ -307,7 +307,7 @@ async function initializeCheckout() {
     }
 
     // Check for testing parameters
-    const appId = _test_appId || webManager.config.brand.id;
+    const appId = _dev_appId || webManager.config.brand.id;
 
     // Warmup server (fire and forget)
     warmupServer(webManager);
@@ -331,10 +331,10 @@ async function initializeCheckout() {
     let trialEligibilityResult = trialEligible;
 
     // Override trial eligibility for testing (only in development)
-    if (_test_trialEligible && webManager.isDevelopment()) {
-      if (_test_trialEligible === 'false') {
+    if (_dev_trialEligible && webManager.isDevelopment()) {
+      if (_dev_trialEligible === 'false') {
         trialEligibilityResult = { status: 'fulfilled', value: false };
-      } else if (_test_trialEligible === 'true') {
+      } else if (_dev_trialEligible === 'true') {
         trialEligibilityResult = { status: 'fulfilled', value: true };
       }
     }

package/dist/assets/js/pages/payment/checkout/modules/processors-main.js

@@ -41,9 +41,9 @@ export class PaymentProcessorManager {
 
     // Determine processor based on payment method and available API keys
     if (paymentMethod === 'card') {
-      // Check for _test_cardProcessor override in URL params (for testing)
+      // Check for _dev_cardProcessor override in URL params (for testing)
       const urlParams = new URLSearchParams(window.location.search);
-      const forcedProcessor = urlParams.get('_test_cardProcessor');
+      const forcedProcessor = urlParams.get('_dev_cardProcessor');
 
       if (forcedProcessor && this.processors[forcedProcessor]) {
         processorName = forcedProcessor;

package/dist/assets/js/pages/payment/checkout/modules/session.js

@@ -30,7 +30,7 @@ export function buildPaymentIntentData(webManager) {
   let processorName = state.paymentMethod;
   if (state.paymentMethod === 'card') {
     // Determine which processor will be used for card payments
-    const forcedProcessor = urlParams.get('_test_cardProcessor');
+    const forcedProcessor = urlParams.get('_dev_cardProcessor');
 
     if (forcedProcessor) {
       processorName = forcedProcessor;
@@ -46,7 +46,7 @@ export function buildPaymentIntentData(webManager) {
   // Get UTM parameters from storage
   const utmData = webManager.storage().get('marketing.utm');
   let utm = {};
-  
+
   // Check if stored UTM data exists and is less than 30 days old
   if (utmData && utmData.timestamp && utmData.tags) {
     const daysDiff = (new Date() - new Date(utmData.timestamp)) / (1000 * 60 * 60 * 24);
@@ -56,8 +56,8 @@ export function buildPaymentIntentData(webManager) {
   }
 
   // Check for test app ID override
-  const _test_appId = urlParams.get('_test_appId');
-  const appId = _test_appId || webManager.config.brand.id;
+  const _dev_appId = urlParams.get('_dev_appId');
+  const appId = _dev_appId || webManager.config.brand.id;
 
   // Build the payment intent data structure
   const paymentIntentData = {

package/dist/defaults/dist/_includes/core/body.html

@@ -35,6 +35,29 @@
   </div>
 </div>
 
+{%- comment -%}
+  Icon Pre-rendering System
+  Pages can specify which icons to pre-render in their frontmatter:
+  prerender_icons:
+    - name: "apple"
+      class: "fa-3xl"
+    - name: "android"
+      class: "fa-2xl"
+{%- endcomment -%}
+{%- assign icons = page.resolved.prerender_icons | default: empty -%}
+{%- iftruthy icons -%}
+<!-- Pre-rendered Icon Templates -->
+<div id="prerendered-icons" class="d-none" aria-hidden="true">
+  {%- for icon in icons -%}
+    {%- assign icon_name = icon.name | default: icon -%}
+    {%- assign icon_class = icon.class | default: "fa-3xl" -%}
+    <div data-icon="{{ icon_name }}" data-class="{{ icon_class }}">
+      {% uj_icon icon_name, icon_class %}
+    </div>
+  {%- endfor -%}
+</div>
+{%- endiftruthy -%}
+
 <!-- Script to prevent clicks on disabled elements during page load -->
 <script type="text/javascript">
   (function() {

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -13,6 +13,21 @@ web_manager:
     config:
       policy: "authenticated"
 
+### ICON PRE-RENDERING ###
+prerender_icons:
+  - name: "apple"
+    class: "fa-3xl"
+  - name: "android"
+    class: "fa-3xl"
+  - name: "windows"
+    class: "fa-3xl"
+  - name: "linux"
+    class: "fa-3xl"
+  - name: "chrome"
+    class: "fa-3xl"
+  - name: "desktop"
+    class: "fa-3xl"
+
 ### PAGE CONFIG ###
 sections:
   - id: "profile"
@@ -790,20 +805,24 @@ badges:
                     </div>
                   </div>
                   <div class="flex-shrink-0">
-                    <form id="signin-method-{{ method.id }}-form" class="d-inline" novalidate>
+                    <form id="signin-method-{{ method.id }}-form" class="d-grid d-sm-inline-block" novalidate>
                       <input type="hidden" name="method" value="{{ method.id }}">
                       {% if method.id == "password" %}
-                        <input type="hidden" name="action" value="change">
-                        <button type="submit" class="btn btn-primary btn-sm w-100 w-sm-auto">
+                        <button type="submit" class="btn btn-primary btn-sm" data-action="change">
                           {% uj_icon "key", "me-1" %}
                           <span class="button-text">Change</span>
                         </button>
                       {% else %}
-                        <input type="hidden" name="action" value="connect">
-                        <button type="submit" class="btn btn-primary btn-sm w-100 w-sm-auto">
+                        <!-- Connect button -->
+                        <button type="submit" class="btn btn-primary btn-sm" data-action="connect">
                           {% uj_icon "link", "me-1" %}
                           <span class="button-text">Connect</span>
                         </button>
+                        <!-- Disconnect button (hidden by default) -->
+                        <button type="submit" class="btn btn-sm btn-outline-danger d-none" data-action="disconnect">
+                          {% uj_icon "unlink", "me-1" %}
+                          <span class="button-text">Disconnect</span>
+                        </button>
                       {% endif %}
                     </form>
                   </div>
@@ -828,6 +847,7 @@ badges:
           <div class="card-body">
             <h5 class="card-title">Active Sessions</h5>
             <p class="card-text text-muted">Manage your active sessions across devices. Review and revoke access from unrecognized devices.</p>
+
             <div id="active-sessions-list" class="list-group list-group-flush mb-3">
               <!-- Sessions will be loaded here -->
               <div class="text-center py-3">
@@ -872,7 +892,7 @@ badges:
               </div>
 
               {% for connection in page.resolved.connections %}
-                <div id="connection-{{ connection.id }}" class="list-group-item border-bottom-0 {% unless forloop.first %}border-top{% endunless %} px-0 py-3 d-none bg-body-tertiary">
+                <div id="connection-{{ connection.id }}" class="{% unless forloop.first %}border-top{% endunless %} px-0 py-3 d-none">
                   <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-3">
                     <div class="d-flex align-items-center">
                       <div class="d-flex align-items-center justify-content-center me-3 flex-shrink-0 fa fa-3xl">
@@ -884,15 +904,22 @@ badges:
                       </div>
                     </div>
                     <div class="text-start text-sm-end flex-shrink-0">
-                      <form id="connection-form-{{ connection.id }}" class="d-inline" novalidate>
-                        <input type="hidden" name="provider" value="{{ connection.id }}">
-                        <input type="hidden" name="action" value="connect">
-                        <button type="submit" class="btn btn-sm btn-primary w-100 w-sm-auto" data-connect-text="Connect" data-disconnect-text="Disconnect">
-                          {% uj_icon "link", "fa-sm" %}
-                          <span class="button-text">Connect</span>
-                        </button>
-                      </form>
-                      <small class="text-muted d-block mt-1" id="{{ connection.id }}-connection-status"></small>
+                      <div>
+                        <form id="connection-form-{{ connection.id }}" class="d-grid d-sm-inline-block" novalidate>
+                          <input type="hidden" name="provider" value="{{ connection.id }}">
+                          <!-- Connect button -->
+                          <button type="submit" class="btn btn-sm btn-primary" data-action="connect">
+                            {% uj_icon "link", "fa-sm" %}
+                            <span class="button-text">Connect</span>
+                          </button>
+                          <!-- Disconnect button (hidden by default) -->
+                          <button type="submit" class="btn btn-sm btn-outline-danger d-none" data-action="disconnect">
+                            {% uj_icon "unlink", "fa-sm" %}
+                            <span class="button-text">Disconnect</span>
+                          </button>
+                        </form>
+                        <small class="text-muted d-block mt-1" id="{{ connection.id }}-connection-status"></small>
+                      </div>
                     </div>
                   </div>
                 </div>

package/dist/defaults/dist/pages/pricing.md

@@ -0,0 +1,7 @@
+---
+### ALL PAGES ###
+layout: blueprint/pricing
+permalink: /pricing
+
+### REGULAR PAGES ###
+---