Ruby on Rails: campos customizados na edição de usuário do Devise

A gem do Devise auxilia na autenticação de usuários para aplicações Ruby on Rails e é comumente a opção da maior parte dos desenvolvedores. Sua instalação e configuração é trivial e intuitiva, entretanto algumas excessões de caso de uso requerem um conhecimento mais profundo do funcionamento da gem. Em um exemplo desses casos, suponha que você quer adicionar um atributo customizado ao model User para armazenar o idioma de preferência do usuário e reaproveitar a estrutura de views, rotas e métodos já implementados. Nesse caso, é necessário sobrescrever a view e os parâmetros permitidos pelo strong params.

Sobrescrevendo os parâmetros do update

O Devise usa o helper  devise_parameter_sanitizer  para sanitizar os parâmetros. Para passar parâmetros personalisados, você pode adicionar ao ApplicationController um callback para configurar os parâmetros permitidos. No exemplo utilizado, ficaria da seguinte forma:

O método permit recebe 2 parâmetros:

• O primeiro parâmetro define a ação em questão. Como o usuário definir seu idioma é uma ação de atualização da conta, utilizamos :account_update . Se fosse o caso de uso fosse no ato de registro, utilizaríamos :sign_up .
• O segundo parâmetro define a lista de atributos extras permitidos para a ação.

Sobrescrevendo a view de edição

Para incluir o atributo customizado no formulário de edição da conta, é necessário sobrescrever a view do devise. Para gerá-las na sua pasta app  para edição, execute o comando abaixo:

$ rails generate devise:views

1	$ rails generate devise:views

A partir dessa geração, você poderá localizar o arquivo que vamos editar em app/views/devise/registrations/edit.html.erb . Vamos adicionar um select com as opções de idioma pro usuário, ficando dessa forma:

<h2>Edit <%= resource_name.to_s.humanize %></h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div> <% end %> <div class="field"> <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br /> <%= f.password_field :password, autocomplete: "new-password" %> <% if @minimum_password_length %> <br /> <em><%= @minimum_password_length %> characters minimum</em> <% end %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "new-password" %> </div> <div class="field"> <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br /> <%= f.password_field :current_password, autocomplete: "current-password" %> </div> #Adicionando o campo de idioma <div class="field"> <%= f.label :current_locale %> <%= f.collection_radio_buttons :current_locale, [['es', 'Espanhol'] ,['en', 'Inglês'], ['pt-BR','Português(BR)']], :first, :last, item_wrapper_tag: :div %> </div> <div class="actions"> <%= f.submit "Update" %> </div> <% end %> <h3>Cancel my account</h3> <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p> <%= link_to "Back", :back %>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<h2>Edit <%= resource_name.to_s.humanize %></h2>   <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>   <%= devise_error_messages! %>     <div class="field">     <%= f.label :email %><br />     <%= f.email_field :email, autofocus: true, autocomplete: "email" %>   </div>     <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>     <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>   <% end %>     <div class="field">     <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />     <%= f.password_field :password, autocomplete: "new-password" %>     <% if @minimum_password_length %>       <br />       <em><%= @minimum_password_length %> characters minimum</em>     <% end %>   </div>     <div class="field">     <%= f.label :password_confirmation %><br />     <%= f.password_field :password_confirmation, autocomplete: "new-password" %>   </div>     <div class="field">     <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />     <%= f.password_field :current_password, autocomplete: "current-password" %>   </div>     #Adicionando o campo de idioma   <div class="field">     <%= f.label :current_locale %>     <%= f.collection_radio_buttons :current_locale, [['es', 'Espanhol'] ,['en', 'Inglês'], ['pt-BR','Português(BR)']], :first, :last, item_wrapper_tag: :div %>   </div>     <div class="actions">     <%= f.submit "Update" %>   </div> <% end %>   <h3>Cancel my account</h3>   <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>   <%= link_to "Back", :back %>

Isso deve ser suficiente para permitir que o usuário atualize sua preferência de idioma. O helper que fornece o link para essa view é o edit_user_registration_path . Para as versões mais recentes do Rails/Devise, isso deve ser suficiente para obter o resultado esperado. Em caso de dúvidas ou caso queira obter as descrições completas, a documentação do Devise é uma boa referência.

Se liga aí, porque é a hora da revisão

Para permitir a edição da conta de usuário com atributos customizados, são necessárias basicamente duas ações: a sobrescrita dos parâmetros permitidos e a sobrescrita do formulário de edição para incluir o(s) novo(s) atributo(s). O Devise sugere essa sobrescrita no ApplicationController , mas outra opção seria gerar o Devise::RegistrationsController  e sobrescrever o método devise_parameter_sanitizer para obter o mesmo resultado. Quaisquer dúvidas ou sugestões, utilize a área de comentários ou entre em contato!