Customizing Devise sign_in authentication with bootstrap - ruby-on-rails

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.

Related

Rails/Devise. Include captcha response param within sign_in process

Without making a custom Sessions controller that inherits from the hidden devise controller, I want to figure out a way of adding the parameter, "g-recaptcha-response" to be included in the authenticating process from the default devise view.
Here's my view with the recaptcha figure included. When I click on it I do get a response when my app calls the SessionController#create method. I'm trying to figure out how to make this process detect that the captcha form has been clicked and authenticates the user logging in because of it.
<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, autocomplete: "email" %>
</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="g-recaptcha" data-sitekey="6LeeL5gUAAAAADbq0vt4d9biAs8oegkPx9ttUkKb"></div>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<%= link_to 'Sign Up', new_user_registration_path %>
In essence, if a bot were to attempt automatically signing in repeatedly, the devise controller would see that the captcha was not clicked and stops them from trying to log in.

devise Invalid Email or password

After adding styling to the devise pages, the logins are not working.
Signup redirects to login and login says Invalid Email or password.
Here is the sessions/new
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="access_social">
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: "button button--facebook button--full-width" %>
<% end -%>
<% end -%>
</div>
<div class="oauth__divider"><span>OR</span></div>
<div class="form-group">
<%= f.label :email %>
<br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :password %>
<br />
<%= f.password_field :password, autocomplete: "off", class: "form-control" %>
</div>
<div class="clearfix mb-2">
<div class="form-check">
<%= f.check_box :remember_me,class: "form-check-input", as: :boolean if devise_mapping.rememberable? %>
<label class="form-check-label">Remember me</label>
</div>
</div>
<div class="actions">
<%= f.submit "Sign in", class: "button button--primary button--full-width" %>
</div>
<div class="text-center mt-2">
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %>
<br />
<% end -%>
</div>
<% end %>
Controllers routes and config have not been touched since changing the UI either

Form error because of rendering form in modal

Rails project with materialize framework, what I am trying to do is rendering a form in a modal.
Therefore I have in the application.html.erb:
<!-- Modal Structure -->
<div id="signupmodal" class="modal">
<div class="modal-content">
<%= render template: "users/new" %>
</div>
</div>
The rendered template looks like this:
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="row col s6">
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
</div>
</div>
<%= f.submit 'Create my account', class: "btn waves-effect waves-light orange darker-1" %>
<% end %>
But because the rendered template has its own controller, I get the
First argument in form cannot contain nil or be empty
error, because it doesn't know the #user in the application controller. What is the best way to avoid this error?

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>

Bootstrap-form gem, strange error

Here is the code for a form created with the bootstrap-form gem for rails.
<%= bootstrap_form_tag(user_sessions_path) do |f| %>
<div class="field">
<%= f.label_tag :email %><br />
<%= f.text_field_tag :email %>
</div>
<div class="field">
<%= f.label_tag :password %><br />
<%= f.password_field_tag :password %>
</div>
<div class="actions">
<%= f.submit_tag "Login" %>
</div>
<% end %>
This throws an error: no implicit conversion of symbol to string on the first line of the form containing the user sessions path. Not sure why this is happening
I believe you have to be explicit about the url. Like this:
<%= bootstrap_form_tag(url: user_sessions_path) do |f| %>
<div class="field">
<%= f.label_tag :email %><br />
<%= f.text_field_tag :email %>
</div>
<div class="field">
<%= f.label_tag :password %><br />
<%= f.password_field_tag :password %>
</div>
<div class="actions">
<%= f.submit_tag "Login" %>
</div>
<% end %>
Check the source code. You can see as how the bootstrap_form_tag method, expects a Hash parameter:
def bootstrap_form_tag(options = {}, &block)
options[:acts_like_form_tag] = true
bootstrap_form_for("", options, &block)
end

Resources