Implemented registering

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",

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",

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 (
     <div className="home-layout">
       <DashboardSidebar />
       <div className="main-content">
         <NavBar />
+        {/* Remove me later */}
+        {token && <p>You are logged in</p>}
+        {token && <p>First Name: {decodedToken.firstname}</p>}
+        {token && <p>Last Name: {decodedToken.lastname}</p>}
+        {token && <p>Email: {decodedToken.email}</p>}
+        {/* I am a demo */}
       </div>
     </div>
   );
-}
+};
 
 export default HomeLayout;

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 (
     <>
       <div>Home</div>

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 (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
@@ -88,7 +108,12 @@ const Register = () => {
         </div>
         <div className="login-form-v2-spacing" />
         <div className="register-form-actions">
-          <Button level="primary" label="Get started" sx={{ width: "100%" }} />
+          <Button
+            onClick={handleSubmit}
+            level="primary"
+            label="Get started"
+            sx={{ width: "100%" }}
+          />
           <div className="login-form-v-spacing" />
           <Button
             disabled={true}

Server/controllers/authController.js

@@ -9,8 +9,10 @@ const logger = require("../utils/logger");
 require("dotenv").config();
 var jwt = require("jsonwebtoken");
 const SERVICE_NAME = "auth";
-const { sendEmail } = require('../utils/sendEmail')
-const { registerTemplate } = require('../utils/emailTemplates/registerTemplate')
+const { sendEmail } = require("../utils/sendEmail");
+const {
+  registerTemplate,
+} = require("../utils/emailTemplates/registerTemplate");
 
 /**
  * Creates and returns JWT token with an arbitrary payload
@@ -60,10 +62,15 @@ const registerController = async (req, res, next) => {
       userId: newUser._id,
     });
     const token = issueToken(newUser._doc);
-    
+
     // Sending email to user with pre defined template
-    const template = registerTemplate('https://www.bluewavelabs.ca');
-    await sendEmail([newUser.email], 'Welcome to Uptime Monitor', template, 'Registered.');
+    const template = registerTemplate("https://www.bluewavelabs.ca");
+    await sendEmail(
+      [newUser.email],
+      "Welcome to Uptime Monitor",
+      template,
+      "Registered."
+    );
 
     return res
       .status(200)