Migate login form to Bootrstrap 4

Author: nygrenh

app/assets/stylesheets/sessions.css

@@ -10,31 +10,11 @@
   margin: 30px auto;
 }
 
-.login-container input {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  margin: 15px 0;
-  height: 40px;
-}
-
-.login-container input:focus {
-  box-shadow: none;
-}
-
-.login-container input.btn {
-  background-color: #3498db !important;
-  background-image: none;
-  transition: background-color .4s;
-  font-weight: bold;
-}
-
-.login-container input.btn:hover {
-  background-color: #2980b9 !important;
-  background-image: none;
+.login-container h1 {
+  margin-bottom: 20px;
 }
 
-.login-container h1 {
+.login-form-button {
+  width: 100%;
   margin-bottom: 20px;
 }

app/views/password_reset_keys/new.html.erb

@@ -1,6 +1,9 @@
 <h1>Forgot password</h1>
 
 <%= form_tag password_reset_keys_path do %>
-  <%= labeled_field('E-mail: ', text_field_tag(:email)) %>
-  <%= submit_tag 'Send password reset link' %>
+  <div class="form-group">
+    <label for='email'>Email</label>
+    <%= text_field_tag :email, nil, class: 'form-control', id: 'email', placeholder: 'Email' %>
+  </div>
+  <%= submit_tag 'Send password reset link', class: 'btn btn-primary' %>
 <% end %>

app/views/sessions/_login_form.html.erb

@@ -1,5 +1,11 @@
-<%= form_for :session, :url => sessions_path, html: { class: 'login-form' } do |f| %>
-  <%= f.text_field :login, class: 'span2', placeholder: 'Username' %>
-  <%= f.password_field :password, class: 'span2', placeholder: 'Password' %>
-  <%= f.submit "Sign in", class: "btn btn-primary" %>
+<%= form_for :session, :url => sessions_path, html: { class: '' } do |f| %>
+  <div class='form-group'>
+    <label for='username'>Username</label>
+    <%= f.text_field :login, class: 'form-control', id: 'username', placeholder: 'Username' %>
+  </div>
+  <div class='form-group'>
+  <label for='password'>Password</label>
+  <%= f.password_field :password, class: 'form-control', id: 'password', placeholder: 'Password' %>
+  </div>
+  <%= f.submit "Sign in", class: "btn btn-primary login-form-button" %>
 <% end %>