From 31a18d042d85b3add681098a7c646997f2d20bca Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 6 Jun 2024 13:10:13 -0700 Subject: [PATCH 1/3] Implemented registering --- Client/package-lock.json | 9 +++++++++ Client/package.json | 1 + Client/src/Layouts/HomeLayout/index.jsx | 22 +++++++++++++++----- Client/src/Pages/Home/index.jsx | 1 + Client/src/Pages/Register/index.jsx | 27 ++++++++++++++++++++++++- Server/controllers/authController.js | 17 +++++++++++----- 6 files changed, 66 insertions(+), 11 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index ffe6bac57..c070bdc38 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -19,6 +19,7 @@ "@reduxjs/toolkit": "2.2.5", "axios": "1.7.2", "dayjs": "1.11.11", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "9.1.2", @@ -4058,6 +4059,14 @@ "node": ">=4.0" } }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "engines": { + "node": ">=18" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/Client/package.json b/Client/package.json index e91d29d16..7526301ad 100644 --- a/Client/package.json +++ b/Client/package.json @@ -21,6 +21,7 @@ "@reduxjs/toolkit": "2.2.5", "axios": "1.7.2", "dayjs": "1.11.11", + "jwt-decode": "^4.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "9.1.2", diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx index 7f0615907..e5c108373 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Layouts/HomeLayout/index.jsx @@ -1,17 +1,29 @@ -import NavBar from '../../Components/NavBar'; -import { Outlet } from 'react-router'; -import DashboardSidebar from '../../Components/DashboardSidebar'; -import './index.css'; +import NavBar from "../../Components/NavBar"; +import { Outlet } from "react-router"; +import DashboardSidebar from "../../Components/DashboardSidebar"; +import "./index.css"; + +// Demo, remove me +import { jwtDecode } from "jwt-decode"; +// Emd Demo const HomeLayout = () => { + const token = localStorage.getItem("token"); + const decodedToken = token && jwtDecode(token); return (
+ {/* Remove me later */} + {token &&

You are logged in

} + {token &&

First Name: {decodedToken.firstname}

} + {token &&

Last Name: {decodedToken.lastname}

} + {token &&

Email: {decodedToken.email}

} + {/* I am a demo */}
); -} +}; export default HomeLayout; diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx index fa932dad9..161650512 100644 --- a/Client/src/Pages/Home/index.jsx +++ b/Client/src/Pages/Home/index.jsx @@ -5,6 +5,7 @@ import DashboardMenu from "../../Components/DashboardMenu"; import Integrations from "../../Components/Integrations"; const Home = () => { + const token = localStorage.getItem("token"); return ( <>
Home
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx index f357f2b6b..5524f3111 100644 --- a/Client/src/Pages/Register/index.jsx +++ b/Client/src/Pages/Register/index.jsx @@ -1,4 +1,7 @@ import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import axios from "axios"; import "./index.css"; import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; import Logomark from "../../assets/Images/Logomark.png"; @@ -9,7 +12,11 @@ import Check from "../../Components/Check/Check"; import Button from "../../Components/Button"; import Google from "../../assets/Images/Google.png"; +const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL; + const Register = () => { + const navigate = useNavigate(); + const idMap = { "register-firstname-input": "firstname", "register-lastname-input": "lastname", @@ -32,6 +39,19 @@ const Register = () => { }); }; + const handleSubmit = async () => { + //TODO input validation + try { + const result = await axios.post(`${BASE_URL}/auth/register`, form); + const token = result.data.data; + localStorage.setItem("token", token); + navigate("/"); // Redirect to home page + } catch (error) { + // TODO error handlign + alert(`Something went wrong: ${error.response.data.msg}`); + } + }; + return (
@@ -88,7 +108,12 @@ const Register = () => {
-
-
-
- -
- -
-
-
-
-
-
+
+
); }; diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js new file mode 100644 index 000000000..170bbd612 --- /dev/null +++ b/Client/src/Validation/validation.js @@ -0,0 +1,27 @@ +import joi from "joi"; + +const registerValidation = joi.object({ + firstname: joi.string().required().messages({ + "string.empty": "First name is required", + }), + + lastname: joi.string().required().messages({ + "string.empty": "Last name is required", + }), + + email: joi + .string() + .email({ tlds: { allow: false } }) + .required() + .messages({ + "string.email": "Email must be a valid email", + "string.empty": "Email is required", + }), + + password: joi.string().min(8).required().messages({ + "string.min": "Password must be at least 8 characters", + "string.empty": "Password is required", + }), +}); + +export { registerValidation }; diff --git a/Server/validation/joi.js b/Server/validation/joi.js index 75cd48cd1..9eea3e9a6 100644 --- a/Server/validation/joi.js +++ b/Server/validation/joi.js @@ -8,6 +8,7 @@ const loginValidation = joi.object({ email: joi.string().email().required(), password: joi.string().min(8).required(), }); + const registerValidation = joi.object({ firstname: joi.string().required(), lastname: joi.string().required(),