E2518. Reimplement password resets (frontend)

src/App.tsx

@@ -3,6 +3,8 @@ import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom"
 import AdministratorLayout from "./layout/Administrator";
 import ManageUserTypes, { loader as loadUsers } from "./pages/Administrator/ManageUserTypes";
 import Login from "./pages/Authentication/Login";
+import ForgotPassword from "./pages/Authentication/ForgotPassword";
+import ResetPassword from "./pages/Authentication/ResetPassword";
 import Logout from "./pages/Authentication/Logout";
 import InstitutionEditor, { loadInstitution } from "./pages/Institutions/InstitutionEditor";
 import Institutions, { loadInstitutions } from "./pages/Institutions/Institutions";
@@ -49,6 +51,8 @@ function App() {
       children: [
         { index: true, element: <ProtectedRoute element={<Home />} /> },
         { path: "login", element: <Login /> },
+        { path: "forgot-password", element: <ForgotPassword /> },
+        { path: "password_edit/check_reset_url", element: <ResetPassword /> },
         { path: "logout", element: <ProtectedRoute element={<Logout />} /> },
         // Add the ViewTeamGrades route
         {

src/pages/Authentication/ForgotPassword.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from "react";
+import axios, { AxiosError } from 'axios';
+import { alertActions } from "../../store/slices/alertSlice";
+import { useDispatch } from "react-redux";
+
+const ForgotPassword = () =>{
+
+  const [email, setEmail] = useState('');
+  const dispatch = useDispatch();
+
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+
+    try {
+      await axios.post("http://localhost:3002/api/v1/password_resets", { email });
+
+      dispatch(
+        alertActions.showAlert({
+          variant: "success",
+          message: `A link to reset your password has been sent to your e-mail address.`,
+        })
+      );
+    } catch (error) {
+      if (error instanceof AxiosError && error.response && error.response.data) {
+        const { error: errorMessage} = error.response.data;
+        if (errorMessage) {
+          dispatch(
+            alertActions.showAlert({
+              variant: "danger",
+              message: errorMessage,
+            })
+          );
+        }
+      }
+    }
+  };
+
+
+  return (
+    <div style={{padding: "20px"}}>
+      <div>
+        <h2>Forgotten Your Password?</h2>
+      </div>
+      <div>
+        Enter the e-mail address associated with your account
+      </div>
+      <input
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        style={{marginTop: '5px', marginBottom: '5px', height: '20px', border: '1px solid black'}}
+      />
+      <br />
+      <button type="submit" onClick={handleSubmit} style={{marginTop: '5px', marginBottom: '5px', border: '1px solid black'}}>Request Password</button>
+    </div>
+  );
+
+};
+
+export default ForgotPassword;

src/pages/Authentication/ResetPassword.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import axios, { AxiosError } from "axios";
+import { alertActions } from "../../store/slices/alertSlice";
+import { useDispatch } from "react-redux";
+
+const ResetPassword = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const queryParams = new URLSearchParams(location.search);
+  const token = queryParams.get("token");
+
+  // Handle form submission
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+
+
+    if (password.length < 6) {
+      dispatch(
+        alertActions.showAlert({
+          variant: "danger",
+          message: "Password should be at least 6 letters long."
+        })
+      );
+      return;
+    }
+    else if (password !== confirmPassword) {
+      dispatch(
+        alertActions.showAlert({
+          variant: "danger",
+          message: "Passwords do not match."
+        })
+      );
+      return;
+    }
+    else {
+      try {
+        // Send password reset request to the backend
+        await axios.put(`http://localhost:3002/api/v1/password_resets/${token}`, {
+          user: { password },
+        });
+
+        navigate("/login")
+
+        dispatch(
+          alertActions.showAlert({
+            variant: "success",
+            message: `Password Successfully Updated`,
+          })
+        );
+
+      } catch (error) {
+        if (error instanceof AxiosError && error.response && error.response.data) {
+          const { error: errorMessage} = error.response.data;
+          if (errorMessage) {
+            dispatch(
+              alertActions.showAlert({
+                variant: "danger",
+                message: errorMessage,
+              })
+            );
+          }
+        }
+      }
+    }
+  };
+
+  return (
+    <div style={{padding: "20px"}}>
+      <div>
+        <h2>Reset Your Password</h2>
+      </div>
+      Password:
+      <br />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+        style={{marginTop: '5px', marginBottom: '5px', height: '20px', border: '1px solid black'}}
+      />
+      <br />
+      Confirm Password:
+      <br />
+      <input
+        type="password"
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+        required
+        style={{marginTop: '5px', marginBottom: '5px', height: '20px', border: '1px solid black'}}
+      />
+      <br />
+      <button type="submit" onClick={handleSubmit} style={{marginTop: '5px', marginBottom: '5px', border: '1px solid black'}}>Reset Password</button>
+    </div>
+  );
+};
+
+export default ResetPassword;