Login, Create Account and Forgot Password views

- Add dependency on haml.
- Add AuthenticationController with login, forgotten_password and
    create_account actions.
- Add actual views for these actions.
- Adapt Bootstrap's login form to a 'void' layout.

Gemfile

@@ -31,6 +31,9 @@ gem 'bcrypt', '~> 3.1.7'
 gem 'bootstrap-sass', '~> 3.3.6'
 gem 'autoprefixer-rails'
 
+# Use HAML for templates
+gem 'haml'
+
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development
 

Gemfile.lock

@@ -61,6 +61,8 @@ GEM
     ffi (1.9.14)
     globalid (0.3.7)
       activesupport (>= 4.1.0)
+    haml (4.0.7)
+      tilt
     i18n (0.7.0)
     jbuilder (2.6.1)
       activesupport (>= 3.0.0, < 5.1)
@@ -165,6 +167,7 @@ DEPENDENCIES
   bootstrap-sass (~> 3.3.6)
   byebug
   coffee-rails (~> 4.2)
+  haml
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)

app/assets/javascripts/authentication.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/application.scss

@@ -10,6 +10,40 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
+ *= require_self
+ *= require_tree .
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";
+
+/* Horizontally distribute ul items.
+ *
+ * Adapted from the following StackOverflow answer:
+ * http://stackoverflow.com/a/13505797 , by user 'joshnh'
+ * Licensed under CC-BY-SA 3.0 as per the StackOverflow TOS.
+ *
+ */
+ul.hdis {
+    text-align: justify;
+    padding-left: 0 !important;
+}
+
+ul.hdis:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+ul.hdis:before {
+    content: '';
+    display: block;
+    margin-top: -1.25em;
+}
+
+ul.hdis li {
+    display: inline-block;
+    margin-right: -.25em;
+    position: relative;
+    top: 1.25em;
+}
+/* End of CC-BY-SA code. */

app/assets/stylesheets/authentication.scss

