route-login-ok

src/App.css

@@ -15,6 +15,10 @@ span {
 a {
   text-decoration: none;
 }
+
+h1 {
+  color: white;
+}
 /* --------------------- */
 /* --------------------- */
 /* --------HEADER------- */

src/App.jsx

@@ -1,26 +1,43 @@
 import { useState, useEffect } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Cookies from "js-cookie";
 import "./App.css";
 import Header from "./components/Header";
 import Home from "./pages/Home";
 import Comics from "./pages/Comics";
 import Charaters from "./pages/Characters";
 import Character from "./pages/Character";
-import Login from "./pages/Login";
 import Signup from "./pages/Signup";
+import Login from "./pages/Login";
 
 function App() {
+  const [token, setToken] = useState(Cookies.get("token"));
+
+  useEffect(() => {
+    if (token) {
+      Cookies.set("token", token, { expires: 7 });
+    } else {
+      Cookies.remove("token");
+    }
+  }, [token]);
+
   return (
     <>
       <Router>
-        <Header />
+        <Header token={token} setToken={setToken} />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/comics" element={<Comics />} />
           <Route path="/characters" element={<Charaters />} />
           <Route path="/comics/:characterId" element={<Character />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/user/signup" element={<Signup />} />
+          <Route
+            path="/user/signup"
+            element={<Signup token={token} setToken={setToken} />}
+          />
+          <Route
+            path="/user/login"
+            element={<Login token={token} setToken={setToken} />}
+          />
         </Routes>
       </Router>
     </>

src/components/Header.jsx

@@ -2,21 +2,33 @@ import { Link } from "react-router-dom";
 import React, { Component } from "react";
 import Nav from "./Nav";
 
-const Header = () => {
+const Header = ({ token, setToken }) => {
   return (
     <>
       <header className="container">
         <div className="header-container">
           <Link to="/">
             <img src="/src/images/logo-marvel.png" alt="" />
           </Link>
-
-          <Link to="/user/signup">
-            <button> S'inscrire</button>
-          </Link>
-          <Link to="/login">
-            <button>Se connecter</button>
-          </Link>
+          {token ? (
+            <button
+              className="signOut"
+              onClick={() => {
+                setToken("");
+              }}
+            >
+              Se déconnecter
+            </button>
+          ) : (
+            <div>
+              <Link to="/user/signup">
+                <button> S'inscrire</button>
+              </Link>
+              <Link to="/user/login">
+                <button>Se connecter</button>
+              </Link>
+            </div>
+          )}
         </div>
         <Nav />
       </header>

src/pages/Login.jsx

@@ -1,12 +1,84 @@
 import axios from "axios";
-import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 // import { useState } from "react";
 
-const Login = () => {
+const Login = ({ token, setToken }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+
   return (
-    <div>
-      <span>Login</span>
+    <div className="form-container">
+      <div className="form">
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+
+            try {
+              const response = await axios.post(
+                `https://site--marvel-backend--r2txk865xjj8.code.run/user/login`,
+                {
+                  email: email,
+                  password: password,
+                }
+              );
+              console.log("log connexion", response.data);
+              console.log("data.token", response.data.token);
+              navigate("/characters");
+              setToken(response.data.token);
+            } catch (error) {
+              error.response;
+              console.log("=>", error.response);
+              if (
+                error.response.data.message ===
+                "Cannot read properties of null (reading 'salt')"
+              ) {
+                alert(
+                  "Vous avez saisi un mauvais mot de passe ou identifiant 🫤. Si vous n'avez pas de compte, merci de vous inscrire"
+                );
+              } else if (
+                error.response.data ===
+                "Le mot de passe ou l'identifiant n'est pas correct."
+              ) {
+                alert(
+                  "Vous avez saisi un mauvais mot de passe ou identifiant 🫤. Si vous n'avez pas de compte, merci de vous inscrire"
+                );
+              }
+            }
+          }}
+        >
+          <h1>Log in</h1>
+          <input
+            type="email"
+            placeholder="[email protected]"
+            value={email}
+            onChange={(event) => {
+              setEmail(event.target.value);
+            }}
+          />
+          <input
+            type="password"
+            placeholder="your password"
+            value={password}
+            onChange={(event) => {
+              setPassword(event.target.value);
+            }}
+          />
+          <button
+            className="form-validation"
+            type="submit"
+            value="Se connecter"
+          >
+            Log in
+          </button>
+          <Link to="/user/signup">
+            <span className="subscribe">
+              You dont have a account ? Come on, come to Sign up !
+            </span>
+          </Link>
+        </form>
+      </div>
     </div>
   );
 };

src/pages/Signup.jsx

@@ -1,9 +1,9 @@
 import axios from "axios";
-import React, { useState, useEffect } from "react";
-import { Link, Navigate } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 const Signup = () => {
+  const navigate = useNavigate();
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -44,10 +44,24 @@ const Signup = () => {
       console.log("Submit ==> ", data);
 
       const token = response.data.token;
+      navigate("/characters");
       setToken(token);
-      Navigate("/characters");
     } catch (error) {
       console.log(error.response);
+      alert("Vous devez remplir tout les champs 😉 !");
+
+      if (
+        error.response.data.message ===
+        "Email already exist ! Use your account 🚀"
+      ) {
+        setErrorMessage("Email already exist ! Use your account 🚀");
+        alert("Email already exist ! Use your account 🚀");
+      } else if (
+        error.response.data.message ===
+        "This username already exist ! Choose another username 🤟🏼 !"
+      ) {
+        alert("This username already exist ! Choose another username 🤟🏼 !");
+      }
     }
   };
 
@@ -81,14 +95,19 @@ const Signup = () => {
           />
         </form>
         <div></div>
+      </div>
+      <Link to="/characters">
         <button
           onClick={handleSubmit}
           className="form-validation"
           type="submit"
         >
           S'inscrire
         </button>
-      </div>
+      </Link>
+      <Link to="/user/login">
+        <p>Already registered ? use login</p>
+      </Link>
     </div>
   );
 };