Polished margin of all pages and fixed logout not clearing token

src/App.tsx

@@ -10,6 +10,7 @@ import { Provider } from "react-redux";
 import Inventory from "./Routes/Inventory/Inventory";
 import Login from "./Routes/Login/Login";
 import Product from "./Routes/Product/Product";
+import Activation from "./Routes/Activation/Activation";
 
 const router = createBrowserRouter([
   {
@@ -65,6 +66,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Activation/:uid/:token",
+    element: (
+      <Container>
+        <Activation />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/Components/Container/Container.tsx

@@ -7,6 +7,7 @@ import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { LoginState } from "../../Interfaces/Interfaces";
+import { useNavigate } from "react-router-dom";
 
 export interface props {
   children: React.ReactNode;
@@ -14,6 +15,7 @@ export interface props {
 
 export default function Container(props: props) {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const logged_in = useSelector((state: LoginState) => state.logged_in.value);
   // Function to check for previous login session
   async function CheckPreviousSession() {
@@ -35,7 +37,15 @@ export default function Container(props: props) {
         <Sidebar />
       </div>
       <div style={styles.route_wrapper}>
-        {props.children}
+        <div
+          style={{
+            paddingTop: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+          }}
+        >
+          {props.children}
+        </div>
         <div style={{ padding: 64 }} />
       </div>
     </div>

src/Components/Login/Login.tsx

@@ -1,5 +1,4 @@
-import { useSelector, useDispatch } from "react-redux";
-import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
+import { useSelector } from "react-redux";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
@@ -12,12 +11,6 @@ export default function Login() {
     (state: LoggedInUserState) => state.logged_in_user.value
   );
   const navigate = useNavigate();
-  const dispatch = useDispatch();
-  async function login() {
-    await dispatch(toggle_login());
-    await console.log("Login State Toggled " + logged_in);
-  }
-
   if (logged_in) {
     return (
       <p style={{ ...styles.text_white, ...styles.text_M }}>

src/Components/Logout/Logout.tsx

@@ -20,6 +20,7 @@ export default function Logout(props: props) {
 
   async function logout() {
     await dispatch(toggle_login());
+    localStorage.removeItem("token");
     navigate("/");
   }
 

src/Routes/Activation/Activation.tsx

@@ -0,0 +1,58 @@
+import styles from "../../styles";
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { UserActivate } from "../../Components/Api/Api";
+import { ActivationParams } from "../../Interfaces/Interfaces";
+
+export default function Activation() {
+  let { uid, token } = useParams();
+  const [status, setStatus] = useState(0);
+  async function verify(activation: ActivationParams) {
+    let status = await UserActivate(activation);
+    if (status) {
+      setStatus(1);
+    } else {
+      setStatus(2);
+    }
+  }
+  useEffect(() => {
+    if (uid && token) {
+      verify({ uid, token });
+    }
+  }, [uid, token]);
+  if (status === 1) {
+    return (
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>
+          Activation Token: {token}
+        </p>
+        <p style={{ ...styles.text_green, ...styles.text_S }}>
+          Activation Successful. Please login
+        </p>
+      </div>
+    );
+  }
+  if (status === 2) {
+    return (
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>
+          Activation Token: {token}
+        </p>
+        <p style={{ ...styles.text_red, ...styles.text_S }}>
+          Invalid Activation Link
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>User ID: {uid}</p>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>
+        Activation Token: {token}
+      </p>
+      <p style={{ ...styles.text_white, ...styles.text_S }}>Activating...</p>
+    </div>
+  );
+}

src/Routes/Dashboard/Dashboard.tsx

@@ -11,7 +11,7 @@ import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/Recently
 
 export default function Dashboard() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div style={styles.flex_row}>
         <HomeIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>

src/Routes/Login/Login.tsx

@@ -19,7 +19,7 @@ export default function Login() {
   });
   const [error, setError] = useState("");
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div
         style={{
           display: "flex",

src/Routes/Logs/Logs.tsx

@@ -13,7 +13,7 @@ import { SampleLogData } from "../../Components/SampleData/SampleData";
 
 export default function Logs() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div style={styles.flex_row}>
         <LogsIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>

src/Routes/Product/Product.tsx

@@ -6,7 +6,7 @@ import { useParams } from "react-router-dom";
 export default function Product() {
   let { id } = useParams();
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
         Individual Product View for id {id}
       </h1>

src/Routes/Products/Products.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
@@ -10,7 +10,7 @@ import ViewManager from "../../Components/ProductsPage/ViewManager";
 export default function Products() {
   const navigate = useNavigate();
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div>
       <div style={styles.content_row}>
         <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
           <div style={{ display: "flex", alignItems: "center", gap: 16 }}>

src/routes/Inventory/Inventory.tsx

@@ -14,7 +14,7 @@ import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRen
 
 export default function Inventory() {
   return (
-    <div style={{ margin: 32, height: "100%" }}>
+    <div style={{ height: "100%" }}>
       <div style={styles.content_row}>
         <InventoryIcon size={64} color="white" />
         <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>