Week 11 – 12: General Assembly

This is my last week in General Assembly's WDI program in SF. It's been fantastic. I've kind of dropped the ball here and there with posting because it's been hectic for me. For the longest time I've kind of headed towards NOT using Bootstrap. However, for my final project in the program I decided to implement it. One of the things that some of my friends had problems with is getting used to the mystical powers of Bootstrap. Just slapping that shit on will make everything look good. Unfortunately, for me, because I was very weary of tacking on classes and spans I stuck to hand coding my css and all the media queries and that slowed me down. Below is what I incorporated into my project to enable Devise to work with Bootstrap modals. There was a lot of Google-ing and StackOverflow.

application.html.erb (link to pop-up the login modal)

<a href="#" data-toggle="modal" data-target="#login">Login</a>

application.html.erb (div that contains the erb form_for input fields)

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="login"> <!-- IN BOOTSTRAP THIS IS NOT A DIV, BUT A SPAN. I MADE THIS A DIV AND ADDED THE BOOTSTRAP CLASS, TABINDEX, ROLE, AND ETC. -->
 <div class="modal-dialog">
 <div class="modal-content">
<div class="modal-header">
 <h2 class="modal-title" id="myModalLabel">Sign In</h2>
 </div>
<div class="modal-body">
 <center>
 <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
 <div>
 <%= f.label :email %> <%= f.email_field :email, :autofocus => true %>
 </div>
 <div>
 <%= f.label :password %> <%= f.password_field :password %>
 </div>
 <% if devise_mapping.rememberable? -%>
 <div>
 <%= f.check_box :remember_me %> <%= f.label :remember_me %>
 </div>
 <% end -%>
 <div>
 <%= f.submit "Sign in" %>
 </div>
 <% end %>
 <%= render "devise/shared/links" %>
 </center>
 </div>
<div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
</div> <!-- END OF DIV: modal-content -->
 </div> <!-- END OF DIV: modal-dialog -->
</div> <!-- END OF DIV: modal fade -->

application_helper.rb (making sure :user/@user is mapped) (source)

module ApplicationHelper
 def resource_name
 :user
 end
def resource
 @resource ||= User.new
 end
def devise_mapping
 @devise_mapping ||= Devise.mappings[:user]
 end
end

devise_helper.rb

module DeviseHelper
 def devise_mapping
 Devise.mappings[:user]
 end
def resource_name
 devise_mapping.name
 end
def resource_class
 devise_mapping.to
 end
def devise_error_messages!
 return "" if resource.errors.empty?
messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
 sentence = I18n.t("errors.messages.not_saved",
 :count => resource.errors.count,
 :resource => resource.class.model_name.human.downcase)
html = <<-HTML
 <div id="error_explanation">
 <h2>#{sentence}</h2>
 <ul>#{messages}</ul>
 </div>
 HTML
html.html_safe
 end
end

Week 11 – 12: General Assembly – WDI SF