adapt-authoring-ui 0.0.1

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

@@ -0,0 +1,49 @@
+define(['core/origin'], function(Origin) {
+  var FilterView = Backbone.View.extend({
+    tagName: 'form',
+    className: 'user-management-filter',
+    events: {
+      'change input[type="checkbox"],select': 'onFormChange',
+      'input .search-email': 'onSearchInput'
+    },
+
+    initialize: function() {
+      this.listenTo(Origin, 'remove:views', this.remove);
+      this.render();
+    },
+
+    onSearchInput: function(event) {
+      this.collection.mailSearchTerm = $(event.currentTarget).val().toLowerCase();
+      this.collection.updateFilter();
+    },
+
+    onFormChange: function() {
+      var attributeMap = Array.from(this.$('input:checked')).reduce(function(memo, input) {
+        if(!memo[input.name]) memo[input.name] = [];
+        memo[input.name].push(input.value);
+        return memo;
+      }, {});
+      this.collection.updateFilter(attributeMap);
+    },
+
+    remove: function() {
+      this.tenantSelect && this.tenantSelect.destroy();
+      Backbone.View.prototype.remove.apply(this, arguments);
+    },
+
+    render: function() {
+      var template = Handlebars.templates['userManagementFilter'];
+      this.$el.html(template({ roles: this.model.get('allRoles').toJSON() }))
+        .appendTo('.sidebar-item');
+      return this;
+    },
+
+    reset: function() {
+      this.$('input[type="text"]').prop('disabled', false);
+      this.collection.filterGroups = {};
+      this.$('input[type="checkbox"]').prop('checked', false);
+    }
+  });
+
+  return FilterView;
+});

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

@@ -0,0 +1,33 @@
+define([
+  'core/origin',
+  'modules/sidebar/views/sidebarItemView',
+  './filterView'
+], function(Origin, SidebarItemView, FilterView) {
+
+  var UserManagementSidebarView = SidebarItemView.extend({
+    events: {
+      'click button.add': 'addUser'
+    },
+
+    initialize: function() {
+      SidebarItemView.prototype.initialize.apply(this, arguments);
+      this.listenTo(this.collection, { 'sync': this.render });
+    },
+
+    postRender: function() {
+      this.filterView = new FilterView({
+        collection: this.collection,
+        model: this.model
+      });
+    },
+
+    addUser: function(event) {
+      event && event.preventDefault();
+      Origin.router.navigateTo('userManagement/addUser');
+    }
+  }, {
+    template: 'userManagementSidebar'
+  });
+
+  return UserManagementSidebarView;
+});

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

@@ -0,0 +1,104 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+  var UserView = require('../views/userView');
+
+  var UserManagementView = OriginView.extend({
+    className: 'userManagement',
+    settings: {
+      autoRender: false
+    },
+    users: null,
+    views: [],
+    selectedView: null,
+    showFilterScreen: false,
+
+    events: {
+      'click button.refresh-all': 'refreshUserViews',
+      'click button[data-sort]': 'onSortClick'
+    },
+
+    initialize: function() {
+      OriginView.prototype.initialize.apply(this, arguments);
+      this.users = this.collection;
+
+      this.listenTo(this.users, 'sort', function(a,b,c) {
+        this.removeChildViews();
+        this.renderChildViews();
+      });
+
+      Origin.trigger('contentHeader:updateTitle', { title: Origin.l10n.t('app.usermanagementtitle') });
+      
+      this.listenTo(this.users, { 'change': this.render });
+      
+      this.render();
+    },
+
+    render: function() {
+      this.removeChildViews();
+      OriginView.prototype.render.apply(this, arguments);
+      this.renderChildViews();
+    },
+
+    renderChildViews: function() {
+      var fragment = document.createDocumentFragment();
+      this.users.each(function(user) {
+        var userView = new UserView({ model: user });
+        fragment.appendChild(userView.el);
+        this.views.push(userView);
+
+        if(this.selectedView && user.get('_id') === this.selectedView) {
+          userView.$el.addClass('selected').click();
+        }
+      }, this);
+      this.$('.users').append(fragment);
+    },
+
+    removeChildViews: function() {
+      if(this.views.length) {
+        for(var i = 0, count = this.views.length; i < count; i++) {
+          var view = this.views[i];
+          if (view.isSelected) this.selectedView = view.model.get('_id');
+          view.remove();
+        }
+        this.views = [];
+      }
+    },
+
+    postRender: function() {
+      this.setViewToReady();
+      this.$('.users').fadeIn(300);
+    },
+
+    onSortClick: function(event) {
+      var $elm = $(event.currentTarget);
+      var sortBy = $elm.data('sort');
+      var sortAscending = $elm.hasClass('sort-down');
+
+      if ($elm.hasClass('active')) {
+        sortAscending = !sortAscending;
+      }
+
+      this.$('.sort').removeClass('active sort-up').addClass('sort-down');
+      $elm.addClass('active');
+
+      $elm.toggleClass('sort-down', sortAscending);
+      $elm.toggleClass('sort-up', !sortAscending);
+
+      this.users.sortBy = sortBy;
+      this.users.direction = (sortAscending) ? 1 : -1;
+      this.users.updateFilter();
+    },
+
+    refreshUserViews: async function(event) {
+      event && event.preventDefault();
+      await this.collection.fetch();
+      this.render();
+    }
+  }, {
+    template: 'userManagement'
+  });
+
+  return UserManagementView;
+});

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

