In progress changes for auth.

client/src/components/header-app-bar/header-app-bar.component.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Menu, Icon } from 'antd';
+import { Menu, Icon } from "antd";
 
 const { SubMenu } = Menu;
 class HeaderAppBar extends Component {

client/src/components/header-app-bar/header-app-bar.styles.jsx

@@ -1,62 +0,0 @@
-import { fade, makeStyles } from "@material-ui/core/styles";
-export default makeStyles(theme => ({
-  grow: {
-    flexGrow: 1
-  },
-  menuButton: {
-    marginRight: theme.spacing(2)
-  },
-  title: {
-    display: "none",
-    [theme.breakpoints.up("sm")]: {
-      display: "block"
-    }
-  },
-  search: {
-    position: "relative",
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    "&:hover": {
-      backgroundColor: fade(theme.palette.common.white, 0.25)
-    },
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: "100%",
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(3),
-      width: "auto"
-    }
-  },
-  searchIcon: {
-    width: theme.spacing(7),
-    height: "100%",
-    position: "absolute",
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  inputRoot: {
-    color: "inherit"
-  },
-  inputInput: {
-    padding: theme.spacing(1, 1, 1, 7),
-    transition: theme.transitions.create("width"),
-    width: "100%",
-    [theme.breakpoints.up("md")]: {
-      width: 200
-    }
-  },
-  sectionDesktop: {
-    display: "none",
-    [theme.breakpoints.up("md")]: {
-      display: "flex"
-    }
-  },
-  sectionMobile: {
-    display: "flex",
-    [theme.breakpoints.up("md")]: {
-      display: "none"
-    }
-  }
-}));

client/src/components/sign-in/sign-in.component.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import FormInput from "../form-input/form-input.component";
+import CustomButton from "../custom-button/custom-button.component";
+
+import { auth, signInWithGoogle } from "../../firebase/firebase.utils";
+
+//Styling imports
+import { Typography } from "antd";
+import { Input } from "antd";
+import { Button } from "antd";
+
+class SignIn extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: "",
+      password: ""
+    };
+  }
+
+  handleSubmit = async event => {
+    event.preventDefault();
+
+    const { email, password } = this.state;
+
+    try {
+      await auth.signInWithEmailAndPassword(email, password);
+      this.setState({ email: "", password: "" });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  handleChange = event => {
+    const { value, name } = event.target;
+
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div className="sign-in">
+        <Typography.Title>Sign In</Typography.Title>
+        <form onSubmit={this.handleSubmit}>
+          <Input
+            placeholder="Email"
+            name="Email"
+            type="email"
+            handleChange={this.handleChange}
+            value={this.state.email}
+            label="email"
+            required
+          />
+          <Input.Password
+            name="password"
+            type="password"
+            value={this.state.password}
+            handleChange={this.handleChange}
+            label="password"
+            required
+          />
+          <div className="buttons">
+            <Button type="submit"> Sign in </Button>
+            <Button onClick={signInWithGoogle}>
+              Sign in with Google
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default SignIn;