added new route for forgot password page

frontend/src/App.tsx

@@ -29,6 +29,7 @@ import { AuthenticatedUser } from "./types/AuthTypes";
 import authAPIClient from "./APIClients/AuthAPIClient";
 import * as Routes from "./constants/Routes";
 import ManageUserPage from "./components/pages/ManageUserPage";
+import ForgotPasswordPage from "./components/auth/ForgotPasswordPage";
 
 const App = (): React.ReactElement => {
   const currentUser: AuthenticatedUser | null =
@@ -73,6 +74,7 @@ const App = (): React.ReactElement => {
               <Route exact path={Routes.LOGIN_PAGE} component={Login} />
               <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
               <Route exact path={Routes.HOOKS_PAGE} component={HooksDemo} />
+              <Route exact path={Routes.FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
               <PrivateRoute
                 exact
                 path={Routes.HOME_PAGE}

frontend/src/components/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+import authAPIClient from "../../APIClients/AuthAPIClient";
+// import { AuthenticatedUser } from "../../types/AuthTypes";
+// import AuthContext from "../../contexts/AuthContext";
+
+const ForgotPasswordPage = (): React.ReactElement => {
+  const [email, setEmail] = useState("");
+
+  const onResetPasswordClick = async () => {
+    await authAPIClient.resetPassword(email);
+  };
+
+  return (
+    <div>
+      <div>Header</div>
+      <div>Text</div>
+
+      <form>
+        <div>
+          <input
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            placeholder="[email protected]"
+          />
+        </div>
+        <div>
+          <button
+            className="btn btn-primary"
+            type="button"
+            onClick={onResetPasswordClick}
+          >
+            Send reset link to email
+          </button>
+        </div>
+      </form>
+      <div>
+        <div>remember your password</div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPasswordPage;

frontend/src/constants/Routes.ts

@@ -23,3 +23,5 @@ export const NOT_AUTHORIZED_PAGE = "/not-authorized";
 export const MY_ACCOUNT_PAGE = "/account";
 
 export const MANAGE_USERS_PAGE = "/manage-users";
+
+export const FORGOT_PASSWORD_PAGE = "/forgot-password";