diff --git a/client/src/pages/PasswordForget/index.jsx b/client/src/pages/PasswordForget/index.jsx index 700b24c..745796c 100644 --- a/client/src/pages/PasswordForget/index.jsx +++ b/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 ( - - - + +

Password Forget

+
); -} +}; + +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 ( +
+ + + + {error &&

{error.message}

} +
+
+ ); +}; + +export const PasswordForgetLink = () => ( +

+ Forgot Password? +

+); + +export default PasswordForgetPage; diff --git a/client/src/pages/SignIn/index.jsx b/client/src/pages/SignIn/index.jsx index 2b439b5..39e59ce 100644 --- a/client/src/pages/SignIn/index.jsx +++ b/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() {

Sign In

+
);