E2604. Finish Password Resets

docker-compose.yml

@@ -7,4 +7,3 @@ services:
     ports:
       - "8080:80"
     restart: unless-stopped
-

src/App.tsx

@@ -13,6 +13,8 @@ import ViewScores from "./pages/Assignments/ViewScores";
 import ViewSubmissions from "./pages/Assignments/ViewSubmissions";
 import SubmittedContent from "./pages/Assignments/SubmittedContent";
 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 Courses from "./pages/Courses/Course";
 import CourseEditor from "./pages/Courses/CourseEditor";
@@ -63,6 +65,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 />} /> },
 
         {

src/constants/Api.ts

@@ -0,0 +1 @@
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:3002";

src/pages/Authentication/ForgotPassword.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Button, Col, Container } from "react-bootstrap";
+import { Form, Formik, FormikHelpers } from "formik";
+import FormInput from "../../components/Form/FormInput";
+import axios, { AxiosError } from "axios";
+import { alertActions } from "../../store/slices/alertSlice";
+import { useDispatch } from "react-redux";
+import { API_BASE_URL } from "../../constants/Api";
+import * as Yup from "yup";
+
+interface IForgotPasswordFormValues {
+  email: string;
+}
+
+const validationSchema = Yup.object({
+  email: Yup.string().trim().email("Invalid email address").required("Required"),
+});
+
+const ForgotPassword = () => {
+  const dispatch = useDispatch();
+
+  const onSubmit = async (
+    values: IForgotPasswordFormValues,
+    submitProps: FormikHelpers<IForgotPasswordFormValues>
+  ) => {
+    try {
+      await axios.post(`${API_BASE_URL}/password_resets`, { email: values.email });
+      dispatch(
+        alertActions.showAlert({
+          variant: "success",
+          message: "A link to reset your password has been sent to your e-mail address.",
+        })
+      );
+    } catch (error) {
+      let errorFallback = "An error occurred. Please try again.";
+      if (error instanceof AxiosError && error.response && error.response.data) {
+        const { error: errorMessage } = error.response.data;
+        errorFallback = errorMessage || errorFallback;
+      }
+      dispatch(
+        alertActions.showAlert({
+          variant: "danger",
+          message: errorFallback,
+        })
+      );
+    }
+    submitProps.setSubmitting(false);
+  };
+
+  return (
+    <Container className="d-flex justify-content-center mt-xxl-5">
+      <Col xs={12} md={6} lg={4}>
+        <h2 className="text-center">Forgotten Your Password?</h2>
+        <Formik
+          initialValues={{ email: "" }}
+          onSubmit={onSubmit}
+          validationSchema={validationSchema}
+          validateOnChange={false}
+        >
+          {(formik) => (
+            <Form>
+              <p>Enter the email associated with your account</p>
+              <FormInput
+                controlId="forgot-password-email"
+                label="Email Address"
+                name="email"
+                type="email"
+              />
+              <Button
+                style={{ width: "100%" }}
+                variant="primary"
+                type="submit"
+                disabled={!(formik.isValid && formik.dirty) || formik.isSubmitting}
+              >
+                Request Password Reset
+              </Button>
+            </Form>
+          )}
+        </Formik>
+      </Col>
+    </Container>
+  );
+};
+
+export default ForgotPassword;

src/pages/Authentication/ResetPassword.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from "react";
+import { Button, Col, Container } from "react-bootstrap";
+import { Form, Formik, FormikHelpers } from "formik";
+import FormInput from "../../components/Form/FormInput";
+import { useLocation, useNavigate } from "react-router-dom";
+import axios, { AxiosError } from "axios";
+import { alertActions } from "../../store/slices/alertSlice";
+import { useDispatch } from "react-redux";
+import { API_BASE_URL } from "../../constants/Api";
+import * as Yup from "yup";
+
+interface IResetPasswordFormValues {
+  password: string;
+  confirmPassword: string;
+}
+
+const validationSchema = Yup.object({
+  password: Yup.string()
+    .min(6, "Password must be at least 6 characters")
+    .required("Required"),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref("password")], "Passwords do not match")
+    .required("Required"),
+});
+
+const ResetPassword = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const queryParams = new URLSearchParams(location.search);
+  const token = queryParams.get("token");
+
+  // Ensure the token is present when the component mounts
+  useEffect(() => {
+    if (!token) {
+      dispatch(
+        alertActions.showAlert({
+          variant: "danger",
+          message: "Invalid or missing token.",
+        })
+      );
+      navigate("/login");
+    }
+  }, [token, dispatch, navigate]);
+
+  const onSubmit = async (
+    values: IResetPasswordFormValues,
+    submitProps: FormikHelpers<IResetPasswordFormValues>
+  ) => {
+    try {
+      // Send password reset request to the backend
+      await axios.put(`${API_BASE_URL}/password_resets/${token}`, {
+        user: { password: values.password },
+      });
+      dispatch(
+        alertActions.showAlert({
+          variant: "success",
+          message: "Password Successfully Updated",
+        })
+      );
+      navigate("/login");
+    } catch (error) {
+      let errorFallback = "An error occurred. Please try again.";
+      if (error instanceof AxiosError && error.response && error.response.data) {
+        const { error: errorMessage } = error.response.data;
+        errorFallback = errorMessage || errorFallback;
+      }
+      dispatch(
+        alertActions.showAlert({
+          variant: "danger",
+          message: errorFallback,
+        })
+      );
+    }
+    submitProps.setSubmitting(false);
+  };
+
+  return (
+    <Container className="d-flex justify-content-center mt-xxl-5">
+      <Col xs={12} md={6} lg={4}>
+        <h2 className="text-center">Reset Your Password</h2>
+        <Formik
+          initialValues={{ password: "", confirmPassword: "" }}
+          onSubmit={onSubmit}
+          validationSchema={validationSchema}
+          validateOnChange={false}
+        >
+          {(formik) => (
+            <Form>
+              <FormInput
+                controlId="reset-password"
+                label="Password"
+                name="password"
+                type="password"
+              />
+              <FormInput
+                controlId="reset-confirm-password"
+                label="Confirm Password"
+                name="confirmPassword"
+                type="password"
+              />
+              <Button
+                style={{ width: "100%", marginTop: "8px" }}
+                variant="primary"
+                type="submit"
+                disabled={!(formik.isValid && formik.dirty) || formik.isSubmitting}
+              >
+                Reset Password
+              </Button>
+            </Form>
+          )}
+        </Formik>
+      </Col>
+    </Container>
+  );
+};
+
+export default ResetPassword;

