Changed casing, changed import helpers to false in tsconfig.json so imports can be handled as we see fit

src/components/login/login.component.tsx

@@ -4,6 +4,7 @@ import { ReactElement } from "react";
 import { createStore } from "redux";
 import { FirebaseService } from "../../commons/firebase.service";
 import { SVGs } from "../../commons/svg.list";
+import { SignInForm } from "../signInForm/SignInForm"; 
 import { loginReducer } from "./login.reducer";
 
 import './login.style.scss';
@@ -31,16 +32,17 @@ export class LoginComponent extends React.Component {
     return(
       <div className="LoginForm">
         <h1>Please Login</h1>
+        <SignInForm />
         <button className="Button--GoogleSignIn no-underline near-white bg-animate bg-dark-blue hover-bg-gray inline-flex items-center ma2 tc br2 pa0"
-                onClick={this.loginClickHandler}>
+          onClick={this.loginClickHandler}>
           <div className="dib h3 w3 pa1 bg-white">
             {SVGs.google}
           </div>
-        <span className="f6 ml3 pr2">
-          Sign in with Google
-        </span>
+          <span className="f6 ml3 pr2">
+            Sign in with Google
+          </span>
         </button>
       </div>
     );
   }
-}
+}

src/components/signinForm/SignInForm.scss

@@ -0,0 +1,4 @@
+.form-boxes {
+  border-width: 2px;
+  border-color: steelblue;
+}

src/components/signinForm/SigninForm.js

@@ -0,0 +1,54 @@
+/* tslint:disable:no-empty */
+import FormControl from '../../shared/FormControl';
+import PropTypes from 'prop-types';
+
+import React, { PureComponent } from 'react';
+
+import './SignInForm.scss';
+
+export class SignInForm extends PureComponent {
+
+  state = {
+    email: '',
+    password: '',
+  }
+
+	static propTypes = {
+		action: PropTypes.string.isRequired,
+		submit: PropTypes.func.isRequired,
+	}
+
+	handleSubmit = event => {
+		event.preventDefault();
+		this.props.submit(this.state)
+		.catch(() => {});
+	}
+
+	handleChange = ({ target }) => {
+		this.setState({ [target.email]: target.value }); 
+	}
+
+	render() {
+		const { action } = this.props;
+		const { email, password } = this.state;
+
+		return (
+			<form onSubmit={this.handleSubmit}>
+
+				<FormControl label="email">
+					<input className="form-boxes" name="email" value={email} 
+						onChange={this.handleChange}/>
+				</FormControl>
+
+				<FormControl label="password">
+					<input className="form-boxes" name="password" value={password} type="password" 
+						onChange={this.handleChange}/>
+				</FormControl>
+
+				<FormControl>
+					<button className="form-boxes">{action}</button>
+				</FormControl>
+			</form>
+		);
+	}
+}

src/shared/FormControl.js

@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+class FormControl extends PureComponent {
+
+  static propTypes = {
+    children: PropTypes.element,
+    label: PropTypes.string,
+  };
+
+  render() {
+    const { label, children } = this.props;
+
+    return (
+      <section>
+        { label && <label>{label}:</label> }
+        <section>
+          {children}
+        </section>
+      </section>
+    );
+  }
+}
+
+export default FormControl;

tsconfig.json

@@ -14,10 +14,10 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
-    "importHelpers": true,
+    "importHelpers": false,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
   },
   "exclude": [
     "node_modules",