Added reset password modal and confirm reset password page

src/Pages/ActivationPage/ActivationPage.tsx

@@ -27,6 +27,16 @@ export default function ActivationPage() {
             progress: undefined,
             theme: "light",
           });
+          toast("Please login to continue", {
+            position: "top-right",
+            autoClose: 6000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+          });
           setTimeout(() => {
             navigate("/dashboard");
           });

src/Pages/LandingPage/LandingPage.tsx

@@ -9,9 +9,11 @@ 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";
+import ResetPasswordModal from "../../Components/ResetPasswordModal/ResetPasswordModal";
 export default function LandingPage() {
-  const [LoginModalOpen, SetLoginModalOpen] = useState(false);
-  const [RegisterModalOpen, SetRegisterModalOpen] = useState(false);
+  const [loginmodalOpen, SetloginmodalOpen] = useState(false);
+  const [registermodalOpen, SetRegisterModalOpen] = useState(false);
+  const [resetmodalOpen, SetResetModalOpen] = useState(false);
   const authenticated = useSelector((state: RootState) => state.auth.value);
   const navigate = useNavigate();
 
@@ -68,8 +70,9 @@ export default function LandingPage() {
                 type={"light"}
                 label={"Login"}
                 onClick={() => {
-                  SetLoginModalOpen(true);
+                  SetloginmodalOpen(true);
                   SetRegisterModalOpen(false);
+                  SetResetModalOpen(false);
                 }}
               />
               <Button
@@ -77,12 +80,22 @@ export default function LandingPage() {
                 label={"Register"}
                 onClick={() => {
                   SetRegisterModalOpen(true);
-                  SetLoginModalOpen(false);
+                  SetloginmodalOpen(false);
+                  SetResetModalOpen(false);
+                }}
+              />
+              <Button
+                type={"light"}
+                label={"Forgot Password"}
+                onClick={() => {
+                  SetResetModalOpen(true);
+                  SetRegisterModalOpen(false);
+                  SetloginmodalOpen(false);
                 }}
               />
               <Popup
-                open={LoginModalOpen}
-                onClose={() => SetLoginModalOpen(false)}
+                open={loginmodalOpen}
+                onClose={() => SetloginmodalOpen(false)}
                 modal
                 position={"top center"}
                 contentStyle={{
@@ -100,7 +113,7 @@ export default function LandingPage() {
                 <LoginModal />
               </Popup>
               <Popup
-                open={RegisterModalOpen}
+                open={registermodalOpen}
                 onClose={() => SetRegisterModalOpen(false)}
                 modal
                 position={"top center"}
@@ -118,6 +131,25 @@ export default function LandingPage() {
               >
                 <RegisterModal />
               </Popup>
+              <Popup
+                open={resetmodalOpen}
+                onClose={() => SetResetModalOpen(false)}
+                modal
+                position={"top center"}
+                contentStyle={{
+                  width: "512px",
+                  borderRadius: 16,
+                  borderColor: "grey",
+                  borderStyle: "solid",
+                  borderWidth: 1,
+                  padding: 16,
+                  alignContent: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+              >
+                <ResetPasswordModal />
+              </Popup>
             </div>
           </div>
         </div>

src/Pages/ResetPasswordPage/ResetPasswordPage.tsx

@@ -0,0 +1,148 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styles, { colors } from "../../styles";
+import { ResetPasswordConfirmAPI } from "../../Components/API/API";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { VisibilityOff, Visibility } from "@mui/icons-material";
+import { TextField, InputAdornment, IconButton } from "@mui/material";
+import Button from "../../Components/Button/Button";
+export default function ResetPasswordPage() {
+  const { uid, token } = useParams();
+  const [feedback, setFeedback] = useState("");
+  const [user, setUser] = useState({
+    password: "",
+    confirm_password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  return (
+    <div style={styles.background}>
+      <div
+        style={{
+          ...styles.flex_column,
+          ...{
+            justifyContent: "center",
+            verticalAlign: "center",
+            height: "100%",
+          },
+        }}
+      >
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>
+          Confirm Password Reset
+        </p>
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={styles.input_form}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => {
+                    setShowPassword(!showPassword);
+                    setFeedback("");
+                  }}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="New Password"
+          placeholder={"Enter new password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, password: e.target.value })
+          }
+          value={user.password}
+        />
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={styles.input_form}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => {
+                    setShowPassword(!showPassword);
+                    setFeedback("");
+                  }}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="Confirm Password"
+          placeholder={"Re-enter password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, password: e.target.value })
+          }
+          value={user.password}
+        />
+        <div style={{ justifyContent: "center", display: "flex" }}>
+          <div
+            style={{
+              backgroundColor: colors.header_color,
+              marginTop: "16px",
+              width: "80%",
+              height: "4px",
+              marginBottom: 8,
+            }}
+          />{" "}
+        </div>
+
+        <p style={{ ...styles.text_dark, ...styles.text_M }}>{feedback}</p>
+        <Button
+          type={"dark"}
+          label={"Confirm"}
+          onClick={() => {
+            if (uid && token && feedback == "") {
+              ResetPasswordConfirmAPI({
+                uid,
+                token,
+                new_password: user.password,
+              }).then((response) => {
+                if (response) {
+                  setFeedback("Reset successful");
+                  toast("Reset successful", {
+                    position: "top-right",
+                    autoClose: 2000,
+                    hideProgressBar: false,
+                    closeOnClick: true,
+                    pauseOnHover: true,
+                    draggable: true,
+                    progress: undefined,
+                    theme: "light",
+                  });
+                  toast("Please login to continue", {
+                    position: "top-right",
+                    autoClose: 6000,
+                    hideProgressBar: false,
+                    closeOnClick: true,
+                    pauseOnHover: true,
+                    draggable: true,
+                    progress: undefined,
+                    theme: "light",
+                  });
+                  setTimeout(() => {
+                    navigate("/");
+                  });
+                } else {
+                  setFeedback("Invalid token specified for password reset");
+                }
+              });
+            }
+            if (!uid || !token) {
+              setFeedback("Missing token for password reset");
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}