How To: Integrate I18n Flash Messages With Devise And Bootstrap - Devise Wiki

This tutorial was made using Rails 4 and Devise 3 and Bootstrap 2.3

This tutorial is made to show you how to integrate devise flash messages with twitter bootstrap. I wanted to show a way to make devise flash messages look the same as the rest of the site. This will handle normal flash messages and devise flash messages.

<h3>Flash Messages For the Site</h3>

First we will make a rendered view to make the code concise. Within "app/views/layouts/application.html.erb" I added <%= render 'layouts/messages' %>.

My file looks like:

erb

<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= render 'layouts/messages' %>
    <%= yield %>
    <%= render 'layouts/footer' %>
  </div>
</body>

Next we have to make the messages file. Make a new file in "app/views/layouts/_messages.html.erb" and add:

erb

<% flash.each do |key, value| %>
  <div class="alert alert-<%= key %>">
    <a href="#" data-dismiss="alert" class="close">×</a>
    <ul>
      <li>
        <%= value %>
      </li>
    </ul>
  </div>
<% end %>

This will give us flash messages for the entire site.

<h3>Flash Messages For Devise</h3>

For devise you need to override the way devise handles flash messages. Create a file called devise_helper in "app/helpers/devise_helper.rb".

Inside the file you have to create a method called devise_error_messages!, which is the name of the file that tells devise how to handle flash messages.

ruby

module DeviseHelper
  def devise_error_messages!
    return '' if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
    html = <<-HTML
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span>
      </button>
      <strong>
       #{pluralize(resource.errors.count, "error")} must be fixed
      </strong>
      #{messages}
    </div>
    HTML

    html.html_safe
  end
end

Next in your devise views you will have to define where you want the error messages to appear. You will need to enter <%= devise_error_messages! %> within the devise pages. An example is entering this within "app/views/devise/registrations/new.html.erb" (The sign up page)

It should already be within the file, but you can move the code around to customize where it is shown.

<h3>CSS For Flash Messages</h3>

If you do not want to use the odd blue and yellow alerts that come default, I have set error and alert to have the same colorand success and notice to have the same color. I am using red for errors and alerts, and green for success and notice.

Within my "app/assets/stylesheets/custom.css.scss" I have:

scss

/*flash*/
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-alert {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    text-align: left;
 }

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }

.alert-notice {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
    text-align: left;
 }