cli
/
Chronobriq-react
Watch 8
Star 0
Fork 0
Code Issues 3 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Login : le token est récupéré et stocké dans un cookie

Lou 3 years ago
parent
fd5793a1ef
commit
48c6d7e234
9 changed files with 85 additions and 19 deletions
Split View Show Diff Stats
  1. 1
    1
      index.html
  2. 1
    0
      package.json
  3. 7
    4
      src/components/Navbar/index.jsx
  4. 8
    0
      src/components/buttons/LogoutButton/index.jsx
  5. 38
    2
      src/components/forms/LoginForm/index.jsx
  6. 0
    12
      src/pages/Login/index.jsx
  7. 23
    0
      src/services/request/Post.js
  8. 2
    0
      src/services/request/config.js
  9. 5
    0
      yarn.lock

+ 1
- 1
index.html View File 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="UTF-8" />
5 5 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 
-    <title>Vite App</title>
6 
+    <title>Registra</title>
7 7 
     <link rel="icon" href="./src/assets/img/star.ico">
8 8 
   </head>
9 9 
   <body>

+ 1
- 0
package.json View File 

@@ -7,6 +7,7 @@
7 7 
   },
8 8 
   "dependencies": {
9 9 
     "axios": "^0.21.1",
10 
+    "js-cookie": "^2.2.1",
10 11 
     "react": "^17.0.0",
11 12 
     "react-dom": "^17.0.0",
12 13 
     "react-router-dom": "^5.2.0"

+ 7
- 4
src/components/Navbar/index.jsx View File 

@@ -1,20 +1,23 @@
1 1 
 import React from "react";
2 2 
 import { Link } from "react-router-dom";
3 
+import Cookies from "js-cookie";
4 
+
3 5 
 import "./index.scss";
4 
-// import Star from "../../assets/img/star-svgrepo-com.svg";
6 
+import Star from "../../assets/img/star.ico";
7 
+import LogoutButton from "../buttons/LogoutButton";
5 8
6 9 
 const Navbar = () => {
7 10 
 	return (
8 11 
 		<div className="navbar">
9 12 
 			<div className="navbar__LeftSide">
10 13 
 				<Link to="/">
11 
-					{/* <img
14 
+					<img
12 15 
 						src={Star}
13 16 
 						className="navbar__Icon"
14 17 
 						alt="Temporary icon"
15 18 
 						width="25"
16 19 
 						height="25"
17 
-					/> */}
20 
+					/>
18 21 
 					<p className="navbar__BrandName">Registra</p>
19 22 
 				</Link>
20 23 
 			</div>
 
@@ -26,7 +29,7 @@ const Navbar = () => {
26 29 
 					<button>Se connecter</button>
27 30 
 				</Link>
28 31 
 				<button>Profil</button>
29 
-				<button>Déconnexion</button>
32 
+				<LogoutButton />
30 33 
 			</div>
31 34 
 		</div>
32 35 
 	);

+ 8
- 0
src/components/buttons/LogoutButton/index.jsx View File 

@@ -0,0 +1,8 @@
1 
+import React from "react";
2 
+import Cookies from "js-cookie";
3 
+
4 
+const LogoutButton = () => {
5 
+	return <button>Déconnexion</button>;
6 
+};
7 
+
8 
+export default LogoutButton;

+ 38
- 2
src/components/forms/LoginForm/index.jsx View File 

@@ -1,14 +1,50 @@
1 
-import React from "react";
1 
+import React, { useState, useEffect } from "react";
2 
+import Cookies from "js-cookie";
2 3 
 import "./index.scss";
3 4
5 
+import post from "../../../services/request/Post";
6 
+
4 7 
 const LoginForm = () => {
8 
+	const [userData, setUserData] = useState(null);
9 
+
10 
+	const handleSubmit = (event) => {
11 
+		event.preventDefault();
12 
+		const formdata = new FormData(event.currentTarget);
13 
+		setUserData({
14 
+			...userData,
15 
+			email: formdata.get("email"),
16 
+			password: formdata.get("password")
17 
+		});
18 
+	};
19 
+
20 
+	const handleLogin = async (data) => {
21 
+		if (data) {
22 
+			let body = {
23 
+				user: { email: data.email, password: data.password }
24 
+			};
25 
+			const response = await post("/tokens", body);
26 
+			if (response) {
27 
+				Cookies.set("token", response.data.token, { sameSite: "strict" });
28 
+				// Pass the token in a Context
29 
+				// ...
30 
+			}
31 
+		}
32 
+	};
33 
+
34 
+	useEffect(() => {
35 
+		handleLogin(userData);
36 
+	}, [userData]);
37 
+
5 38 
 	return (
6 39 
 		<div className="LoginForm">
7 
-			<form>
40 
+			<form action="" onSubmit={handleSubmit}>
8 41 
 				<label htmlFor="email">Adresse email</label>
9 42 
 				<input type="email" id="email" name="email" />
43 
+
10 44 
 				<label htmlFor="password">Mot de passe</label>
11 45 
 				<input type="password" id="password" name="password" />
46 
+
47 
+				<button type="submit">Valider</button>
12 48 
 			</form>
13 49 
 		</div>
14 50 
 	);

+ 0
- 12
src/pages/Login/index.jsx View File 

@@ -1,19 +1,7 @@
1 1 
 import React, { useEffect } from "react";
2 2 
 import LoginForm from "../../components/forms/LoginForm/";
3 3
4 
-import get from "../../services/request/Get";
5 
-
6 4 
 const LoginPage = () => {
7 
-	let jwt_token =
8 
-		"eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxMSwiZXhwIjoxNjI0NjM2NTg3fQ.G2UH5uH2xsei6Msp_za50pSVeOKaes1peE0ntslnI1o";
9 
-
10 
-	useEffect(() => {
11 
-		console.log("HELLO 2");
12 
-		let response = get("/users/1", jwt_token);
13 
-		console.log("HELLO 3");
14 
-		console.log(response);
15 
-	}, []);
16 
-
17 5 
 	return (
18 6 
 		<div className="LoginPage">
19 7 
 			<h2>Page de connexion</h2>

+ 23
- 0
src/services/request/Post.js View File 

@@ -0,0 +1,23 @@
1 
+import axios from 'axios';
2 
+import { BASE_URL } from "./config.js";
3 
+
4 
+const post = async (
5 
+  endpoint,
6 
+  body = null,
7 
+  jwt_token = null,
8 
+  header = { "Content-Type": "application/json" }) => {
9 
+
10 
+  let opt = header;
11 
+  if (jwt_token){
12 
+      opt["Authorization"] = jwt_token
13 
+  }
14 
+
15 
+  try {
16 
+    const response = await axios.post(BASE_URL + endpoint, body, { headers: opt })
17 
+    return response
18 
+  } catch (err) {
19 
+    console.error(`An error occurred while trying to fetch ` + endpoint + `. ` + err);
20 
+  }
21 
+}
22 
+
23 
+export default post;

+ 2
- 0
src/services/request/config.js View File 

@@ -1,4 +1,6 @@
1 1 
 const BASE_URL = "https://registra-api.herokuapp.com/api/v1"
2 
+// const BASE_URL = "http://127.0.0.1:4000/api/v1"
3 
+
2 4
3 5 
 const API_ENDPOINTS = {
4 6 
   "users": "/users",

+ 5
- 0
yarn.lock View File 

@@ -468,6 +468,11 @@ isarray@0.0.1:
468 468 
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
469 469 
   integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
470 470
471 
+js-cookie@^2.2.1:
472 
+  version "2.2.1"
473 
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
474 
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
475 
+
471 476 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
472 477 
   version "4.0.0"
473 478 
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

Write Preview
Loading…
Cancel
Save