Added reset password modal and confirm reset password page

src/Components/API/API.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable react-refresh/only-export-components */
 import axios from "axios";
-import { ActivationType, LoginType, RegisterType } from "../Types/Types";
+import {
+  ActivationType,
+  LoginType,
+  RegisterType,
+  ResetPasswordConfirmType,
+} from "../Types/Types";
 
 const instance = axios.create({
   baseURL: "http://localhost:8000/",
@@ -130,3 +135,28 @@ export function ActivationAPI(activation: ActivationType) {
       return false;
     });
 }
+export function ResetPasswordAPI(email: string) {
+  return instance
+    .post("api/v1/accounts/users/reset_password/", { email: email })
+    .then(() => {
+      console.log("Activation Success");
+      return true;
+    })
+    .catch(() => {
+      console.log("Activation failed");
+      return false;
+    });
+}
+
+export function ResetPasswordConfirmAPI(info: ResetPasswordConfirmType) {
+  return instance
+    .post("api/v1/accounts/users/reset_password_confirm/", info)
+    .then(() => {
+      console.log("Reset Success");
+      return true;
+    })
+    .catch(() => {
+      console.log("Reset failed");
+      return false;
+    });
+}

src/Components/LoginModal/LoginModal.tsx

@@ -106,16 +106,6 @@ export default function LoginModal() {
             />
             <p style={{ ...styles.text_dark, ...styles.text_S }}>Remember me</p>
           </div>
-          <div style={{ flex: 1 }}>
-            <p
-              style={{
-                ...styles.text_dark,
-                ...styles.text_S,
-              }}
-            >
-              Forgot password?
-            </p>
-          </div>
         </div>
       </div>
       <div

src/Components/ResetPasswordModal/ResetPasswordModal.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import NewReleasesIcon from "@mui/icons-material/NewReleases";
+import Button from "../Button/Button";
+import { useNavigate } from "react-router-dom";
+import { ResetPasswordAPI } from "../API/API";
+import { useDispatch } from "react-redux";
+import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
+import { toast } from "react-toastify";
+export default function ResetPasswordModal() {
+  const navigate = useNavigate();
+  const [error, setError] = useState("");
+  const [email, setEmail] = useState("");
+  const dispatch = useDispatch();
+  return (
+    <>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
+        }}
+      >
+        <NewReleasesIcon
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>Forgot Password</p>
+      </div>
+      <p style={{ ...styles.text_dark, ...styles.text_S }}>
+        Enter your email to request a password reset
+      </p>
+      <div style={styles.flex_column}>
+        <TextField
+          id="outlined-helperText"
+          label="Email"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setEmail(e.target.value);
+            setError("");
+          }}
+          value={email}
+          placeholder={"Enter email associated with account"}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_S }}>{error}</p>
+        <div
+          style={{
+            backgroundColor: colors.button_border,
+            width: "100%",
+            height: "2px",
+            marginBottom: 8,
+          }}
+        />
+        <Button
+          type={"dark"}
+          label={"Send Reset Request"}
+          onClick={async () => {
+            const status = await ResetPasswordAPI(email);
+            if (status === true) {
+              await dispatch(auth_toggle());
+              navigate("/");
+              toast("Reset request sent", {
+                position: "top-right",
+                autoClose: 6000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              });
+              setError(
+                "Password reset request sent. Please follow your email for further instructions"
+              );
+            } else {
+              setError("Invalid email specified");
+            }
+          }}
+        />
+      </div>
+    </>
+  );
+}

src/Components/Types/Types.tsx

@@ -16,6 +16,12 @@ export type ActivationType = {
   token: string;
 };
 
+export type ResetPasswordConfirmType = {
+  uid: string;
+  token: string;
+  new_password: string;
+};
+
 export type AddEquipmentType = {
   name: string;
   remarks: string;