appscms-tools-theme 5.1.0 → 5.1.2

data/assets/js/appscms-login.js

@@ -1,82 +1,158 @@
+---
+---
 const profileButton = document.getElementById("profileButton");
 const userModal = document.getElementById("userModal");
 let isModalOpen = false;
 
-profileButton.addEventListener("click", () => {
-  if (isModalOpen) {
-    userModal.style.display = "none";
-    isModalOpen = false;
-  } else {
-    userModal.style.display = "block";
-    isModalOpen = true;
-  }
-});
+if (profileButton && userModal) {
+  profileButton.addEventListener("click", () => {
+    if (isModalOpen) {
+      userModal.style.display = "none";
+      isModalOpen = false;
+    } else {
+      userModal.style.display = "block";
+      isModalOpen = true;
+    }
+  });
+
+  // Close modal when clicking outside
+  document.addEventListener("click", (event) => {
+    if (
+      profileButton &&
+      userModal &&
+      !profileButton.contains(event.target) &&
+      !userModal.contains(event.target)
+    ) {
+      userModal.style.display = "none";
+      isModalOpen = false;
+    }
+  });
+}
 
-// Close modal when clicking outside
-document.addEventListener("click", (event) => {
-  if (
-    !profileButton.contains(event.target) &&
-    !userModal.contains(event.target)
-  ) {
-    userModal.style.display = "none";
-    isModalOpen = false;
-  }
-});
 // Get the modal elements
-const modal = document.getElementById("sideModal");
-const modalOverlay = document.getElementById("modalOverlay");
+const sideModal = document.getElementById("sideModal");
+const modalOverlayy = document.getElementById("modalOverlay");
 const openModalBtn = document.querySelector(".open-modal-btn");
 const closeModalBtn = document.querySelector(".close-modal-btn");
 
 // Function to open the modal
 function openModal() {
-  modalOverlay.style.display = "block";
-  // Slight delay for the overlay to appear before the modal slides in
-  setTimeout(() => {
-    modal.style.right = "0";
-  }, 50);
+  if (modalOverlayy && sideModal) {
+    modalOverlayy.style.display = "block";
+    // Slight delay for the overlay to appear before the modal slides in
+    setTimeout(() => {
+      sideModal.style.right = "0";
+    }, 50);
+  }
 }
 
 // Function to close the modal
 function closeModal() {
-  modal.style.right = "-90%";
-  // Wait for the animation to complete before hiding the overlay
-  setTimeout(() => {
-    modalOverlay.style.display = "none";
-  }, 300);
+  if (sideModal && modalOverlayy) {
+    sideModal.style.right = "-90%";
+    // Wait for the animation to complete before hiding the overlay
+    setTimeout(() => {
+      modalOverlayy.style.display = "none";
+    }, 300);
+  }
 }
 
 // Event listeners
-openModalBtn.addEventListener("click", openModal);
-closeModalBtn.addEventListener("click", closeModal);
-modalOverlay.addEventListener("click", closeModal);
+if (openModalBtn) {
+  openModalBtn.addEventListener("click", openModal);
+}
+
+if (closeModalBtn) {
+  closeModalBtn.addEventListener("click", closeModal);
+}
+
+if (modalOverlayy) {
+  modalOverlayy.addEventListener("click", closeModal);
+}
 
 // Prevent closing when clicking inside the modal
