Merge pull request #4 from Git-abby/firebaseAuth

chore: display user info
Git-abby · Dec 16, 2024 · eeeccfc · eeeccfc
2 parents bb8cfad + fe8490c
commit eeeccfc
Show file tree

Hide file tree

Showing 8 changed files with 832 additions and 126 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/material": "^6.2.0",
     "firebase": "^11.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/frontend/src/components/MovieCard.jsx b/frontend/src/components/MovieCard.jsx
@@ -24,7 +24,7 @@ function MovieCard({ movie }) {
 
   return (
     <div className="movie-card">
-      <Link to={`movie/${movie.id}`}>
+      <Link to={`/movie/${movie.id}`}>
         <div className="movie-poster">
           <img
             src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -1,15 +1,79 @@
-import { Link } from "react-router-dom";
-import '../css/NavBar.css'
+import { Link, useNavigate } from "react-router-dom";
+import "../css/NavBar.css";
+//ICONS
+import PersonIcon from "@mui/icons-material/Person";
+
+import { onAuthStateChanged, signOut } from "firebase/auth";
+import { auth } from "../services/firebase";
+import { useEffect, useState } from "react";
+
 function NavBar() {
+  const [user, setUser] = useState(null);
+
+  //Mouse effect for user
+  const [showMenu, setShowMenu] = useState(false);
+
+  const navigate = useNavigate();
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      if (currentUser) {
+        setUser(currentUser);
+      } else {
+        setUser(null);
+        navigate("/signin");
+      }
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  //Logout
+  const handleLogout = () => {
+    signOut(auth)
+      .then(() => {
+        console.log("User logged out");
+      })
+      .catch((error) => {
+        console.error("Logour Error", error.message);
+      });
+  };
   return (
     <div className="navbar bg-gray-1 dark:bg-dark">
-      <div className="navbar-brand"> 
-        <Link to="/">GitFlix</Link>
+      <div className="navbar-brand">
+        <Link to="/home">GitFlix</Link>
       </div>
       <div className="navbar-links">
-        <Link to="/" className="nav-link">Popular Now</Link>
-        <Link to="/favorites" className="nav-link">Favorites</Link>
-        <Link to="/about" className="nav-link">About</Link>
+        <Link to="/favorites" className="nav-link">
+          Favorites
+        </Link>
+        <Link to="/about" className="nav-link">
+          About
+        </Link>
+        <div>
+          <Link
+            className="nav-link"
+            onMouseEnter={() => setShowMenu(true)}
+            onMouseLeave={() => setShowMenu(false)}
+            style={{ position: "relative" }}>
+            <ul>
+              <li>
+                <PersonIcon />
+              </li>
+            </ul>
+            {showMenu && user && (
+              <div className="dropdown-menu">
+                <p className="user-display-name">
+                  {user && user ? user.displayName || user.email : "Guest"}
+                </p>
+                {user && (
+                  <button className="logout-button" onClick={handleLogout}>
+                    Logout
+                  </button>
+                )}
+              </div>
+            )}
+          </Link>
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
@@ -24,6 +24,7 @@ function Home() {
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
 
+
   // // Listen for auth state changes
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
@@ -34,12 +35,10 @@ function Home() {
         setUser(null);
       }
     });
-
     //Clean up subscription
     return () => unsubscribe();
   }, []);
-
-  useEffect(() => {
+ useEffect(() => {
     const loadPopularMovies = async () => {
       try {
         const popularMovies = await getPopularMovies();

diff --git a/frontend/src/components/pages/Login.jsx b/frontend/src/components/pages/Login.jsx
@@ -3,47 +3,56 @@ import { auth } from "../../services/firebase";
 import { signInWithEmailAndPassword } from "firebase/auth";
 
 import { ToastContainer, toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 function Login() {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
   const [username, setUserName] = useState("");
   const [password, setPassword] = useState("");
 
   const loginWithEmailPassword = async (e) => {
     e.preventDefault();
+
+    if (username == "" || password == "") {
+      toast.error("Please fill the username or password");
+      return;
+    }
     try {
       const data = await signInWithEmailAndPassword(auth, username, password);
-        navigate("/home")
+      navigate("/home");
       console.log(data);
     } catch (error) {
       const errorCode = error.code;
       const errorMessage = error.message;
       console.log(errorCode, errorMessage);
-      toast.error(errorMessage);
+      if (errorCode === "auth/invalid-email") {
+        toast.error("This email is invalid. Please log in.");
+      } else {
+        toast.error("An unexpected error occurred. Please try again.");
+      }
     }
   };
   //   console.log(username, password);
   return (
     <section className="bg-gray-1 py-20 lg:py-[120px] dark:bg-dark">
-        <ToastContainer
-            position="top-center"
-            autoClose={5000}
-            hideProgressBar={false}
-            newestOnTop={false}
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-            draggable
-            pauseOnHover
-            theme="dark"
-            transition:Bounce
-          />
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="dark"
+        transition:Bounce
+      />
       <div className="container mx-auto">
         <div className="-mx-4 flex flex-wrap">
           <div className="w-full px-4">
-            <div className="relative mx-auto max-w-[525px] overflow-hidden rounded-lg bg-white px-10 py-16 text-center sm:px-12 md:px-[60px] dark:bg-dark-2">
-              <div className="mb-10 text-center md:mb-16">
+            <div className="relative mx-auto max-w-[525px] overflow-hidden rounded-lg bg-white px-10 py-8 text-center sm:px-12 md:px-[60px] dark:bg-dark-2">
+              <div className="mb-5 text-center md:mb-5">
                 <a className="mx-auto inline-block max-w-[160px] text-2xl text-white">
                   GitFlix
                 </a>
@@ -75,14 +84,19 @@ function Login() {
                   />
                 </div>
               </form>
-
-              <a className="mb-2 inline-block text-base text-dark hover:text-primary hover:underline dark:text-white">
-                Forget Password?
-              </a>
-              <p className="text-base text-body-color dark:text-dark-6">
-                <span className="pr-0.5">Not a member yet?</span>
-                <a className="text-primary hover:underline">Sign Up</a>
-              </p>
+              <div className="flex flex-col justify-center items-center">
+                <a className="mb-2 inline-block text-base text-dark hover:text-primary hover:underline dark:text-white">
+                  Forget Password?
+                </a>
+                <div>
+                  <span className="text-base text-body-color dark:text-dark-6 pr-1.5">
+                    Not a member yet? 
+                  </span>
+                  <Link to={"/signUp"} className="text-primary hover:underline">
+                    Sign Up
+                  </Link>
+                </div>
+              </div>
             </div>
           </div>
         </div>

diff --git a/frontend/src/components/pages/SignUp.jsx b/frontend/src/components/pages/SignUp.jsx
@@ -4,7 +4,7 @@ import { createUserWithEmailAndPassword } from "firebase/auth";
 import { auth } from "../../services/firebase";
 
 import { ToastContainer, toast } from "react-toastify";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 function SignUp() {
   const [name, setName] = useState("");
@@ -112,11 +112,14 @@ function SignUp() {
                   />
                 </div>
               </form>
-
-              <p className="text-base text-body-color dark:text-dark-6">
-                <span className="pr-0.5">Already have an account?</span>
-                <a className="text-primary hover:underline">Sign In</a>
-              </p>
+              <div className="flex justify-center items-center">
+                <span className="text-base text-body-color dark:text-dark-6 pr-1.5">
+                  Already have an account?
+                </span>
+                <Link to={"/signin"} className="text-primary hover:underline">
+                  Sign In
+                </Link>
+              </div>
             </div>
           </div>
         </div>