appscms-tools-theme 5.0.7 → 5.0.9

data/assets/js/appscms-login.js

@@ -0,0 +1,349 @@
+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;
+  }
+});
+
+// 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 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);
+}
+
+// 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);
+}
+
+// Event listeners
+openModalBtn.addEventListener("click", openModal);
+closeModalBtn.addEventListener("click", closeModal);
+modalOverlay.addEventListener("click", closeModal);
+
+// Prevent closing when clicking inside the modal
+modal.addEventListener("click", function (event) {
+  event.stopPropagation();
+});
+if (window.location.pathname === "/profile") {
+  document.querySelector(".login-button").addEventListener("click", openModal);
+}
+
+// Firebase configuration - Replace with your own Firebase config
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+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) => {
+      console.error("Redirect result error:", error);
+      if (error.code !== "auth/credential-already-in-use") {
+        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";
+});
+
+// Show forgot password form
+document.getElementById("forgotPassword").addEventListener("click", (e) => {
+  e.preventDefault();
+  loginForm.style.display = "none";
+  forgotPasswordForm.style.display = "block";
+});
+
+// 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";
+});
+
+// Handle reset password form submission
+document.getElementById("resetPasswordForm").addEventListener("submit", (e) => {
+  e.preventDefault();
+  const email = document.getElementById("resetEmail").value;
+
+  auth
+    .sendPasswordResetEmail(email)
+    .then(() => {
+      // Show success message
+      document.getElementById("resetSuccess").style.display = "block";
+      document.getElementById("resetPasswordForm").reset();
+
+      // Redirect after 3 seconds
+      setTimeout(() => {
+        window.location.href = window.location.origin; // Redirect to domain root
+      }, 3000);
+    })
+    .catch((error) => {
+      alert(`Error: ${error.message}`);
+    });
+});
+
+// Toggle password visibility
+document.getElementById("toggleLoginPassword").addEventListener("click", () => {
+  const passwordInput = document.getElementById("loginPassword");
+  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
+document.getElementById("emailLoginForm").addEventListener("submit", (e) => {
+  e.preventDefault();
+  const email = document.getElementById("loginEmail").value;
+  const password = document.getElementById("loginPassword").value;
+
+  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}`);
+    });
+});
+
+// Email/Password Signup
+document.getElementById("emailSignupForm").addEventListener("submit", (e) => {
+  e.preventDefault();
+  const email = document.getElementById("signupEmail").value;
+  const password = document.getElementById("signupPassword").value;
+
+  auth
+    .createUserWithEmailAndPassword(email, password)
+    .then((userCredential) => {
+      // Signed up
+      const user = userCredential.user;
+      console.log("User created:", user);
+    })
+    .catch((error) => {
+      alert(`Signup 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}`);
+    });
+});
+
+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}`);
+    });
+});
+
+// Facebook Login
+document.getElementById("facebookLogin").addEventListener("click", () => {
+  const provider = new firebase.auth.FacebookAuthProvider();
+  provider.addScope("email");
+
+  // 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}`);
+    });
+});
+
+// Twitter Login - Try using popup method first
+document.getElementById("twitterLogin").addEventListener("click", () => {
+  console.log("Starting Twitter login...");
+  const provider = new firebase.auth.TwitterAuthProvider();
+
+  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);
+  }
+});
+
+// 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}`);
+    });
+});
+
+// Auth state observer
+auth.onAuthStateChanged((user) => {
+  console.log(
+    "Auth state changed:",
+    user ? "User logged in" : "User logged out"
+  );
+
+  if (user) {
+    console.log(user);
+
+    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");
+
+    // Special handling for Twitter users who might not have email
+    if (
+      user.providerData[0].providerId === "twitter.com" &&
+      !user.displayName
+    ) {
+      displayName = user.providerData[0].uid;
+    }
+
+    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.");
+    }
+  } else {
+    userAvatar.style.display = "none";
+    loginForm.style.display = "block";
+    signupForm.style.display = "none";
+    forgotPasswordForm.style.display = "none";
+  }
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 5.0.7
+  version: 5.0.9
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-20 00:00:00.000000000 Z
+date: 2025-03-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -259,6 +259,7 @@ files:
 - _layouts/photo-effects-home.html
 - _layouts/post.html
 - _layouts/privacyPolicy.html
+- _layouts/profile.html
 - _layouts/termAndCondition.html
 - _layouts/video.html
 - assets/.DS_Store
@@ -542,7 +543,9 @@ files:
 - assets/js/adBlocker.js
 - assets/js/ads.js
 - assets/js/append-div.js
+- assets/js/appscms-auth.js
 - assets/js/appscms-infographics.js
+- assets/js/appscms-login.js
 - assets/js/appscms-search-home1.js
 - assets/js/appscms-search.js
 - assets/js/appscms-theme.js