Simple_form text boxes are extremely long - ruby-on-rails

Using simple_form and bootstrap, and I'm having trouble getting the input boxes to size correctly. They're different, overly long, lengths. I can hardcode them in the CSS, but then they're non-responsive. (I tried max-width, but they end up a fixed width.) Also using the devise gem for user authentication.
Page Code:
<div class="booyah-box col-xs-10 col-xs-offset-1">
<h2>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :email, required: true, autofocus: true %>
<%= f.input :password, required: true, hint: ("#{#minimum_password_length} characters minimum" if #validatable) %>
<%= f.input :password_confirmation, required: true %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign in", :class => 'btn btn-primary' %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>

<div class="row">
<h2>Sign up</h2>
<div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-group">
<%= f.input :email, required: true, autofocus: true, class: "form-control" %>
// you can add class **col-lg-6** in any input field for maintaining the width
<%= f.input :password, required: true, hint: ("#{#minimum_password_length} characters minimum" if #validatable), class: "form-control" %>
<%= f.input :password_confirmation, required: true, class: "form-control" %>
</div>
<div class="form-group">
<%= f.button :submit, "Sign in", :class => 'btn btn-primary' %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>

Related

How can i add an FontSwesome icon in the same line?

I use my rails with devise (login system). That works. Now I will add in FA-Icon to as my label.
This is my target:
But this my current state (the hook is my test icon):
That is my code:
<div class="container">
<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>
<h2 class="form-signin-heading">Please sign in</h2>
<%#= f.label :email, 'Email Address', class: 'sr-only' %>
<i class="fa-solid fa-check"></i>
<%= f.email_field :email, autofocus: true, class: 'form-control', placeholder: 'Email Address' %>
<%= f.label :password, 'Password', class: 'sr-only' %>
<%= f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="checkbox">
<label><%= f.check_box :remember_me %> Remember me</label>
</div>
<% end %>
<%= f.button "Sign in", class: 'btn btn-lg btn-primary btn-block' %>
<% end %>
<%= render "devise/shared/links" %>
</div>
Can someone give me a hint, what i am doing wrong?

Devise login always returns "Invalid Email or Password", even when they're right

I know it's apparently a frequent question (saw many replies here), but I couldn't fix it yet.
So.. I'm building a simple blog app with devise gem, but when I try to log in, I always get the "Invalid Email or password." message :/
Actually, this is my first real project with rails, so sometimes I'm kinda lost with routes, and etc... By the way, I would say the error is probably being caused by the routes file.
Please, I'd appreciate some help :)
My routes.rb file:
Rails.application.routes.draw do
root 'posts#index'
resources :posts do
resources :comments
end
devise_for :users
devise_scope :user do
get "login", :to => "devise/sessions#new"
get "logout", :to => "devise/sessions#destroy"
end
My sessions/new.html.erb file:
<div class="container mt-3 pb-3">
<div class="row">
<div class="col-lg-6 border">
<h1>Login</h1>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= label_tag :email, "Email" %>
<%= text_field_tag :email, "", autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= label_tag :password, "Senha" %>
<%= password_field_tag :password, "", :class =>"form-control" %>
</div>
<div class="form-group">
<%= submit_tag "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
My registrations/_form.html.erb:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :username, "Nome" %>
<%= f.text_field :username, autofocus: true, autocomplete: "username", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :email, "Email" %>
<%= f.email_field :email, autocomplete: "email", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password, "Senha" %>
<% if #minimum_password_length %>
<em>(No mínimo <%= #minimum_password_length %> caracteres)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation, "Confirme sua senha" %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.submit "Criar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
JUST ANOTHER THING! MAYBE IT'S IMPORTANT...
I have a navbar rendered in "layouts/application.html.erb" that shows the current user's name and a logout button when there's a user connected, and a login button when there are no sessions.
<% unless current_page? (login_path) %>
<%= link_to 'Entrar', login_path, :class =>"btn btn-outline-light" %>
<% end %>
Your error was caused by wrong sign_in form.
I have changed this part
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= label_tag :email, "Email" %>
<%= text_field_tag :email, "", autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= label_tag :password, "Senha" %>
<%= password_field_tag :password, "", :class =>"form-control" %>
</div>
<div class="form-group">
<%= submit_tag "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
To this one, and everything worked.
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email, "Email" %>
<%= f.text_field :email, autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password, "Senha" %>
<%= f.password_field :password, :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.submit "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>

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

How to put custom alert messages for RubyonRails forms

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<div>
<%= f.email_field :email, autofocus: true, placeholder: 'Correo Electrónico' %>
</div>
<div class="m-t">
<%= f.password_field :password, autocomplete: "off", placeholder: 'Contraseña' %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="m-t"><%= f.check_box :remember_me %> <%= f.label :remember_me, '¿Recordar?' %></div>
<% end -%>
<div><%= f.submit "LOG IN", class: 'custom-input-2' %></div>
<% end %>
I'm trying to make the alert show a custom message instead of the INVALID EMAIL OR PASSWORD default one.
Is there a documentation about this somewhere or can someone explain to me how this is done.

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