login & sign up working

src/App.js

@@ -58,11 +58,15 @@ class App extends Component {
           />
           <Route
             path="/registration"
-            render={() => (
-              <MainLayout currentUser={currentUser}>
-                <Registration />
-              </MainLayout>
-            )}
+            render={() =>
+              currentUser ? (
+                <Redirect to="/" />
+              ) : (
+                <MainLayout currentUser={currentUser}>
+                  <Registration />
+                </MainLayout>
+              )
+            }
           />
           <Route
             path="/login"

src/components/SignIn/index.js

@@ -1,20 +1,69 @@
 import React, { Component } from "react";
 import "./styles.scss";
+import { signInWitGoogle, auth } from "./../../firebase/utils";
+
+import FormInput from "./../forms/FormInput";
 import Button from "./../forms/Button";
-import { signInWitGoogle } from "./../../firebase/utils";
+
+const initialState = {
+  email: "",
+  password: "",
+};
 
 class SignIn extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  }
+
   handleSubmit = async (e) => {
     e.preventDefault();
+    const { email, password } = this.state;
+    try {
+      await auth.signInWithEmailAndPassword(email, password);
+      this.setState({
+        ...initialState,
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   render() {
+    const { email, password } = this.state;
     return (
       <div className="signin">
         <div className="wrap">
           <h2>LogIn</h2>
           <div className="formWrap">
             <form onSubmit={this.handleSubmit}>
+              <FormInput
+                type="email"
+                name="email"
+                value={email}
+                placeholder="Email"
+                handleChange={this.handleChange}
+              />
+              <FormInput
+                type="password"
+                name="password"
+                value={password}
+                placeholder="Password"
+                handleChange={this.handleChange}
+              />
+
+              <Button type="submit">LogIn</Button>
+
               <div className="socialSignin">
                 <div className="row">
                   <Button onClick={signInWitGoogle}>Sign in with Google</Button>

src/components/SignIn/styles.scss

@@ -1,4 +1,4 @@
-.signing {
+.signin {
   display: block;
   width: 100%;
   max-width: 40rem;
@@ -17,11 +17,11 @@
       display: block;
       padding: 0;
       width: 100%;
-      margin: 0 auto;
+      margin: 0 auto 3rem;
     }
 
     .socialSignin {
-      margin: 3rem auto 0;
+      margin: 0.5rem auto 0;
     }
   }
 }

src/components/Signup/index.js

@@ -0,0 +1,115 @@
+import React, { Component } from "react";
+import FormInput from "./../forms/FormInput";
+import Button from "./../forms/Button";
+import "./styles.scss";
+import { auth, handleUserProfile } from "./../../firebase/utils";
+
+const initialState = {
+  displayName: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+  errors: [],
+};
+
+class Signup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  handleFormSubmit = async (e) => {
+    e.preventDefault();
+    const { displayName, email, password, confirmPassword } = this.state;
+
+    if (password !== confirmPassword) {
+      const err = ["Password Don't match"];
+      this.setState({
+        errors: err,
+      });
+      return;
+    }
+
+    try {
+      const { user } = await auth.createUserWithEmailAndPassword(
+        email,
+        password
+      );
+      await handleUserProfile(user, { displayName });
+      this.setState({
+        ...initialState,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  render() {
+    const {
+      displayName,
+      email,
+      password,
+      confirmPassword,
+      errors,
+    } = this.state;
+    return (
+      <div className="signup">
+        <div className="wrap">
+          <h2>Signup</h2>
+          {errors.length > 0 && (
+            <ul>
+              {errors.map((err, index) => {
+                return <li key={index}>{err}</li>;
+              })}
+            </ul>
+          )}
+          <div className="formWrap">
+            <form onSubmit={this.handleFormSubmit}>
+              <FormInput
+                type="text"
+                name="displayName"
+                value={displayName}
+                placeholder="Full name"
+                onChange={this.handleChange}
+              />
+              <FormInput
+                type="email"
+                name="email"
+                value={email}
+                placeholder="Email"
+                onChange={this.handleChange}
+              />
+              <FormInput
+                type="password"
+                name="password"
+                value={password}
+                placeholder="Password"
+                onChange={this.handleChange}
+              />
+              <FormInput
+                type="password"
+                name="confirmPassword"
+                value={confirmPassword}
+                placeholder="re-enter password"
+                onChange={this.handleChange}
+              />
+              <Button type="submit">Register</Button>
+            </form>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Signup;

src/components/Signup/styles.scss

@@ -0,0 +1,27 @@
+.signup {
+  display: block;
+  width: 100%;
+  max-width: 40rem;
+  margin: 4rem auto 6rem;
+  border: 1px solid black;
+
+  .wrap {
+    padding: 10px;
+
+    h2 {
+      font-size: 2.2rem;
+      line-height: 1;
+      font-weight: 400;
+      text-transform: uppercase;
+      text-align: center;
+      display: block;
+      padding: 0;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    .formWrap {
+      margin: 3rem auto 0;
+    }
+  }
+}

src/components/forms/FormInput/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./styles.scss";
+
+const FormInput = ({ handleChange, label, ...otherProps }) => {
+  return (
+    <div className="formRow">
+      {label && <label>{label}</label>}
+      <input
+        className="formInput"
+        onChange={handleChange}
+        {...otherProps}
+      ></input>
+    </div>
+  );
+};
+
+export default FormInput;

src/components/forms/FormInput/styles.scss

@@ -0,0 +1,14 @@
+.formRow {
+  input {
+    display: block;
+    width: 100%;
+    font-size: 1.5rem;
+    line-height: 1;
+    font-weight: 400;
+    text-align: left;
+    padding: 10px 5px;
+    margin: 10px auto;
+    border: 1px solid #9e9e9e;
+    outline: none;
+  }
+}

src/pages/Registration/index.js

@@ -1,12 +1,9 @@
 import React from "react";
+import Signup from "./../../components/Signup";
 import "./styles.scss";
 
 const Registration = () => {
-  return (
-    <div>
-      <h1> Registration</h1>
-    </div>
-  );
+  return <Signup />;
 };
 
 export default Registration;