Improve session views styles

app/views/devise/passwords/edit.html.erb

@@ -1,27 +1,39 @@
-<%= image_tag("/ms-icon-150x150.png", alt: "Logo") %>
+<div class="container text-center">
+  <%= image_tag("/ms-icon-150x150.png", alt: "Logo") %>
 
-<h2>Change your password</h2>
+  <div class="row justify-content-md-center">
+    <div class="col col-lg-4">
+      <h2>Change your password</h2>
+      <br />
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-  <%= f.hidden_field :reset_password_token %>
+      <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+        <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :password, "New password" %><br />
-    <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
-    <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
-  </div>
+        <%= f.hidden_field :reset_password_token %>
 
-  <div class="field">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
+        <div class="field form-outline mb-4">
+          <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-control", placeholder: "New Password", required: true %>
+          <% if @minimum_password_length %>
+            <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+          <% end %>
+        </div>
 
-  <div class="actions">
-    <%= f.submit "Change my password" %>
-  </div>
-<% end %>
+        <div class="field form-outline mb-4">
+          <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control", placeholder: "Confirm New Password", required: true %>
+        </div>
 
-<%= render "devise/shared/links" %>
+        <div class="row mb-4">
+          <div class="col d-flex justify-content-center">
+            <div class="col forgot">
+              <%= render "devise/shared/links" %>
+            </div>
+          </div>
+        </div>
+
+        <div class="actions">
+          <%= f.submit "Change my password", class: "btn btn-primary btn-block w-100" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/devise/passwords/new.html.erb

@@ -1,18 +1,30 @@
-<%= image_tag("/ms-icon-150x150.png", alt: "Logo") %>
+<div class="container text-center">
+  <%= image_tag("/ms-icon-150x150.png", alt: "Logo") %>
 
-<h2>Forgot your password?</h2>
+  <div class="row justify-content-md-center">
+    <div class="col col-lg-4">
+      <h2>Forgot your password?</h2>
+      <br />
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+      <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+        <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+        <div class="field form-outline mb-4">
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control", placeholder: "Email", required: true %>
+        </div>
 
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
-  </div>
-<% end %>
+        <div class="row mb-4">
+          <div class="col d-flex justify-content-center">
+            <div class="col forgot">
+              <%= render "devise/shared/links" %>
+            </div>
+          </div>
+        </div>
 
-<%= render "devise/shared/links" %>
+        <div class="actions">
+          <%= f.submit "Send me reset password instructions", class: "btn btn-primary btn-block w-100" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/devise/sessions/new.html.erb

@@ -1,25 +1,24 @@
-
 <div class="container text-center">
   <%= image_tag("/ms-icon-150x150.png", alt: "Logo") %>
-  <div class="row justify-content-md-center"">
-    <div class="col col-lg-6">
+
+  <div class="row justify-content-md-center">
+    <div class="col col-lg-4">
       <h2>Log in</h2>
+      <br />
 
       <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
         <div class="field form-outline mb-4">
-          <%= f.label :email, class: "mb-2"%><br />
-          <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control"%>
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control", placeholder: "Email", required: true %>
         </div>
 
         <div class="field form-outline mb-4">
-          <%= f.label :password, class: "mb-2" %><br />
-          <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
+          <%= f.password_field :password, autocomplete: "current-password", class: "form-control", placeholder: "Password", required: true %>
         </div>
 
         <div class="row mb-4">
           <div class="col d-flex justify-content-center">
             <% if devise_mapping.rememberable? %>
-              <div class="field form-check"">
+              <div class="field form-check">
                 <%= f.check_box :remember_me, class: "form-check-input" %>
                 <%= f.label :remember_me, class: "form-check-label"  %>
               </div>
@@ -29,14 +28,11 @@
             </div>
           </div>
         </div>
-
 
         <div class="actions">
-          <%= f.submit "Log in", class: "btn btn-primary btn-block w-100"  %>
+          <%= f.submit "Log in", class: "btn btn-primary btn-block w-100" %>
         </div>
       <% end %>
-
-
     </div>
   </div>
 </div>