ADD: register and login on the site filling the db

back-end/api/login.js

@@ -16,7 +16,9 @@ export default async function login(req, res) {
       { expiresIn: "1h" }
     );
     res.status(200).json(token);
+    console.log("sign up valid");
   } else {
     res.status(401).json({ message: "Invalid email or password" });
+    console.log("invalid credential");
   }
 }

back-end/api/register.js

@@ -3,7 +3,7 @@ import { PrismaClient } from "@prisma/client";
 const prisma = new PrismaClient();
 
 export default async function register(req, res) {
-  const { email, pswd, username } = req.body;
+  const { email, username, pswd } = req.body;
 
   try {
     const newUser = await prisma.user.create({

back-end/index.js

@@ -13,7 +13,9 @@ client.$connect();
 app.post("/api/register", register);
 app.post("/api/login", login);
 
-app.listen(3000);
+app.listen(3000, () => {
+  console.log(`Server is running on port 3000`);
+});
 client.$disconnect();
 
 /* function verify_token(req, res, next) {

front_end/src/files/Register.jsx

@@ -1,14 +1,16 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
-import axios from "axios";
 import { useState } from "react";
 
 export function Register() {
   const [isLoading, setIsLoading] = useState(false);
   const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
     if (password !== confirmPassword) {
       alert("Les mots de passe ne correspondent pas");
       return;
@@ -16,28 +18,42 @@ export function Register() {
 
     setIsLoading(true);
     try {
-      await axios.post("/api/register", { email, password });
+      const response = await fetch("http://localhost:3000/api/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, username, pswd: password }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(`Network response was not ok: ${errorData.message}`);
+      }
+
       alert("Inscription réussie");
     } catch (error) {
-      console.error(error);
+      console.error("Error during registration:", error);
-      alert("Erreur lors de l'inscription");
+      alert(`Erreur lors de l'inscription: ${error.message}`);
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <>
+    <Stack spacing={4} align="center" as="form" onSubmit={handleSubmit}>
-      <h1 style={{ color: "white", fontSize: "30px", textAlign: "center" }}>
-        Veuillez remplir ce formulaire d'Inscription
-      </h1>
-      <Stack spacing={4} align="center">
       <Input
         placeholder="Email"
         size="md"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
       />
+      <Input
+        placeholder="Username"
+        size="md"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
       <Input
         placeholder="Password"
         size="md"
@@ -56,11 +72,10 @@ export function Register() {
         isLoading={isLoading}
         loadingText="Chargement"
         variant="outline"
-          onClick={handleSubmit}
+        type="submit"
       >
-          Soumettre
+        Register
       </Button>
     </Stack>
-    </>
   );
 }

front_end/src/files/Sign_in.jsx

@@ -1,5 +1,4 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
-import axios from "axios";
 import { useState } from "react";
 
 export function SignIn() {
@@ -9,11 +8,26 @@ export function SignIn() {
 
   const handleSubmit = async () => {
     setIsLoading(true);
+    alert(email);
+    alert(password);
     try {
-      await axios.post("/api/register", { email, password });
+      const response = await fetch("http://localhost:3000/api/login", {
-      console.log("gg");
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, pswd: password }),
+      });
+
+      /* if (!response.ok) {
+        throw new Error("Network response was not ok");
+      } */
+
+      const data = await response.json();
+      alert("Login successful:", data);
     } catch (error) {
-      console.log("error");
+      console.error("Error during login:", error);
+      alert("Error during login: " + error.message);
     } finally {
       setIsLoading(false);
     }