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 = () => {
-
+