SONAR-6507 use ws to change password

5 files changed, 90 insertions, 3 deletions

diff --git a/server/sonar-web/Gruntfile.coffee b/server/sonar-web/Gruntfile.coffee
index 20e0cbda5e1..285f4ac4de2 100644
--- a/server/sonar-web/Gruntfile.coffee
+++ b/server/sonar-web/Gruntfile.coffee
@@ -237,6 +237,9 @@ module.exports = (grunt) ->
           '<%= BUILD_PATH %>/js/apps/maintenance/templates.js': [
             '<%= SOURCE_PATH %>/js/apps/maintenance/templates/**/*.hbs'
           ]
+          '<%= BUILD_PATH %>/js/apps/account/templates.js': [
+            '<%= SOURCE_PATH %>/js/apps/account/templates/**/*.hbs'
+          ]
 
 
     clean:
diff --git a/server/sonar-web/src/main/js/apps/account/app.js b/server/sonar-web/src/main/js/apps/account/app.js
index 2d7421e24c6..7559a916e48 100644
--- a/server/sonar-web/src/main/js/apps/account/app.js
+++ b/server/sonar-web/src/main/js/apps/account/app.js
@@ -1,4 +1,6 @@
-define(function () {
+define([
+  './change-password-view'
+], function (ChangePasswordView) {
 
   var $ = jQuery;
   var shouldShowAvatars = window.SS && window.SS.lf && window.SS.lf.enableGravatar;
@@ -22,6 +24,11 @@ define(function () {
         $(e.currentTarget).hide();
         showExtraFavorites();
       });
+
+      $('#account-change-password-trigger').on('click', function (e) {
+        e.preventDefault();
+        new ChangePasswordView().render();
+      });
     }
   };
 
diff --git a/server/sonar-web/src/main/js/apps/account/change-password-view.js b/server/sonar-web/src/main/js/apps/account/change-password-view.js
new file mode 100644
index 00000000000..86522a8dc40
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/change-password-view.js
@@ -0,0 +1,52 @@
+define([
+  'components/common/modal-form',
+  './templates'
+], function (ModalForm) {
+
+  var $ = jQuery;
+
+  return ModalForm.extend({
+    template: Templates['account-change-password'],
+
+    onFormSubmit: function (e) {
+      this._super(e);
+      if (this.checkPasswords()) {
+        this.sendRequest();
+      } else {
+        this.showErrors([{ msg: t('user.password_doesnt_match_confirmation') }]);
+      }
+    },
+
+    checkPasswords: function () {
+      var p1 = this.$('#password').val(),
+          p2 = this.$('#password_confirmation').val();
+      return p1 === p2;
+    },
+
+    sendRequest: function () {
+      var that = this;
+      var data = {
+        login: window.SS.user,
+        password: this.$('#password').val(),
+        previousPassword: this.$('#old_password').val()
+      };
+      var opts = {
+        type: 'POST',
+        url: baseUrl + '/api/users/change_password',
+        data: data,
+        statusCode: {
+          // do not show global error
+          400: null
+        }
+      };
+      this.disableForm();
+      $.ajax(opts).done(function () {
+        that.destroy();
+      }).fail(function (jqXHR) {
+        that.enableForm();
+        that.showErrors(jqXHR.responseJSON.errors, jqXHR.responseJSON.warnings);
+      });
+    }
+  });
+
+});
diff --git a/server/sonar-web/src/main/js/apps/account/templates/account-change-password.hbs b/server/sonar-web/src/main/js/apps/account/templates/account-change-password.hbs
new file mode 100644
index 00000000000..8cfe6bde02f
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/templates/account-change-password.hbs
@@ -0,0 +1,26 @@
+<form id="pass_form_tag" name="pass_form_tag">
+  <div class="modal-head">
+    <h2>{{t 'my_profile.password.title'}}</h2>
+  </div>
+
+  <div class="modal-body">
+    <div class="js-modal-messages"></div>
+    <div class="modal-field">
+      <label for="old_password">{{t 'my_profile.password.old'}}<em class="mandatory">*</em></label>
+      <input autocomplete="off" id="old_password" name="old_password" required type="password">
+    </div>
+    <div class="modal-field">
+      <label for="password">{{t 'my_profile.password.new'}}<em class="mandatory">*</em></label>
+      <input autocomplete="off" id="password" name="password" required type="password">
+    </div>
+    <div class="modal-field">
+      <label for="password_confirmation">{{t 'my_profile.password.confirm'}}<em class="mandatory">*</em></label>
+      <input autocomplete="off" id="password_confirmation" name="password_confirmation" required type="password">
+    </div>
+  </div>
+
+  <div class="modal-foot">
+    <input name="commit" type="submit" value="{{t 'my_profile.password.submit'}}">
+    <a class="js-modal-close" href="#">{{t 'cancel'}}</a>
+  </div>
+</form>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
index 283cc21e1f8..b9e16dc489d 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
@@ -33,8 +33,7 @@
 
       <% if User.editable_password? %>
         <div class="big-spacer-top text-center">
-          <button id="account-change-password-trigger" class="open-modal"
-                  href="<%= url_for :action => 'change_password_form' %>">
+          <button id="account-change-password-trigger">
             <i class="icon-lock"></i> <%= message('my_profile.password.title') -%>
           </button>
         </div>