leastbad / optimism

The missing drop-in solution for realtime remote form validation in Rails.
MIT License
361 stars 42 forks source link

Use it on devise forms #33

Closed samuelpares closed 3 years ago

samuelpares commented 3 years ago

Hi guys!

How can I use it on devise new session form (sign in)? Do I have to override session controller? If so, what do I have to do there? And about the view?

leastbad commented 3 years ago

Hi Samuel,

This is my app/controllers/users/registrations_controller.rb:

# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  include Optimism

  before_action :configure_permitted_parameters

  def create
    build_resource(sign_up_params)
    resource.save
    if resource.persisted?
      set_flash_message! :notice, :signed_up
      sign_up(resource_name, resource)
      respond_with resource, location: root_path
    else
      clean_up_passwords resource
      set_minimum_password_length
      broadcast_errors resource, sign_up_params
    end
  end

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

You can adapt this for your sessions controller as well.

Here is the view from my registration template:

<div class="text-center text-md-center mb-4 mt-md-0">
  <h1 class="mb-0 h3">Create an account</h1>
</div>
<%= form_with(model: resource, scope: resource_name, url: registration_path(resource_name), method: :post, class: "mt-4") do |f| %>
  <%= f.container_for :email, class: "form-group mb-4" do %>
    <%= f.label :email, "Your Email" %>
    <div class="input-group">
      <span class="input-group-text"><span class="fas fa-envelope"></span></span>
      <%= f.email_field :email, autocomplete: "email", class: "form-control", placeholder: "example@company.com", autofocus: true, required: true %>
    </div>
    <%= f.error_for :email, class: "input-group" %>
  <% end %>
  <%= f.container_for :name, class: "form-group mb-4" do %>
    <%= f.label :name, "Your Name" %>
    <div class="input-group">
      <span class="input-group-text"><span class="fas fa-user"></span></span>
      <%= f.text_field :name, autocomplete: "given-name", class: "form-control", placeholder: "Helen", required: true %>
    </div>
    <%= f.error_for :name, class: "input-group" %>
  <% end %>
  <div class="form-group">
    <%= f.container_for :password, class: "form-group mb-4" do %>
      <%= f.label :password, "Your Password" %>
      <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %>
      <div class="input-group">
        <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
        <%= f.password_field :password, autocomplete: "new-password", placeholder: "Password", class: "form-control", required: true %>
      </div>
      <%= f.error_for :password, class: "input-group" %>
    <% end %>
    <%= f.container_for :password_confirmation, class: "form-group mb-4" do %>
      <%= f.label :password_confirmation, "Confirm Password" %>
      <div class="input-group">
        <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
        <%= f.password_field :password_confirmation, autocomplete: "new-password", placeholder: "Confirm Password", class: "form-control", required: true %>
      </div>
      <%= f.error_for :password_confirmation, class: "input-group" %>
    <% end %>
  </div>
  <div class="d-grid">
    <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
<% end %>
<div class="d-flex justify-content-center align-items-center mt-4">
  <span class="fw-normal"> Already have an account? <%= link_to "Login here", new_session_path(resource_name), class: "fw-bold" %> </span>
</div>

Note that there is a Discord for support, so that you don't have to open issues if you don't understand something. https://discord.gg/wKzsAYJ