creates account page

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 (
+    <Form onSubmit={handleSubmit}>
+      <FormGroup>
+        <InputField
+          label="New Password"
+          id="password1"
+          set={setPassword1}
+          type="password"
+        />
+        <InputField
+          label="Confirm New Password"
+          id="password2"
+          set={setPassword2}
+          type="password"
+        />
+        <Button
+          color="dark"
+          style={styles.button}
+          disabled={isInvalid}
+          block
+          type="submit"
+        >
+          Reset my Password
+        </Button>
+        {error && <p>{error.message}</p>}
+      </FormGroup>
+    </Form>
+  );
+};
+
+export default PasswordChangeForm;

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 (
+    <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 default PasswordForgetForm;

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 (
-    <Container>
-      <ItemModal />
-      <List />
+    <Container style={styles.root}>
+      <h1>Account</h1>
+      <h2>Forgot your password?</h2>
+      <PasswordForgetForm />
+      <h2>Change your password</h2>
+      <PasswordChangeForm />
     </Container>
   );
-}
+};
+
+export default AccountPage;

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 (
-    <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>