Merge pull request #323 from zstenger93/api_new

Api new

.gitignore

@@ -62,4 +62,6 @@ node_modules
 *.pem
 
 
+backend/output.json
+
 docker/data

frontend/src/App.js

@@ -8,7 +8,6 @@ import NotFound from "./components/404";
 import Sidebar from "./components/hamburger_menu/Hamburger";
 import Welcome from "./pages/Welcome";
 import Profile from "./pages/Profile";
-import Matchmaking from "./pages/Games/Matchmaking";
 import OriginalPong from "./pages/Games/OriginalPong";
 import PongAi from "./pages/Games/PongAi";
 import Pong3D from "./pages/Games/Pong3D";
@@ -97,14 +96,6 @@ function App() {
               </PageWrapper>
             }
           />
-          <Route
-            path="matchmaking"
-            element={
-              <PageWrapper image={Background} redirectUri={REDIRECT_URI}>
-                <Matchmaking />
-              </PageWrapper>
-            }
-          />
           <Route
             path="profile"
             element={

frontend/src/components/home/Readme.js

@@ -23,7 +23,6 @@ function Readme() {
   const [pong, visiblePong] = useOnScreen();
   const [pongai, visiblePongai] = useOnScreen();
   const [pong3d, visiblePong3d] = useOnScreen();
-  const [game, visibleGame] = useOnScreen();
   const [contributors, visibleContributors] = useOnScreen();
   const [github, visibleGithub] = useOnScreen();
   const [isOpen, setIsOpen] = useState(false);

frontend/src/components/sidebar/Logout.js

@@ -2,27 +2,31 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 const userLogout = async ({ redirectUri }) => {
-	try {
-		const token = Cookies.get('access');
-		const response = await axios.post(
-			`${redirectUri}/api/logout`,
-			{},
-			{
-				withCredentials: true,
-				headers: {
-					Authorization: `Bearer ${token}`,
-				},
-			}
-		);
+  try {
+    const token = Cookies.get("access");
+    const response = await axios.post(
+      `${redirectUri}/api/logout`,
+      {},
+      {
+        withCredentials: true,
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
 
-		if (response.status === 200) {
-			Cookies.remove('access');
-		} else {
-			console.log('Logout failed', response);
-		}
-	} catch (error) {
-		console.log(error);
-	}
+    if (response.status === 200) {
+      // Cookies.remove('access');
+      const allCookies = Cookies.get();
+      for (let cookie in allCookies) {
+        Cookies.remove(cookie);
+      }
+    } else {
+      console.log("Logout failed", response);
+    }
+  } catch (error) {
+    console.log(error);
+  }
 };
 
 export default userLogout;

frontend/src/components/welcome_page/RegisterButton.js

@@ -23,14 +23,26 @@ const RegisterButt = ({ t, redirectToHome, redirect_uri }) => {
         },
         { withCredentials: true }
       );
-	  const token = response.data.access;
+
+      const token = response.data.access;
+
       if (token) {
         Cookies.set("access", token, {
           expires: 7,
           sameSite: "Strict",
           secure: true,
         });
-        redirectToHome();
+        const login = await axios.post(
+          `${redirect_uri}/api/login`,
+          {
+            email: email,
+            password: password,
+          },
+          { withCredentials: true }
+        );
+        if (login) {
+          redirectToHome();
+        }
       }
     } catch (error) {
       if (error.response && error.response.data) {

frontend/src/pages/About.js

@@ -15,14 +15,13 @@ function About() {
   useEffect(() => {
     setTimeout(() => {
       const accessToken = Cookies.get("access");
-      console.log(accessToken);
 
       if (!accessToken) {
         window.location.href = "/404.html";
       }
     }, 1000);
   }, []);
-  
+
   const [selectedCard, setSelectedCard] = React.useState(null);
   const { t } = useTranslation();
   const teamMembers = [

frontend/src/pages/Chat.js

@@ -18,7 +18,6 @@ function Chat({ redirectUri }) {
   useEffect(() => {
     setTimeout(() => {
       const accessToken = Cookies.get("access");
-      console.log(accessToken);
 
       if (!accessToken) {
         window.location.href = "/404.html";
@@ -361,7 +360,7 @@ function Chat({ redirectUri }) {
                   </span>
                   <img
                     className="w-24 h-24 rounded-full mb-4 mx-auto"
-                    src={userDetails.user.profile_picture}
+                    src={userDetails.user.profile_picture ? userDetails.user.profile_picture : "https://raw.githubusercontent.com/zstenger93/Transcendence/master/images/transcendence.webp"}
                     alt="Profile"
                   />
                   <p className="font-nosifer mb-2">

frontend/src/pages/Games/ChoosePongMode.js

@@ -1,13 +1,24 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import BackButton from "../../components/buttons/BackButton";
 import { ButtonStyle } from "../../components/buttons/ButtonStyle";
 import backgroundimage from "../../images/pongbg.png";
 import background from "../../images/welcomebg.jpg";
 import HowToPlay from "../../components/game/HowToPlay";
+import Cookies from "js-cookie";
 
 function ChoosePongMode() {
+  useEffect(() => {
+    setTimeout(() => {
+      const accessToken = Cookies.get("access");
+
+      if (!accessToken) {
+        window.location.href = "/404.html";
+      }
+    }, 1000);
+  }, []);
+
   const [isOpen, setIsOpen] = useState(false);
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -30,7 +41,7 @@ function ChoosePongMode() {
         <Link to="/multiplayer" className={`mb-8 ${ButtonStyle}`}>
           {t("Multiplayer")}
         </Link>
-		<Link to="/tournament" className={`mb-8 ${ButtonStyle}`}>
+        <Link to="/tournament" className={`mb-8 ${ButtonStyle}`}>
           {t("Tournament")}
         </Link>
         <Link
@@ -45,7 +56,7 @@ function ChoosePongMode() {
         <BackButton navigate={navigate} t={t} />
         <HowToPlay
           isOpen={isOpen}
-		  setIsOpen={setIsOpen}
+          setIsOpen={setIsOpen}
           background={background}
           backgroundimage={backgroundimage}
         />

frontend/src/pages/Games/Multiplayer.js

@@ -8,8 +8,18 @@ import LoseScreen from "../../components/game/LoseScreen";
 import WinScreen from "../../components/game/WinScreen";
 import handleResize from "../../components/game/HandleResize";
 import FullScreenButton from "../../components/buttons/FullScreen";
+import Cookies from "js-cookie";
 
 const GameCanvas = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      const accessToken = Cookies.get("access");
+
+      if (!accessToken) {
+        window.location.href = "/404.html";
+      }
+    }, 1000);
+  }, []);
   // Default Parameters
   let playerSpeed = 5;
   const otherPaddleOffset = 3;
@@ -103,6 +113,7 @@ const GameCanvas = () => {
       const leftPaddleCenterY = leftPaddleYSecound + paddleHeight / 2;
       const distanceFromCenter = ballY - leftPaddleCenterY;
       // eslint-disable-next-line no-unused-expressions
+
       if (ballSpeedX > 0) {
         ballX = paddleWidth * (otherPaddleOffset - 1) - 10;
       } else {

frontend/src/pages/Games/OriginalPong.js

@@ -8,8 +8,18 @@ import LoseScreen from "../../components/game/LoseScreen";
 import WinScreen from "../../components/game/WinScreen";
 import handleResize from "../../components/game/HandleResize";
 import FullScreenButton from "../../components/buttons/FullScreen";
+import Cookies from "js-cookie";
 
 const GameCanvas = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      const accessToken = Cookies.get("access");
+
+      if (!accessToken) {
+        window.location.href = "/404.html";
+      }
+    }, 1000);
+  }, []);
   // Default Parameters
   let playerSpeed = 5;
   const playerSpeedIncrease = 500;
@@ -205,7 +215,7 @@ const GameCanvas = () => {
           const touchY = event.touches[i].clientY - rect.top - window.scrollY;
           // Left paddle controls
           if (touch.clientX < window.innerWidth / 2) {
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             leftPaddleY = touchY - paddleHeight / 2;
             leftPaddleY = Math.max(
               0,
@@ -214,7 +224,7 @@ const GameCanvas = () => {
           }
           // Right paddle controls
           else {
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             rightPaddleY = touchY - paddleHeight / 2;
             rightPaddleY = Math.max(
               0,

frontend/src/pages/Games/Pong3D.js

@@ -16,8 +16,18 @@ import { useLocation } from "react-router-dom";
 import backgroundImage from "../../images/pongbg.png";
 import { WelcomeButtonStyle } from "../../components/buttons/ButtonStyle";
 import EndScreen from "../../components/game/EndScreen";
+import Cookies from "js-cookie";
 
 function Pong3D() {
+  useEffect(() => {
+    setTimeout(() => {
+      const accessToken = Cookies.get("access");
+
+      if (!accessToken) {
+        window.location.href = "/404.html";
+      }
+    }, 1000);
+  }, []);
   const location = useLocation();
   const textureLoader = new THREE.TextureLoader();
   const longGeometry = 50;

frontend/src/pages/Games/PongAi.js

@@ -8,8 +8,18 @@ import LoseScreen from "../../components/game/LoseScreen";
 import WinScreen from "../../components/game/WinScreen";
 import FullScreenButton from "../../components/buttons/FullScreen";
 import handleResize from "../../components/game/HandleResize";
+import Cookies from "js-cookie";
 
 const GameCanvas = (aiDifficulty) => {
+	useEffect(() => {
+		setTimeout(() => {
+		  const accessToken = Cookies.get("access");
+
+		  if (!accessToken) {
+			window.location.href = "/404.html";
+		  }
+		}, 1000);
+	  }, []);
   // Default Parameters
   const defaultSpeedX = 300;
   const playerSpeedIncrease = 0.5;

frontend/src/pages/Home.js

@@ -1,6 +1,6 @@
 /* disable eslint */
 
-import React, { useEffect} from "react";
+import React, { useEffect } from "react";
 import WelcomeMessage from "../components/home/WelcomeMessage";
 import Readme from "../components/home/Readme";
 import Sidebar from "../components/hamburger_menu/Hamburger";
@@ -20,7 +20,6 @@ function Home({ redirectUri }) {
   useEffect(() => {
     setTimeout(() => {
       const accessToken = Cookies.get("access");
-      console.log(accessToken);
 
       if (!accessToken) {
         window.location.href = "/404.html";

frontend/src/pages/Profile.js

@@ -201,11 +201,11 @@ function MatchHistory() {
 }
 
 const defaultUserDetails = {
-  title: "Mastermind",
+  title: "Random Chad",
   username: "TrasnscEND",
   email: "[email protected]",
   about: "I turn people crazy with my clear subject description.",
-  school: "42",
+  school: "Homeless",
   level: "42.42",
   wins: "42",
   losses: "58",
@@ -220,16 +220,15 @@ function Profile({ redirectUri }) {
   useEffect(() => {
     setTimeout(() => {
       const accessToken = Cookies.get("access");
-      console.log(accessToken);
 
       if (!accessToken) {
         window.location.href = "/404.html";
       }
     }, 1000);
   }, []);
-  
+
   const [userDetails, setUserDetails] = useState(null);
-  const [imageUrl, setImageUrl] = useState(defaultUserDetails.profile_picture);
+  let [imageUrl, setImageUrl] = useState(defaultUserDetails.profile_picture);
   const [username, setUsername] = useState(
     userDetails?.username || defaultUserDetails.username
   );