Replace devise_error_messages! with flash messages

Question

I generated my devise views using rails g devise:views users

I generated my devise controllers using rails g devise:controllers users

I added my new controllers in routes.rb:

  devise_for :users, controllers: { sessions: "users/sessions", 
                                    confirmations: "users/confirmations",
                                    registrations: "users/registrations", 
                                    passwords: "users/passwords",
                                    unlocks: "users/unlocks"}

I changed my flash messages to handle Arrays according to this answer: rails - Devise - Handling - devise_error_messages

Like this:

<% flash.each do |key, value| %>
    <% if value.class == Array %>
        <% value.each do |message| %>
            <div class="<%= flash_class(key) %>">
                <%= message %>
            </div>
        <% end %>
    <% else %>
        <div class="<%= flash_class(key) %>">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <%= value %>
        </div>

    <% end %>

<% end %>

My new custom registration controller:

class Users::RegistrationsController < Devise::RegistrationsController
# before_filter :configure_sign_up_params, only: [:create]
# before_filter :configure_account_update_params, only: [:update]

  # GET /resource/sign_up
  # def new
  #   super
  # end

  # POST /resource
  # def create
  #   super
  # end

  # GET /resource/edit
  # def edit
  #   super
  # end

  # PUT /resource
  # def update
  #   super
  # end

  # DELETE /resource
  # def destroy
  #   super
  # end

  # GET /resource/cancel
  # Forces the session data which is usually expired after sign
  # in to be expired now. This is useful if the user wants to
  # cancel oauth signing in/up in the middle of the process,
  # removing all OAuth session data.
  # def cancel
  #   super
  # end

  # protected

  # You can put the params you want to permit in the empty array.
  # def configure_sign_up_params
  #   devise_parameter_sanitizer.for(:sign_up) << :attribute
  # end

  # You can put the params you want to permit in the empty array.
  # def configure_account_update_params
  #   devise_parameter_sanitizer.for(:account_update) << :attribute
  # end

  # The path used after sign up.
  # def after_sign_up_path_for(resource)
  #   super(resource)
  # end

  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end
  flash[:notice] = flash[:notice].to_a.concat resource.errors.full_messages
end

When i add this line:

flash[:notice] = flash[:notice].to_a.concat resource.errors.full_messages

I get this error:

undefined local variable or method `flash' for Users::RegistrationsController:Class

Answer 1

I stil don't understand what went wrong with the mentioned solution but found instead a better one I think:

Step 1:

Create a file devise_helper.rb where you override the devise_error_messages! method and copy all errors to a flash notice array

module DeviseHelper
  def devise_error_messages!
    if resource.errors.full_messages.any?
        flash.now[:error] = resource.errors.full_messages
    end
    return ''
  end
end

Step 2:

In application_helper.rb define a new method which configures your html classes for bootstrap:

def flash_class(level)
    case level
        when 'notice' then "alert alert-dismissable alert-info"
        when 'success' then "alert alert-dismissable alert-success"
        when 'error' then "alert alert-dismissable alert-danger"
        when 'alert' then "alert alert-dismissable alert-danger"
    end
end

Step 3:

Configure your flash notice to parse arrays:

<% flash.each do |key, value| %>
    <% if value.class == Array %>
        <div class="<%= flash_class(key) %>">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <% value.each do |message| %>  
                <%= message %>
                </br>
            <% end %>
        </div>
    <% else %>
        <div class="<%= flash_class(key) %>">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <%= value %>
        </div>
    <% end %>
<% end %>

Step 4

Make sure you call the NEW devise_error_messages! in your devise registrations view which adds all errors to flash messages which can then be displayed using you flash render layout (in my case _error.html.erb):

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>
  <%= render 'layouts/error' %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @validatable %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "users/shared/links" %>

Answer 2

A bit more DRY - the view without the application helper flash_card and duplicated html:

add .alert-error in your CSS

<% flash.each do |key, value| %>
    <div class="alert alert-dismissable alert-<% key %>">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <% if value.class == Array %>
            <% value.each do |message| %>  
                <%= message %>
                </br>
            <% end %>
        <% else %>
            <%= value %>
        <% end %>
    </div>
<% end %>

Answer 3

Since I can omit the IF whether it is an array, I like to write like the following.

<% flash.each do |key, value| %>
  <div class="alert alert-dismissable alert-<% key %>">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <% [*value].each do |message| %>  
      <%= message %></br>
    <% end %>
  </div>
<% end %>