6. and log back in again

app.rb

@@ -48,6 +48,10 @@ def gravatar_url(email, size: 200)
   end
 end
 
+get '/login' do
+  erb :login
+end
+
 get '/signup' do
   erb :signup
 end

public/application.js

@@ -48,4 +48,35 @@
         .then(function () { window.location.href = '/'; });
     })
   }
+
+  /*
+   * Integrate KeratinAuthN.login
+   */
+  var loginForm = document.querySelector("form#login");
+  if (loginForm) {
+    var username = loginForm.querySelector("input#user_email");
+    var password = loginForm.querySelector("input#user_password");
+
+    loginForm.addEventListener('submit', function (event) {
+      event.preventDefault();
+
+      loginForm.querySelectorAll(".has-danger").forEach(function(e) {
+        e.classList.remove('has-danger');
+      });
+
+      function goHome() {
+        window.location.href = '/';
+      }
+
+      function showErrors() {
+        username.parentNode.classList.add("has-danger");
+        password.parentNode.classList.add("has-danger");
+      }
+
+      KeratinAuthN
+        .login({ username: username.value, password: password.value })
+        .then(goHome, showErrors);
+    })
+
+  }
 })();

views/layout.erb

@@ -13,6 +13,10 @@
           <li class="nav-item">
             <a class="btn btn-info" href="#" id="logout">Log Out</a>
           </li>
+        <% else %>
+          <li class="nav-item">
+            <a class="btn btn-success" href="/login">Log In</a>
+          </li>
         <% end %>
       </ul>
     </nav>

views/login.erb

@@ -0,0 +1,19 @@
+<h2>Log In</h2>
+
+<form id="login">
+
+  <!-- Email (Username) -->
+  <div class="form-group">
+    <label for="user_email" class="form-control-label">Email</label>
+    <input type="email" id="user_email" name="user[email]" class="form-control" />
+  </div>
+
+  <!-- Password -->
+  <div class="form-group">
+    <label for="user_password" class="form-control-label">Password</label>
+    <input type="password" id="user_password" class="form-control" />
+  </div>
+
+  <button type="submit" class="btn btn-primary">Log In</button>
+
+</form>