Merge pull request #188 from agiledev-students-fall2023/charlotte

add password recovery page frontend

front-end/src/App.jsx

@@ -10,6 +10,7 @@ import FavoriteList from './pages/FavoriteList/FavoriteList';
 import AppLayout from './AppLayout';
 import AuthLayout from './pages/Authenticate/AuthLayout';
 import AccountWithLogin from './pages/Account/AccountWithLogin';
+import ResetPassword from './pages/Account/ResetPassword';
 
 import MapLayout from './pages/MainMap/MapLayout';
 const App = () => {
@@ -36,6 +37,7 @@ const App = () => {
             <Route path="/account" element={<AccountEdit />} />
             <Route path="/accountLog" element={<AccountWithLogin />} />
             <Route path="/*" element={<Error />} />
+            <Route path="/resetpassword" element={<ResetPassword />} />
 
           </Route>
 

front-end/src/pages/Account/ResetPassword.jsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react'; // Import React and useRef
+import {FormInputs} from '../../components/form/formInput';
+import FormBtn  from '../../components/form/formBtn';
+import AuthHeader from '../Authenticate/authHeader';
+import NavBar from "../../components/common/navBar";
+import LeftBtn from "../../components/common/leftBtn";
+
+const ResetPassword = ({ loginMessage, handleLogin, handleGuest }) => {
+  const formRef = useRef(null); // Assuming you have useRef imported from 'react'
+  const fields = ["newPassword", "confirmPassword"]; // Fields for the form
+
+  return (
+    <>
+    <div className="flex flex-col">
+      <NavBar relative="1">
+        <LeftBtn />
+      </NavBar>
+      <div className="flex flex-col w-[80%] max-w-[30rem] mx-auto justify-center items-center bg-gray-100 pt-4 mt-24">
+        <AuthHeader header="Reset Password" message={loginMessage}  />
+        <div className="w-full max-w-xs">
+          <form ref={formRef} onSubmit={handleLogin} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <FormInputs fields={fields} />
+            <div className='flex justify-center mt-4'>
+              <FormBtn type="submit" value="Reset Password" />
+            </div>
+          </form>
+        </div>
+      </div>
+      </div>
+    </>
+  );
+};
+
+export default ResetPassword;