@@ -0,0 +1,324 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+  var Origin = require('core/origin');
+  var Helpers = require('../helpers');
+
+  var UserView = OriginView.extend({
+    isSelected: false,
+    tagName: 'div',
+    className: function() {
+      const classes = ['user-item', 'tb-row', this.model.get('_id')];
+      if(this.model.get('_id') === Origin.sessionModel.get('user')._id) {
+        classes.push('me');
+      }
+      if(this.model.get('_isHidden')) {
+        classes.push('display-none');
+      }
+      return classes.join(' ');
+    },
+
+    events: {
+      'click': 'onClicked',
+
+      'click a.edit': 'onEditClicked',
+      'click a.save': 'onSaveClicked',
+      'click a.cancel': 'onCancelClicked',
+
+      'click a.saveRoles': 'onSaveRoleClicked',
+
+      'click button.invite': 'onInviteClicked',
+      'click button.resetPassword': 'onResetPasswordClicked',
+      'click button.changePassword': 'onChangePasswordClicked',
+
+      'click button.disable': 'onDisableClicked',
+      'click button.delete': 'onDeleteClicked',
+      'click button.restore': 'onRestoreClicked',
+      'click button.unlock': 'onRestoreClicked'
+    },
+
+    preRender: function() {
+      this.listenTo(Origin, 'userManagement:user:reset', this.resetView);
+      this.listenTo(this, 'remove', this.remove);
+      this.listenTo(this.model, {
+        'destroy': this.remove,
+        'change:_isHidden': this.toggleHidden
+      });
+    },
+
+    render: function() {
+      OriginView.prototype.render.apply(this, arguments);
+      this.applyStyles();
+    },
+
+    applyStyles: function() {
+      // disabled user styling
+      this.$el.toggleClass('inactive', !this.model.get('isEnabled'));
+      // locked user styling
+      this.$el.toggleClass('locked', (this.model.get('isTempLocked') || this.model.get('isPermLocked')));
+      // selected user styling
+      if(this.isSelected) {
+        this.$el.addClass('selected');
+        this.$('.edit-mode').removeClass('display-none');
+        this.$('.write').addClass('display-none');
+      } else {
+        this.$el.removeClass('selected');
+        this.$('.edit-mode').addClass('display-none');
+        this.$('.write').addClass('display-none');
+      }
+    },
+
+    resetView: function() {
+      if(this.isSelected) {
+        this.isSelected = false;
+        this.applyStyles();
+      }
+    },
+
+    getColumnFromDiv: function(div) {
+      return $(div).closest('.tb-col-inner');
+    },
+    
+    getInputFromDiv: function(div) {
+      return $('.input', this.getColumnFromDiv(div));
+    },
+
+    disableFieldEdit: function(div) {
+      $('.read', div).removeClass('display-none');
+      $('.write', div).addClass('display-none');
+    },
+
+    toggleHidden: function(model, _isHidden) { 
+      this.$el.toggleClass('display-none', _isHidden); 
+    },
+
+    enableFieldEdit: function(div) {
+      $('.read', div).addClass('display-none');
+      $('.write', div).removeClass('display-none').children('input').focus();
+    },
+
+    enableUser: function(isEnable) {
+      Helpers.ajax(`api/auth/local/${isEnable ? 'enable' : 'disable'}`, { _id: this.model.get('_id') }, 'POST', () => this.model.fetch());
+    },
+
+    onEditClicked: function(event) {
+      event && event.preventDefault();
+
+      var $column = this.getColumnFromDiv(event.currentTarget);
+      // disable any existing inputs first
+      this.disableFieldEdit(this.$el);
+      this.enableFieldEdit($column);
+      var $input = this.getInputFromDiv($column);
+      var inputType = $input.attr('type');
+      if(inputType === "text" || inputType === "email") {
+        $input.val(this.model.get($input.attr('data-modelKey')));
+      }
+    },
+
+    onClicked: function(event) {
+      if(this.isSelected) return;
+      // will reset the old selection
+      Origin.trigger('userManagement:user:reset');
+      this.isSelected = true;
+      this.applyStyles();
+    },
+
+    onSaveClicked: function(event) {
+      event && event.preventDefault();
+
+      var $column = this.getColumnFromDiv(event.currentTarget);
+      this.disableFieldEdit($column);
+      // save if not the same as old value
+      var $input = this.getInputFromDiv($column);
+      this.updateModel($input.attr('data-modelKey'), $input.val());
+    },
+
+    onCancelClicked: function(event) {
+      event && event.preventDefault();
+      this.disableFieldEdit(this.getColumnFromDiv(event.currentTarget));
+    },
+
+    onSaveRoleClicked: async function(event) {
+      event && event.preventDefault();
+
+      var $column = this.getColumnFromDiv(event.currentTarget);
+      var $input = this.getInputFromDiv($column);
+      var oldRoleId = this.model.get('roles')[0];
+      var newRole = $input.val();
+
+      this.disableFieldEdit($column);
+
+      if(!newRole || newRole === oldRoleId) {
+        return;
+      }
+      try {
+        const newData = await $.ajax({ url: `api/users/${this.model.get('_id')}`, method: 'PATCH', data: { roles: [newRole] } });
+        this.model.set(newData);
+      } catch(e) {
+        this.onError(e);
+      }
+    },
+
+    onInviteClicked: function(e) {
+      Origin.Notify.confirm({
+        text: Origin.l10n.t('app.confirmsendinvite', { email: this.model.get('email') }),
+        callback: result => {
+          if(!result.isConfirmed) {
+            return;
+          }
+          var $btn = $(e.target);
+          $btn.addClass('submitted');
+          Helpers.ajax('api/auth/local/invite', { email: this.model.get('email') }, 'POST', () => {
+            $btn.removeClass('submitted');
+            Origin.Notify.alert({
+              type: 'success',
+              text: Origin.l10n.t('app.invitesent', { email: this.model.get('email') })
+            });
+          });
+        }
+      });
+    },
+
+    onResetPasswordClicked: function(e) {
+      Origin.Notify.confirm({
+        text: Origin.l10n.t('app.confirmsendreset', { email: this.model.get('email') }),
+        callback: result => {
+          if (!result.isConfirmed) {
+            return;
+          }
+          var $btn = $(e.currentTarget);
+          $btn.addClass('submitted');
+          Helpers.ajax('api/auth/local/forgotpass', { email: this.model.get('email') }, 'POST', () => {
+            $btn.removeClass('submitted');
+            Origin.Notify.alert({
+              type: 'success',
+              text: Origin.l10n.t('app.resetsent', { email: this.model.get('email') })
+            });
+          });
+        }
+      });
+    },
+
+    onChangePasswordClicked: function() {
+      Origin.Notify.confirm({
+        type: 'input',
+        title: Origin.l10n.t('app.resetpasswordtitle'),
+        text: Origin.l10n.t('app.resetpasswordinstruction', { email: this.model.get('email') }),
+        input: 'password',
+        confirmButtonText: 'Save',
+        callback: ({ isConfirmed, value: password }) => {
+          if(!isConfirmed) return;
+          else if(password === "") return swal.showInputError(Origin.l10n.t('app.invalidempty'));
+          const email = this.model.get('email');
+          Helpers.ajax('api/auth/local/changepass', { email, password }, 'POST', () => {
+            this.model.fetch();
+            Origin.Notify.alert({ type: 'success', text: Origin.l10n.t('app.changepasswordtext', { email }) });
+          });
+        }
+      });
+    },
+
+    onDisableClicked: function() {
+      this.enableUser(false);
+    },
+    
+    onRestoreClicked: function() {
+      this.enableUser(true);
+    },
+
+    onDeleteClicked: async function() {
+      const option = this.$('[name="delete-options"]').val();
+      let popupHtml = Origin.l10n.t('app.deleteusermessage', { email: this.model.get('email') });
+      const courses = await $.post(`/api/content/query`, { _type: 'course', createdBy: this.model.get('_id') });
+      if(courses.length) {
+        popupHtml += Origin.l10n.t('app.deleteusercourseconfirm') +
+        '<select id="swal-courses" class="swal2-select">' + 
+          `<option value="delete">${Origin.l10n.t("app.deletecourses")}</option>` + 
+          `<option value="transfer">${Origin.l10n.t("app.transfercourses")}</option>` + 
+        '</select>' +
+        '<div class="email-container">' +
+          `<input id="swal-email" class="swal2-input" placeholder="${Origin.l10n.t("app.deleteusercoursesinstruction")}">` +
+        '</div>' +
+        Origin.l10n.t('app.onewaytrip');
+      }
+      Origin.Notify.confirm({
+        type: 'confirm',
+        title: Origin.l10n.t('app.deleteuser'),
+        html: popupHtml,
+        didOpen: () => {
+          const $container = $('.email-container');
+          const $select = $('select.swal2-select');
+          $container.hide();
+          $select.on('change', () => $container.toggle($select.val() === 'transfer'));
+        },
+        preConfirm: async () => {
+          const shouldTransferCourses = $('select.swal2-select').val() === 'transfer';
+          let transferCoursesToUser;
+
+          if(shouldTransferCourses) {
+            const [newOwner] = await $.ajax({ 
+              url: '/api/users/query', 
+              method: 'POST', 
+              data: { email: $('#swal-email').val() } 
+            });
+            if(!newOwner) {
+              Origin.Notify.Swal.showValidationMessage(Origin.l10n.t("app.unknownuser"));
+              return false;
+            }
+            transferCoursesToUser = newOwner._id;
+          }
+          this.model.set({ shouldTransferCourses, transferCoursesToUser });
+        },
+        callback: async result => {
+          if(!result.isConfirmed) {
+            return; 
+          }
+          if(courses.length) {
+            try {
+              await Promise.all(courses.map(async c => {
+                const url = `/api/content/${c._id}`;
+                if(this.model.get('shouldTransferCourses')) {
+                  await $.ajax({ url, method: 'PATCH', data: { createdBy: this.model.get('transferCoursesToUser') } });
+                } else {
+                  await $.ajax({ url, method: 'DELETE' });
+                }
+              }));
+            } catch(e) {
+              return this.onError(e.responseJSON.message);
+            }
+          }
+          this.model.destroy({ 
+            data: { userCourseOption: option }, 
+            processData: true, 
+            error: this.onError 
+          });
+        }
+      });
+    },
+
+    updateModel: function(key, value) {
+      if(this.model.get(key) === value) {
+        return; // no point saving if there's no change
+      }
+      this.model.save({ [key]: value }, {
+        patch: true,
+        wait: true,
+        error: (model, response)  => {
+          if(response.responseJSON && response.responseJSON.code === 11000) { // duplicate key
+            return this.onError(Origin.l10n.t('app.duplicateuservalueerror', { key, value }));
+          }
+          this.onError(`${Origin.l10n.t('app.uservalueerror')} (${response.responseText})`);
+        }
+      });
+    },
+
+    onError: function(error) {
+      // HACK setTimeout workaround to give sweetalert time to clean up after a confirm
+      setTimeout(() => Origin.Notify.alert({ type: 'error', text: error.message || error }), 100);
+    }
+  }, {
+    template: 'user'
+  });
+
+  return UserView;
+});

