Merge branch 'dev' of github.com:WildCodeSchool-2023-09/eating-nam-na…

…m into S06_US14

backend/src/app.js

@@ -28,13 +28,14 @@ const app = express();
 
 const cors = require("cors");
 
-app.use(cors());
-/*
+// app.use(cors());
+
 app.use(
   cors({
     origin: [
       process.env.FRONTEND_URL, // keep this one, after checking the value in `backend/.env`
     ],
+    credentials: true,
   })
 );
 
@@ -54,9 +55,9 @@ app.use(
 // Uncomment one or more of these options depending on the format of the data sent by your client:
 
 app.use(express.json());
-app.use(express.urlencoded());
-app.use(express.text());
-app.use(express.raw());
+// app.use(express.urlencoded());
+// app.use(express.text());
+// app.use(express.raw());
 
 /* ************************************************************************* */
 

backend/src/controllers/authControllers.js

@@ -51,10 +51,15 @@ const login = async (req, res, next) => {
         // Create a token for open & keep the user session as logged
         const token = jwt.sign(
           { username: user.username, is_admin: user.is_admin },
-          process.env.APP_SECRET
+          process.env.APP_SECRET,
+          { expiresIn: "1h" }
         );
         // Respond with the Token of the user, in JSON format
-        res.cookie("token_eating_nam_nam_usr", token).json(token);
+        res.cookie("token", token, {
+          httpOnly: true,
+          maxAge: 3600000, // 1h in ms
+        });
+        res.status(200).send(token);
       } else {
         res.sendStatus(422);
       }

backend/src/controllers/userControllers.js

@@ -63,7 +63,6 @@ const edit = async (req, res, next) => {
 const add = async (req, res, next) => {
   // Extract the user data from the request body
   const item = req.body;
-  console.info(item);
 
   const existingUsername = await tables.user.readByUsername(item.username);
   const existingEmail = await tables.user.readByEmail(item.email);

backend/src/middleware/authMiddleware.js

@@ -21,20 +21,23 @@ const hashPwd = async (req, res, next) => {
 };
 
 const verifyToken = async (req, res, next) => {
-  const token = req.body.cookies;
+  try {
+    const { token } = req.cookies;
+
+    console.info(req.cookies);
+
+    console.info(token);
 
-  console.info(token);
-  if (!token) {
-    res.status(401).json({ error: "No token founded" });
-  } else {
-    try {
+    if (!token) {
+      res.status(401).json({ error: "No token founded" });
+    } else {
       const decoded = jwt.verify(token, process.env.APP_SECRET);
       const user = await tables.user.read(decoded.id);
       console.info({ user });
       next();
-    } catch (err) {
-      res.status(401).json({ error: "The token is invalid" });
     }
+  } catch (err) {
+    res.status(401).json({ error: "The token is invalid" });
   }
 };
 

backend/src/router.js

@@ -40,8 +40,6 @@ router.post(
   UserControllers.add
 );
 
-// lala ceci est un test
-
 // Route to get specific items and block the register if they exists
 router.get("/username/:username", AuthControllers.readByUsername);
 router.get("/email/:email", AuthControllers.readByEmail);

frontend/src/main.jsx

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom/client";
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+import axios from "axios";
+
 import App from "./App";
 import Accueil from "./pages/Accueil";
 import Connexion from "./pages/Connexion";
@@ -24,7 +26,12 @@ const router = createBrowserRouter([
         path: "/recipes/:id",
         element: <RecipeDetails />,
         loader: ({ params }) => {
-          return fetch(`http://localhost:3310/api/recipes/${params.id}`);
+          return axios.get(
+            `${import.meta.env.VITE_BACKEND_URL}/api/recipes/${params.id}`,
+            {
+              withCredentials: true,
+            }
+          );
         },
       },
       {

frontend/src/pages/Connexion.jsx

@@ -45,12 +45,13 @@ function TypeOfForm({ checkbox, setCheckbox }) {
         username,
         password,
       };
-      console.info(formData);
 
       try {
         // Appel à l'API pour demander une connexion
         const response = await axios
-          .post(`${import.meta.env.VITE_BACKEND_URL}/api/login`, formData)
+          .post(`${import.meta.env.VITE_BACKEND_URL}/api/login`, formData, {
+            withCredentials: true,
+          })
           .catch((err) => console.error(err));
 
         // Redirection vers la page de connexion si la création réussit
@@ -123,7 +124,6 @@ function TypeOfForm({ checkbox, setCheckbox }) {
             // Redirection sur le login en gardant la valeur de username
             document.getElementsByTagName("form")[2].email.value = "";
             if (!checkbox) setCheckbox(true);
-            console.info("response =", res);
           }
         })
         .catch((err) => {

frontend/src/pages/RecipeDetails.jsx

@@ -7,7 +7,7 @@ function RecipeDetails() {
   return (
     <div className="body-content recipe-detail">
       <Detail name={detail.name} prep={detail.prep_time} />
-      <Link to="/keywords">
+      <Link to="/recipes">
         <p>retour</p>
       </Link>
     </div>

frontend/src/pages/RecipeList.jsx

@@ -8,22 +8,26 @@ function RecipeList() {
   const [filters, setFilters] = useState([]);
   const [filtersRecipe, setFiltersRecipe] = useState("");
 
-  const getData = () => {
+  useEffect(() => {
     const endpoints = [
       "http://localhost:3310/api/recipes",
       "http://localhost:3310/api/tags",
     ];
-    Promise.all(endpoints.map((endpoint) => axios.get(endpoint))).then(
-      ([{ data: recipe }, { data: tag }]) => {
+    Promise.all(
+      endpoints.map((endpoint) =>
+        axios.get(endpoint, {
+          withCredentials: true,
+        })
+      )
+    )
+      .then(([{ data: recipe }, { data: tag }]) => {
         setAllRecipe(recipe);
         setFilters(tag);
         console.info(recipe, tag);
-      }
-    );
-  };
-
-  useEffect(() => {
-    getData();
+      })
+      .catch(() => {
+        window.location.href = "/";
+      });
   }, []);
 
   return (

frontend/src/pages/style/RecipeList.scss

@@ -29,9 +29,9 @@
       list-style: none;
       background-color: $white-color;
       border-radius: 1.5rem;
-      height: 150px;
+      height: 200px;
       min-width: 300px;
-      max-width: 350px;
+      max-width: 400px;
       box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
 
       display: flex;
@@ -42,11 +42,11 @@
 
       .image-recipe-pos {
         width: 45%;
-        height: 150px;
-        max-width: 150px;
+        height: 200px;
+        max-width: 200px;
       }
       .image-recipe {
-        height: 150px;
+        height: 200px;
         width: 100%;
         object-fit: cover;
         border-radius: 1.5rem 0 0 1.5rem;