Finished adding css to login page and minimal css to temporary profile page. Added logout button and fixed bugs in redirection for user logout functionality

Author: Vignesh-30

frontend/src/App.js

@@ -9,7 +9,7 @@ import { UserContextProvider } from './UserContextProvider';
 function App() {
   return (
     <UserContextProvider>
-      <div class="App h-screen">
+      <div className="App h-screen">
         <Routes>
           <Route path='/' element={<LoginPage />} />
           <Route path='/login' element={<LoginPage />} />

frontend/src/UserContextProvider.js

@@ -17,18 +17,22 @@ export function UserContextProvider({ children }) {
 	};
 
 	useEffect(() => {
+		console.log(token);
+		console.log(loggedIn);
 		const jwtToken = localStorage.getItem("access_token");
 		if (jwtToken && isTokenValid(jwtToken)) {
 			setToken(jwtToken);
 			setLoggedIn(true);
 		} else {
+			setLoggedIn(false);
+			setToken(null);
 			localStorage.removeItem('jwtToken');
 			navigate('/');
 		}
 	}, [navigate]);
 
 	return (
-		<UserContext.Provider value={{ token, setToken, loggedIn }}>
+		<UserContext.Provider value={{ token, setToken, loggedIn, setLoggedIn }}>
 			{children}
 		</UserContext.Provider>
 	);

frontend/src/assets/loginPageImage.png

@@ -1,7 +1,13 @@
 
 .login {
+	height: 100%; 
 	color: white;
 	background-image: url('../assets/loginPageImage.png');
 	background-size: cover;
+	font-weight: 600;
 }
 
+.googleButton {
+	padding-left: 17rem;
+	padding-right: 17rem;
+}

frontend/src/css/LoginPage.css

@@ -0,0 +1,7 @@
+
+/* .profile {
+	height: 100%; 
+	color: white;
+	background-color: whi; */
+/* } */
+

frontend/src/css/ProfilePage.css

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from "react";
 import { UserContext } from "../UserContextProvider";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Navigate } from "react-router-dom";
 import { GoogleLogin } from "@react-oauth/google";
 import axios from 'axios';
 import '../css/LoginPage.css';
@@ -9,11 +9,9 @@ export default function LoginPage() {
 	const { loggedIn, setToken } = useContext(UserContext);
 	const navigate = useNavigate();
 
-	useEffect(() => {
-		if (loggedIn) {
-			navigate("/profile");
-		}
-	}, [loggedIn, navigate]);
+	if (loggedIn) {
+		return <Navigate to={'/profile'} />;
+	}
 
 	const onSuccess = async (credentialResponse) => {
 		const token = credentialResponse.credential;
@@ -29,13 +27,16 @@ export default function LoginPage() {
 	};
 
 	return (
-		<div class="login flex flex-col items-center justify-center h-screen">
-			<div class="text-center">
-				<h1>Welcome to PeerPrep</h1>
-				<GoogleLogin
-					onSuccess={onSuccess}
-				// onError={onError}
-				/>
+		<div className="login flex flex-col items-center justify-center">
+			<div className="text-center">
+				<h1 className="mt-3 text-7xl">PeerPrep</h1>
+				<p className="mt-4 text-3xl">Match, Collaborate & Ace your Coding <br /> Interviews!</p>
+				<div className="googleButton mt-4">
+					<GoogleLogin
+						onSuccess={onSuccess}
+					// onError={onError}
+					/></div>
+
 			</div>
 		</div>
 	)

frontend/src/pages/LoginPage.js

@@ -1,14 +1,35 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { jwtDecode } from 'jwt-decode';
+import { Navigate, useNavigate } from "react-router-dom";
+import { UserContext } from "../UserContextProvider";
+import '../css/ProfilePage.css';
 
 export default function ProfilePage() {
-		const jwtToken = localStorage.getItem("access_token");
-		const decodedToken = jwtDecode(jwtToken);
-		return (
-			<div>
-				<h1>Logged in</h1>
+	const { setLoggedIn, loggedIn } = useContext(UserContext);
+	const navigate = useNavigate();
+
+	if (!loggedIn) {
+		return <Navigate to={'/login'} />;
+	}
+
+	const jwtToken = localStorage.getItem("access_token");
+
+
+	const decodedToken = jwtDecode(jwtToken);
+
+	const logout = () => {
+		localStorage.removeItem("access_token");
+		setLoggedIn(false);
+		navigate('/login');
+	};
+	return (
+		<div className="flex flex-col items-center justify-center h-screen">
+			<div className="bg-slate-900 p-20 rounded-3xl">
+				<h1>My profile</h1>
 				<h2>{decodedToken.email}</h2>
 				<h2>{decodedToken.name}</h2>
+				<button className="rounded-full mt-5 p-2 bg-slate-700" onClick={logout}>Logout</button>
 			</div>
-		)
+		</div>
+	)
 }