package/conf/config.schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "properties": {
+    "buildDir": {
+      "description": "Location of UI build files",
+    	"type": "string",
+      "isDirectory": true,
+      "default": "$TEMP/ui-build"
+    },
+    "srcDir": {
+      "description": "Location of UI source files",
+    	"type": "string",
+      "isDirectory": true,
+      "default": "$TEMP/ui-src"
+    }
+  }
+}

package/docs/migrating-from-legacy.md

@@ -0,0 +1,19 @@
+# Migrating from legacy
+
+> During development, set `adapt-authoring-ui.isProduction` to `false` in your config file for easier debugging (all .js files are served directly, rather using than the minified adapt.js file)
+
+## Changes
+
+### Permissions
+
+The permissions mechanism has been completely rewritten to use permissions 'scopes' which are human-readable strings. Permissions utilities are now accessed directly from the SessionModel.
+
+- `Origin.permissions.hasPermission` => `Origin.sessionModel.hasScopes`
+- `hasPermission` => `ifHasScopes`
+
+### APIs
+
+#### TODO
+
+### Language strings
+Language strings are now served directly from the back-end server, and therefore need to be stored in the root `lang` folder of your authoring tool module. The server will need to be restarted for any changes to these to be recognised.

package/docs/plugins/index-ui.md

