Update for backend

Author: A1dos-Creations

Settings/Account/popup.js

@@ -1,39 +1,76 @@
+// Extension/Settings/Account/popup.js
+
 document.addEventListener("DOMContentLoaded", () => {
-  const auth = firebase.auth();
+  if (typeof firebase === 'undefined') {
+    console.error("Firebase is not initialized.");
+    return;
+  }
 
+  // --- Get UI Elements ---
   const nameInput = document.getElementById("name");
   const emailInput = document.getElementById("email");
   const passwordInput = document.getElementById("password");
   const messageDiv = document.getElementById("message");
   const loginBtn = document.getElementById("login-btn");
   const registerBtn = document.getElementById("register-btn");
+  const logoutBtn = document.getElementById("logout-btn");
+  const loginView = document.getElementById("login-view");
+  const userView = document.getElementById("user-view");
+  const userInfo = document.getElementById("user-info");
 
-  loginBtn.addEventListener("click", () => {
-    const email = emailInput.value.trim();
-    const password = passwordInput.value.trim();
-    if (!email || !password) return showMessage("Please enter email and password.", "red");
-    auth.signInWithEmailAndPassword(email, password)
-        .catch((error) => showMessage(`Login Error: ${error.message}`, "red"));
+  // --- Attach Event Listeners ---
+  loginBtn.addEventListener("click", () => handleAuth(false));
+  registerBtn.addEventListener("click", () => handleAuth(true));
+  logoutBtn.addEventListener("click", () => firebase.auth().signOut());
+
+  // --- Main Auth State Listener ---
+  firebase.auth().onAuthStateChanged((user) => {
+    if (user) {
+      // User is signed in
+      loginView.style.display = 'none';
+      userView.style.display = 'block';
+      userInfo.textContent = user.displayName || user.email;
+    } else {
+      // User is signed out
+      loginView.style.display = 'block';
+      userView.style.display = 'none';
+    }
   });
 
-  registerBtn.addEventListener("click", () => {
+  // --- New Compliant Authentication Handler ---
+  async function handleAuth(isRegistering) {
     const name = nameInput.value.trim();
     const email = emailInput.value.trim();
     const password = passwordInput.value.trim();
-    if (!name || !email || !password) return showMessage("Please fill all fields.", "red");
-    auth.createUserWithEmailAndPassword(email, password)
-        .then((cred) => cred.user.updateProfile({displayName: name}))
-        .catch((error) => showMessage(`Registration Error: ${error.message}`, "red"));
-  });
 
-  auth.onAuthStateChanged((user) => {
-    if (user) {
-      showMessage(`Logged in as ${user.displayName || user.email}`, "green");
-      chrome.storage.local.set({username: user.displayName});
-    } else {
-      showMessage("Please login or register", "blue");
+    if (isRegistering && !name) return showMessage("Please enter a name to register.", "red");
+    if (!email || !password) return showMessage("Please enter both email and password.", "red");
+    
+    try {
+      showMessage("Connecting...", "grey");
+      const createTokenFunction = firebase.functions().httpsCallable("createCustomAuthToken");
+      
+      const result = await createTokenFunction({
+        email,
+        password,
+        name,
+        isRegistering,
+      });
+
+      const token = result.data.token;
+      if (token) {
+        // Use the secure token to sign in on the client side
+        await firebase.auth().signInWithCustomToken(token);
+        showMessage("Success!", "green");
+      } else {
+        throw new Error("Failed to get authentication token.");
+      }
+
+    } catch (error) {
+      console.error("Authentication Error:", error);
+      showMessage(`Error: ${error.message}`, "red");
     }
-  });
+  }
 
   function showMessage(msg, color) {
     messageDiv.textContent = msg;

Settings/settingsMain.html

@@ -15,47 +15,7 @@
 
     <script defer src="/textEdit.js"></script>
 
-    <style>
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 60px;
-            height: 34px;
-        }
-        .switch input { 
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: .4s;
-            border-radius: 34px;
-        }
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 26px;
-            width: 26px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: .4s;
-            border-radius: 50%;
-        }
-        input:checked + .slider {
-            background-color: #66bb6a;
-        }
-        input:checked + .slider:before {
-            transform: translateX(26px);
-        }
-    </style>
+
 </head>
 
 <body style="width: 300px;max-height: 560px;min-height: 300px;background-color: rgb(33, 33, 33);overflow: hidden;scroll-behavior: smooth;">
@@ -79,15 +39,16 @@ <h2 id="PersonalInfoH">Personal Information</h2>
     </div>
 
 <!-- LOGIN / REGISTER -->
-    <div id="auth-container">
+    <div id="login-view">
         <h2 id="a-header">Sign In / Register</h2>
         <input type="text" id="name" placeholder="Name (Register Only)">
         <input type="email" id="email" placeholder="Email">
         <input type="password" id="password" placeholder="Password">
+        <button id="login-btn">Login</button>
+        <button id="register-btn">Register</button>
+        <div id="message"></div>
     </div>
-    <button id="login-btn">Login</button>
-    <button id="register-btn">Register</button>
-    <div id="message"></div>
+
     <p style="color: white;font-family: Lexend Deca;font-size: 14px;">Sync Tasks to Google Calendar <br><i style="color: rgb(158, 158, 158);">(REQUIRES SIGN-IN ON WEBSITE)</i></p>
     <div style="margin-top: 5px;font-size: 30px;font-weight: bolder;margin-bottom: 1px;">
         <label class="switch">

firebase-init.js

@@ -15,6 +15,3 @@ const auth = firebase.auth();
 const db = firebase.firestore();
 const functions = firebase.functions();
 const storage = firebase.storage();
-
-auth.useDeviceLanguage();
-firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);