From 41ea4beaae1d31e7cf9579b8c9eee840b37e228b Mon Sep 17 00:00:00 2001
From: Lee Dennis <leedennis62@hotmail.com>
Date: Thu, 4 Oct 2018 21:13:23 +1000
Subject: [PATCH] adding basic login component and styling

---
 package-lock.json            | 32 +++++++++----------
 src/components/LoginView.jsx | 59 ++++++++++++++++++++++++++++++++++++
 src/styles/LoginView.css     | 39 ++++++++++++++++++++++++
 3 files changed, 114 insertions(+), 16 deletions(-)
 create mode 100644 src/components/LoginView.jsx
 create mode 100644 src/styles/LoginView.css

diff --git a/package-lock.json b/package-lock.json
index fcc6bf0..d369f0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4276,6 +4276,14 @@
           "bundled": true,
           "optional": true
         },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -4285,14 +4293,6 @@
             "strip-ansi": "3.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        },
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
@@ -9821,6 +9821,14 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -9853,14 +9861,6 @@
         }
       }
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
diff --git a/src/components/LoginView.jsx b/src/components/LoginView.jsx
new file mode 100644
index 0000000..f90c6f7
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/styles/LoginView.css b/src/styles/LoginView.css
new file mode 100644
index 0000000..578bd84
--- /dev/null
+++ b/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);
+}
\ No newline at end of file