Add google login to signup / Increase profile dropdown z

frontend/src/components/authentication/LoginPage.jsx

@@ -7,6 +7,8 @@ import { loadFull } from "tsparticles";
 import refreshAccessToken from "./refreshAcesstoken";
 import axiosapi from "../../api/AuthenticationApi";
 import { useAuth } from "../../hooks/authentication/IsAuthenticated";
+import { FcGoogle } from "react-icons/fc";
+
 
 function LoginPage() {
   const Navigate = useNavigate();
@@ -208,7 +210,7 @@ function LoginPage() {
             className="btn btn-outline btn-secondary w-full "
             onClick={() => googleLoginImplicit()}
           >
-            Login with Google
+            <FcGoogle className="rounded-full bg-white"/>Login with Google
           </button>
           {/* Forgot Password Link */}
           <div className="justify-left">

frontend/src/components/authentication/SignUpPage.jsx

@@ -4,6 +4,9 @@ import axiosapi from "../../api/AuthenticationApi";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
+import { FcGoogle } from "react-icons/fc";
+import { useGoogleLogin } from "@react-oauth/google";
+
 
 function Copyright(props) {
   return (
@@ -64,6 +67,28 @@ export default function SignUp() {
     console.log(container);
   }, []);
 
+  const googleLoginImplicit = useGoogleLogin({
+    flow: "auth-code",
+    redirect_uri: "postmessage",
+    onSuccess: async (response) => {
+      try {
+        const loginResponse = await axiosapi.googleLogin(response.code);
+        if (loginResponse && loginResponse.data) {
+          const { access_token, refresh_token } = loginResponse.data;
+
+          localStorage.setItem("access_token", access_token);
+          localStorage.setItem("refresh_token", refresh_token);
+          setIsAuthenticated(true);
+          Navigate("/");
+        }
+      } catch (error) {
+        console.error("Error with the POST request:", error);
+        setIsAuthenticated(false);
+      }
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
   return (
     <div
       data-theme="night"
@@ -197,6 +222,14 @@ export default function SignUp() {
           <button className="btn btn-success w-full " onClick={handleSubmit}>
             Signup
           </button>
+          <div className="divider">OR</div>
+          {/* Login with Google Button */}
+          <button
+            className="btn btn-outline btn-secondary w-full "
+            onClick={() => googleLoginImplicit()}
+          >
+            <FcGoogle className="rounded-full bg-white"/>Login with Google
+          </button>
           {/* Already have an account? */}
           <div className="text-blue-500 flex justify-center text-sm">
             <a href="login">

frontend/src/components/navigations/Navbar.jsx

@@ -39,7 +39,7 @@ function NavBar() {
             </label>
             <ul
               tabIndex={0}
-              className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+              className="mt-3 z-[10] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
               <li>
                 <a href={settings.Profile} className="justify-between">
                   Profile