I'm new to rails and I am trying to set modal for user login/registration. I am able to get the modal to work but I canot figure out how to get the devise registraion to work in the modal. I even tried createing a separate users/_new.html.erb file with my own registration form but when I try to submit from the modal I get an error no route matches post/. I tried change the devise/registration/new.html.erb form to _new.html.erb but when I try to load the page I get an error:
ActionView::Template::Error (undefined local variable or method `resource' for #<#Class:0x000000000ebf9b50:0x000000000ec0de70> Did you mean? rescue):
The above error happens when I render the standard devise/registrations/new.html.erb form. I converted it to a partial and move it to the shared folder.
<h1><%= t('.sign_up') %></h1>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, autocomplete: 'current-password', class: 'form-control' %>
<% if @minimum_password_length %>
<small class="form-text text-muted"><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></small>
<% end %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: 'current-password', class: 'form-control' %>
</div>
<div class="form-group">
<%= f.submit t('.sign_up'), class: 'btn btn-primary' %>
</div>
<% end %>
<%= render 'devise/shared/links' %>
The other way I tried it was posted the entire form in the modal on the nav page, but when I click submit, it goes to localhost.3000 and I get an error that no routes match post "/". That form is, sorry, it's long, I have two forms in the modal:
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog modal-lg border-0">
<div class="modal-content border-0">
<div class="modal-content-head">
<h5 class="modal-title" id="login">Member Login</h5>
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-5">
<div class="row border-0">
<div class="col-12 modal-content-subhead">
Login
</div>
</div>
<div class="row">
<div class="col-12 modal-content">
<%= form_with(model: @user, class: "shadow p-3 mb-3 rounded text-light", local: true) do |f| %>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_email.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_locked.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Enter your password" %>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-12">
<%= f.submit "Log in", class: "btn btn-outline-light btn-lg" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
<div class="col-1 text-center">
<%= image_tag("layout/login/login_divider.gif") %>
</div>
<div class="col-sm-12 col-md-5">
<div class="row border-0">
<div class="col-12 modal-content-subhead">
Join
</div>
</div>
<div class="row">
<div class="col-12 modal-content">
<%= form_with(model: @user, class: "shadow p-3 mb-3 rounded text-light", local: true) do |f| %>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.text_field :first_name, class: "form-control shadow rounded", placeholder: "First Name" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.text_field :last_name, class: "form-control shadow rounded", placeholder: "Last Name" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_email.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-1 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_locked.gif") %>
</div>
<div class="col-md-11 col-sm-12">
<%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Enter your password" %>
</div>
</div>
<div class="form-group row justify-content-center">
<div class="col-12">
<%= f.submit "Log in", class: "btn btn-outline-light btn-lg" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-11 text-center">
<%=link_to( image_tag("layout/facebook_login_200_42.gif"), user_facebook_omniauth_authorize_path) %>
</div>
</div>
</div>
</div>
</div>
</div>
---
Here is my routes.rb
~~~code
Rails.application.routes.draw do
devise_for :users, controllers: {omniauth_callbacks: 'omniauth'}
root 'pages#index'
get 'about', to: 'pages#about'
resources :users, param: :username
resources :clubs, param: :club_username
end
I'm happy to create my own or use the devise with some modifications but I just can't figure out how to do either.
Any help would be gretly appreciated.
Thanks,
Scott
I did some more searching and was able to get it to work. I uninstalled devise and tried it but couldn't get it to work so I reinstalled devise and omniauth and find an explanation to incorporating the devise forms into my app.
I installed the devise bootstrap views then in the layouts folder I created a partial named _login_html.erb and copied the login form and the sign upforms side-by-side:
<div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog modal-lg border-0">
<div class="modal-content border-0">
<div class="modal-content-head">
<h5 class="modal-title" id="login">Member Login</h5>
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="row border-0">
<div class="col-12 modal-content-subhead">
Login
</div>
</div>
<div class="row">
<div class="col modal-content">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :remote => true) do |f| %>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_email.gif") %>
</div>
<div class="col-md-10 col-sm-12">
<%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email", :autofocus => true, class: "form-control shadow rounded", placeholder: "Email" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_locked.gif") %>
</div>
<div class="col-md-10 col-sm-12">
<%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Password" %>
</div>
</div>
<% if devise_mapping.rememberable? -%>
<div>
<%= f.check_box :remember_me %> <%= f.label :remember_me, class: "form_small_text" %>
</div>
<% end -%>
<div class="form-group row text-center">
<div class="col-12">
<%= f.submit "Sign in", :class => 'btn reg-submit-btn' %>
</div>
</div>
<div class="modal-footer">
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to t(".forgot_your_password"), new_password_path(resource_name), class: "form_small_text" %><br />
<% end -%>
</div>
<% end %>
</div>
</div>
</div>
<div class="col-sm-12 col-md-1 text-center p-0">
<%= image_tag("layout/login/login_divider.gif") %>
</div>
<div class="col-sm-12 col-md-7">
<div class="row border-0">
<div class="col-12 modal-content-subhead">
Sign-Up
</div>
</div>
<div class="row">
<div class="col modal-content">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), id: "form", :remote => true) do |f| %>
<%= devise_error_messages! %>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
</div>
<div class="col-md-5 col-sm-12">
<%= f.text_field :first_name, class: "form-control shadow rounded", placeholder: "First Name" %>
</div>
<div class="col-md-5 col-sm-12">
<%= f.text_field :last_name, class: "form-control shadow rounded", placeholder: "Last Name" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_email.gif") %>
</div>
<div class="col-md-10 col-sm-12">
<%= f.email_field :email, class: "form-control shadow rounded", placeholder: "Email", :autofocus => true %>
</div>
</div>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<div class="reg_tooltip" data-tooltip="
The club username will be used to easily share your club page on this website.
For example if your club username is my_club the url for your club page on this
site will be www.themathouse.com/clubs/my_club.
">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-diamond" fill="white" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435zm1.4.7a.495.495 0 0 0-.7 0L1.134 7.65a.495.495 0 0 0 0 .7l6.516 6.516a.495.495 0 0 0 .7 0l6.516-6.516a.495.495 0 0 0 0-.7L8.35 1.134z"/>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
</div>
<%= image_tag("layout/login/icon_reg_name_37_33.gif") %>
</div>
<div class="form-check col-md-10 col-sm-12">
<%= f.text_field :username, class: "form-control shadow rounded", placeholder: "Username", id: "username" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_locked.gif") %>
</div>
<div class="col-md-10 col-sm-12">
<%= f.password_field :password, class: "form-control shadow rounded", placeholder: "Password" %>
</div>
</div>
<div class="form-group row">
<div class="col-md-2 col-sm-12 col-form-label p-2">
<%= image_tag("layout/login/icon_reg_locked.gif") %>
</div>
<div class="col-md-10 col-sm-12">
<%= f.password_field :password_confirmation, class: "form-control shadow rounded", placeholder: "Confirm Password" %>
</div>
</div>
<div class="form-group row text-center">
<div class="col-12">
<%= f.submit "Sign up", :class => 'btn reg-submit-btn' %></div></p>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To make it work I added the following code to the helpers_application.
def resource_name
:user
end
def resource
@resource ||= User.new
end
def devise_mapping
@devise_mapping ||= Devise.mappings[:user]
end
I think that's it.