web-manager 3.2.74 → 4.0.0

package/dist/modules/auth.js

@@ -0,0 +1,256 @@
+class Auth {
+  constructor(manager) {
+    this.manager = manager;
+    this._authStateCallbacks = [];
+    this._readyCallbacks = [];
+  }
+
+  // Check if user is authenticated
+  isAuthenticated() {
+    return !!this.getUser();
+  }
+
+  // Get current user
+  getUser() {
+    const user = this.manager.firebaseAuth?.currentUser;
+    if (!user) return null;
+
+    // Get displayName and photoURL from providerData if not set on main user
+    let displayName = user.displayName;
+    let photoURL = user.photoURL;
+
+    // If no displayName or photoURL, check providerData
+    if ((!displayName || !photoURL) && user.providerData && user.providerData.length > 0) {
+      for (const provider of user.providerData) {
+        if (!displayName && provider.displayName) {
+          displayName = provider.displayName;
+        }
+        if (!photoURL && provider.photoURL) {
+          photoURL = provider.photoURL;
+        }
+        // Stop if we found both
+        if (displayName && photoURL) break;
+      }
+    }
+
+    // If still no displayName, use email or fallback
+    if (!displayName) {
+      displayName = user.email ? user.email.split('@')[0] : 'User';
+    }
+
+    // If still no photoURL, use a default avatar service
+    if (!photoURL) {
+      // Use ui-avatars.com which generates avatars from initials
+      const name = displayName || user.email.split('@')[0] || 'ME';
+      const initials = name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+      photoURL = `https://ui-avatars.com/api/?name=${encodeURIComponent(initials)}&size=200&background=random&color=000`;
+    }
+
+    return {
+      uid: user.uid,
+      email: user.email,
+      displayName: displayName,
+      photoURL: photoURL,
+      emailVerified: user.emailVerified,
+      metadata: user.metadata,
+      providerData: user.providerData,
+    };
+  }
+
+  // Listen for auth state changes (waits for settled state before first callback)
+  listen(options = {}, callback) {
+    // Handle overloaded signatures - if first param is a function, it's the callback
+    if (typeof options === 'function') {
+      callback = options;
+      options = {};
+    }
+
+    // If Firebase is not enabled, call callback immediately with null
+    if (!this.manager.config.firebase?.app?.enabled) {
+      callback({ user: null, account: null });
+      return () => {}; // Return empty unsubscribe function
+    }
+
+    // Function to get current state and call callback
+    const getStateAndCallback = async (user) => {
+      // Start with the user which will return null if not authenticated
+      const state = { user: this.getUser() };
+
+      // Then, add account data if requested and user exists
+      if (options.account && user && this.manager.firebaseFirestore) {
+        try {
+          state.account = await this._getAccountData(user.uid);
+        } catch (error) {
+          state.account = null;
+        }
+      } else {
+        state.account = null;
+      }
+
+      // Update bindings with auth data
+      this.manager.bindings().update(state);
+
+      // Call the provided callback with the state
+      callback(state);
+    };
+
+    let hasCalledback = false;
+
+    // Set up listener for auth state changes
+    return this.onAuthStateChanged((user) => {
+      // Wait for settled state before first callback
+      if (!hasCalledback && !this.manager._firebaseAuthInitialized) {
+        return; // Auth state not yet determined
+      }
+
+      hasCalledback = true;
+      getStateAndCallback(user);
+    });
+  }
+
+  // Listen for auth state changes
+  onAuthStateChanged(callback) {
+    this._authStateCallbacks.push(callback);
+
+    // If auth is already initialized, call the callback immediately
+    if (this.manager._firebaseAuthInitialized) {
+      callback(this.manager.firebaseAuth?.currentUser || null);
+    }
+
+    // Return unsubscribe function
+    return () => {
+      const index = this._authStateCallbacks.indexOf(callback);
+      if (index > -1) {
+        this._authStateCallbacks.splice(index, 1);
+      }
+    };
+  }
+
+  // Internal method to handle auth state changes
+  _handleAuthStateChange(user) {
+    // Always update bindings when auth state changes (basic update without account)
+    this.manager.bindings().update({
+      user: this.getUser(),
+      account: null
+    });
+
+    // Call all registered callbacks
+    this._authStateCallbacks.forEach(callback => {
+      try {
+        callback(user);
+      } catch (error) {
+        console.error('Auth state callback error:', error);
+      }
+    });
+  }
+
+  // Get ID token for the current user
+  async getIdToken(forceRefresh = false) {
+    try {
+      const user = this.manager.firebaseAuth.currentUser;
+
+      const { getIdToken } = await import('firebase/auth');
+      return await getIdToken(user, forceRefresh);
+    } catch (error) {
+      console.error('Get ID token error:', error);
+      throw error;
+    }
+  }
+
+  // Sign in with custom token
+  async signInWithCustomToken(token) {
+    try {
+      if (!this.manager.firebaseAuth) {
+        throw new Error('Firebase Auth is not initialized');
+      }
+
+      const { signInWithCustomToken } = await import('firebase/auth');
+      const userCredential = await signInWithCustomToken(this.manager.firebaseAuth, token);
+      return userCredential.user;
+    } catch (error) {
+      console.error('Sign in with custom token error:', error);
+      throw error;
+    }
+  }
+
+  // Sign out the current user
+  async signOut() {
+    try {
+      const { signOut } = await import('firebase/auth');
+      await signOut(this.manager.firebaseAuth);
+      return true;
+    } catch (error) {
+      console.error('Sign out error:', error);
+      throw error;
+    }
+  }
+
+  // Get account data from Firestore
+  async _getAccountData(uid) {
+    try {
+      if (!this.manager.firebaseFirestore) {
+        return null;
+      }
+
+      const { doc, getDoc } = await import('firebase/firestore');
+      const resolveAccount = (await import('resolve-account')).default;
+
+      const accountDoc = doc(this.manager.firebaseFirestore, 'users', uid);
+      const snapshot = await getDoc(accountDoc);
+
+      // Get current Firebase user to pass uid and email to resolver
+      const firebaseUser = this.manager.firebaseAuth?.currentUser || { uid };
+
+      if (snapshot.exists()) {
+        // Resolve the account data to ensure proper structure and defaults
+        const rawData = snapshot.data();
+        const resolvedAccount = resolveAccount(rawData, firebaseUser);
+        return resolvedAccount;
+      }
+
+      // If no account exists, return resolved empty object for consistent structure
+      return resolveAccount({}, firebaseUser);
+    } catch (error) {
+      console.error('Get account data error:', error);
+      return null;
+    }
+  }
+
+  // Set up DOM event listeners for auth buttons
+  setupEventListeners() {
+    // Only set up once DOM is ready
+    if (typeof document === 'undefined') return;
+
+    // Set up sign out button listeners using event delegation
+    document.addEventListener('click', async (event) => {
+      // Use closest to handle clicks on child elements
+      const signOutBtn = event.target.closest('.auth-signout-btn');
+
+      if (signOutBtn) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        try {
+          // Show confirmation
+          if (!confirm('Are you sure you want to sign out?')) {
+            return;
+          }
+
+          // Sign out
+          await this.signOut();
+
+          // Show success notification
+          this.manager.utilities().showNotification('Successfully signed out.', 'success');
+
+        } catch (error) {
+          console.error('Sign out error:', error);
+          // Show error notification if utilities are available
+          this.manager.utilities().showNotification('Failed to sign out. Please try again.', 'danger');
+        }
+      }
+    });
+  }
+
+}
+
+export default Auth;

