Merge pull request #79 from WildCodeSchool-2023-09/dev

Dev

backend/src/app.js

@@ -1,5 +1,5 @@
 // Load the express module to create a web application
-
+// const path = require("path");
 const express = require("express");
 
 const app = express();

backend/src/controllers/authControllers.js

@@ -1,4 +1,4 @@
-const { hash, argon2 } = require("argon2");
+const { hash, verify, argon2id } = require("argon2");
 const jwt = require("jsonwebtoken");
 // Import access to database tables
 const tables = require("../tables");
@@ -9,7 +9,7 @@ const add = (req, res) => {
 
   // We create our hashing options
   const hashingOptions = {
-    type: argon2.argon2id,
+    type: argon2id,
     memoryCost: 2 ** 16,
     timeCost: 5,
     parallelism: 1,
@@ -45,10 +45,7 @@ const login = async (req, res, next) => {
       return;
     }
 
-    const verified = await argon2.verify(
-      user.hashed_password,
-      req.body.password
-    );
+    const verified = await verify(user.hashed_password, req.body.password);
 
     if (verified) {
       // Respond with the user in JSON format (but without the hashed password)

backend/src/router.js

@@ -3,11 +3,11 @@ const express = require("express");
 const router = express.Router();
 
 const authControllers = require("./controllers/authControllers");
-const { checkDatas } = require("./services/validateLogin");
+// const { checkDatas } = require("./services/validateLogin");
 
 const userControllers = require("./controllers/userControllers");
 const { validateUser } = require("./services/validateUser");
-const { verifyToken, hashPassword } = require("./services/auth");
+const { hashPassword } = require("./services/auth");
 
 const artworksControllers = require("./controllers/artworkControllers");
 const { validateArtwork } = require("./services/validateArtwork");
@@ -24,7 +24,7 @@ const { validateCapture } = require("./services/validateCapture");
 // Authentification routes
 
 router.post("/register", authControllers.add);
-router.post("/login", checkDatas, verifyToken, authControllers.login);
+router.post("/login", authControllers.login);
 
 // Routes of users
 router.get("/users", userControllers.browse);

frontend/package.json

@@ -7,11 +7,14 @@
   "dependencies": {
     "@react-hook/media-query": "^1.1.1",
     "axios": "^1.6.5",
+    "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-html5-camera-photo": "^1.5.11",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.14.2",
     "sass": "^1.69.7"

frontend/src/App.jsx

@@ -1,8 +1,8 @@
-import Home from "./pages/Home";
+import { Outlet } from "react-router-dom";
 import "./styles/commons.scss";
 
 function App() {
-  return <Home />;
+  return <Outlet />;
 }
 
 export default App;

frontend/src/components/Camera.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import CameraReact from "react-html5-camera-photo";
+import "react-html5-camera-photo/build/css/index.css";
+import CameraSVG from "../assets/Camera.svg";
+import "./Camera.scss";
+
+function Camera() {
+  const [isCameraOpen, setIsCameraOpen] = useState(false);
+
+  const handleTakePhoto = (dataUri) => {
+    // Faites quelque chose avec l'image capturée, par exemple, affichez-la ou téléchargez-la.
+    console.info(dataUri);
+    setIsCameraOpen(false);
+  };
+
+  const openCamera = () => {
+    setIsCameraOpen(true);
+  };
+
+  const closeCamera = () => {
+    setIsCameraOpen(false);
+  };
+
+  return (
+    <div>
+      {isCameraOpen ? (
+        <div>
+          <CameraReact onTakePhoto={handleTakePhoto} isFullscreen />
+          <button type="button" onClick={closeCamera}>
+            Fermer la caméra
+          </button>
+        </div>
+      ) : (
+        <div>
+          <button
+            className="camera-button"
+            type="button"
+            onClick={openCamera}
+            onKeyDown={openCamera}
+            style={{ cursor: "pointer" }}
+          >
+            <img src={CameraSVG} alt="Camera icon" className="Camera-Icon" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Camera;

frontend/src/components/Camera.scss

@@ -0,0 +1,17 @@
+@import "../styles/commons.scss";
+
+.camera-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+.Camera-Icon {
+  width: 20vw;
+  margin-bottom: 30vh;
+  background-color: $deep-purple;
+}