adding basic login component and styling

src/components/LoginView.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styles/LoginView.css';
+
+class LoginView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+    }
+    this.handleSubmit = this.handleSubmit.bind( this );
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    console.log('process login as required');
+  }
+
+  render() {
+    return (
+      <div className="LoginView">
+        <h1>
+          Login
+        </h1>
+        <form className="LoginView_Form" onSubmit={this.handleSubmit}>
+          <div className="LoginView_Form_InputContainer">
+          <label htmlFor="username">
+            Please enter your username
+          </label>
+          <input
+            id="username"
+            value={this.state.username}
+            placeholder="Username"
+            onChange={e => this.setState({ username: e.target.value })}
+            type="text"
+            required
+          />
+          </div>
+          <div className="LoginView_Form_InputContainer">
+          <label htmlFor="password">
+            Enter your password here
+          </label>
+          <input
+            id="password"
+            placeholder="Password"
+            type="password"
+            required
+          />
+          </div>
+          <button>
+            Login
+          </button>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default LoginView;

src/styles/LoginView.css

@@ -0,0 +1,39 @@
+.LoginView {
+  width: 100vw;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.LoginView h1 {
+  font-size: 18px;
+  width: 50%;
+  margin-bottom: 20px;
+}
+
+.LoginView_Form {
+  width: 50%;
+}
+
+.LoginView_Form button {
+  padding: 8px;
+  font-size: 14px;
+  width: 50%;
+  background-color: rgb(236, 236, 236);
+}
+
+.LoginView_Form_InputContainer {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.LoginView_Form_InputContainer label {
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+.LoginView_Form_InputContainer input {
+  padding: 10px;
+  border: none;
+  background-color: rgb(247, 247, 247);
+}