devise Invalid Email or password - ruby-on-rails

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

Related

Hotwire rails app: redirect to external service fails

I am integrating discourse single sign on with hotwire rails application, everything works fine till redirection, when it redirects I see there is CORS issue browser, ofcourse its turbo request so it attempts to fetch response from give URL so it throws CORS error, How we can do actual redirection here?.
def sso
secret = "572890bb92bbef8c4634c1bf"
sso = SingleSignOn.parse(request.query_string, secret)
sso.email = current_user.email # from devise
sso.name = current_user.name # this is a custom method on the User class
sso.username = current_user.username # from devise
sso.external_id = current_user.id # from devise
sso.sso_secret = secret
redirect_to sso.to_url("https://xxxxxxxx/session/sso_login")
end
Edit(1)
<main class="main-content">
<div class="d-flex justify-content-center">
<div>
<div class="mt-48 py-48 px-md-48 px-32 border-radius-lg log-in-card box-shadow-05">
<h4 class="font-size-24 text-black font-weight-400 mb-0">Member Login</h4>
<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: 'mt-48'}) do |f| %>
<div class="form-group mb-0">
<%= f.label :email, class: "font-weight-500 font-size-14 text-black" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control-lg form-control' %>
</div>
<div class="form-group position-relative mt-32">
<%= f.label :password, class: "font-weight-500 font-size-14 text-black" %>
<%= f.password_field :password, autocomplete: "current-password", class: 'form-control-lg form-control' %>
<div class="position-absolute eye-icon"><i class="far fa-eye-slash font-size-14 text-black"></i></div>
</div>
<div class="d-flex flex-column align-items-center mt-32">
<%= f.submit "Login", class: 'btn btn-brand-primary py-12 px-48 text-decoration-none' %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forget password?", new_password_path(resource_name), class: 'text-decoration-none text-brand-primary font-weight-600 font-size-14 mt-32' %>
<% end %>
</div>
<% end %>
</div>
<div class="d-flex justify-content-center mt-48">
<span class="text-black font-weight-500 font-size-14 text-decoration-none">Not a member?</span>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Create Account", new_registration_path(resource_name), class: 'text-brand-primary font-weight-600 font-size-14 text-decoration-none ml-8' %>
<% end %>
</div>
<div class="d-flex flex-md-row flex-column align-items-center justify-content-center mt-48 mb-96 pb-md-64">
<span class="text-black font-weight-500 font-size-14 text-decoration-none">Didn't receive confirmation
instructions?</span>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Request again", new_user_confirmation_path(resource_name), class: 'text-brand-primary font-weight-600 font-size-14 text-decoration-none ml-8'%>
<% end %>
</div>
</div>
</div>
</main>
I have used data-turbo="false" in signin form, it will send HTML request to backend because of that when I do redirect it will redirect the whole page. Thanks
https://turbo.hotwire.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms

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.

Html5 - W3C validation errors - Rails(Embedded Ruby)

Kindly guide me to solve these errors in sign up and login views
<div class="jumbotronsignup">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 labelcolor">
<h3>SIGN UP</h3>
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :name %>
<%= f.text_field :name, autofocus: true , class: 'form-control' %>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
<%= f.label :password_confirmation, "Password Confirmation" %>
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %>
<div>
<%= f.label :is_female, "Gender" %>
<%= f.select :is_female, User::GENDER_TYPES , {}, { :class => 'form-control' } %>
</div>
<div>
<%= f.label :date_of_birth, :class=>'singleline' %>
<%= f.date_select :date_of_birth, { :start_year => 1920, :end_year => 2010 }, :class => 'form-control date-select datetest' %>
</div>
<div>
<%= f.label :avatar , "Profile Picture" %>
<%= f.file_field :avatar, accept: 'image/jpeg,image/gif,image/png,image/tiff', class: 'form-control' %>
</div>
<div class="row text-center">
<%= f.submit "Create my account", class: "btn mybtn-primary btn-lg" %>
</div>
<% end %>
</div>
</div>
</div><!-- end of container -->
</div><!-- end of jumbotron -->
How can I solve this error?
And this is my login page
<div class="jumbotronsignup">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 labelcolor">
<h3>LOG IN</h3>
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :email %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= link_to "(forgot password)", new_password_reset_path %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :remember_me, class: "checkbox inline" do %>
<%= f.check_box :remember_me %>
<span>Remember me on this computer</span>
<% end %>
<div class="row text-center">
<%= f.submit "Log in", class: "btn mybtn-primary btn-lg" %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
<% end %>
</div>
</div>
</div><!-- end of container -->
</div><!-- end of jumbotron -->

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>

submit button in rails app is not using twitter bootstrap styling

I have a view with a form_for and it has a submit button. I would like the submit button to be styled using twitter bootstrap rails gem (which I have successfully installed into the rails project.) However the the button isn't being styled for whatever reason, and the text in the button appears different from I specified in the argument.
The source for the view, new.html.erb
<div id="sign_up">
<h1>Sign Up</h1>
<%= form_for #user do |f| %>
<% if #user.errors.any? %>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<% #user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<!-- <%= f.label :email %> --><br />
<%= f.text_field :email, :class => 'input-xlarge', placeholder: 'email' %>
</div>
<div class="field">
<!-- <%= f.label :password %>--><br />
<%= f.password_field :password, :class => 'input-xlarge', placeholder: 'Password' %>
</div>
<div class="field">
<!-- <%= f.label :password_confirmation %>--><br />
<%= f.password_field :password_confirmation, :class => 'input-xlarge', placeholder: 'Password confirm' %>
</div>
<div class="actions"><%= f.submit nil, class: 'btn btn-large' "Sign Up" %></div>
<% end %>
</div>
Right now the form looks like the following,
<%= f.submit nil, class: 'btn btn-large' "Sign Up" %>
Should be:
<%= f.submit "Sign Up", class: 'btn btn-large' %>

Resources