adapt-authoring-ui 0.0.1

package/app/modules/userManagement/less/userManagement.less

@@ -0,0 +1,268 @@
+@user-hover-bg-colour: #f3faff;
+@user-hover-borderl-colour: #8ea3af;
+
+.module-userManagement {
+  .swal2-popup {
+    .swal2-html-container {
+      overflow-x: hidden;
+      .swal2-select,
+      .email-container {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+
+.user-management-filter {
+
+  .filter-inner {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-tag {
+      margin-bottom: 0;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .selectize-control {
+      padding: 0;
+
+      .selectize-input {
+        background: @sidebar-input-color;
+        border-color: @sidebar-input-border-color;
+        color: @sidebar-input-text-color;
+      }
+    }
+  }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+
+    display: none;
+
+    &:checked + .fa-toggle-off:before {
+      content: "\f205";
+      color: @button-secondary-color;
+    }
+  }
+  label.sidebar-tag {
+    display: flex;
+    padding: 14px 25px;
+
+    span {
+      margin-right: 10px;
+      flex-grow: 1;
+    }
+    i.fa {
+      color: @secondary-color;
+      font-size: 20px;
+    }
+  }
+}
+
+.userManagement {
+    .container {
+      .search {
+        padding: 10px;
+        display: flex;
+        background-color: darken(@white, 3%);
+
+        input[type="text"] {
+          width: 85%;
+          box-sizing: border-box;
+        }
+
+        button {
+          flex-grow: 1;
+          margin-left: 10px;
+        }
+      }
+
+      .user-management-filter {
+        padding: 0 10px;
+        background-color: darken(@white, 3%);
+
+        .filter-inner {
+          border-top: solid 1px darken(@white, 15%);
+        }
+      }
+
+      .form-container-style;
+      max-width: inherit;
+      .tb-heading {
+        .col-centered {
+          display: flex;
+          justify-content: center;
+        }
+        > div button {
+          display: flex;
+          align-items: center;
+          padding-left: 0;
+          padding-right: 0;
+
+          &.active {
+            font-weight: @font-weight-bold;
+          }
+
+          > h4 {
+            flex-grow: 1;
+          }
+
+          i.fa {
+            margin-right: 10px;
+          }
+
+          i.fa {
+            visibility: hidden;
+          }
+          &.active {
+            i.fa {
+              visibility: visible;
+            }
+          }
+
+          &.sort-down {
+            i.fa::before {
+              content: "\f0dd";
+            }
+          }
+          &.sort-up {
+            i.fa::before {
+              content: "\f0de";
+            }
+          }
+        }
+
+        .sort,
+        .filter {
+          color: fade(@sidebar-color, 50%);
+          &.active {
+            color: @sidebar-color;
+          }
+        }
+      }
+    }
+
+    .view-buttons {
+        text-align: right;
+        padding-bottom: 20px;
+    }
+    .action-buttons{
+        margin-top: 30px;
+        margin-bottom: 15px;
+    }
+
+    .tb-row {
+        padding: 10px;
+
+        &.align-right {
+            text-align: right;
+        }
+    }
+
+    .user-item {
+        cursor: pointer;
+        border: 1px solid white;
+
+        &.me .tb-col-inner {
+            font-weight: @font-weight-bold;
+        }
+        &.inactive {
+            .tb-col-inner {
+                color: #BBBBBB;
+            }
+        }
+        &.locked {
+            color: @alert-color;
+        }
+        &.selected {
+            cursor: default;
+            border: 1px solid #d6f2f9;
+            border-left: 1px solid @user-hover-borderl-colour;
+            background-color: @user-hover-bg-colour;
+        }
+
+        &:hover {
+            border-left: 1px solid @user-hover-borderl-colour;
+            background-color: @user-hover-bg-colour;
+        }
+
+        .tb-col-inner {
+            li {
+                margin-left: 0;
+                list-style: none;
+            }
+
+            .group {
+                margin-bottom: 10px;
+            }
+
+            span, select, input {
+                display: block;
+            }
+        }
+
+        a {
+            cursor: pointer;
+            padding-left: 3px;
+        }
+
+
+        button {
+            font-size: 90%;
+            padding: 5px 7px;
+            margin-bottom: 5px;
+            width: 100%;
+        }
+
+        input {
+            border-radius: 3px;
+            border: 1px solid #dedede;
+            padding: 3px;
+            margin-right: 4px;
+        }
+        select {
+            max-width: 115px;
+          &[name="delete-options"] {
+            max-width: none;
+            width: 100%;
+          }
+        }
+
+        button.resetPassword {
+          &.submitted {
+            background-color: #2995a8;
+            border-color: #2995a8;
+          }
+        }
+    }
+}
+
+.addUser {
+    .inner {
+        .form-container-style;
+
+        padding: 30px;
+
+        li {
+            margin-left: 0;
+            list-style: none;
+        }
+
+        .title {
+            padding-bottom: 30px;
+            font-size: 16px;
+            font-weight: @font-weight-bold;
+        }
+
+        form {
+            .form-group {
+                border: none;
+                .field-error {
+                    padding-bottom: 5px;
+                }
+            }
+        }
+    }
+}

package/app/modules/userManagement/models/userModel.js

@@ -0,0 +1,34 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+
+  var UserModel = Backbone.Model.extend({
+    idAttribute: '_id',
+    url: function() {
+      return `api/users/${!this.isNew() ? this.id : ''}`;
+    },
+
+    initialize: function() {
+      this.on('change:allRoles change:roles', this.setRoleModels);
+    },
+    // pull the human-readable role names from the list of all roles
+    setRoleModels: function(model) {
+      if(!model.get('allRoles')) return;
+      const roles = model.get('roles');
+      const allRoles = model.get('allRoles');
+      let roleModels;
+      if(typeof roles === 'object') { // array
+        roleModels = roles.map(role => {
+          const roleId = (typeof role === 'string') ? role : role.get('_id');
+          return allRoles.findWhere({ _id: roleId });
+        });
+      } else { // string
+        roleModels = allRoles.findWhere({ _id: roles });
+      }
+      model.set('roleModels', roleModels);
+    }
+  });
+
+  return UserModel;
+});

package/app/modules/userManagement/templates/addUser.hbs

@@ -0,0 +1,35 @@
+<div class="inner">
+  <div class="title">
+    {{t 'app.adduserformtitle'}}
+  </div>
+  <form class="addUser forms" action="api/auth/local/register" method="post" autocomplete="off">
+      <div class="form-group">
+        <label>{{t 'app.firstname'}} <span class="req">*</span></label>
+        <div class="field-error display-none" data-error="">{{t 'app.validationrequired'}}</div>
+        <input type="text" name="firstName" autocomplete="off">
+      </div>
+      <div class="form-group">
+        <label>{{t 'app.lastname'}}<span class="req">*</span></label>
+        <div class="field-error display-none" data-error="">{{t 'app.validationrequired'}}</div>
+        <input type="text" name="lastName" autocomplete="off">
+      </div>
+      <div class="form-group">
+        <label>{{t 'app.usernameoremail'}} <span class="req">*</span></label>
+        <div class="field-error display-none" data-error="">{{t 'app.invalidusernameoremail'}}</div>
+        <input type="email" name="email" autocomplete="off">
+      </div>
+      <div class="form-group">
+          <label>{{t 'app.password'}} <span class="req">*</span></label>
+          <div class="field-error display-none" data-error="">{{t 'app.validationrequired'}}</div>
+          <input type="password" name="password" autocomplete="off">
+      </div>
+      <div class="form-group">
+        <label>{{t 'app.role'}}</label>
+        <select name="role">
+          {{#each allRoles.models}}
+            <option value="{{{attributes._id}}}">{{attributes.displayName}}</option>
+          {{/each}}
+        </select>
+      </div>
+  </form>
+</div>

package/app/modules/userManagement/templates/addUserSidebar.hbs

@@ -0,0 +1,9 @@
+<div class="separator"></div>
+<div class="sidebar-item-inner">
+  <button type="submit" class="action-primary save">
+    <span>{{t 'app.save'}}</span>
+  </button>
+  <button type="button" class="cancel action-secondary">
+    <span>{{t 'app.cancel'}}</span>
+  </button>
+</div>

package/app/modules/userManagement/templates/user.hbs

@@ -0,0 +1,126 @@
+{{!
+  Important classes for each column
+  ---------------------------------
+  General:
+  - .edit-mode shown when userManagementView is in edit mode
+  - .read/.write elements will be toggled when the edit/cancel buttons are clicked for that column
+  Inputs:
+  - .input must be set on any inputs (input, select etc. -- in the case that the input is just a button/a, set it on that)
+  - data-modelKey must be set on each .input with the corresponding model's key (e.g. _tenantId). This is used to change the model.
+}}
+<div class="inner">
+  <div class="col-row">
+    <div class="col-25">
+      <div class="tb-col-inner">
+        <span class="read no-wrap">{{email}}</span>
+        {{#ifUserNotMe _id}}{{#if isEnabled}}
+          <a class="edit read edit-mode"><i class="fa fa-pencil-square-o"></i></a>
+          <div class="input-container write">
+            <input class="input" type="email" data-modelKey="email" autocomplete="off">
+            <a class="save"><i class="fa fa-check-square-o"></i></a>
+            <a class="cancel"><i class="fa fa-times"></i></a>
+          </div>
+        {{/if}}{{/ifUserNotMe}}
+      </div>
+    </div>
+    <div class="col-15">
+      <div class="tb-col-inner">
+        <div class="read">
+          <ul>
+          {{#each roles}}
+            <li class="no-wrap">{{lookupRoleName this ..}}</li>
+          {{/each}}
+          </ul>
+        </div>
+        {{#ifUserNotMe _id}}{{#if isEnabled}}
+            <a class="edit read edit-mode"><i class="fa fa-pencil-square-o"></i></a>
+            <div class="write">
+              <select class="input" data-modelKey="roles">
+                {{#each allRoles.models}}
+                  {{console ../roles.[0]._id this.attributes._id}}
+                  {{!NOTE this won't do if we introduce multiple roles (../roles.[0])}}
+                  <option value="{{{this.attributes._id}}}"{{#ifValueEquals ../roles.[0]._id this.attributes._id}} selected{{/ifValueEquals}}>{{this.attributes.displayName}}</option>
+                {{/each}}
+              </select>
+              <a class="saveRoles"><i class="fa fa-check-square-o"></i></a>
+              <a class="cancel"><i class="fa fa-times"></i></a>
+            </div>
+        {{/if}}{{/ifUserNotMe}}
+      </div>
+    </div>
+    <div class="col-10 col-centered">
+      <div class="tb-col-inner">
+        <div class="read">
+          {{authType}}
+        </div>
+      </div>
+    </div>
+    <div class="col-10 col-centered">
+      <div class="tb-col-inner">
+        {{failedLoginAttempts}}
+      </div>
+    </div>
+    <div class="col-15 col-centered">
+      <div class="tb-col-inner no-wrap">{{momentFormat lastAccess 'DD MMM-YY'}}</div>
+    </div>
+    <div class="col-10 col-centered temp">
+      <div class="tb-col-inner">
+        {{#if isTempLocked}}
+          <i class="fa fa-lock temp"></i>
+        {{else if isPermLocked}}
+          <i class="fa fa-lock perm"></i>
+        {{else}}
+          -
+        {{/if}}
+      </div>
+    </div>
+    <div class="col-15">
+      <div class="tb-col-inner">
+        <div class="buttons edit-mode">
+          {{#ifUserIsMe _id}}
+            <div class="group">
+              {{t 'app.changeadminaccounts'}}
+            </div>
+          {{/ifUserIsMe}}
+          {{#if isEnabled}}
+            <div class="group">
+              {{#ifMailEnabled}}
+                <button class="btn primary invite">{{t 'app.inviteuser'}}</button>
+                <button class="btn primary resetPassword">{{t 'app.resetpassword'}}</button>
+              {{else}}
+                <button class="btn tertiary changePassword">{{t 'app.changepassword'}}</button>
+              {{/ifMailEnabled}}
+            </div>
+            {{#if isTempLocked}}
+              <div class="group">
+                <button class="btn secondary unlock">{{t 'app.unlockuser'}}</button>
+              </div>
+            {{else if isPermLocked}}
+              <div class="group">
+                <button class="btn secondary unlock">{{t 'app.unlockuser'}}</button>
+              </div>
+            {{else}}
+              {{#ifValueEquals failedLoginAttempts 0}}
+              {{else}}
+                <div class="group">
+                  <button class="btn secondary unlock">{{t 'app.resetlogins'}}</button>
+                </div>
+              {{/ifValueEquals}}
+            {{/if}}
+          {{else}}
+          {{/if}}
+          {{#ifUserNotMe _id}}
+            <div class="group">
+              {{#if isEnabled}}
+                <button class="btn warning disable">{{t 'app.disableuser'}}</button>
+              {{else}}
+                <button class="btn action-primary restore">{{t 'app.restoreuser'}}</button>
+              {{/if}}
+              <hr>
+              <button class="btn alert edit-input delete">{{t 'app.deleteuser'}}</button>
+            </div>
+          {{/ifUserNotMe}}
+        </div>
+      </div>
+    </div>
+</div>

package/app/modules/userManagement/templates/userManagement.hbs

@@ -0,0 +1,49 @@
+<div class="container">
+    <div class="inner">
+        <div class="tb-heading col-row tb-row">
+            <div class="col-25">
+              <button data-sort="email" class="active sort sort-down">
+                <h4 class="tb-col-inner">{{t 'app.usernameoremail'}}</h4>
+                <i class="fa"></i>
+              </button>
+            </div>
+            <div class="col-15">
+              <button data-sort="roleNames" class="sort sort-down">
+                <h4 class="tb-col-inner">{{t 'app.role'}}</h4>
+                <i class="fa"></i>
+              </button>
+            </div>
+            <div class="col-10 col-centered">
+              <button data-sort="authType" class="sort sort-down">
+                <h4 class="tb-col-inner">{{t 'app.authtype'}}</h4>
+                <i class="fa"></i>
+              </button>
+            </div>
+            <div class="col-10 col-centered">
+              <button data-sort="failedLoginCount" class="sort sort-down">
+                <h4 class="tb-col-inner">{{t 'app.failedlogins'}}</h4>
+                <i class="fa"></i>
+              </button>
+            </div>
+            <div class="col-15 col-centered">
+              <button data-sort="lastAccess" class="sort sort-down">
+                <h4 class="tb-col-inner">{{t 'app.lastaccess'}}</h4>
+                <i class="fa"></i>
+              </button>
+            </div>
+            <div class="col-10">
+              <h4 class="tb-col-inner">{{t 'app.lockstatus'}}</h4>
+              <i class="fa"></i>
+            </div>
+            <div class="col-15">
+            </div>
+        </div>
+        <ul class="users clearfix grid-layout">
+            {{!-- Users get rendered in here --}}
+        </ul>
+
+        <div class="action-buttons">
+            <button class="btn tertiary-hollow refresh-all">{{t 'app.refresh'}}</button>
+        </div>
+    </div>
+</div>

package/app/modules/userManagement/templates/userManagementFilter.hbs

@@ -0,0 +1,19 @@
+<div class="filter-inner">
+  <div class="sidebar-row-input">
+    <input placeholder="{{t 'app.searchByMail'}}" type="text" class="search-email">
+  </div>
+  <div class="sidebar-row sidebar-divide">
+    <h3 class="sidebar-divide-inner">
+      {{t 'app.role'}}
+    </h3>
+  </div>
+  {{#each roles}}
+  <div class="sidebar-row">
+    <label class="sidebar-tag">
+      <span>{{displayName}}</span>
+      <input type="checkbox" name="roleNames" value="{{shortName}}">
+      <i class="fa fa-toggle-off"></i>
+    </label>
+  </div>
+  {{/each}}
+</div>

package/app/modules/userManagement/templates/userManagementSidebar.hbs

@@ -0,0 +1,13 @@
+<div class="separator"></div>
+<div class="sidebar-item-inner">
+  <button class="action-primary add">
+    {{t 'app.addnewuser'}}
+  </button>
+  <div class="separator"></div>
+  <div class="sidebar-row sidebar-divide">
+      <h3 class="sidebar-divide-inner">
+          <i class="fa fa-filter"></i>{{t 'app.assetfilters'}}
+      </h3>
+  </div>
+
+</div>

package/app/modules/userManagement/views/addUserSidebarView.js

@@ -0,0 +1,25 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var AddUserSidebarView = SidebarItemView.extend({
+    events: {
+      'click button.save': 'saveUser',
+      'click button.cancel': 'goBack'
+    },
+
+    saveUser: function(event) {
+      event && event.preventDefault();
+      Origin.trigger('userManagement:saveUser');
+    },
+
+    goBack: function(event) {
+      event && event.preventDefault();
+      Origin.router.navigateTo('userManagement');
+    }
+  }, {
+    template: 'addUserSidebar'
+  });
+  return AddUserSidebarView;
+});

package/app/modules/userManagement/views/addUserView.js

@@ -0,0 +1,85 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+
+  var AddUserView = OriginView.extend({
+    tagName: 'div',
+    className: 'addUser',
+    createdUserId: false,
+
+    preRender: function() {
+      Origin.trigger('contentHeader:updateTitle', { title: Origin.l10n.t('app.addusertitle') });
+      this.listenTo(Origin, 'userManagement:saveUser', this.saveNewUser);
+    },
+
+    postRender: function() {
+      this.setViewToReady();
+    },
+
+    isValid: function() {
+      var valid = true;
+
+      this.$('.field-error').each(function(index, element) {
+        var $error = $(element);
+        var $input = $error.siblings('input');
+
+        var isValid = $input.attr('name') === 'email' ?
+          Helpers.isValidEmail($input.val().trim()) :
+          $input.val().trim().length > 0;
+
+        $error.toggleClass('display-none', isValid);
+
+        if (!isValid) valid = false;
+      });
+
+      return valid;
+    },
+
+    saveNewUser: function() {
+      if(!this.isValid()) {
+        return;
+      }
+      const $form = this.$('form.addUser');
+      const data = $form.serializeArray().reduce((memo,{ name, value }) => {
+        if(name === 'role') {
+          memo.roles = [value];
+          return memo;
+        }
+        return Object.assign(memo, { [name]: value });
+      }, {});
+      $.ajax($form.attr('action'), {
+        type: $form.attr('method'),
+        data: JSON.stringify(data),
+        contentType: 'application/json',
+        success: () => this.onFormSuccess(),
+        error: jqXhr => this.onFormError(jqXhr)
+      })
+    },
+
+    goBack: function() {
+      Origin.router.navigateTo('userManagement');
+    },
+
+    onFormSuccess: function(userData, userStatus, userXhr) {
+      this.goBack();
+    },
+
+    onFormError: function(jqXhr) {
+      // We may have a partially created user, make sure it's gone
+      if(this.createdUserId) {
+        $.ajax('api/users/' + this.createdUserId, { method: 'DELETE', error: _.bind(this.onAjaxError, this) });
+      }
+      Origin.Notify.alert({
+        type: 'error',
+        title: Origin.l10n.t('app.adduserfail'),
+        text: jqXhr.responseJSON && jqXhr.responseJSON.message || jqXhr
+      });
+    }
+  }, {
+    template: 'addUser'
+  });
+
+  return AddUserView;
+});