hashage du password, register et début login

backend/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "argon2": "^0.40.1",
+    "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "joi": "^17.12.2",

backend/src/app.js

@@ -25,7 +25,6 @@ const app = express();
 // 4. Be sure to only have URLs in the array with domains from which you want to allow requests.
 // For example: ["http://mysite.com", "http://another-domain.com"]
 
-/*
 const cors = require("cors");
 
 app.use(
@@ -34,10 +33,9 @@ app.use(
       process.env.FRONTEND_URL, // keep this one, after checking the value in `backend/.env`
       "http://mysite.com",
       "http://another-domain.com",
-    ]
+    ],
   })
 );
-*/
 
 /* ************************************************************************* */
 

backend/src/controllers/readerControllers.js

@@ -24,7 +24,7 @@ const add = async (req, res, next) => {
   const readerInfos = {
     // ce que l'on retourne du manager
     email: req.body.email,
-    password: req.body.password,
+    password: req.body.hashedPassword,
     username: req.body.username,
   };
   try {

backend/src/models/ReaderManager.js

@@ -16,6 +16,8 @@ class ReaderManager extends AbstractManager {
     return rows;
   }
 
+  // /!\ select * from user est interdit car l'on ne souahite pas voir le mdp même en hashé apparaître
+
   async readAll() {
     const [rows] = await this.database.query(`select * from ${this.table}`);
     return rows;

backend/src/router.js

@@ -13,6 +13,7 @@ const readerControllers = require("./controllers/readerControllers");
 
 // Import pagesMiddleware
 const bookMiddlewares = require("./middlewares/bookMiddlewares");
+const authMiddlewares = require("./services/auth");
 
 // Items routes
 
@@ -52,7 +53,7 @@ router.delete("/books/:id", bookControllers.destroy);
 router.get("/readers", readerControllers.browse);
 
 // Route to add a new reader
-router.post("/readers", readerControllers.add);
+router.post("/readers", authMiddlewares.hashPassword, readerControllers.add);
 router.get("/readers/:id", readerControllers.read);
 
 module.exports = router;

backend/src/services/auth.js

@@ -0,0 +1,24 @@
+const argon2 = require("argon2");
+
+const hashingOptions = {
+  type: argon2.argon2id,
+  memoryCost: 19 * 2 ** 10,
+  timeCost: 2,
+  parallelism: 1,
+};
+
+const hashPassword = async (req, res, next) => {
+  try {
+    const { password } = req.body;
+    const hashedPassword = await argon2.hash(password, hashingOptions);
+    req.body.hashedPassword = hashedPassword;
+    // pour supprimer le password en clair une fois celui-ci hashé
+    delete req.body.password;
+    console.info("HASHED PASSWORD", req.body);
+    next();
+  } catch (error) {
+    next(error);
+  }
+};
+
+module.exports = { hashPassword };

frontend/src/App.jsx

@@ -1,21 +1,15 @@
 import { Outlet } from "react-router-dom";
-// import Footer from "./components/Footer";
 
-import "./App.css";
-
-// import Navbar from "./components/Navbar";
+import Navbar from "./components/Navbar";
 
 function App() {
   return (
-    <div className="main_body">
-      {/* <Navbar /> */}
-      <div className="content">
-        <main>
-          <Outlet />
-        </main>
-        {/* <Footer /> */}
-      </div>
-    </div>
+    <>
+      <Navbar />
+      <main>
+        <Outlet />
+      </main>
+    </>
   );
 }
 

frontend/src/components/Books.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import axios from "axios";
+import PropTypes from "prop-types";
+
+export default function Book({ book, refreshPage }) {
+  const deleteBook = () => {
+    axios
+      .delete(`${import.meta.env.VITE_BACKEND_URL}/api/books/${book.id}`)
+      .then(() => refreshPage())
+      .catch((error) => console.error(error));
+  };
+
+  return (
+    <article>
+      <h3>{book.title}</h3>
+      <p>{book.summary}</p>
+      <button type="button" onClick={deleteBook}>
+        Supprimer le livre de la liste
+      </button>
+    </article>
+  );
+}
+
+Book.propTypes = {
+  book: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
+    summary: PropTypes.string.isRequired,
+  }).isRequired,
+  refreshPage: PropTypes.func.isRequired,
+};

frontend/src/components/Navbar.jsx

@@ -0,0 +1,21 @@
+// import { useContext } from "react";
+import { Link } from "react-router-dom";
+// import UserContext from "../services/UserContext";
+
+export default function Navbar() {
+  // const { user } = useContext(UserContext);
+
+  // const isConnected = user.id && user.id !== "null";
+
+  // console.info("isConnected", isConnected);
+
+  return (
+    <nav>
+      <Link to="/">Accueil</Link>
+      <Link to="/books">Livres</Link>
+      <Link to="/create">Créer une fiche </Link>
+      <Link to="/register">Créer un compte</Link>
+      {/* <Link to="/login">Se connecter</Link> */}
+    </nav>
+  );
+}

frontend/src/main.jsx

@@ -1,22 +1,23 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from "react";
 import ReactDOM from "react-dom/client";
-
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-// import { UserProvider } from "./services/UserContext";
+import axios from "axios";
 
 import App from "./App";
+
 import Home from "./pages/Home";
-// import Store from "./pages/Store";
-// import GameDetails from "./pages/GameDetails";
-// import MyGames from "./pages/MyGames";
-// import AddGame from "./pages/AddGame";
-// import Trades from "./pages/Trades";
-// import Register from "./pages/Register";
-// import Login from "./pages/Login";
-// import Match from "./components/ViewAvaibility/Match";
-// import SearchResult from "./components/SearchResult";
-// import Settings from "./pages/Settings";
-// import Forbidden from "./pages/Forbidden";
+import Books from "./pages/Books";
+import CreateBook from "./pages/CreateBook";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
+import Forbidden from "./pages/Forbidden";
+
+import { UserProvider } from "./services/UserContext";
+
+// import "./styles/app.css";
+import "./styles/navbar.css";
+// import "./styles/articles.css";
 
 const router = createBrowserRouter([
   {
@@ -26,14 +27,38 @@ const router = createBrowserRouter([
         path: "/",
         element: <Home />,
       },
+      {
+        path: "/books",
+        element: <Books />,
+        errorElement: <Forbidden />,
+        loader: () =>
+          axios
+            .get(`${import.meta.env.VITE_BACKEND_URL}/api/books`, {
+              withCredentials: true,
+            })
+            .then((response) => response.data)
+            .catch((error) => console.error("ERROR", error)),
+      },
+      {
+        path: "/create",
+        element: <CreateBook />,
+      },
+      {
+        path: "/register",
+        element: <Register />,
+      },
+      {
+        path: "/login",
+        element: <Login />,
+      },
     ],
   },
 ]);
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
-
-root.render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <UserProvider>
+      <RouterProvider router={router} />
+    </UserProvider>
   </React.StrictMode>
 );

frontend/src/pages/Books.jsx

@@ -0,0 +1,21 @@
+import { useLoaderData, useNavigate } from "react-router-dom";
+import Book from "../components/Books";
+
+export default function Books() {
+  const books = useLoaderData();
+
+  const navigate = useNavigate();
+
+  const refreshPage = () => {
+    navigate("/books", { replace: true });
+  };
+
+  return (
+    <>
+      <h1>Liste des livres lus :</h1>
+      {books.map((book) => (
+        <Book key={book.id} book={book} refreshPage={refreshPage} />
+      ))}
+    </>
+  );
+}