package/dist/modules/bindings.js

@@ -0,0 +1,183 @@
+class Bindings {
+  constructor(manager) {
+    this.manager = manager;
+    this._context = {};
+  }
+
+  // Update bindings with new data
+  update(data = {}) {
+    // Merge new data with existing context
+    // Whatever keys are provided will overwrite existing values
+    this._context = {
+      ...this._context,
+      ...data
+    };
+
+    this._updateBindings(this._context);
+  }
+
+  // Get current context
+  getContext() {
+    return this._context;
+  }
+
+  // Clear all context
+  clear() {
+    this._context = {};
+    this._updateBindings(this._context);
+  }
+
+  // Main binding update system
+  _updateBindings(context) {
+    // Find all elements with data-wm-bind attribute
+    const bindElements = document.querySelectorAll('[data-wm-bind]');
+
+    bindElements.forEach(element => {
+      const bindValue = element.getAttribute('data-wm-bind');
+
+      // Parse action and expression
+      let action = '@text'; // Default action
+      let expression = bindValue;
+
+      // Check if it starts with an action keyword
+      if (bindValue.startsWith('@')) {
+        const spaceIndex = bindValue.indexOf(' ');
+        if (spaceIndex > -1) {
+          action = bindValue.slice(0, spaceIndex);
+          expression = bindValue.slice(spaceIndex + 1);
+        } else {
+          // No space means it's just an action with no expression (like @hide)
+          action = bindValue;
+          expression = '';
+        }
+      }
+
+      // Execute the action
+      switch (action) {
+        case '@show':
+          // Show element if condition is true (or always if no condition)
+          const shouldShow = expression ? this._evaluateCondition(expression, context) : true;
+          if (shouldShow) {
+            element.removeAttribute('hidden');
+          } else {
+            element.setAttribute('hidden', '');
+          }
+          break;
+
+        case '@hide':
+          // Hide element if condition is true (or always if no condition)
+          const shouldHide = expression ? this._evaluateCondition(expression, context) : true;
+          if (shouldHide) {
+            element.setAttribute('hidden', '');
+          } else {
+            element.removeAttribute('hidden');
+          }
+          break;
+
+        case '@attr':
+          // Set attribute value
+          // Format: @attr attributeName expression
+          const attrParts = expression.split(' ');
+          const attrName = attrParts[0];
+          const attrExpression = attrParts.slice(1).join(' ');
+          const attrValue = this._resolvePath(context, attrExpression) || '';
+          
+          if (attrValue) {
+            element.setAttribute(attrName, attrValue);
+          } else {
+            element.removeAttribute(attrName);
+          }
+          break;
+          
+        case '@text':
+        default:
+          // Set text content (default behavior)
+          const value = this._resolvePath(context, expression) || '';
+
+          if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+            element.value = value;
+          } else {
+            element.textContent = value;
+          }
+          break;
+
+        // Future actions can be added here:
+        // case '@class':
+        // case '@style':
+      }
+    });
+  }
+
+  // Resolve nested object path
+  _resolvePath(obj, path) {
+    if (!obj || !path) return null;
+
+    return path.split('.').reduce((current, key) => {
+      return current?.[key];
+    }, obj);
+  }
+
+  // Safely evaluate simple conditions
+  _evaluateCondition(condition, context) {
+    try {
+      // Replace context references with actual values
+      // Support: user.field, account.field, simple comparisons
+
+      // Check for negation operator at the start
+      if (condition.trim().startsWith('!')) {
+        const expression = condition.trim().slice(1).trim();
+        const value = this._resolvePath(context, expression);
+        return !value;
+      }
+
+      // Parse the condition to extract left side, operator, and right side
+      const comparisonMatch = condition.match(/^(.+?)\s*(===|!==|==|!=|>|<|>=|<=)\s*(.+)$/);
+
+      if (comparisonMatch) {
+        const [, leftPath, operator, rightValue] = comparisonMatch;
+
+        // Get the left side value
+        const leftValue = this._resolvePath(context, leftPath.trim());
+
+        // Parse the right side (could be string, number, boolean)
+        let right = rightValue.trim();
+
+        // Remove quotes if it's a string
+        if ((right.startsWith("'") && right.endsWith("'")) ||
+            (right.startsWith('"') && right.endsWith('"'))) {
+          right = right.slice(1, -1);
+        } else if (right === 'true') {
+          right = true;
+        } else if (right === 'false') {
+          right = false;
+        } else if (right === 'null') {
+          right = null;
+        } else if (!isNaN(right)) {
+          right = Number(right);
+        }
+
+        // Evaluate based on operator
+        switch (operator) {
+          case '===': return leftValue === right;
+          case '!==': return leftValue !== right;
+          case '==': return leftValue == right;
+          case '!=': return leftValue != right;
+          case '>': return leftValue > right;
+          case '<': return leftValue < right;
+          case '>=': return leftValue >= right;
+          case '<=': return leftValue <= right;
+          default: return false;
+        }
+      } else {
+        // Simple truthy check (e.g., "user.emailVerified" or "account")
+        const value = this._resolvePath(context, condition.trim());
+        return !!value;
+      }
+    } catch (error) {
+      console.warn('Failed to evaluate condition:', condition, error);
+      return false;
+    }
+  }
+}
+
+export default Bindings;

