Set password functionality

src/frontend/js/app/user/password.ejs

@@ -0,0 +1,30 @@
+<div class="modal-content">
+    <div class="modal-header">
+        <h5 class="modal-title">Change Password <%- isSelf() ? '' : 'for' + name %></h5>
+        <button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
+    </div>
+    <div class="modal-body">
+        <form>
+            <% if (isSelf()) { %>
+            <div class="form-group">
+                <label class="form-label">Current Password</label>
+                <input type="password" name="current_password" class="form-control" placeholder="" minlength="8" required>
+            </div>
+            <% } %>
+
+            <div class="form-group">
+                <label class="form-label">New Password</label>
+                <input type="password" name="new_password1" class="form-control" placeholder="" minlength="8" required>
+                <div class="invalid-feedback secret-error"></div>
+            </div>
+            <div class="form-group">
+                <label class="form-label">Confirm Password</label>
+                <input type="password" name="new_password2" class="form-control" placeholder="" minlength="8" required>
+            </div>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-teal save">Save</button>
+    </div>
+</div>

src/frontend/js/app/user/password.js

@@ -0,0 +1,63 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const template   = require('./password.ejs');
+const Controller = require('../controller');
+const Api        = require('../api');
+const App        = require('../main');
+const Cache      = require('../cache');
+
+require('jquery-serializejson');
+
+module.exports = Mn.View.extend({
+    template:  template,
+    className: 'modal-dialog',
+
+    ui: {
+        form:    'form',
+        buttons: '.modal-footer button',
+        cancel:  'button.cancel',
+        save:    'button.save',
+        error:   '.secret-error'
+    },
+
+    events: {
+        'click @ui.save': function (e) {
+            e.preventDefault();
+            this.ui.error.hide();
+            let form = this.ui.form.serializeJSON();
+
+            if (form.new_password1 !== form.new_password2) {
+                this.ui.error.text('Passwords do not match!').show();
+                return;
+            }
+
+            let data = {
+                type:    'password',
+                current: form.current_password,
+                secret:  form.new_password1
+            };
+
+            this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
+            Api.Users.setPassword(this.model.get('id'), data)
+                .then(() => {
+                    App.UI.closeModal();
+                    Controller.showUsers();
+                })
+                .catch(err => {
+                    this.ui.error.text(err.message).show();
+                    this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
+                });
+        }
+    },
+
+    isSelf: function () {
+        return Cache.User.get('id') === this.model.get('id');
+    },
+
+    templateContext: function () {
+        return {
+            isSelf: this.isSelf.bind(this)
+        };
+    }
+});