Sign In Page

Author: maxwellgordon

src/components/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import ProductShowPage from './ProductShowPage';
 import ProductIndexPage from './ProductIndexPage';
 import NewProductPage from './NewProductPage';
+import SignInPage from './SignInPage';
 import HomePage from './HomePage';
 import NavBar from './NavBar';
 
@@ -12,6 +13,7 @@ const App = () => {
       <div className="App">
         <NavBar />
         <Switch>
+          <Route path="/session/new" exact component={SignInPage} />
           <Route path="/products/new" component={NewProductPage} />
           <Route path="/products/:id" component={ProductShowPage} />
           <Route path="/products" exact component={ProductIndexPage} />

src/components/NavBar.js

@@ -6,6 +6,7 @@ function NavBar(props) {
     <div className="NavBar">
       <NavLink to="/">Home</NavLink>|<NavLink to="/products">Products</NavLink>|
       <NavLink to="/products/new">New Product</NavLink>
+      <NavLink to="/session/new">Sign In</NavLink>
     </div>
   );
 }

src/components/SignInPage.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+import { Session } from "../requests";
+
+ export default class SignInPage extends Component {
+  constructor(props) {
+    super(props);
+     this.state = {
+      errors: []
+    };
+     this.createSession = this.createSession.bind(this);
+  }
+   createSession(event) {
+    event.preventDefault();
+    const { currentTarget } = event;
+    const formData = new FormData(currentTarget);
+     Session.create(fromFormData(formData)).then(data => {
+      if (data.status === "error") {
+         this.setState({
+          errors: [data.message]
+        });
+         return;
+      }
+      this.props.history.push("/");
+    });
+  }
+   render() {
+    const { errors } = this.state;
+     return (
+      <main className="SignInPage">
+        <h1>Sign In</h1>
+        <form onSubmit={this.createSession}>
+          {errors.length > 0 ? (
+            <p className="FormErrors">{errors.join(", ")}</p>
+          ) : null}
+          <div>
+            <label htmlFor="email">Email</label>
+            <br />
+            <input type="email" name="email" id="email" />
+          </div>
+           <div>
+            <label htmlFor="password">Password</label>
+            <br />
+            <input type="password" name="password" id="password" />
+          </div>
+           <input type="submit" value="Submit" />
+        </form>
+      </main>
+    );
+  }
+}
+
+const fromFormData = formData => {
+  const newObj = {};
+   for (let [name, value] of formData) {
+    newObj[name] = value;
+  }
+   return newObj;
+};