BS3: devise & flash messaging.

app/assets/stylesheets/frontend.scss

@@ -4,4 +4,9 @@ body {
 
 .x-boundlist-item {
   white-space: nowrap;
+}
+
+fieldset {
+  margin-top: $line-height-computed;
+  margin-bottom: $line-height-computed;
 }

app/helpers/devise_helper.rb

@@ -1,21 +1,18 @@
 module DeviseHelper
-  # A simple way to show error messages for the current devise resource. If you need
-  # to customize this method, you can either overwrite it in your application helpers or
-  # copy the views to your application.
-  #
-  # This method is intended to stay simple and it is unlikely that we are going to change
-  # it to add more behavior or options.
   def devise_error_messages!
-    return "" if resource.errors.empty?
+    return '' if resource.errors.empty?
 
-    messages = resource.errors.full_messages.map { |msg| content_tag(:p, msg, :class => "alert") }.join
+    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }
     sentence = I18n.t("errors.messages.not_saved",
                       :count => resource.errors.count,
                       :resource => resource.class.model_name.human.downcase)
 
     html = <<-HTML
-    <p>#{sentence}</p>
+    <div class="alert alert-danger">#{sentence}
-    #{messages}
+    <ul>
+    #{messages.join}
+    </ul>
+    </div>
     HTML
 
     html.html_safe

app/views/devise/_links.erb

@@ -1,32 +0,0 @@
-<%- if controller_name != 'sessions' %>
-  <p>
-  <%= link_to "Sign in", new_session_path(resource_name), class: "btn btn-block btn-default" %><br />
-  </p>
-<% end -%>
-
-<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-  <p>
-  <%= link_to "Sign up", new_registration_path(resource_name), class: "btn btn-block btn-default" %><br />
-  </p>
-<% end -%>
-
-<%- if devise_mapping.recoverable? && controller_name != 'passwords' %>
-  <p>
-  <%= link_to "Forgot your password?", new_password_path(resource_name), class: "btn btn-block btn-default" %><br />
-  </p>
-<% end -%>
-
-<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-  <p>
-  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "btn btn-block btn-default" %><br />
-  </p>
-<% end -%>
-
-<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-<% end -%>
-
-<%- if devise_mapping.omniauthable? %>
-  <%- resource_class.omniauth_providers.each do |provider| %>
-    <%= link_to "Sign in with #{provider.to_s.titleize}", omniauth_authorize_path(resource_name, provider) %><br />
-  <% end -%>
-<% end -%>

app/views/devise/_links.html.haml

@@ -0,0 +1,20 @@
+- links = []
+
+- if controller_name != 'sessions'
+  - links << ['Sign in', new_session_path(resource_name)]
+
+- if devise_mapping.registerable? && controller_name != 'registrations'
+  - links << ['Sign up', new_registration_path(resource_name)]
+
+- if devise_mapping.recoverable? && controller_name != 'passwords'
+  - links << ['Forgot your password?', new_password_path(resource_name)]
+
+- if devise_mapping.confirmable? && controller_name != 'confirmations'
+  - links << ['Didn\'t receive confirmation instructions?', new_confirmation_path(resource_name)]
+
+- if devise_mapping.omniauthable?
+  - resource_class.omniauth_providers.each do |provider|
+    - links << ["Sign in with #{provider.to_s.titleize}", omniauth_authorize_path(resource_name, provider)]
+
+- if links.any?
+  %p= links.map { |title, url| link_to title, url }.join(' &middot; ').html_safe

app/views/devise/passwords/edit.html.erb

@@ -1,16 +0,0 @@
-<h2>Change your password</h2>
-
-<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put }) do |f| %>
-  <%= devise_error_messages! %>
-  <%= f.hidden_field :reset_password_token %>
-
-  <div><%= f.label :password, "New password" %><br />
-  <%= f.password_field :password %></div>
-
-  <div><%= f.label :password_confirmation, "Confirm new password" %><br />
-  <%= f.password_field :password_confirmation %></div>
-
-  <div><%= f.submit "Change my password" %></div>
-<% end %>
-
-<%= render "links" %>

app/views/devise/passwords/edit.html.haml

@@ -0,0 +1,19 @@
+%h1 Change your password
+
+.row
+  .col-xs-12.col-sm-6.col-lg-4
+    = form_for resource, as: resource_name, url: password_path(resource_name), html: {method: :put} do |f|
+      = devise_error_messages!
+      = f.hidden_field :reset_password_token
+
+      %fieldset
+        .form-group
+          = f.password_field :password, placeholder: 'New password', class: 'form-control'
+
+        .form-group
+          = f.password_field :password_confirmation, placeholder: 'Confirm new password', class: 'form-control'
+
+        .form-group
+          = f.submit 'Change my password', class: 'btn btn-primary'
+
+    = render 'links'