-modal.addEventListener("click", function (event) {
-  event.stopPropagation();
-});
-if (window.location.pathname === "/profile") {
+if (sideModal) {
+  sideModal.addEventListener("click", function (event) {
+    event.stopPropagation();
+  });
+}
+
+if (
+  window.location.pathname === "/profile" &&
+  document.querySelector(".login-button")
+) {
   document.querySelector(".login-button").addEventListener("click", openModal);
 }
 
-// Firebase configuration - Replace with your own Firebase config
+// Firebase configuration
+let firebaseConfig;
+
+async function loadFirebaseConfig() {
+  try {
+    // Try to get config from Netlify function
+    const hostname = window.location.hostname;
+    const port = window.location.port;
+
+    let baseUrl = "";
+
+    // Development environment detection
+    if (hostname === "localhost" || hostname === "127.0.0.1") {
+      // When running locally, we need to specify which port the Netlify Functions are running on
+      // Default Netlify CLI functions port is 8888, but could be 9000 or custom
+      baseUrl = "http://localhost:9000"; // Adjust this if your Netlify Functions are on a different port
+    }
+
+    // Make the request to the Netlify function with credentials included
+
+    const response = await fetch(
+      `http://localhost:9000/.netlify/functions/get-firebase-config`
+    );
+
+    if (response.ok) {
+      firebaseConfig = await response.json();
+
+      // Check if we got all required config fields
+      if (
+        firebaseConfig.apiKey &&
+        firebaseConfig.authDomain &&
+        firebaseConfig.projectId
+      ) {
+        // Initialize Firebase with the config
+        if (typeof firebase !== "undefined") {
+          initializeFirebase();
+        } else {
+          console.error("Firebase SDK not loaded");
+        }
+      } else {
+        console.error("Incomplete Firebase configuration received");
+      }
+    } else {
+      console.error("Failed to load Firebase config:", response.status);
+    }
+  } catch (error) {
+    console.log(error);
+    console.error("Error loading Firebase config:", error);
+  }
+}
+
+function initializeFirebase() {
+  if (!firebase.apps.length) {
+    firebase.initializeApp(firebaseConfig);
 
-// Initialize Firebase
-firebase.initializeApp(firebaseConfig);
-const auth = firebase.auth();
+    setupAuthListeners();
+  }
+}
+
+function setupAuthListeners() {
+  const auth = firebase.auth();
 
-// Check for redirect result immediately when page loads
-document.addEventListener("DOMContentLoaded", function () {
-  console.log("Checking for auth redirect...");
   auth
     .getRedirectResult()
     .then((result) => {
       if (result && result.user) {
-        console.log("Redirect authentication successful:", result.user);
         // Twitter or other redirect login was successful
         // Auth state observer will handle the UI update
       } else if (result) {
-        console.log("Redirect completed but no user");
       }
     })
     .catch((error) => {
@@ -85,269 +161,388 @@ document.addEventListener("DOMContentLoaded", function () {
         alert(`Authentication error: ${error.message}`);
       }
     });
-});
 
-// DOM Elements
-const loginForm = document.getElementById("loginForm");
-const signupForm = document.getElementById("signupForm");
-const forgotPasswordForm = document.getElementById("forgotPasswordForm");
-const authContainer = document.getElementById("authContainer");
-const userAvatar = document.getElementById("userAvatar");
-const profileUserAvatar = document.querySelector(".profile-user-avatar");
-
-// Switch between login and signup
-document.getElementById("showSignup").addEventListener("click", (e) => {
-  e.preventDefault();
-  loginForm.style.display = "none";
-  signupForm.style.display = "block";
-  forgotPasswordForm.style.display = "none";
-});
-
-document.getElementById("showLogin").addEventListener("click", (e) => {
-  e.preventDefault();
-  signupForm.style.display = "none";
-  loginForm.style.display = "block";
-  forgotPasswordForm.style.display = "none";
-});
+  // DOM Elements
+  const loginForm = document.getElementById("loginForm");
+  const signupForm = document.getElementById("signupForm");
+  const forgotPasswordForm = document.getElementById("forgotPasswordForm");
+  const userAvatar = document.getElementById("userAvatar");
+  const profileUserAvatar = document.querySelector(".profile-user-avatar");
+
+  // Switch between login and signup
+  const showSignupBtn = document.getElementById("showSignup");
+  if (showSignupBtn) {
+    showSignupBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (loginForm) loginForm.style.display = "none";
+      if (signupForm) signupForm.style.display = "block";
+      if (forgotPasswordForm) forgotPasswordForm.style.display = "none";
+    });
+  }
 
-// Show forgot password form
-document.getElementById("forgotPassword").addEventListener("click", (e) => {
-  e.preventDefault();
-  loginForm.style.display = "none";
-  forgotPasswordForm.style.display = "block";
-});
+  const showLoginBtn = document.getElementById("showLogin");
+  if (showLoginBtn) {
+    showLoginBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (signupForm) signupForm.style.display = "none";
+      if (loginForm) loginForm.style.display = "block";
+      if (forgotPasswordForm) forgotPasswordForm.style.display = "none";
+    });
+  }
 
-// Back to login from forgot password
-document.getElementById("backToLogin").addEventListener("click", () => {
-  forgotPasswordForm.style.display = "none";
-  loginForm.style.display = "block";
-  document.getElementById("resetSuccess").style.display = "none";
-});
+  // Show forgot password form
+  const forgotPasswordBtn = document.getElementById("forgotPassword");
+  if (forgotPasswordBtn) {
+    forgotPasswordBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (loginForm) loginForm.style.display = "none";
+      if (forgotPasswordForm) forgotPasswordForm.style.display = "block";
+    });
+  }
 
