Added login functionality

src/Components/API/API.tsx

@@ -0,0 +1,67 @@
+import axios from "axios";
+import { ActivationType, LoginType, RegisterType } from "../Types/Types";
+
+// Product APIs
+const instance = axios.create({
+  baseURL: "http://localhost:8000/",
+});
+
+// User APIs
+
+export function RegisterAPI(register: RegisterType) {
+  return instance
+    .post("api/v1/accounts/users/", register)
+    .then(async (response) => {
+      console.log(response.data);
+      return true;
+    })
+    .catch(() => {
+      console.log("Registration failed");
+      return false;
+    });
+}
+
+export function LoginAPI(user: LoginType) {
+  return instance
+    .post("api/v1/accounts/jwt/create/", user)
+    .then(async (response) => {
+      localStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      console.log("Login Success ");
+      return true;
+    })
+    .catch(() => {
+      console.log("Login Failed");
+      return false;
+    });
+}
+
+export function UserAPI() {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return instance
+    .get("api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      console.log(response.data);
+      return response.data;
+    })
+    .catch(() => {
+      console.log("Error retrieving user data");
+      return false;
+    });
+}
+
+export function ActivationAPI(activation: ActivationType) {
+  return instance
+    .post("api/v1/accounts/users/activation/", activation)
+    .then(async () => {
+      console.log("Activation Success");
+      return true;
+    })
+    .catch(() => {
+      console.log("Activation failed");
+      return false;
+    });
+}

src/Components/Header/Header.tsx

@@ -1,15 +1,28 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles, { colors } from "../../styles";
 import MenuIcon from "@mui/icons-material/Menu";
 import SidebarModal from "../SidebarModal/SidebarModal";
 import { Drawer } from "@mui/material";
+import { useSelector } from "react-redux";
+import { RootState } from "../Plugins/Redux/Store/Store";
+import { useNavigate } from "react-router-dom";
 
 export interface props {
-  label: React.ReactNode;
+  label: string;
 }
 
 export default function Header(props: props) {
   const [SidebarOpen, SetSidebarOpen] = useState(false);
+  const authenticated = useSelector((state: RootState) => state.auth.value);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authenticated) {
+      navigate("/");
+      console.log("Not logged in. Redirecting to landing page");
+    }
+  }, [authenticated, navigate]);
+
   return (
     <div
       style={{

src/Components/LoginModal/LoginModal.tsx

@@ -10,14 +10,19 @@ import LoginIcon from "@mui/icons-material/Login";
 import Checkbox from "@mui/material/Checkbox";
 import Button from "../Buttons/Button";
 import { useNavigate } from "react-router-dom";
+import { LoginAPI } from "../API/API";
+import { useDispatch } from "react-redux";
+import { Toggle_Login } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
 export default function LoginModal() {
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
   const [remember, setRemember] = useState(true);
+  const [error, setError] = useState("");
   const [user, setUser] = useState({
     username: "",
     password: "",
   });
+  const dispatch = useDispatch();
   return (
     <>
       <div
@@ -41,9 +46,10 @@ export default function LoginModal() {
           id="outlined-helperText"
           label="Username"
           style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setUser({ ...user, username: e.target.value })
-          }
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setUser({ ...user, username: e.target.value });
+            setError("");
+          }}
           value={user.username}
           placeholder={"Enter username"}
         />
@@ -56,7 +62,10 @@ export default function LoginModal() {
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
-                  onClick={() => setShowPassword(!showPassword)}
+                  onClick={() => {
+                    setShowPassword(!showPassword);
+                    setError("");
+                  }}
                   edge="end"
                 >
                   {showPassword ? <VisibilityOff /> : <Visibility />}
@@ -112,11 +121,18 @@ export default function LoginModal() {
           marginBottom: 8,
         }}
       />
+      <p style={{ ...styles.text_dark, ...styles.text_S }}>{error}</p>
       <Button
         type={"dark"}
         label={"Login"}
-        onClick={() => {
-          navigate("/dashboard");
+        onClick={async () => {
+          const status = await LoginAPI(user);
+          if (status === true) {
+            await dispatch(Toggle_Login());
+            navigate("/dashboard");
+          } else {
+            setError("Invalid login");
+          }
         }}
       />
     </>

src/Components/Plugins/Redux/Slices/AuthSlice/AuthSlice.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createSlice } from "@reduxjs/toolkit";
+
+export const AuthSlice = createSlice({
+  name: "Auth",
+  initialState: {
+    value: false,
+  },
+  reducers: {
+    Toggle_Login: (state) => {
+      state.value = !state.value;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { Toggle_Login } = AuthSlice.actions;
+
+export default AuthSlice.reducer;

src/Components/Plugins/Redux/Store/Store.tsx

@@ -1,7 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
+import AuthReducer from "../Slices/AuthSlice/AuthSlice";
 
 const store = configureStore({
-  reducer: {},
+  reducer: {
+    auth: AuthReducer,
+  },
 });
 
 export default store;

src/Components/Types/Types.tsx

@@ -0,0 +1,20 @@
+export type RegisterType = {
+  email: string;
+  username: string;
+  password: string;
+};
+
+export type LoginType = {
+  username: string;
+  password: string;
+};
+
+export type ActivationType = {
+  uid: string;
+  token: string;
+};
+
+export type AddEquipmentType = {
+  name: string;
+  remarks: string;
+};

src/Pages/LandingPage/LandingPage.tsx

@@ -3,12 +3,24 @@ import styles from "../../styles";
 import citc_logo from "../../assets/citc_logo.jpg";
 import Popup from "reactjs-popup";
 import "reactjs-popup/dist/index.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import LoginModal from "../../Components/LoginModal/LoginModal";
 import RegisterModal from "../../Components/RegisterModal/RegisterModal";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { RootState } from "../../Components/Plugins/Redux/Store/Store";
 export default function LandingPage() {
   const [LoginModalOpen, SetLoginModalOpen] = useState(false);
   const [RegisterModalOpen, SetRegisterModalOpen] = useState(false);
+  const authenticated = useSelector((state: RootState) => state.auth.value);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (authenticated) {
+      navigate("/dashboard");
+      console.log("Already logged in. Redirecting to dashboard page");
+    }
+  }, [authenticated, navigate]);
   return (
     <div style={styles.background}>
       <div