enables log in with email or google

client/src/components/MainNavbar/index.jsx

@@ -27,7 +27,7 @@ export default function MainNavbar() {
           <Nav className="ml-auto" navbar>
             <NavItem>
               <NavLink>
-                <Link href={ROUTES.SIGN_IN}>Sign In</Link>
+                <Link to={ROUTES.SIGN_IN}>Sign In</Link>
               </NavLink>
             </NavItem>
             <NavItem>

client/src/pages/SignIn/index.jsx

@@ -1,13 +1,113 @@
-import React from "react";
+import React, { useState } from "react";
-import { Container } from "reactstrap";
+import { withRouter } from "react-router-dom";
-import ItemModal from "../../components/ItemModal";
+import { Button, Form, FormGroup, Container } from "reactstrap";
-import List from "../../components/List";
+import { useFirebase } from "../../services/auth";
+import { SignUpLink } from "../SignUp";
+import InputField from "../../components/InputField";
+import * as ROUTES from "../../constants/routes";
 
+const useStyles = () => ({
+  root: {
+    paddingTop: "1rem",
+    paddingBottom: "1rem",
+  },
+  inputField: {
+    paddingBottom: "1rem",
+  },
+  button: {
+    marginTop: "1rem",
+    marginBottom: "1rem",
+  },
+});
+
+/**
+ * page's layout
+ */
 export default function SignInPage() {
+  const styles = useStyles();
   return (
-    <Container>
+    <Container style={styles.root}>
-      <ItemModal />
+      <h1>Sign In</h1>
-      <List />
+      <SignInForm />
+      <SignUpLink />
     </Container>
   );
 }
+
+const SignInFormBase = (props) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+
+  const auth = useFirebase();
+
+  const cleanFields = () => {
+    setEmail("");
+    setPassword("");
+    setError(null);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    auth
+      .signinWithEmailAndPassword(email, password)
+      .then(() => {
+        cleanFields();
+        props.history.push(ROUTES.APP);
+      })
+      .catch((err) => setError(err));
+  };
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    auth
+      .signInWithGoogle()
+      .then(() => {
+        cleanFields();
+        props.history.push(ROUTES.APP);
+      })
+      .catch((err) => setError(err));
+  };
+
+  const isInvalid = email === "" || password === "";
+
+  const styles = useStyles();
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormGroup>
+        <InputField
+          label="Email Address"
+          id="email"
+          set={setEmail}
+          type="email"
+        />
+        <InputField
+          label="Password"
+          id="password"
+          set={setPassword}
+          type="password"
+        />
+        <Button
+          color="dark"
+          style={styles.button}
+          disabled={isInvalid}
+          block
+          type="submit"
+        >
+          Sign In
+        </Button>
+        <Button color="light" style={styles.button} block onClick={handleClick}>
+          Sign In with Google
+        </Button>
+        {error && <p>{error.message}</p>}
+      </FormGroup>
+    </Form>
+  );
+};
+
+/**
+ * Sign In form final component. withRouter allows redirections.
+ */
+export const SignInForm = withRouter(SignInFormBase);

client/src/pages/SignUp/index.jsx

@@ -1,17 +1,15 @@
 import React, { useState } from "react";
 import { Link, withRouter } from "react-router-dom";
-import { Button, Form, FormGroup, Label, Input, Container } from "reactstrap";
+import { Button, Form, FormGroup, Container } from "reactstrap";
 import * as ROUTES from "../../constants/routes";
 import { useFirebase } from "../../services/auth";
+import InputField from "../../components/InputField";
 
 const useStyles = () => ({
   root: {
     paddingTop: "1rem",
     paddingBottom: "1rem",
   },
-  inputField: {
-    paddingBottom: "1rem",
-  },
   button: {
     marginTop: "1rem",
     marginBottom: "1rem",
@@ -121,18 +119,6 @@ const SignUpFormBase = (props) => {
   );
 };
 
-const InputField = ({ id, label, set, type = "text" }) => {
-  const handleChange = (e) => set(e.target.value);
-
-  const styles = useStyles();
-  return (
-    <div style={styles.inputField}>
-      <Label for={id}>{label}</Label>
-      <Input type={type} id={id} onChange={handleChange} />
-    </div>
-  );
-};
-
 /**
  * Sign Up form final component. withRouter allows redirections.
  */