app/views/devise/passwords/new.html.erb

@@ -1,14 +0,0 @@
-<h2>Forgot your password?</h2>
-<br>
-<br>
-<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| %>
-  <%= devise_error_messages! %>
-
-  <div class="form-group">
-    <%= f.email_field :email, placeholder: "Email", class: "form-control input-lg" %>
-  </div>
-
-  <div><%= f.submit "Reset Password", class:"btn btn-lg btn-primary"%></div>
-<% end %>
-
-<%= render "links" %>

app/views/devise/passwords/new.html.haml

@@ -0,0 +1,15 @@
+%h1 Forgot your password?
+
+.row
+  .col-xs-12.col-sm-6.col-lg-4
+    = form_for resource, as: resource_name, url: password_path(resource_name), html: {method: :post } do |f|
+      = devise_error_messages!
+
+      %fieldset
+        .form-group
+          = f.email_field :email, placeholder: 'Email', class: 'form-control'
+
+        .form-group
+          = f.submit 'Reset Password', class: 'btn btn-primary'
+
+    = render 'links'

app/views/devise/registrations/_user_profile_fields.html.haml

@@ -1,14 +1,17 @@
-%p
+.form-group
-  %fieldset
+  = f.text_field :addrStreet1, placeholder: 'Street Address Line 1', class: 'form-control'
-    .form-group
+
-      = f.text_field :addrStreet1, placeholder: "Street Address Line 1", :class => "form-control input-lg"
+.form-group
-    .form-group
+  = f.text_field :addrStreet2, placeholder: 'Street Address Line 2',class: 'form-control'
-      = f.text_field :addrStreet2, placeholder: "Street Address Line 2",:class => "form-control input-lg"
+
-    .form-group
+.form-group
-      = f.text_field :addrCity, placeholder: "City", :class => "form-control input-lg"
+  = f.text_field :addrCity, placeholder: 'City', class: 'form-control'
-    .form-group
+
-      = f.text_field :addrState, placeholder: "State Abbreviation", :class => "form-control input-lg"
+.form-group
-    .form-group
+  = f.text_field :addrState, placeholder: 'State Abbreviation', class: 'form-control'
-      = f.text_field :addrZip, placeholder: "Zip Code", :class => "form-control input-lg"
+
-    .form-group
+.form-group
-      = f.text_field :phone, placeholder: "Phone", :class => "form-control input-lg"
+  = f.text_field :addrZip, placeholder: 'Zip Code', class: 'form-control'
+
+.form-group
+  = f.text_field :phone, placeholder: 'Phone', class: 'form-control'

app/views/devise/registrations/new.html.haml

@@ -1,22 +1,36 @@
-= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
+%h1 Sign up
-  = devise_error_messages!
+
-  .controls
+.row
-    %h2 Sign up
+  .col-xs-12.col-sm-6.col-lg-4
-  .form-group
+    = form_for resource, as: resource_name, url: registration_path(resource_name) do |f|
-    = f.text_field :username, placeholder: "Username", :class => "form-control input-lg"
+      = devise_error_messages!
-  .form-group
+
-    = f.text_field :first_name, placeholder: "First Name", :class => "form-control input-lg"
+      %fieldset
-  .form-group
+        .form-group
-    = f.text_field :last_name, placeholder: "Last Name", :class => "form-control input-lg"
+          = f.text_field :username, placeholder: 'Username', class: 'form-control'
-  .form-group
+
-    = f.email_field :email, placeholder: "E-mail", :class => "form-control input-lg"
+        .form-group
-  - profile_builder = resource.user_profiles.empty? ? resource.user_profiles.build : resource.user_profiles
+          = f.text_field :first_name, placeholder: 'First Name', class: 'form-control'
-  = f.fields_for :user_profiles, profile_builder do |builder|
+
-    = render 'user_profile_fields', f: builder
+        .form-group
-  .form-group
+          = f.text_field :last_name, placeholder: 'Last Name', class: 'form-control'
-    = f.password_field :password, placeholder: "Password", :class => "form-control input-lg"
+
-  .form-group
+        .form-group
-    = f.password_field :password_confirmation, placeholder: "Password Confirmation", :class => "form-control input-lg"
+          = f.email_field :email, placeholder: 'E-mail', class: 'form-control'
-  .form-group
+
-    = f.submit "Sign up", class:"btn btn-lg btn-primary"
+      %fieldset
-= render "links"
+        - profile_builder = resource.user_profiles.empty? ? resource.user_profiles.build : resource.user_profiles
+        = f.fields_for :user_profiles, profile_builder do |builder|
+          = render 'user_profile_fields', f: builder
+
+      %fieldset
+        .form-group
+          = f.password_field :password, placeholder: 'Password', class: 'form-control'
+
+        .form-group
+          = f.password_field :password_confirmation, placeholder: 'Password Confirmation', class: 'form-control'
+
+        .form-group
+          = f.submit 'Sign up', class: 'btn btn-primary'
+    
+    = render 'links'

