sets password forget page

client/src/pages/PasswordForget/index.jsx

@@ -1,13 +1,80 @@
-import React from "react";
-import { Container } from "reactstrap";
-import ItemModal from "../../components/ItemModal";
-import List from "../../components/List";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button, Form, FormGroup, Container } from "reactstrap";
+import { useFirebase } from "../../services/auth";
+import * as ROUTES from "../../constants/routes";
+import InputField from "../../components/InputField";
+
+const useStyles = () => ({
+  root: {
+    paddingTop: "1rem",
+    paddingBottom: "1rem",
+  },
+  button: {
+    marginTop: "1rem",
+    marginBottom: "1rem",
+  },
+});
+
+const PasswordForgetPage = () => {
+  const styles = useStyles();
 
-export default function PasswordForgetPage() {
   return (
-    <Container>
-      <ItemModal />
-      <List />
+    <Container style={styles.root}>
+      <h1>Password Forget</h1>
+      <PasswordForgetForm />
     </Container>
   );
-}
+};
+
+const PasswordForgetForm = () => {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState(null);
+
+  const auth = useFirebase();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    auth
+      .resetPassword(email)
+      .then(() => {
+        setEmail("");
+        setError(null);
+      })
+      .catch((err) => setError(err));
+  };
+
+  const isInvalid = email === "";
+  const styles = useStyles();
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormGroup>
+        <InputField
+          label="Email Address"
+          id="email"
+          set={setEmail}
+          type="email"
+        />
+        <Button
+          color="dark"
+          style={styles.button}
+          disabled={isInvalid}
+          block
+          type="submit"
+        >
+          Reset my Password
+        </Button>
+        {error && <p>{error.message}</p>}
+      </FormGroup>
+    </Form>
+  );
+};
+
+export const PasswordForgetLink = () => (
+  <p>
+    <Link to={ROUTES.PASSWORD_FORGET}>Forgot Password?</Link>
+  </p>
+);
+
+export default PasswordForgetPage;

client/src/pages/SignIn/index.jsx

@@ -5,15 +5,13 @@ import { useFirebase } from "../../services/auth";
 import { SignUpLink } from "../SignUp";
 import InputField from "../../components/InputField";
 import * as ROUTES from "../../constants/routes";
+import { PasswordForgetLink } from "../PasswordForget";
 
 const useStyles = () => ({
   root: {
     paddingTop: "1rem",
     paddingBottom: "1rem",
   },
-  inputField: {
-    paddingBottom: "1rem",
-  },
   button: {
     marginTop: "1rem",
     marginBottom: "1rem",
@@ -29,6 +27,7 @@ export default function SignInPage() {
     <Container style={styles.root}>
       <h1>Sign In</h1>
       <SignInForm />
+      <PasswordForgetLink />
       <SignUpLink />
     </Container>
   );