diff --git a/client/src/components/PasswordChangeForm/index.jsx b/client/src/components/PasswordChangeForm/index.jsx new file mode 100644 index 0000000..3dadb8b --- /dev/null +++ b/client/src/components/PasswordChangeForm/index.jsx @@ -0,0 +1,69 @@ +import React, { useState } from "react"; +import { Button, Form, FormGroup } from "reactstrap"; +import { useFirebase } from "../../services/auth"; +import InputField from "../InputField"; + +const useStyles = () => ({ + root: { + paddingTop: "1rem", + paddingBottom: "1rem", + }, + button: { + marginTop: "1rem", + marginBottom: "1rem", + }, +}); + +const PasswordChangeForm = () => { + const [password1, setPassword1] = useState(""); + const [password2, setPassword2] = useState(""); + const [error, setError] = useState(null); + + const auth = useFirebase(); + + const handleSubmit = (e) => { + e.preventDefault(); + auth + .updatePassword(password1) + .then(() => { + setPassword1(""); + setPassword2(""); + }) + .catch((err) => setError(err)); + }; + + const isInvalid = password1 === password2 || password1 === ""; + + const styles = useStyles(); + + return ( +
+ ); +}; + +export default PasswordChangeForm; diff --git a/client/src/components/PasswordForgetForm/index.jsx b/client/src/components/PasswordForgetForm/index.jsx new file mode 100644 index 0000000..ddf0d73 --- /dev/null +++ b/client/src/components/PasswordForgetForm/index.jsx @@ -0,0 +1,57 @@ +import React, { useState } from "react"; +import { Button, Form, FormGroup } from "reactstrap"; +import { useFirebase } from "../../services/auth"; +import InputField from "../../components/InputField"; + +const useStyles = () => ({ + button: { + marginTop: "1rem", + marginBottom: "1rem", + }, +}); + +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 ( + + ); +}; + +export default PasswordForgetForm; diff --git a/client/src/pages/Account/index.jsx b/client/src/pages/Account/index.jsx index d1c0d50..0677297 100644 --- a/client/src/pages/Account/index.jsx +++ b/client/src/pages/Account/index.jsx @@ -1,13 +1,25 @@ import React from "react"; import { Container } from "reactstrap"; -import ItemModal from "../../components/ItemModal"; -import List from "../../components/List"; +import PasswordChangeForm from "../../components/PasswordChangeForm"; +import PasswordForgetForm from "../../components/PasswordForgetForm"; -export default function AccountPage() { +const styles = { + root: { + paddingTop: "1rem", + paddingBottom: "1rem", + }, +}; + +const AccountPage = () => { return ( -Forgot Password?