src/pages/Authentication/__tests__/ForgotPassword.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ForgotPassword from "../ForgotPassword";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import alertReducer from "store/slices/alertSlice";
+import { vi } from "vitest";
+import axios from "axios";
+import { AxiosError } from "axios";
+
+vi.mock('axios');
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+const makeMockStore = () => configureStore({
+  reducer: {
+    alert: alertReducer,
+  },
+});
+
+const validEmail = '[email protected]';
+const submitText = /request password reset/i;
+
+describe('Test Forgot Password Displays Correctly', () => {
+  it('Renders the component correctly', () => {
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(/forgotten your password\?/i);
+    expect(screen.getByText(/enter the email associated with your account/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: submitText})).toBeInTheDocument();
+  });
+
+  it('Renders email input field', () => {
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+    const emailInput = screen.getByRole('textbox', {name: /email address/i});
+    expect(emailInput).toBeInTheDocument();
+  });
+});
+
+describe('Test Forgot Password Form Validations', () => {
+  it('Does not submit form with empty email', async () => {
+    const user = userEvent.setup();
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+
+    let emailInput = screen.getByRole('textbox');
+    let submitButton = screen.getByRole('button', {name: submitText});
+
+    await user.click(emailInput);
+    await user.tab();
+    await user.click(submitButton);
+
+    expect(axios.post).not.toHaveBeenCalled();
+
+    expect(screen.getByText(/required/i)).toBeInTheDocument();
+  });
+
+  it('Does not submit form with invalid email', async () => {
+    const user = userEvent.setup();
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+
+    let emailInput = screen.getByRole('textbox');
+    let submitButton = screen.getByRole('button', {name: submitText});
+
+    await user.type(emailInput, 'bademail');
+    await user.tab();
+
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
+    });
+    expect(submitButton).toBeDisabled();
+    expect(axios.post).not.toHaveBeenCalled();
+  });
+});
+
+describe('Test Forgot Password Api Error', () => {
+  it('Handles API unavailable', async () => {
+    const user = userEvent.setup();
+    (axios.post as any).mockRejectedValue(
+      new AxiosError("Network Error", 'ERR_NETWORK')
+    );
+
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+
+    let emailInput = screen.getByRole('textbox');
+    let submitButton = screen.getByRole('button', {name: submitText});
+
+    await user.type(emailInput, validEmail);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      const state = store.getState();
+      expect(state.alert.message).toBe('An error occurred. Please try again.');
+      expect(state.alert.variant).toBe('danger');
+    });
+
+    expect(axios.post).toHaveBeenCalledWith(
+      expect.stringContaining('/password_resets'), {email: validEmail}
+    );
+  });
+});
+
+describe('Test Successful Password Reset Request', () => {
+  it('submit form successfully', async () => {
+    const user = userEvent.setup();
+    (axios.post as any).mockResolvedValue({
+      status: 200,
+      data: { message: 'If the email exists, a reset link has been sent.'},
+    });
+    const store = makeMockStore();
+    render(
+      <Provider store={store}>
+        <ForgotPassword />
+      </Provider>
+    );
+
+    let emailInput = screen.getByRole('textbox');
+    let submitButton = screen.getByRole('button', {name: submitText});
+
+    await user.type(emailInput, validEmail);
+    await user.click(submitButton);
+
+    expect(axios.post).toHaveBeenCalledWith(
+      expect.stringContaining('/password_resets'), {email: validEmail}
+    );
+
+    await waitFor(() => {
+      const state = store.getState();
+      expect(state.alert.variant).toBe('success');
+      expect(state.alert.message).toBe('A link to reset your password has been sent to your e-mail address.');
+    });
+  });
+});