package/dist/modules/dom.js

@@ -0,0 +1,102 @@
+// Load external script dynamically
+export function loadScript(options) {
+  return new Promise((resolve, reject) => {
+    // Handle simple string parameter
+    if (typeof options === 'string') {
+      options = { src: options };
+    }
+
+    const {
+      src,
+      async = true,
+      defer = false,
+      crossorigin = false,
+      integrity = null,
+      attributes = [],
+      timeout = 60000,
+      retries = 0
+    } = options;
+
+    if (!src) {
+      return reject(new Error('Script source is required'));
+    }
+
+    // Check if script already exists
+    const existingScript = document.querySelector(`script[src="${src}"]`);
+    if (existingScript) {
+      return resolve({ script: existingScript, cached: true });
+    }
+
+    let timeoutId;
+    let retryCount = 0;
+
+    function createAndLoadScript() {
+      const script = document.createElement('script');
+      script.src = src;
+      script.async = async;
+      script.defer = defer;
+
+      if (crossorigin) {
+        script.crossOrigin = typeof crossorigin === 'string' ? crossorigin : 'anonymous';
+      }
+
+      if (integrity) {
+        script.integrity = integrity;
+      }
+
+      // Add custom attributes
+      attributes.forEach(attr => {
+        if (attr.name && attr.value !== undefined) {
+          script.setAttribute(attr.name, attr.value);
+        }
+      });
+
+      // Set up timeout
+      if (timeout > 0) {
+        timeoutId = setTimeout(() => {
+          script.remove();
+          handleError(new Error(`Script load timeout: ${src}`));
+        }, timeout);
+      }
+
+      // Event handlers
+      script.onload = () => {
+        clearTimeout(timeoutId);
+        resolve({ script, cached: false });
+      };
+
+      script.onerror = (error) => {
+        clearTimeout(timeoutId);
+        script.remove();
+        handleError(new Error(`Failed to load script: ${src}`));
+      };
+
+      // Append to document
+      (document.head || document.documentElement).appendChild(script);
+    }
+
+    function handleError(error) {
+      if (retryCount < retries) {
+        retryCount++;
+        setTimeout(createAndLoadScript, 1000 * retryCount);
+      } else {
+        reject(error);
+      }
+    }
+
+    createAndLoadScript();
+  });
+}
+
+// Return promise that resolves when DOM is ready
+export function ready() {
+  return new Promise((resolve) => {
+    if (document.readyState === 'loading') {
+      // Wait for DOM if still loading
+      document.addEventListener('DOMContentLoaded', resolve);
+    } else {
+      // DOM is already ready
+      resolve();
+    }
+  });
+}