Unprocessable Entity even after upgrading

[simonsapiel]

Unprocessable Entity even after upgrading

[carlosantoniodasilva]

I don't think a failed signup returns a flash message for any errors, and a 422 Unprocessable Entity response there seems okay to me. The errors upon signup are validation errors and should be shown inline or however you're showing validation errors in general. Are you checking / displaying them in your form? (it doesn't look like from the bits you shared, but wanted to double check as they may be presented differently)

The flash message scenario described in the upgrade is more for sign in / unauthenticated redirects, where it uses the failure app to send yo back to the sign in page.

[simonsapiel]

@carlosantoniodasilva My user.rb model contains validations for both of the custom fields I have as follows:

validates :first_name, presence: { message: "Cannot be blank." }
validates :last_name, presence: { message: "Cannot be blank." }

but neither of them are being displayed. I've also tried to play with the create method to add the appropriate status to work with turbo, but this also doesn't seem to produce the flash messages.

class Users::RegistrationsController < Devise::RegistrationsController
  include Accessible
  skip_before_action :check_resource, except: %i[new create]

  def create
    build_resource(sign_up_params)

    resource.save
    yield resource if block_given?
    if resource.persisted?
      if resource.active_for_authentication?
        set_flash_message! :notice, :signed_up
        sign_up(resource_name, resource)
        respond_with resource, location: after_sign_up_path_for(resource)
      else
        set_flash_message! :notice, :"signed_up_but_#{resource.inactive_message}"
        expire_data_after_sign_in!
        respond_with resource, location: after_inactive_sign_up_path_for(resource)
      end
    else
      clean_up_passwords resource
      set_minimum_password_length
      debugger
      render :new, status: :unprocessable_entity
    end
  end
end

Also yes I'm rendering a partial

<%= render 'shared/notification' %>

in my application.html.erb that contains

<% if flash.any? %>
  <div class="flash fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end z-50" data-flash-notifications='true' >
    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
    <% flash.each do |msg_type, msg| %>
      <% if msg.is_a?(String) %>
        <div x-data="{flashVisible: false, flashType: '<%= msg_type %>'}" x-cloak x-show='flashVisible' x-init="() => {flashVisible=true; setTimeout(() => {flashVisible=false}, 2500)}" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
            x-transition:leave="transition ease-out duration-300"
            x-transition:leave-start="transform opacity-100"
            x-transition:leave-end="transform opacity-0">
          <div class="rounded-lg shadow-xs overflow-hidden">
            <div class="p-4">
              <div class="flex items-start">
                <div class="flex-shrink-0">
                  <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                      x-bind:class="{'text-green-400': flashType == 'success', 'text-red-600': flashType == 'error', 'text-red-600': flashType == 'alert', 'text-green-600': flashType == 'notice'}">
                    <path x-show="flashType == 'success'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    <path x-show="flashType == 'alert'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    <path x-show="flashType == 'error'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    <path x-show="flashType == 'notice'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                </div>
                <div class="ml-3 w-0 flex-1 pt-0.5">
                  <p class="text-sm leading-5 font-medium text-gray-900">
                    <%= msg %> 
                  </p>
                </div>
                <div class="ml-4 flex-shrink-0 flex">
                  <button x-on:click="flashVisible = false" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      <% else %>
        <% msg.each do |m| %>
          <div x-data="{flashVisible: false, flashType: '<%= msg_type %>'}" x-cloak x-show='flashVisible' x-init="() => {flashVisible=true; setTimeout(() => {flashVisible=false}, 2500)}" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
              x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
              x-transition:leave="transition ease-out duration-300"
              x-transition:leave-start="transform opacity-100"
              x-transition:leave-end="transform opacity-0">
            <div class="rounded-lg shadow-xs overflow-hidden">
              <div class="p-4">
                <div class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        x-bind:class="{'text-green-400': flashType == 'success', 'text-red-600': flashType == 'error', 'text-red-600': flashType == 'alert', 'text-green-600': flashType == 'notice'}">
                      <path x-show="flashType == 'success'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      <path x-show="flashType == 'alert'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                      <path x-show="flashType == 'error'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                      <path x-show="flashType == 'notice'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </div>
                  <div class="ml-3 w-0 flex-1 pt-0.5">
                    <p class="text-sm leading-5 font-medium text-gray-900">
                      <%= m %> 
                    </p>
                  </div>
                  <div class="ml-4 flex-shrink-0 flex">
                    <button x-on:click="flashVisible = false" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
                      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    <% end %>  
    </div>
  </div>
<% end %>

Apologies for the cluttered html, but it's working for all my other flash messages appropriately.

[carlosantoniodasilva]

@simonsapiel thanks for sharing these extra bits... like I mentioned before, there's no flash messages supposed to be shown for signup errors, they're just model validation errors. (which is different than sign in)

Can you try displaying all errors on your form object (i.e. the resource) with something like this?

  <%= render "devise/shared/error_messages", resource: resource %>

[simonsapiel]

@carlosantoniodasilva Adding this the errors show up as

The first sentence is just the usual error message in my current locale. 4 fields as I left all the 4 fields blank. So the issue I'm having seems not to be related to the new upgrade, but rather than the sign up form not supposed to be showing any flash messages? Is there documentation somewhere on how I could display these errors as flash messages so that I could render them with the partial like I have on the sign in page?

[simonsapiel]

Alright, I managed to get the wanted functionality by

  def create
    super do |user|
      unless user.persisted?
        clean_up_passwords user
        set_minimum_password_length
        redirect_back(fallback_location: root_path, alert: user.errors.full_messages)
        return
      end
    end
  end

not sure if this is a good way to go though.

[carlosantoniodasilva]

the sign up form not supposed to be showing any flash messages?

Exactly... The sign in page is the one that's actually "different", in that it displays a flash message for invalid attempts. The sign up form is much like any other form, in which the attributes will have errors from the validations added to them, and you can display them however you'd like. (like any other forms on your app would, for instance -- inline, as a group of messages at the top, etc.)

If you want to turn those into a flash message, I suppose you could override the create action and add a flash, with something like: (untested)

def create
  super do |resource|
    unless resource.persisted?
      flash.now[:alert] = resource.errors.full_messages
    end
  end
end

[carlosantoniodasilva]

@simonsapiel your solution should work as well for the flash, but you might be able to skip the redirecting as that would probably lose the user context (i.e. input values that the user typed, etc.).