Using Devise and Simple form - ruby-on-rails

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>

Related

Rails 5.1 - text appearing on form field

I'm building out a form on a Rails app and for one of the sections I'm getting some random text in the text field (School Group) and I'm not sure why -
This is the code for the form, am I using the wrong type of field?
<% provide :title, "Add Staff Member" %>
<%= form_for #user do |f| %>
<div class="form-group row">
<%= f.label :firstname, 'First Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :firstname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :nickname, 'Nickname', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :nickname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :surname, 'Last Name', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :surname, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Email Address', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.email_field :email, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :email, 'Send Welcome Email?', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= check_box_tag :send_welcome_email %>
</div>
</div>
<div class="form-group row">
<%= f.label :user_groups, 'School Group', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.text_field :user_groups, class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :timezone, 'Timezone', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.time_zone_select(:timezone, nil, {default: #user.timezone}, {class: 'form-control custom-select'}) %>
</div>
</div>
<hr>
<h2>Create Password</h2>
<p><small>Password must be at least six characters long</small></p>
<div class="form-group row">
<%= f.label :password, 'New Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="form-group row">
<%= f.label :password_confirmation, 'Confirm Password', class: 'col-sm-2' %>
<div class="col-sm-10">
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
</div>
</div>
<div class="actions">
<%= f.submit 'Submit', class: 'btn btn-primary' %>
</div>
<% end %>
The field for school groups can actually be left blank for the benefit of this form but I want the field there. How do I get rid of this text?
it's not some random text it might be a association in your User or #user probably column name is named same as the association name or may be a typeo.

How to use a partial within Devise sign-up?

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 %>

devise edit form with bootstrap

In my edit view, I want to apply bootstrap. However, when replacing...
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<div class="col-md-4"><%= f.label :username %></div>
<div class="col-md-8"><%= f.text_field :username %></div>
</div>
with this...
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<input type="text" class="form-control" name="username" placeholder="Username" value="<%= f.text_field :username %>">
</div>
</div>
</div>
I get this as output
I have tried many alternatives to include erb but don't understand the issue. How should I include the field in my edit forms?
you can do all the things with rails.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>
For more detail Please visit this link
http://apidock.com/rails/ActionView/Helpers/FormHelper/text_field
If you want to use add-on you can as below
<div class='input-group' >
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
Try this instead
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="sr-only" for="username">Username</label>
<%= f.text_field :username, class: "form-control", placeholder: "Username" %>
</div>
</div>
</div>
I would suggest using a gem called simple_form, it's made by the creators of Devise and works nicely with Bootstrap. It also has nice validation errors.
https://github.com/plataformatec/simple_form
Here's an example:
= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
.form-inputs
= f.input :email, required: false, autofocus: true, placeholder: 'Email'
= f.input :password, required: false, placeholder: 'Password'
= f.input :remember_me, as: :boolean, label: 'Remember Me' if devise_mapping.rememberable?
.form-actions
= f.button :submit, 'Sign in', class: 'btn-block btn-success'
%br
= link_to 'Forgot your password?', new_user_password_path
The code above will automatically add any bootstrap classes and labels...etc

Usernames not getting saved on signup

I'm using Devise to manager users and i'm getting a strange error. I have the categories of email, username, and password on my signup page, the email and password get passed to the database just fine but i can't get the username to save there. If i edit the user after signup, the username displays just fine.
Here is my signup page code:
<div class="panel panel-default">
<div class="panel-heading">
<h1>Sign up</h1>
</div>
<div class="panel-body">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :username %>
<%= f.text_field :username, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<%= f.password_field :password, class: "form-control" %>
</div>
<div class="form-group">
<%= f.submit "Continue" %>
</div>
<% end %>
</div>
<div class="panel-footer">
<%= render "devise/shared/links" %>
</div>
</div>
Am i missing putting in username somewhere?
Solved this by adding
devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:username, :email, :password, :password_confirmation) }
to my applications controller

Display error messages at the bottom of form submit

Is there a twitter boot strap class to display all validation error messages at the bottom of the form submit button?
<div class="row-fluid">
<div class="span12">
<div class="devise-body">
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => { :class=>'control-group error'} ) do |f| %>
<%= f.error_notification %>
<div class="controls">
<div class="row-fluid">
<div class="span6">
<%= f.input :first_name,:required=>true,:autofocus => true %>
</div>
<div class="span6"><%= f.input :last_name,:required=>true%>
</div>
</div>
<div class="row-fluid">
<div class="span6"><%= f.input :company %></div>
<div class="span6"><%= f.input :title %></div>
</div>
<div class="row-fluid">
<div class="span6"> <%= f.input :email, :required => true %></div>
<div class="span6"><%= f.input :phone_number %></div>
</div>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
</div>
<div class="form-actions" >
<!-- #class="form-actions" -->
<%= f.button :submit, "Sign up" ,:class => 'btn'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
If I were you I'd use their alert classes:
http://twitter.github.com/bootstrap/components.html#alerts

Resources