app/views/devise/sessions/new.html.erb

@@ -1,46 +0,0 @@
-<h2>Velocipede</h2>
-<a href="http://madewithloveinbaltimore.org">Made with &hearts; in Baltimore</a>
-<br>
-<br>
-<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
-  <div class="form-group">
-    <%= f.text_field :username, placeholder: "Username", class: "form-control input-lg"%>
-  </div>
-
-  <div class="form-group">
-    <%= f.password_field :password, placeholder: "Password", class: "form-control input-lg" %>
-  </div>
-
-  <div class="form-group">
-  <% if devise_mapping.rememberable? -%>
-      <label>
-        <%= f.check_box :remember_me %> Remember Me
-      </label>
-  <% end -%>
-  </div>
-
-  <div class="form-group">
-    <p>
-    <%= f.submit "Sign in", class:"btn btn-lg btn-primary" %>
-    </p>
-    <p> Or quickly... </p>
-    <div class="btn-group">
-      <input id="checkin" name="checkin" type="button" value="CHECK IN" class="btn btn-lg btn-success">
-      <input id="checkout" name="checkout" type="button" value="CHECK OUT" class="btn btn-lg btn-danger">
-    </div>
-  </div>
-<% end %>
-
-<%= render "links" %>
-
-<% if Rails.env.development? %>
-  <p>
-  <% User.all.each do |user| %>
-    <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
-      <%= f.hidden_field :username, :value => user.username%>
-      <%= f.hidden_field :password, :value => 'password' %>
-      <%= f.submit "Sign in as #{user.username}", class:"btn btn-info" %>
-    <% end %>
-  <% end %>
-  </p>
-<% end %>

app/views/devise/sessions/new.html.haml

@@ -0,0 +1,41 @@
+%h1 Velocipede
+%p= link_to 'Made with ♥ in Baltimore'.html_safe, 'http://madewithloveinbaltimore.org'
+
+.row
+  .col-xs-12.col-sm-6.col-lg-4
+    = form_for resource, as: resource_name, url: session_path(resource_name) do |f|
+
+      %fieldset
+        .form-group
+          = f.text_field :username, placeholder: 'Username', class: 'form-control'
+
+        .form-group
+          = f.password_field :password, placeholder: 'Password', class: 'form-control'
+
+        - if devise_mapping.rememberable?
+          .form-group
+            .checkbox
+              = f.label :remember_me do
+                = f.check_box :remember_me
+                Remember Me
+
+        .form-group
+          .pull-left
+            = f.submit 'Sign in', class: 'btn btn-primary'
+
+          .pull-right
+            %span.btn-group
+              = f.button 'CHECK IN', id: 'checkin', name: 'checkin', type: 'button', value: 'CHECK IN', class: 'btn btn-xsя btn-success'
+              = f.button 'CHECK OUT', id: 'checkout', name: 'checkout', type: 'button', value: 'CHECK OUT', class: 'btn btn-xsя btn-danger'
+
+          .clearfix
+
+    = render 'links'
+
+    - if false && Rails.env.development?
+      %hr
+        - User.all.each do |user|
+          = form_for resource, as: resource_name, url: session_path(resource_name) do |f|
+            = f.hidden_field :username, value: user.username
+            = f.hidden_field :password, value: 'password'
+            %p= f.submit "Sign in as #{user.username}", class: 'btn btn-sm btn-info'

app/views/layouts/application.html.haml

@@ -11,18 +11,17 @@
 
   %body
     .container
-
       .content
         - if flash[:notice]
-          %p{class: 'notice'}= flash[:notice]
+          %div.alert.alert-info= flash[:notice]
         - if flash[:alert]
-          %p{class: 'alert'}= flash[:alert]
+          %div.alert.alert-danger= flash[:alert]
-        .row
+
-          .span12
+        = yield
-            = yield
 
       %footer
-        %p © BikeShed #{Time.now.year}
+        %hr
+        %p.text-muted © BikeShed #{Time.now.year}
 
     = javascript_include_tag 'application'
     = javascript_include_tag params[:controller]