Merge pull request #138 from gyselroth/issue-116

Issue 116
gyselroth · Feb 21, 2019 · 6eedc81 · 6eedc81
2 parents 39b8c03 + 3ad7917
commit 6eedc81
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * [CHANGE] Modals should be closable by clicking the greyed out area #50
 * [CHANGE] BalloonWindow keydown #67
 * [FEATURE] Choose between fulltextsearch and name only search #69
+* [FEATURE] Change password #116
 
 
 ## 3.0.9

diff --git a/src/index.html b/src/index.html
@@ -191,6 +191,7 @@
                             <ul>
                                 <li id="fs-menu-user-profile" data-i18n="login.profile;[title]login.profile"></li>
                                 <li id="fs-menu-user-events" data-i18n="login.events;[title]login.events"></li>
+                                <li id="fs-menu-user-change-password" data-i18n="login.change-password;[title]login.change-password"></li>
                                 <li id="fs-menu-user-logout" data-i18n="login.logout;[title]login.logout"></li>
                             </ul>
                         </div>
@@ -575,6 +576,22 @@ <h6 data-i18n="view.share.access_rights"></h6>
             </div>
         </div>
 
+        <div id="fs-change-password-window" data-i18n="[title]login.change-password">
+            <div id="fs-change-password-window-content">
+                <form name="change-password" class="fs-window-form" action="#">
+                    <label for="fs-change-password-window-password" data-i18n="view.change-password.password"></label>
+                    <input type="password" id="fs-change-password-window-password" name="password" />
+
+                    <label for="fs-change-password-window-password-repeat" data-i18n="view.change-password.password-repeat"></label>
+                    <input type="password" id="fs-change-password-window-password-repeat" name="password_repeat" />
+                </form>
+            </div>
+            <div id="fs-change-password-window-button-wrapper" class="fs-window-secondary-actions">
+                <input type="button" tabindex="2" name="cancel" data-i18n="[value]button.cancel"/>
+                <input type="button" tabindex="1" name="save" class="fs-button-primary" data-i18n="[value]button.save"/>
+            </div>
+        </div>
+
         <div id="fs-profile-window" data-i18n="[title]login.profile">
             <div id="fs-profile-window-quota">
                 <div id="fs-quota-circle" class="percent-circle">

diff --git a/src/lib/auth.js b/src/lib/auth.js
@@ -410,6 +410,10 @@ var login = {
     balloon.init();
   },
 
+  getAdapter: function() {
+    return this.adapter;
+  },
+
   destroyBrowser: function() {
     $('#login').show();
     balloon.resetDom();

diff --git a/src/lib/core.js b/src/lib/core.js
@@ -413,8 +413,6 @@ var balloon = {
           $d.resolve();
         },
         error: function(body) {
-          console.log('GOT ERROR', body);
-
           $d.resolve();
         }
       });