@@ -0,0 +1,17 @@
+# Welcome!
+
+This is the home of the official API reference documentation for the front-end application of the Adapt authoring tool (for the Node.js backend docs, see [this page]()).
+
+The Adapt authoring tool is a server-based user interface for authoring eLearning courses using the Adapt framework.
+
+## Contributing
+If you come across any errors or omissions in this documentation, please submit an issue on our [GitHub page](https://github.com/adaptlearning/adapt_authoring/issues).
+
+If you also have time to fix the issue, please see our [contribution guide](https://github.com/adaptlearning/adapt_framework/wiki/Contributing-code) on how to submit a fix.
+
+## Useful links
+
+- [Project website](https://www.adaptlearning.org/)
+- [GitHub project](https://github.com/adapt-security/adapt-authoring)
+- [Technical discussion forum](https://community.adaptlearning.org/mod/forum/view.php?id=4)
+- [Gitter chatrooms](https://www.adaptlearning.org/)

package/docs/plugins/uidocs.js

@@ -0,0 +1,54 @@
+import { exec } from 'child_process'
+import { fileURLToPath } from 'url'
+import fs from 'fs-extra'
+import { globSync } from 'glob'
+import path from 'path'
+import { promisify } from 'util'
+
+const execPromise = promisify(exec)
+
+export default class UIDocs {
+  resolvePath (relativePath, basePath) {
+    if (!basePath) basePath = this.docsRootPath
+    if (basePath instanceof URL) basePath = fileURLToPath(basePath)
+    return path.resolve(basePath, relativePath)
+  }
+
+  async run () {
+    this.outputDir = path.resolve(this.config.outputDir, '../frontend')
+    this.docsRootPath = path.resolve(this.app.dependencies['adapt-authoring-docs'].rootDir, 'jsdoc3')
+    this.configPath = this.resolvePath('.jsdocConfig.json', this.config.srcDir)
+    await this.writeConfig()
+
+    await execPromise(`npx jsdoc -c ${this.configPath}`)
+    await Promise.all([
+      fs.copy(this.resolvePath('./styles/adapt.css'), `${this.outputDir}/styles/adapt.css`),
+      fs.copy(this.resolvePath('./scripts/adapt.js'), `${this.outputDir}/scripts/adapt.js`),
+      fs.copy(this.resolvePath('../assets'), `${this.outputDir}/assets`)
+    ])
+  }
+
+  async writeConfig () {
+    const config = await fs.readJson(path.join(this.docsRootPath, '.jsdocConfig.json'))
+    // update source files
+    config.source.include = [
+      this.resolvePath('index-ui.md', this.config.srcDir),
+      ...globSync(`${this.app.dependencies['adapt-authoring-ui'].rootDir}/app/**/*.js`, { absolute: true })
+    ].filter(f => !f.includes('/libraries/'))
+    // replace first menu item
+    config.docdash.menu = Object.entries(config.docdash.menu).reduce((m, [k, v], i) => {
+      if (i === 0) {
+        k = `<img class="logo" src="assets/logo-outline-colour.png" />Adapt authoring tool front-end documentation<br><span class="version">v${this.app.pkg.version}</span>`
+      }
+      m[k] = v
+      return m
+    }, {})
+    // update metadata
+    config.docdash.meta.version = `v${this.app.pkg.version}`
+    config.docdash.meta.title = config.docdash.meta.description = 'Adapt authoring tool front-end documentation'
+    // set dest path
+    config.opts.destination = this.outputDir
+
+    return fs.writeFile(this.configPath, JSON.stringify(config, null, 2))
+  }
+}

package/docs/ui-extensions.md

@@ -0,0 +1,15 @@
+# Extending the UI
+The UI can be extended easily from an Adapt authoring tool module.
+
+## Register your plugin
+Register your UI plugin by calling the [UIModule#addUiPlugin](https://tomtaylor.codes/ls/jsdoc3/UIModule.html#addUiPlugin) function from your own module's [init](https://tomtaylor.codes/ls/jsdoc3/AbstractModule.html#init) function, which ensures that your plugin code is included in the build of the front-end app.
+
+Any files found in this folder will be included in the app build process, so make sure you include all front-end code, Handlebars templates and LESS/CSS in here.
+
+## Define language strings
+Add any translated language strings to the `/lang` folder in the root of your module
+
+## Resources
+
+- **GitHub template**: You can use the following GitHub template repository as a starting point: 
+[adapt-security/adapt-authoring-uiplugintemplate](https://github.com/adapt-security/adapt-authoring-uiplugintemplate)

package/index.js

@@ -0,0 +1 @@
+export { default } from './lib/UiModule.js'