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

{error.message}

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

{error.message}

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

Account

+

Forgot your password?

+ +

Change your password

+
); -} +}; + +export default AccountPage; diff --git a/client/src/pages/PasswordForget/index.jsx b/client/src/pages/PasswordForget/index.jsx index 745796c..97a2278 100644 --- a/client/src/pages/PasswordForget/index.jsx +++ b/client/src/pages/PasswordForget/index.jsx @@ -1,19 +1,14 @@ -import React, { useState } from "react"; +import React from "react"; import { Link } from "react-router-dom"; -import { Button, Form, FormGroup, Container } from "reactstrap"; -import { useFirebase } from "../../services/auth"; +import { Container } from "reactstrap"; import * as ROUTES from "../../constants/routes"; -import InputField from "../../components/InputField"; +import PasswordForgetForm from "../../components/PasswordForgetForm"; const useStyles = () => ({ root: { paddingTop: "1rem", paddingBottom: "1rem", }, - button: { - marginTop: "1rem", - marginBottom: "1rem", - }, }); const PasswordForgetPage = () => { @@ -27,50 +22,6 @@ const PasswordForgetPage = () => { ); }; -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?