Update app.js

Author: khalid-ameri

src/app.js

@@ -3,59 +3,85 @@ const noteTitle = document.getElementById("noteTitle");
 const noteContent = document.getElementById("noteContent");
 const addNoteBtn = document.getElementById("addNote");
 const notesList = document.getElementById("notesList");
-const loginBtn = document.getElementById("loginBtn");
+const openAuthModalBtn = document.getElementById("openAuthModal");
 const logoutBtn = document.getElementById("logoutBtn");
 
-// --- Combined Login/Signup --- //
-loginBtn.addEventListener("click", async () => {
-  const email = prompt("Enter your email:");
-  const password = prompt("Enter your password:");
+const authModal = document.getElementById("authModal");
+const closeModal = document.querySelector(".close");
+const modalTitle = document.getElementById("modalTitle");
+const authForm = document.getElementById("authForm");
+const authSubmitBtn = document.getElementById("authSubmitBtn");
+const toggleLink = document.getElementById("toggleLink");
 
-  if (!email || !password) return alert("Email and password required!");
+let isLogin = true; // toggle state
+
+// --- Open modal ---
+openAuthModalBtn.addEventListener("click", () => authModal.style.display = "block");
+closeModal.addEventListener("click", () => authModal.style.display = "none");
+window.addEventListener("click", e => { if(e.target == authModal) authModal.style.display = "none"; });
+
+// --- Toggle login/signup ---
+toggleLink.addEventListener("click", e => {
+  e.preventDefault();
+  isLogin = !isLogin;
+  if(isLogin){
+    modalTitle.textContent = "Login";
+    authSubmitBtn.textContent = "Login";
+    toggleLink.textContent = "Sign Up";
+  } else {
+    modalTitle.textContent = "Sign Up";
+    authSubmitBtn.textContent = "Sign Up";
+    toggleLink.textContent = "Login";
+  }
+});
+
+// --- Auth submit ---
+authForm.addEventListener("submit", async e => {
+  e.preventDefault();
+  const email = document.getElementById("emailInput").value.trim();
+  const password = document.getElementById("passwordInput").value.trim();
 
   try {
-    // Try to sign in
-    await auth.signInWithEmailAndPassword(email, password);
-    alert("Logged in successfully!");
-  } catch (err) {
-    // If user doesn't exist, create account
-    if (err.code === "auth/user-not-found") {
-      try {
-        await auth.createUserWithEmailAndPassword(email, password);
-        alert("Account created and logged in!");
-      } catch (signupErr) {
-        alert("Signup failed: " + signupErr.message);
-      }
-    } else if (err.code === "auth/wrong-password") {
-      alert("Wrong password!");
+    if(isLogin){
+      await auth.signInWithEmailAndPassword(email,password);
+      alert("Logged in successfully!");
     } else {
-      alert("Login error: " + err.message);
+      await auth.createUserWithEmailAndPassword(email,password);
+      alert("Account created and logged in!");
     }
+    authModal.style.display = "none";
+    authForm.reset();
+  } catch(err){
+    alert(err.message);
   }
 });
 
-// Logout
+// --- Logout ---
 logoutBtn.addEventListener("click", () => auth.signOut());
 
-// --- Listen for auth changes --- //
+// --- Listen auth state ---
 auth.onAuthStateChanged(user => {
-  if (user) {
+  if(user){
     addNoteBtn.disabled = false;
+    logoutBtn.style.display = "inline-block";
+    openAuthModalBtn.style.display = "none";
     listenNotes(user.uid);
   } else {
-    notesList.innerHTML = "<p>Please log in to see your notes.</p>";
     addNoteBtn.disabled = true;
+    logoutBtn.style.display = "none";
+    openAuthModalBtn.style.display = "inline-block";
+    notesList.innerHTML = "<p>Please log in to see your notes.</p>";
   }
 });
 
-// --- Add note --- //
+// --- Notes functionality ---
 addNoteBtn.addEventListener("click", () => {
   const user = auth.currentUser;
-  if (!user) return alert("Log in first!");
+  if(!user) return alert("Log in first!");
 
   const title = noteTitle.value.trim();
   const content = noteContent.value.trim();
-  if (!title || !content) return alert("Both fields required!");
+  if(!title || !content) return alert("Both fields required!");
 
   db.collection("notes").add({
     title,
@@ -68,14 +94,13 @@ addNoteBtn.addEventListener("click", () => {
   });
 });
 
-// --- Listen to notes in real-time --- //
-function listenNotes(uid) {
+function listenNotes(uid){
   db.collection("notes")
-    .where("userId", "==", uid)
-    .orderBy("timestamp", "desc")
-    .onSnapshot(snapshot => {
+    .where("userId","==",uid)
+    .orderBy("timestamp","desc")
+    .onSnapshot(snapshot=>{
       notesList.innerHTML = "";
-      snapshot.forEach(doc => {
+      snapshot.forEach(doc=>{
         const note = doc.data();
         const div = document.createElement("div");
         div.className = "note-card";
@@ -89,9 +114,8 @@ function listenNotes(uid) {
     });
 }
 
-// --- Delete note --- //
-function deleteNote(id) {
+function deleteNote(id){
   const user = auth.currentUser;
-  if (!user) return alert("Log in first!");
+  if(!user) return alert("Log in first!");
   db.collection("notes").doc(id).delete();
 }