Feat: Allow user to Login issue#14

src/Routes.js

@@ -2,7 +2,8 @@ import React from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 import Home from "./Home";
 import Register from "./register/Register";
-import Login from "./Login";
+import Login from "./login/Login";
+import MySpace from "./myspace/MySpace";
 import { Navbar, Nav } from "react-bootstrap";
 
 
@@ -24,6 +25,7 @@ export default (
               <Nav.Link href="/programs">Programs</Nav.Link>
               <Nav.Link href="/organizations">Organizations</Nav.Link>
               <Nav.Link href="/members">Members</Nav.Link>
+              <Nav.Link href="/my-space">My Space</Nav.Link>
               <Nav.Link href="/register">Register</Nav.Link>
               <Nav.Link href="/login">Login</Nav.Link>
             </Nav>
@@ -33,6 +35,7 @@ export default (
       <Route exact path="/" component={Home} />
         <Route path="/register" component={Register} />
         <Route path="/login" component={Login} />
+        <Route path="/my-space" component={MySpace} />
       </Switch>
     </div>
   </BrowserRouter>

src/login/Login.css

@@ -0,0 +1,48 @@
+.container {
+  background: #f7f9fa;
+  height: auto;
+  width: 70%;
+  margin: 5em auto;
+  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
+}
+
+label {
+  color: #24b9b6;
+  font-size: 1.2em;
+  font-weight: 400;
+}
+
+h1 {
+  color: #24b9b6;
+  padding-top: 0.5em;
+}
+
+.error {
+  color: red;
+}
+.error-message {
+  color: #ff6565;
+  padding: 0.5em 0.2em;
+  height: 1em;
+  position: absolute;
+  font-size: 0.8em;
+}
+
+.field {
+  border: 1px solid #1c6ea4;
+  width: 100%;
+  height: 2em;
+}
+
+.button-group {
+  width: 100%;
+}
+
+.login-form {
+  width: 80%;
+  text-align: left;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}