How to use a partial within Devise sign-up? - ruby-on-rails

My Devise sign-up form contains more than a simple email. It includes 8 fields and a drop-down. I'd like to use a partial to define the layout only once for sign-up ad user profile update. So I created the partial which looks like:
<div class="col-md-3 col-md-offset-2">
<div class="field">
<%= f.label :login %><br />
<%= f.text_field :login, autofocus: true %>
</div>
</div>
<div class="col-md-3">
<div class="field">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
</div>
<div class="col-md-3">
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
</div>
and the "new.html.erb" view, which looks like:
<% provide(:title, t('Registration')) %>
<h2>Please sign up</h2>
<div class="container">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="row">
<div class="col-md-3 col-md-offset-2">
<%= devise_error_messages! %>
</div>
</div>
<div class="row">
<%= render "devise/shared/user", locals: {f: f}%>
<div class="col-md-3">
<div class="actions">
<br/>
<%= f.submit "Sign up" %>
</div>
</div>
</div>
<% end %>
<div class="row">
<div class="col-md-3 col-md-offset-2">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
Unfortunately, the f variable is not passed to the partial; I get this error:
Showing /home/fred/55Projets/development/Stairs/app/views/devise/shared/_user.html.erb where line #4 raised:
undefined local variable or method `f' for #<#<Class:0x007fa656e26f90>:0x007fa6448a34e0>
Extracted source (around line #4):
2 <div class="col-md-3 col-md-offset-2">
3 <div class="field">
4 <%= f.label :login %><br />
5 <%= f.text_field :login, autofocus: true %>
6 </div>
7 </div>
Trace of template inclusion: app/views/devise/registrations/new.html.erb
Thanks for your help!

Try passing it directly
<%= render "devise/shared/user", f: f %>

Related

How to save additional informations from Devise form?

I have a application controller like this :
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:first_name, :last_name, :description, :city_id, :golf_level])
end
end
and a form sign up with device like this :
<h2 class='container'>Inscription</h2>
<div class="tab-pane show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
<div class="component-example">
<div class='container'>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class='row'>
<div class="col-md-6">
<%= render "devise/shared/error_messages", resource: resource %>
<div class='field form-group'>
<%= f.label 'Prénom' %><br>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Nom' %><br>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Niveau' %>
<%= select_tag(:golf_level, options_for_select([['débutant', 'débutant'], ['intermediaire', 'intermediaire'], ['confirmer', 'confirmer']])) %>
</div>
</div>
<div class="col-md-6">
<div class="field form-group">
<%= f.label 'Mot de passe' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label 'Confirmer mot de passe' %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control' %>
</div>
<div class='field form-group'>
<%= f.label 'Ville' %>
<%= select_tag(:city_id, options_for_select( City.all.collect { |city| [city.name, city.id] }, {target_blank: true} )) %>
</div>
<div class='field form-group'>
<%= f.label 'Description'%>
<%= f.text_area :description, size: "60x5", class: 'form-control'%>
</div>
</div>
<div class="actions">
<%= f.submit "Inscription", class: 'btn btn-primary' %>
</div>
<% end %>
<button class='btn btn-primary' style="margin-left:20px;"><%= render "devise/shared/links" %></button>
</div>
</div>
</div>
</div>
My problem is maybe stupid but : When i create a User with this form the selects tags golf_level and city_id are not save in db but all other yes. In device doc I don't find special way for select form.
Ok, your parameters are passed, but not within proper namespace. Instead of select_tag you should use f.select method:
<%= f.select(:city_id, options_for_select(City.pluck(:name, :id), target_blank: true )) %>
And likewise for the second of your params.

Customizing Devise sign_in authentication with bootstrap

I am using Devise for authentication, but I want to use my own form input.
I have checked that Devise's sign_in works. I was able to login with this on localhost:3000/users/sign_in :
<h2>Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
I created on index page this form, but I could not get it to work (I was not able to login with the code below):
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control" id="user_email" placeholder="email?">
</div>
<div class="form-group">
<label for="exampleInputPassword2">/</label>
<input type="text" class="form-control" id="user_password" placeholder="password?">
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
I read formhelper on rubyonrails.org website and bootstrap's css page but it still did not clear up how to use bootstrap's form.
Here are some of the things I don't understand:
The following code <input type="email" class="form-control" id="user_email" placeholder="email?">, what should I put for type= and id=? How can I tell bootstrap's form to submit a post request for my session? I can somewhat read and interpret Devise' form: <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> by looking at it: resource is :user, the url is being sent to user's session. I could not find information online about bootstrap's form. How can I integrate my own custom form using bootstrap with Devise' session?
Your problem has not really something to do with Bootstrap at first. I would try to get the form working, before you add bootstrap.
The from could be created like this:
<%= form_for(:user, :url => session_path(:user)) do |f| %>
<%= f.text_field :email %>
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
<%= f.submit 'Sign in' %>
<%= link_to "Forgot your password?", new_password_path(:user) %>
<% end %>
Now you add some bootstrap flavor to this form:
<%= form_for(:user, :url => session_path(:user)) do |f| %>
<div class="form-group">
<%= f.text_field :email, placeholder: 'example#example.com' %>
</div>
<div class="form-group">
<%= f.password_field :password %>
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<%= f.submit 'Sign in', class: 'btn btn-primary' %>
<%# link_to "Forgot your password?", new_password_path(:user) %>
<% end %>
Most of the information I is from this page of the devise wiki.

My rendered partial '_form' appears, but is not submitting

Ruby 2.1.5 on Rails 4.2.0:
I have two directories. One directory is a rails-generate scaffold named 'inqueries'. The other directory is named 'welcome', which only houses a landing paged named index.html.erb. The inquery form works & submits fine as long as I'm using the view from the actual 'inquery' scaffold/directory.
I am able to render the inquery _form on my index.html.erb landing page using :
<%= render partial: "inqueries/form", locals: {inquery: #Inquery} %>
However, this JUST renders the form. When I hit the submit button, no errors, flash messages, or inquery is submitted. It is complete non-action, including on my rails terminal.
How can I properly make the form work on my landing page?
Here is my welcome_controller.rb file. This controller handles the landing page where I am trying to render the inquery scaffold's form:
class WelcomeController < ApplicationController
def index
#inquery = Inquery.new
render layout: false
end
end
This is my new rails scaffold-generated method in the inqueries_controller.rb:
def new
#inquery = Inquery.new
respond_with(#inquery)
end
Sorry, Here is the Inquery _form itself:
<%= form_for(#inquery) do |f| %>
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<%= f.submit t('.submit'), class: "btn btn-primary" %>
<% end %>
EDIT 2: I saw there were a couple of suggestions with the logic. I have simplified the partial just to see if I could get it to work and it still does not submit properly outside of its directory. I am new to rails, do I need to render a new action in the second directory that I am calling it into?
Your partial has 2 forms. The one which submits to inqueries#create is an empty form with no submit button, the other which has no action contains the text fields and the submit action.
The form_for tag will create the html tags, you dont need to specify them again.
Tip - Switch to haml. You won't ever look back at erb :)
This should work (not tested) -
<%= form_for(#inquery) do |f| %>
<div id="error_explanation">
<% if #inquery.errors.any? %>
<h2>
<%= pluralize(#inquery.errors.count, "error") %> prohibited this inquery from being saved:
</h2>
<ul>
<% #inquery.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
<% end %>
</div>
<br />
<div class="col-lg-12">
<div class="form-group col-lg-4">
<%= f.label t('.name') %><br>
<%= f.text_field :name, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.email') %><br>
<%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-group col-lg-4">
<%= f.label t('.phone') %><br>
<%= f.text_field :phone, class: "form-control" %>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<%= f.label t('.message') %><br>
<%= f.text_area :message, rows: 8, class: "form-control"%>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<%= f.submit t('.submit'), class: "btn btn-primary" %>
</div>
</div>
<% end %>
Figured it out. Foolish error,
My welcome page is a bootstrap theme that I hadn't fully gone over. I had imported some unnecessary javascript files that I think were blocking the form.

Devise sign in and sign up submit button disabled when accessing through navbar link rails 4

The sign-up button and sign in button of my devise form is disabled when I try to access both forms via the navbar links. To work I need to refresh the form. Any help ? Thanks in advance
<div class="panel panel-default form-signin col-md-offset-2">
<div class="panel-heading">
<h2 class="panel-title">Sign in</h2>
</div>
<div class="panel-body">
<%= simple_form_for(resource, defaults: { input_html: { class: 'form-control' } }, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<% if devise_mapping.rememberable? -%>
<%= f.check_box :remember_me %> <%= f.label :remember_me %>
<% end -%>
</div>
<div class="panel-footer">
<%= f.submit 'Sign in' %>
<% end %>
</div>
</div>
</div>
<div class="col-md-offset-2">
<%= render "devise/shared/links" %>
</div>

Using Devise and Simple form

I am using devise in my rails app, I converted the devise views to use simple form. When I attempt to sign up with an incorrect password format the flash messages for the password do not appear. Flash messages appear for ever other field. Does anyone know how to fix this problem.
<div class="container">
<div class="panel small-5 small-centered columns">
<div class="row">
<h2>Sign Up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => {:multipart => true}) do |f| %>
<%= f.input :email, label: "E-mail", :autofocus => true %>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.label :password, label: "Password" %>
<%= f.password_field :password %>
</div>
<div class="small-6 columns">
<%= f.label :password_confirmation %>
<div id="password-confirm">
<%= f.password_field :password_confirmation %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.input :last_name, label: "First Name" %>
</div>
<div class="small-6 columns">
<%= f.input :first_name, label: "Last Name" %>
</div>
</div>
</div>
<div class="row">
<div class="sign-up">
<%= f.label "Profile Photo" %><br>
<%= f.file_field :avatar, label: "Profile Photo" %>
<%= f.input :twitter_handle, label: "Twitter Url" %>
<%= f.input :linked_in_url, label: "Linked In Url" %>
<%= f.input :about_me, label: "About You (500 character max)" %>
<%= f.submit "Sign up", class: "button" %>
<% end %>
</div>
</div>
</div>
</div>

Resources