Rails 4 Bootstrap 3 Devise Login Modal

Question

I'm trying to set up a modal so when a user clicks login or signup a pop over modal will appear allowing them to sign in through devise or fb/twitter.

The app I'm working with is using devise, omniauth, coffeescript. I've spent a great deal of time following tutorials and changing my code a million times and can't figure it out..

In my bootstrap.css.less file I've noticed it's already importing bootstrap/modals.less

# bootstrap.css.less
@import "bootstrap/modals.less"

layout application.html.slim

 li.profile-link-container
   = link_to "Login", new_user_session_path, data: { toggle: "modal", target: '#loginModal' }

My User Controller

#UsersController.rb
def create
if user_signed_in?
  render(:json => @user = current_user) and return
end

outcome = CreateUser.run(params[:user])

if outcome.success?
  sign_in(@user = outcome.result)
  render :json => @user
else
  render :json => {
    success: false,
    errors: outcome.errors.message
  }, status: 422
end
end

And finally my devise new view

#app/view/devise/new.html.slim
.modal-header
  button.close aria-hidden="true" data-dismiss="modal" type="button"
  h3#myModalLabel Modal header
.container style="padding-top:80px"
  .panel.panel-default
    .panel-heading
      h2.panel-title
        | Sign up
    .panel-body
    .modal-body
      = form_for(resource, html:{role:"form"}, :as => resource_name, :url => registration_path(resource_name)) do |f| 
        = devise_error_messages!

        .form-group
          = f.label :full_name
          = f.text_field :full_name, :auto_focus => true, :placeholder=>"Enter your full name", :class => "form-control"
        .form-group
          = f.label :email
          = f.text_field :email, :placeholder=>"Enter your E-mail", :class => "form-control"
        .form-group
          = f.label :password
          = f.password_field :password, :placeholder => "Enter your password", :class => "form-control"
        .form-group
          = f.label :password_confirmation
          = f.password_field :password_confirmation, :placeholder => "Enter your password again", :class => "form-control"

        .form-group
          = f.submit 'Sign up', :class => "btn btn-success btn-large"
    .modal-footer
      button.btn aria-hidden="true" data-dismiss="modal"  Close
      button.btn.btn-primary Save changes    
    .panel-footer
      = render "devise/shared/links"

    
    

Answer 1

From what I can tell, it looks like your trigger button is in layout application.html.slim layout, and your modal is in #app/views/devise/new.html.slim. They need to be in the same view unless you want to use ajax or something. When you click the trigger, it's looking for a modal in that already loaded view that has the same id as the buttons target.

• Consider making /devise/new.html.slim your landing page. If every user has to sign-in to get anywhere in the app, doesn't it make sense? Trying to call a devise view within another controller is going to create some problems down the road for you I think. You would have to use ajax or something to accomplish this.

• You need a modal-fade wrapper div on your modal, and give it the id you specify in your trigger button (#loginModal). It looks like you're missing another couple of layers in the modal as well. Use the live demo here as a guide.

• Your trigger "button" should really be a button I think to get the proper Bootstrap behavior.