-// Handle reset password form submission
-// Handle reset password form submission
-// Handle reset password form submission
-// Handle reset password form submission
-document.getElementById("resetPasswordForm").addEventListener("submit", (e) => {
-  e.preventDefault();
-  const email = document.getElementById("resetEmail").value;
+  // Back to login from forgot password
+  const backToLoginBtn = document.getElementById("backToLogin");
+  if (backToLoginBtn) {
+    backToLoginBtn.addEventListener("click", () => {
+      if (forgotPasswordForm) forgotPasswordForm.style.display = "none";
+      if (loginForm) loginForm.style.display = "block";
+      const resetSuccess = document.getElementById("resetSuccess");
+      if (resetSuccess) resetSuccess.style.display = "none";
+    });
+  }
 
-  // This is the correct way to set up redirects - Firebase will handle adding the continueUrl internally
-  const actionCodeSettings = {
-    url: "https://pdftoolkit-develop.netlify.app/",
-    handleCodeInApp: false,
-  };
+  // Handle reset password form submission
+  const resetPasswordForm = document.getElementById("resetPasswordForm");
+  if (resetPasswordForm) {
+    resetPasswordForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const resetEmail = document.getElementById("resetEmail");
+      if (!resetEmail) return;
+
+      const email = resetEmail.value;
+
+      // This is the correct way to set up redirects - Firebase will handle adding the continueUrl internally
+      const actionCodeSettings = {
+        url: "https://pdftoolkit-develop.netlify.app/",
+        handleCodeInApp: false,
+      };
+
+      auth
+        .sendPasswordResetEmail(email, actionCodeSettings)
+        .then(() => {
+          // Show success message
+          const resetSuccess = document.getElementById("resetSuccess");
+          if (resetSuccess) resetSuccess.style.display = "block";
+          resetPasswordForm.reset();
+        })
+        .catch((error) => {
+          alert(`Error: ${error.message}`);
+        });
+    });
+  }
 
-  auth
-    .sendPasswordResetEmail(email, actionCodeSettings)
-    .then(() => {
-      // Show success message
-      document.getElementById("resetSuccess").style.display = "block";
-      document.getElementById("resetPasswordForm").reset();
-    })
-    .catch((error) => {
-      alert(`Error: ${error.message}`);
+  // Toggle password visibility
+  const toggleLoginPassword = document.getElementById("toggleLoginPassword");
+  if (toggleLoginPassword) {
+    toggleLoginPassword.addEventListener("click", () => {
+      const passwordInput = document.getElementById("loginPassword");
+      if (passwordInput) {
+        passwordInput.type =
+          passwordInput.type === "password" ? "text" : "password";
+      }
     });
-});
+  }
 
-// Toggle password visibility
-document.getElementById("toggleLoginPassword").addEventListener("click", () => {
-  const passwordInput = document.getElementById("loginPassword");
-  passwordInput.type = passwordInput.type === "password" ? "text" : "password";
-});
+  const toggleSignupPassword = document.getElementById("toggleSignupPassword");
+  if (toggleSignupPassword) {
+    toggleSignupPassword.addEventListener("click", () => {
+      const passwordInput = document.getElementById("signupPassword");
+      if (passwordInput) {
+        passwordInput.type =
+          passwordInput.type === "password" ? "text" : "password";
+      }
+    });
+  }
 
-document
-  .getElementById("toggleSignupPassword")
-  .addEventListener("click", () => {
-    const passwordInput = document.getElementById("signupPassword");
-    passwordInput.type =
-      passwordInput.type === "password" ? "text" : "password";
-  });
+  // Email/Password Login
+  const emailLoginForm = document.getElementById("emailLoginForm");
+  if (emailLoginForm) {
+    emailLoginForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const loginEmail = document.getElementById("loginEmail");
+      const loginPassword = document.getElementById("loginPassword");
+      if (!loginEmail || !loginPassword) return;
+
+      const email = loginEmail.value;
+      const password = loginPassword.value;
+
+      auth
+        .signInWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+          // Signed in
+          const user = userCredential.user;
+        })
+        .catch((error) => {
+          alert(`Login error: ${error.message}`);
+        });
+    });
+  }
 
