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,51 +18,64 @@ 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);
-      alert("Erreur lors de l'inscription");
+      console.error("Error during registration:", error);
+      alert(`Erreur lors de l'inscription: ${error.message}`);
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <>
-      <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="Password"
-          size="md"
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <Input
-          placeholder="Confirm Password"
-          size="md"
-          type="password"
-          value={confirmPassword}
-          onChange={(e) => setConfirmPassword(e.target.value)}
-        />
-        <Button
-          isLoading={isLoading}
-          loadingText="Chargement"
-          variant="outline"
-          onClick={handleSubmit}
-        >
-          Soumettre
-        </Button>
-      </Stack>
-    </>
+    <Stack spacing={4} align="center" as="form" onSubmit={handleSubmit}>
+      <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"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <Input
+        placeholder="Confirm Password"
+        size="md"
+        type="password"
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+      />
+      <Button
+        isLoading={isLoading}
+        loadingText="Chargement"
+        variant="outline"
+        type="submit"
+      >
+        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 });
-      console.log("gg");
+      const response = await fetch("http://localhost:3000/api/login", {
+        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);
     }