Password settings page

Closes #13858

app/assets/stylesheets/pages/profile.scss

@@ -5,12 +5,6 @@
   }
 }
 
-.profile-settings-sidebar {
-  a {
-    color: $profile-settings-link-color;
-  }
-}
-
 .avatar-image {
   @media (min-width: $screen-sm-min) {
     float: left;
@@ -24,6 +18,11 @@
   display: inline-block;
 }
 
+.account-btn-link,
+.profile-settings-sidebar a {
+  color: $profile-settings-link-color;
+}
+
 .oauth-buttons {
   .btn-group {
     margin-right: 10px;

app/views/profiles/passwords/edit.html.haml

@@ -1,20 +1,18 @@
 - page_title "Password"
 - header_title page_title, edit_profile_password_path
 
-.alert.alert-help.prepend-top-default
-  - if @user.password_automatically_set?
-    Set your password.
-  - else
-    Change your password or recover your current one.
-
-.update-password.prepend-top-default
-  = form_for @user, url: profile_password_path, method: :put, html: { class: 'form-horizontal' }  do |f|
-    %div
-      %p.slead
-        - unless @user.password_automatically_set?
-          You must provide current password in order to change it.
-          %br
-        After a successful password update, you will be redirected to the login page where you can log in with your new password.
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      After a successful password update, you will be redirected to the login page where you can log in with your new password.
+  .col-lg-9
+    %p
+      Change your password
+      - unless @user.password_automatically_set?
+        or recover your current one
+    = form_for @user, url: profile_password_path, method: :put do |f|
       -if @user.errors.any?
         .alert.alert-danger
           %ul
@@ -22,19 +20,16 @@
               %li= msg
       - unless @user.password_automatically_set?
         .form-group
-          = f.label :current_password, class: 'control-label'
-          .col-sm-10
-            = f.password_field :current_password, required: true, class: 'form-control'
-            %div
-              = link_to "Forgot your password?", reset_profile_password_path, method: :put
-
-      .form-group
-        = f.label :password, 'New password', class: 'control-label'
-        .col-sm-10
+          = f.label :current_password, class: 'label-light'
+          = f.password_field :current_password, required: true, class: 'form-control'
+          %p.help-block
+            You must provide your current password in order to change it.
+        .form-group
+          = f.label :password, 'New password', class: 'label-light'
           = f.password_field :password, required: true, class: 'form-control'
-      .form-group
-        = f.label :password_confirmation, class: 'control-label'
-        .col-sm-10
+        .form-group
+          = f.label :password_confirmation, class: 'label-light'
           = f.password_field :password_confirmation, required: true, class: 'form-control'
-      .form-actions
-        = f.submit 'Save password', class: "btn btn-create"
+        .prepend-top-default.append-bottom-default
+          = f.submit 'Save password', class: "btn btn-create append-right-10"
+          = link_to "I forgot my password", reset_profile_password_path, method: :put, class: "account-btn-link"