-// Email/Password Login
-document.getElementById("emailLoginForm").addEventListener("submit", (e) => {
-  e.preventDefault();
-  const email = document.getElementById("loginEmail").value;
-  const password = document.getElementById("loginPassword").value;
+  // Email/Password Signup
+  const emailSignupForm = document.getElementById("emailSignupForm");
+  if (emailSignupForm) {
+    emailSignupForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const signupEmail = document.getElementById("signupEmail");
+      const signupPassword = document.getElementById("signupPassword");
+      if (!signupEmail || !signupPassword) return;
+
+      const email = signupEmail.value;
+      const password = signupPassword.value;
+
+      auth
+        .createUserWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+          // Signed up
+          const user = userCredential.user;
+        })
+        .catch((error) => {
+          alert(`Signup error: ${error.message}`);
+        });
+    });
+  }
 
-  auth
-    .signInWithEmailAndPassword(email, password)
-    .then((userCredential) => {
-      // Signed in
-      const user = userCredential.user;
-      console.log("User logged in:", user);
-    })
-    .catch((error) => {
-      alert(`Login error: ${error.message}`);
+  // Google Login
+  const googleLoginBtn = document.getElementById("googleLogin");
+  if (googleLoginBtn) {
+    googleLoginBtn.addEventListener("click", () => {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      auth
+        .signInWithPopup(provider)
+        .then((result) => {})
+        .catch((error) => {
+          alert(`Google login error: ${error.message}`);
+        });
     });
-});
+  }
 