@@ -449,6 +447,9 @@ var balloon = {
     $(".fs-action-element").unbind('click').click(balloon.doAction);
     $("#fs-browser-header").find("> div.fs-browser-column-sortable").unbind('click').click(balloon._sortTree);
 
+    //change password should only be active for users logged in with basic auth
+    $('#fs-menu-user-change-password').toggle(login.getAdapter() === 'basic');
+
     $(document).unbind('drop').on('drop', function(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -1936,6 +1937,105 @@ var balloon = {
     return out;
   },
 
+  /**
+   * Display change püassword modal
+   *
+   * @return void
+   */
+  displayChangePassword: function() {
+    var formValid = false;
+    var $fs_win = $('#fs-change-password-window');
+    var $btnSave = $fs_win.find('input[name="save"]').attr('disabled', true);;
+    var $btnCancel = $fs_win.find('input[name="cancel"]');
+    var $inputRepeatPw = $fs_win.find('input[name="password_repeat"]').val('');
+    var $inputPw = $fs_win.find('input[name="password"]').val('');
+
+    $fs_win.find('input').removeClass('error-input');
+
+    var fieldsValid = {
+      password: false,
+      password_repeat: false,
+    };
+
+    $fs_win.find('input[type="password"]').off('keyup blur').on('keyup blur', function(event) {
+      var $this = $(this);
+      var fieldName = $this.attr('name');
+
+      if(event.keyCode && event.keyCode === 13) {
+        if(formValid) $btnSave.click();
+        return;
+      }
+
+      if(event.keyCode && event.keyCode === 9) {
+        //validating on tab out is performed by blur to get correct fieldName
+        return;
+      }
+
+      if($this.val() === '') {
+        fieldsValid[fieldName] = false;
+      } else {
+        fieldsValid[fieldName] = true;
+
+        if($inputRepeatPw.val() !== '' && $inputPw.val()!== '' && $inputRepeatPw.val() !== $inputPw.val()) {
+          fieldsValid['password_repeat'] = false;
+          $inputRepeatPw.addClass('error-input');
+        }
+      }
+
+      $this.toggleClass('error-input', !fieldsValid[fieldName]);
+
+      formValid = Object.keys(fieldsValid).every(function(key) {
+        return fieldsValid[key] === true;
+      });
+
+      $btnSave.attr('disabled', !formValid);
+    });
+
+    $btnSave.off('click').on('click', function(event){
+      event.preventDefault();
+
+      var password = $inputPw.val();
+      balloon._changePassword(password).then(function() {
+        $fs_win.data('kendoBalloonWindow').close();
+      });
+    });
+
+    $btnCancel.off('click').on('click', function(){
+      $fs_win.data('kendoBalloonWindow').close();
+    });
+
+    $fs_win.kendoBalloonWindow({
+      title: $fs_win.attr('title'),
+      resizable: false,
+      modal: true,
+      activate: function() {
+        $inputPw.focus();
+      }
+    }).data('kendoBalloonWindow').center().open();
+  },
+
+  /**
+   * Calls api to change password for current user
+   *
+   * @return void
+   */
+  _changePassword(password) {
+    var data = {
+      password: password
+    };
+
+    return balloon.xmlHttpRequest({
+      url: balloon.base+'/users/',
+      type: 'PATCH',
+      dataType: 'json',
+      contentType: 'application/json',
+      data: JSON.stringify(data),
+      success: function(body) {
+        login.doBasicAuth(login.user.username, password);
+      }
+    });
+  },
+
   displayAvatar: function($avatar, userId) {
     $avatar.css('background-image', '').removeClass('has-avatar');
 
@@ -2524,6 +2624,10 @@ var balloon = {
       balloon.displayUserProfile();
       break;
 
+    case 'change-password':
+      balloon.displayChangePassword();
+      break;
+
     case 'logout':
       //avoid unauthorized requests
       $(window).unbind('popstate');

diff --git a/src/locale/de.json b/src/locale/de.json
@@ -5,6 +5,7 @@
     "password": "Passwort",
     "login": "Login",
     "logout": "Logout",
+    "change-password": "Passwort ändern",
     "events": "Events",
     "profile": "Profil",
     "settings": "Einstellungen",
@@ -268,6 +269,10 @@
     },
     "events": {
       "show_all": "Alle Events anzeigen"
+    },
+    "change-password": {
+      "password": "Passwort",
+      "password-repeat": "Passwort wiederholen"
     }
   },
   "error": {

diff --git a/src/locale/en.json b/src/locale/en.json
@@ -5,6 +5,7 @@
     "password": "Password",
     "login": "Login",
     "logout": "Logout",
+    "change-password": "Change password",
     "events": "Events",
     "profile": "Profile",
     "settings": "Settings",
@@ -267,6 +268,10 @@
     },
     "events": {
       "show_all": "Show all events"
+    },
+    "change-password": {
+      "password": "Password",
+      "password-repeat": "Repeat password"
     }
   },
   "error": {

diff --git a/src/themes/default/scss/modals/_base.scss b/src/themes/default/scss/modals/_base.scss
@@ -226,3 +226,4 @@
 @import './fsShareLinkSettings';
 @import './fsDestroyDate';
 @import './fsNewNode';
+@import './fsChangePassword';
diff --git a/src/themes/default/scss/modals/_fsChangePassword.scss b/src/themes/default/scss/modals/_fsChangePassword.scss
@@ -0,0 +1,18 @@
+$sidePadding: 60px;
+
+#fs-change-password-window {
+  display: none;
+  width: 490px + (2 * $sidePadding);
+
+  .fs-window-form {
+    $labelWidth: 150px;
+
+    label {
+      width: $labelWidth;
+    }
+
+    input[type='password'] {
+      width: calc(100% - #{$labelWidth + 15px});
+    }
+  }
+}