@@ -0,0 +1,75 @@
+// Place all the styles related to the Authentication controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+body .void {
+	padding-top: 		40px;
+	padding-bottom: 	40px;
+	background-color: 	#eee !important;
+}
+
+.central-form {
+	max-width: 330px;
+	padding: 15px;
+	margin: 0 auto;
+}
+
+.central-form .central-form-heading,
+.central-form .checkbox {
+	margin-bottom: 10px;
+}
+
+.central-form .checkbox {
+	font-weight: normal;
+}
+
+.central-form .form-control {
+	position: relative;
+	height: auto;
+	-webkit-box-sizing: border-box;
+	 -moz-box-sizing: border-box;
+		  box-sizing: border-box;
+	padding: 10px;
+	font-size: 16px;
+}
+
+.central-form .form-control:focus {
+	z-index: 2;
+}
+
+.central-form input.input-top[type="email"] {
+	margin-bottom: -1px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.central-form .input-top {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.central-form .input-middle {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+.central-form .input-bottom {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.central-form .input-only {
+    border-radius: 4px;
+    margin-bottom: 10px !important;
+}
+
+.central-form input[type="password"] {
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+@import "bootstrap-sprockets";
+@import "bootstrap";

app/assets/stylesheets/void.scss

@@ -0,0 +1,69 @@
+body {
+	padding-top: 		40px;
+	padding-bottom: 	40px;
+	background-color: 	#eee;
+}
+
+.central-form {
+	max-width: 330px;
+	padding: 15px;
+	margin: 0 auto;
+}
+
+.central-form .central-form-heading,
+.central-form .checkbox {
+	margin-bottom: 10px;
+}
+
+.central-form .checkbox {
+	font-weight: normal;
+}
+
+.central-form .form-control {
+	position: relative;
+	height: auto;
+	-webkit-box-sizing: border-box;
+	 -moz-box-sizing: border-box;
+		  box-sizing: border-box;
+	padding: 10px;
+	font-size: 16px;
+}
+
+.central-form .form-control:focus {
+	z-index: 2;
+}
+.central-form input[type="email"].input-top {
+	margin-bottom: -1px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.central-form .input-top {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.central-form .input-middle {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+.central-form .input-bottom {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.central-form .input-only {
+    border-radius: 4px;
+    padding-bottom: 10px;
+}
+
+.central-form input[type="password"].input-top {
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}

app/controllers/authentication_controller.rb

@@ -0,0 +1,13 @@
+class AuthenticationController < ApplicationController
+  def login
+    render layout: 'void'
+  end
+
+  def create_password
+    render layout: 'void'
+  end
+
+  def forgotten_password
+    render layout: 'void'
+  end
+end

app/helpers/authentication_helper.rb

@@ -0,0 +1,2 @@
+module AuthenticationHelper
+end

app/views/authentication/create_password.html.haml

@@ -0,0 +1,19 @@
+- content_for :title do
+  Create password
+
+.container
+  = form_tag '/login', method: 'post', class: 'central-form' do
+    %h2.central-form-header.text-center
+      Create password
+    %p
+      Creating an account requires that you have been registered beforehand by an administrator. Contact someone if your email address is not recognized.
+
+    = email_field_tag :email, '', placeholder: 'Email address', class: 'form-control input-only'
+    = submit_tag "Send email", class: 'btn btn-primary btn-lg btn-block'
+
+  .central-form
+    %ul.hdis
+      %li
+        = link_to "Login",          {action: 'login',           controller: 'authentication'}, {class: 'btn btn-secondary'}
+      %li
+        = link_to "Forgot password", {action: 'forgotten_password', controller: 'authentication'}, {class: 'btn btn-secondary'}

app/views/authentication/forgotten_password.html.haml

@@ -0,0 +1,16 @@
+- content_for :title do
+  Forgot password
+.container
+  = form_tag '/forgot', method: 'post', class:'central-form' do
+    %h2.central-form-header.text-center
+      Forgot password
+
+    = email_field_tag :email, '', placeholder: "Email address", class: 'form-control input-only'
+    = submit_tag "Send email", class: 'btn btn-primary btn-lg btn-block'
+
+  .central-form
+    %ul.hdis
+      %li
+        = link_to "Login",          {action: 'login',           controller: 'authentication'}, {class: 'btn btn-secondary'}
+      %li
+        = link_to "Create account", {action: 'create_password', controller: 'authentication'}, {class: 'btn btn-secondary'}

app/views/authentication/login.html.haml

@@ -0,0 +1,24 @@
+- content_for :title do
+  Login
+
+.container
+  = form_tag("/login", method: "post", class: "central-form") do
+    %h2.central-form-header.text-center
+      Please sign in
+
+    = email_field_tag(:email, '', placeholder: 'Email address', class: 'form-control input-top')
+    = password_field_tag(:password, '', placeholder: 'Password', class: 'form-control input-bottom')
+
+    .checkbox
+      %label
+        = check_box_tag(:remember_me)
+        Remember me
+
+    = submit_tag("Sign in", class: "btn btn-primary btn-lg btn-block")
+
+  .central-form
+    %ul.hdis
+      %li
+        = link_to 'Forgot password', {action: 'forgotten_password', controller: 'authentication'}, {class: 'btn btn-secondary'}
+      %li
+        = link_to 'Create account', {controller: 'authentication', action: 'create_password'}, {class: 'btn btn-secondary'}

app/views/layouts/void.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= yield(:title) %> | Damena</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body class="void">
+    <%= yield %>
+  </body>
+</html>

config/initializers/assets.rb

@@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-# Rails.application.config.assets.precompile += %w( search.js )
+#Rails.application.config.assets.precompile += %w( void.css )

config/routes.rb

@@ -1,3 +1,9 @@
 Rails.application.routes.draw do
+  get 'login', to: 'authentication#login'
+
+  get 'authentication/create_password'
+
+  get 'authentication/forgotten_password'
+
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end

test/controllers/authentication_controller_test.rb

@@ -0,0 +1,19 @@
+require 'test_helper'
+
+class AuthenticationControllerTest < ActionDispatch::IntegrationTest
+  test "should get login" do
+    get authentication_login_url
+    assert_response :success
+  end
+
+  test "should get create_password" do
+    get authentication_create_password_url
+    assert_response :success
+  end
+
+  test "should get forgotten_password" do
+    get authentication_forgotten_password_url
+    assert_response :success
+  end
+
+end