-// Email/Password Signup
-document.getElementById("emailSignupForm").addEventListener("submit", (e) => {
-  e.preventDefault();
-  const email = document.getElementById("signupEmail").value;
-  const password = document.getElementById("signupPassword").value;
+  const googleSignupBtn = document.getElementById("googleSignup");
+  if (googleSignupBtn) {
+    googleSignupBtn.addEventListener("click", () => {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      auth
+        .signInWithPopup(provider)
+        .then((result) => {})
+        .catch((error) => {
+          alert(`Google signup error: ${error.message}`);
+        });
+    });
+  }
 
-  auth
-    .createUserWithEmailAndPassword(email, password)
-    .then((userCredential) => {
-      // Signed up
-      const user = userCredential.user;
-      console.log("User created:", user);
-    })
-    .catch((error) => {
-      alert(`Signup error: ${error.message}`);
+  // Facebook Login
+  const facebookLoginBtn = document.getElementById("facebookLogin");
+  if (facebookLoginBtn) {
+    facebookLoginBtn.addEventListener("click", () => {
+      const provider = new firebase.auth.FacebookAuthProvider();
+      provider.addScope("email");
+
+      // Try popup instead of redirect for Facebook
+      auth
+        .signInWithPopup(provider)
+        .then((result) => {})
+        .catch((error) => {
+          console.error("Facebook login error:", error);
+          alert(`Facebook login error: ${error.message}`);
+        });
     });
-});
+  }
 
-// Google Login
-document.getElementById("googleLogin").addEventListener("click", () => {
-  const provider = new firebase.auth.GoogleAuthProvider();
-  auth
-    .signInWithPopup(provider)
-    .then((result) => {
-      console.log("Google login successful");
-    })
-    .catch((error) => {
-      alert(`Google login error: ${error.message}`);
+  // Twitter Login - Try using popup method first
+  const twitterLoginBtn = document.getElementById("twitterLogin");
+  if (twitterLoginBtn) {
+    twitterLoginBtn.addEventListener("click", () => {
+      const provider = new firebase.auth.TwitterAuthProvider();
+
+      try {
+        // Try popup method first as it provides better error feedback
+        auth
+          .signInWithPopup(provider)
+          .then((result) => {})
+          .catch((error) => {
+            console.error("Twitter popup error:", error);
+
+            // If popup fails, fallback to redirect
+            if (
+              error.code === "auth/popup-blocked" ||
+              error.code === "auth/popup-closed-by-user"
+            ) {
+              auth.signInWithRedirect(provider).catch((redirectError) => {
+                console.error("Twitter redirect error:", redirectError);
+                alert(`Twitter login error: ${redirectError.message}`);
+              });
+            } else {
+              alert(`Twitter login error: ${error.message}`);
+            }
+          });
+      } catch (e) {
+        console.error("Exception during Twitter login:", e);
+      }
     });
-});
+  }
 
-document.getElementById("googleSignup").addEventListener("click", () => {
-  const provider = new firebase.auth.GoogleAuthProvider();
-  auth
-    .signInWithPopup(provider)
-    .then((result) => {
-      console.log(result);
-      console.log("Google signup successful");
-    })
-    .catch((error) => {
-      alert(`Google signup error: ${error.message}`);
+  // Logout
+  const logoutBtn = document.getElementById("logoutBtn");
+  if (logoutBtn) {
+    logoutBtn.addEventListener("click", () => {
+      auth
+        .signOut()
+        .then(() => {
+          const userProfileHeader = document.querySelector(
+            ".user-profile-header"
+          );
+          if (userProfileHeader) userProfileHeader.style.display = "none";
+          window.location.reload();
+        })
+        .catch((error) => {
+          alert(`Logout error: ${error.message}`);
+        });
     });
-});
+  }
 
-// Facebook Login
-document.getElementById("facebookLogin").addEventListener("click", () => {
-  const provider = new firebase.auth.FacebookAuthProvider();
-  provider.addScope("email");
+  // Auth state observer
+  auth.onAuthStateChanged((user) => {
+    if (user) {
+      const email = user.email || "No email available";
+      const loggedInUserEmail = document.querySelector(".logged-in-user-email");
+      if (loggedInUserEmail) loggedInUserEmail.textContent = email;
+
+      let displayName =
+        user.displayName || (user.email ? user.email.split("@")[0] : "User");
+
+      // Special handling for Twitter users who might not have email
+      if (
+        user.providerData[0].providerId === "twitter.com" &&
+        !user.displayName
+      ) {
+        displayName = user.providerData[0].uid;
+      }
 
-  // Try popup instead of redirect for Facebook
-  auth
-    .signInWithPopup(provider)
-    .then((result) => {
-      console.log("Facebook login successful");
-    })
-    .catch((error) => {
-      console.error("Facebook login error:", error);
-      alert(`Facebook login error: ${error.message}`);
-    });
-});
+      if (sideModal) {
+        sideModal.style.display = "none";
+        sideModal.style.right = "-90%";
+      }
 
-// Twitter Login - Try using popup method first
-document.getElementById("twitterLogin").addEventListener("click", () => {
-  console.log("Starting Twitter login...");
-  const provider = new firebase.auth.TwitterAuthProvider();
+      if (modalOverlayy) {
+        modalOverlayy.style.display = "none";
+      }
 
-  try {
-    // Try popup method first as it provides better error feedback
-    auth
-      .signInWithPopup(provider)
-      .then((result) => {
-        console.log("Twitter login successful via popup");
-      })
-      .catch((error) => {
-        console.error("Twitter popup error:", error);
-
-        // If popup fails, fallback to redirect
-        if (
-          error.code === "auth/popup-blocked" ||
-          error.code === "auth/popup-closed-by-user"
-        ) {
-          console.log("Popup blocked, trying redirect instead");
-          auth.signInWithRedirect(provider).catch((redirectError) => {
-            console.error("Twitter redirect error:", redirectError);
-            alert(`Twitter login error: ${redirectError.message}`);
-          });
-        } else {
-          alert(`Twitter login error: ${error.message}`);
-        }
-      });
-  } catch (e) {
-    console.error("Exception during Twitter login:", e);
-  }
-});
+      const loggedInUsername = document.querySelector(".logged-in-username");
+      if (loggedInUsername) loggedInUsername.textContent = displayName;
 
-// Logout
-document.getElementById("logoutBtn").addEventListener("click", () => {
-  auth
-    .signOut()
-    .then(() => {
-      document.querySelector(".user-profile-header").style.display = "none";
-      window.location.reload();
-      console.log("User signed out");
-    })
-    .catch((error) => {
-      alert(`Logout error: ${error.message}`);
-    });
-});
+      const loginModalButton = document.querySelector(".login-modal-button");
+      if (loginModalButton) loginModalButton.style.display = "none";
 
-// Auth state observer
-auth.onAuthStateChanged((user) => {
-  console.log(
-    "Auth state changed:",
-    user ? "User logged in" : "User logged out"
-  );
+      // Set initials for avatar
+      const initials = displayName
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .substring(0, 2);
 
-  if (user) {
-    console.log(user);
+      if (profileButton) profileButton.textContent = initials;
+      if (profileUserAvatar) profileUserAvatar.textContent = initials;
 
-    const email = user.email || "No email available";
-    document.querySelector(".logged-in-user-email").textContent = email;
-    let displayName =
-      user.displayName || (user.email ? user.email.split("@")[0] : "User");
+      const userProfileHeader = document.querySelector(".user-profile-header");
+      if (userProfileHeader) userProfileHeader.style.display = "block";
 
-    // Special handling for Twitter users who might not have email
-    if (
-      user.providerData[0].providerId === "twitter.com" &&
-      !user.displayName
-    ) {
-      displayName = user.providerData[0].uid;
+      if (userAvatar) {
+        userAvatar.textContent = initials;
+        userAvatar.style.display = "flex";
+      }
+
+      if (window.location.pathname === "/profile") {
+        const userProfileSection = document.querySelector(
+          ".user-profile-section"
+        );
+        if (userProfileSection) userProfileSection.style.display = "flex";
+
+        const profileLoginContainer = document.querySelector(
+          ".profile-login-container"
+        );
+        if (profileLoginContainer) profileLoginContainer.style.display = "none";
+
+        const avatarLarge = document.querySelector(".avatar-large");
+        if (avatarLarge) avatarLarge.textContent = initials;
+
+        const userEmailInput = document.querySelector("#user-email-input");
+        if (userEmailInput) userEmailInput.value = email;
+
+        const usernameInput = document.querySelector(".username-input");
+        if (usernameInput) usernameInput.value = displayName;
+      }
+    } else {
+      if (userAvatar) userAvatar.style.display = "none";
+      if (loginForm) loginForm.style.display = "block";
+      if (signupForm) signupForm.style.display = "none";
+      if (forgotPasswordForm) forgotPasswordForm.style.display = "none";
     }
+  });
+  const OPERATION_LIMIT = "{{ site.OPERATION_LIMIT }}"; // Set based on site config
+const STORAGE_KEY = "user_operations";
 
-    console.log("Provider:", user.providerData[0].providerId);
-    console.log("Display name:", displayName);
-    modal.style.display = "none";
-    modal.style.right = "-90%";
-    modalOverlay.style.display = "none";
-    document.querySelector(".logged-in-username").textContent = displayName;
-    document.querySelector(".login-modal-button").style.display = "none";
-
-    // Set initials for avatar
-    const initials = displayName
-      .split(" ")
-      .map((n) => n[0])
-      .join("")
-      .toUpperCase()
-      .substring(0, 2);
-    document.getElementById("profileButton").textContent = initials;
-    profileUserAvatar.textContent = initials;
-    document.querySelector(".user-profile-header").style.display = "block";
-
-    userAvatar.textContent = initials;
-    userAvatar.style.display = "flex";
-    if (window.location.pathname === "/profile") {
-      document.querySelector(".user-profile-section").style.display = "flex";
-      document.querySelector(".profile-login-container").style.display = "none";
-      document.querySelector(".avatar-large").textContent = initials;
-      document.querySelector("#user-email-input").value = email;
-      document.querySelector(".username-input").value = displayName;
-
-      console.log("You are on the profile page.");
+function getOperationCount() {
+    const storedCount = localStorage.getItem(STORAGE_KEY);
+    return storedCount ? parseInt(storedCount, 10) : 0;
+}
+
+function incrementOperationCount() {
+    let currentCount = getOperationCount();
+    
+    if (currentCount >= OPERATION_LIMIT) {
+        showSignupPopup();
+        return false; // Prevent further uploads
     }
-  } else {
-    userAvatar.style.display = "none";
-    loginForm.style.display = "block";
-    signupForm.style.display = "none";
-    forgotPasswordForm.style.display = "none";
-  }
+
+    localStorage.setItem(STORAGE_KEY, currentCount + 1);
+    return true;
+}
+
+function showSignupPopup() {
+    auth.onAuthStateChanged((user) => {
+        if (user) {
+            console.log(user);
+        }
+        else{
+            openModal()
+            document.querySelector('.close-modal-btn').style.display="none"
+        }
+    })
+   
+}
+
+function hideSignupPopup() {
+   closeModal()
+}
+
+
+
+// Attach event listener to all file inputs
+document.querySelectorAll("input[type='file']").forEach(input => {
+    input.addEventListener("change", function () {
+        if (incrementOperationCount()) {
+            console.log("File uploaded in:", this);
+        } else {
+            this.value = ""; // Reset the input field
+        }
+    });
 });
+}
+
+// Initialize the app
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", loadFirebaseConfig);
+} else {
+  loadFirebaseConfig();
+}
+