Rails Devise I18n Flash Messages with Twitter Bootstrap
Hello I am new to ruby on rails and I am struggling to understand I18n's flash messages. I am using devise, rails 4, and twitter bootstrap.I understand that devise only uses flash[:notice] and flash[:alert].
I am able to get flash messages working for my user model with signing in and logging out. However I cannot get the flash error for signup or forgot password to display properly. It looks like the default error message.
I've looked at bunch of questions related to this and Im confused on the way to go about displaying all flash messages (errors, successes, notifications) with pretty css.
Perhaps the answer is already in this article right under my nose? rails - Devise - Handling - devise_error_messages
Currently my flash messages are based on How to define Flash Notifications with Twitter Bootstrap Rails gem
Here is my example:
within 'app/views/layouts/application.html.erb'
<%= render 'layouts/messages' %>
'app/views/layouts/_messages.html.erb'
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name == :notice ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
How do I display all flash messages (errors, successes, notifications) using my custom css?
Update: This post displays a correct version of what I am trying to do. The problem I have is that the styling does not look the same. I believe it is because of the html tag.
html = <<-HTML
<div class="alert alert-error alert-block"> <button type="button"
class="close" data-dismiss="alert">x</button>
<h4>#{sentence}</h4>
#{messages}
</div>
HTML
Any idea how I can have the same styling for the alerts? or what tags to use in the css?
You can see the difference between the sign up^^ and sign in (below) pages.
Update2
I've made a new post on what my problem is- which can be found here.Answer
I made a wiki page within the devise wiki on github for How To: Integrate I18n Flash Messages with Devise and Bootstrap
Flash Messages For the Site
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:
<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:
<% 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.
Flash Messages For Devise
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.
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-error alert-block"> <button type="button"
class="close" data-dismiss="alert">x</button>
#{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.
CSS For Flash Messages
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:
/*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;
}