adapt-authoring-ui 0.0.1

package/app/modules/sidebar/views/sidebarItemView.js

@@ -0,0 +1,172 @@
+// 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 SidebarFieldsetFilterView = require('./sidebarFieldsetFilterView');
+  var Backbone = require('backbone');
+  var Helpers = require('core/helpers');
+
+  var SidebarItemView = OriginView.extend({
+
+    className: 'sidebar-item',
+
+    events: {
+      'click button.editor-common-sidebar-project': 'editProject',
+      'click button.editor-common-sidebar-config': 'editConfiguration',
+      'click button.editor-common-sidebar-extensions': 'manageExtensions',
+      'click button.editor-common-sidebar-menusettings': 'editMenu',
+      'click button.editor-common-sidebar-select-theme': 'selectTheme',
+      'click button.editor-common-sidebar-download': 'downloadProject',
+      'click button.editor-common-sidebar-preview': 'previewProject',
+      'click button.editor-common-sidebar-preview-force': 'forcePreviewProject',
+      'click button.editor-common-sidebar-export': 'exportProject',
+      'click button.editor-common-sidebar-close': 'closeProject',
+      'click .editor-common-sidebar-preview-wrapper .dropdown button': 'toggleDropdown'
+    },
+
+    initialize: function(options) {
+
+        // Set form on view
+        if (options && options.form) {
+          this.form = options.form;
+        }
+        this.render();
+        this.listenTo(Origin, 'sidebar:updateButton', this.updateButton);
+        this.listenTo(Origin, 'sidebar:resetButtons', this.resetButtons);
+        this.listenTo(Origin, 'sidebar:views:animateIn', this.animateViewIn);
+        _.defer(_.bind(function() {
+            this.setupView();
+            if (this.form) {
+              this.setupFieldsetFilters();
+              this.listenTo(Origin, 'editorSidebar:showErrors', this.onShowErrors);
+            }
+        }, this));
+    },
+
+    postRender: function() {
+      this._onWindowClick = this.onWindowClick.bind(this);
+      this.$dropdown = this.$('.dropdown');
+      $(window).on('click', this._onWindowClick);
+    },
+
+    setupView: function() {
+        this.listenTo(Origin, 'sidebar:views:remove', this.remove);
+    },
+
+    setupFieldsetFilters: function() {
+      var fieldsets = this.form.options.fieldsets;
+      if (fieldsets.length > 0) {
+        this.$('.sidebar-item-inner').append(Handlebars.templates['sidebarDivide']({title: 'Filters'}));
+      }
+      _.each(fieldsets, function(fieldset) {
+        this.$('.sidebar-item-inner').append(new SidebarFieldsetFilterView({model: new Backbone.Model(fieldset)}).$el);
+      }, this);
+    },
+
+    onShowErrors: function(errors) {
+      this.$('.sidebar-fieldset-filter').removeClass('error');
+
+      if (errors) {
+        // If there's error we should reset the save button
+        this.resetButtons();
+        // Go through each error and see where this error fits in the fieldsets
+        // this way we can notify the user something is invalid on the sidebar filters
+        _.each(errors, function(error, attribute) {
+          _.each(this.form.options.fieldsets, function(fieldset, key) {
+            //var fieldKeys = _.keys(fieldset.fields);
+            if (_.contains(fieldset.fields, attribute)) {
+              // Convert fieldsets legend value to class name
+              var className = Helpers.stringToClassName(fieldset.legend);
+              // Set error message
+              this.$('.sidebar-fieldset-filter-' + className).addClass('error');
+            }
+          }, this);
+        }, this);
+      }
+    },
+
+    updateButton: function(buttonClass, updateText) {
+      this.$(buttonClass)
+        .append(Handlebars.templates['sidebarUpdateButton']({updateText: updateText}))
+        .addClass('sidebar-updating')
+        .attr('disabled', true)
+        .find('span:first-child').addClass('display-none');
+    },
+
+    resetButtons: function() {
+      const $spans = this.$('.sidebar-updating').removeClass('sidebar-updating').attr('disabled', false).find('span');
+      for (let i = 0; i < $spans.length; i++) {
+        const $s = $($spans[i]);
+        if($s.hasClass('display-none')) $s.removeClass('display-none');
+        else $s.remove();
+      }
+    },
+
+    animateViewIn: function() {
+        this.$el.velocity({'left': '0%', 'opacity': 1}, "easeOutQuad");
+    },
+
+    navigateToEditorPage: function(page) {
+      Origin.router.navigateTo('editor/' + Origin.editor.data.course.get('_id') + '/' + page);
+    },
+
+    editProject: function() {
+      this.navigateToEditorPage('settings');
+    },
+
+    editConfiguration: function() {
+      this.navigateToEditorPage('config');
+    },
+
+    selectTheme: function() {
+      this.navigateToEditorPage('selecttheme');
+    },
+
+    editMenu: function() {
+      this.navigateToEditorPage('menusettings');
+    },
+
+    manageExtensions: function() {
+      this.navigateToEditorPage('extensions');
+    },
+
+    downloadProject: function() {
+      Origin.trigger('editorCommon:download');
+    },
+
+    previewProject: function() {
+      Origin.trigger('editorCommon:preview', false);
+    },
+
+    forcePreviewProject: function() {
+      Origin.trigger('editorCommon:preview', true);
+    },
+
+    exportProject: function() {
+      Origin.trigger('editorCommon:export');
+    },
+
+    closeProject: function() {
+      Origin.router.navigateToDashboard();
+    },
+
+    toggleDropdown: function(event) {
+      event.stopPropagation();
+      this.$dropdown.toggleClass('active');
+    },
+
+    onWindowClick: function() {
+      this.$dropdown.removeClass('active');
+    },
+
+    remove: function() {
+      $(window).off('click', this._onWindowClick);
+      OriginView.prototype.remove.apply(this, arguments);
+    }
+
+  });
+
+  return SidebarItemView;
+
+})

package/app/modules/sidebar/views/sidebarView.js

@@ -0,0 +1,71 @@
+// 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 SidebarFilterView = require('./sidebarFilterView');
+
+	var Sidebar = OriginView.extend({
+
+		className: 'sidebar',
+
+		initialize: function() {
+			this.render();
+			this.listenTo(Origin, 'sidebar:sidebarContainer:update', this.updateViews);
+			this.listenTo(Origin, 'sidebar:sidebarFilter:add', this.addFilterView);
+			this.listenTo(Origin, 'sidebar:sidebarContainer:hide', this.hideSidebar);
+		},
+
+		updateViews: function($element, options) {
+			$('html').removeClass('sidebar-hide');
+
+			// Check if options exists
+			var options = (options || {});
+
+			// If backButton option setup backButton
+			if (options.backButtonText && options.backButtonRoute) {
+				this.setupBackButtonRoute(options);
+			} else {
+				this.removeBackButtonRoute();
+			}
+
+			// Append new view into sidebar
+			// Append is better here so we can animate the current view out
+			this.$('.sidebar-item-container').append($element);
+
+		},
+
+		hideSidebar: function() {
+			$('html').addClass('sidebar-hide');
+		},
+
+		setupBackButtonRoute: function(options) {
+			// If breadcrumb, render template and animate in
+			var template = Handlebars.templates['sidebarBreadcrumb'];
+			this.$('.sidebar-breadcrumb').html(template(options));
+			_.defer(function() {
+				this.$('.sidebar-breadcrumb').velocity({'top': '0px', 'opacity': 1}, function() {
+					Origin.trigger('sidebar:views:animateIn');
+				});
+			});
+		},
+
+		removeBackButtonRoute: function() {
+			// If breadcrumb needs removing, animate out and trigger animateIn for the new view
+			this.$('.sidebar-breadcrumb').velocity({'top': '-40px', 'opacity': 0}, function() {
+				$(this).empty();
+				Origin.trigger('sidebar:views:animateIn');
+			});
+		},
+
+		addFilterView: function(options) {
+			Origin.trigger('sidebar:sidebarFilter:remove');
+			$('body').append(new SidebarFilterView(options).$el);
+		}
+	}, {
+		template: 'sidebar'
+	});
+
+	return Sidebar;
+
+});

package/app/modules/user/index.js

@@ -0,0 +1,75 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var ForgotPasswordView = require('./views/forgotPasswordView');
+  var LoginView = require('./views/loginView');
+  var Origin = require('core/origin');
+  var ResetPasswordView = require('./views/resetPasswordView');
+  var UserProfileModel = require('./models/userProfileModel');
+  var UserProfileSidebarView = require('./views/userProfileSidebarView');
+  var UserProfileView = require('./views/userProfileView');
+
+  Origin.on('user:logout', function() {
+    Origin.router.navigateTo('user/logout');
+  });
+
+  Origin.on('user:profile', function() {
+    Origin.router.navigateTo('user/profile');
+  });
+
+  Origin.on('router:user', async function(location, subLocation, action) {
+    var currentView;
+    var model = Origin.sessionModel;
+    var settings = {};
+    var query = {};
+
+    if(location.indexOf('reset') === 0) { // hack fix this
+      $('body').removeClass(`location-${location}`);
+      try {
+        query = parseQueryString(location);
+      } catch(e) {}
+      location = 'reset';
+      $('body').addClass(`location-${location}`);
+    }
+    settings.authenticate = false;
+
+    switch(location) {
+      case 'login':
+        if(model.get('isAuthenticated')) return Origin.router.navigateToDashboard();
+        Origin.trigger('contentHeader:hide');
+        currentView = LoginView;
+        break;
+      case 'logout':
+        Origin.sessionModel.logout();
+        break;
+      case 'forgot':
+        Origin.trigger('sidebar:sidebarContainer:hide');
+        currentView = ForgotPasswordView;
+        break;
+      case 'reset':
+        Origin.trigger('sidebar:sidebarContainer:hide');
+        currentView = ResetPasswordView;
+        model = new Backbone.Model(query);
+        break;
+      case 'profile':
+        settings.authenticate = true;
+        Origin.trigger('contentHeader:updateTitle', {title: Origin.l10n.t('app.editprofiletitle')});
+        model = new UserProfileModel();
+        await model.fetch();
+        currentView = UserProfileView;
+        Origin.sidebar.addView(new UserProfileSidebarView().$el);
+        break;
+    }
+    if(currentView) Origin.contentPane.setView(currentView, { model });
+  });
+
+  function parseQueryString(queryString) {
+    try {
+      return queryString.split('?')[1].split('&').reduce((m,s) => {
+        const [k,v] = s.split('=');
+        return Object.assign(m, { [k]: v });
+      }, {});
+    } catch(e) {
+      return {};
+    }
+  }
+});

package/app/modules/user/less/forgotPassword.less

@@ -0,0 +1,14 @@
+div.forgot-password {
+    div {
+        margin-bottom: 20px;
+    }
+
+    .forgot-login {
+        margin-bottom: 0;
+    }
+
+    div.forgot-password-success {
+        padding: 0 30px;
+    }
+
+}

package/app/modules/user/less/login.less

@@ -0,0 +1,138 @@
+@import 'colours';
+
+.module-user {
+  &.location-login,
+  &.location-forgot,
+  &.location-reset {
+    .no-ui;
+
+    max-width: 450px;
+    margin: 0 auto;
+    color: @white;
+
+    #app {
+      margin-left: 0px;
+      
+      .contentPane {
+        overflow: hidden;
+      }
+    }
+
+    a {
+      color: @white;
+    }
+
+    button.small {
+      font-size: 16px;
+      margin: 0 auto;
+      display: block;
+      width: 200px;
+      margin-top: 20px;
+      height: 80%;
+    }
+  }
+
+  .login-logo {
+    height: 123px;
+    background-image: url('assets/adapt-learning-logo-white.png');
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .login-title {
+    text-align: center;
+    font-size: 32px;
+    margin-top: 60px;
+    margin-bottom: 40px;
+  }
+
+  #loginError {
+    width: 425px;
+    text-align: center;
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 4px;
+    margin: 5px 0;
+    padding: 10px;
+
+    i.fa {
+      color: @alert-color;
+      font-size: 110%;
+      margin-right: 5px;
+    }
+
+    #loginErrorMessage {
+      font-size: 110%;
+      color: @white;
+      position: static;
+    }
+  }
+
+  .login-fields, .forgot-password-form {
+    margin: 20px 0 20px 0;
+    position: relative;
+
+    .login-input-username,
+    .login-input-password,
+    .input-username-email {
+      font-size: 20px;
+      border-radius: 4px;
+      border: 0;
+      padding: 11px 20px;
+      background-color: fade(@white, 40%);
+      color: @white;
+      margin-bottom: 5px;
+      height: 40px;
+    }
+
+    input::-webkit-input-placeholder {
+      color: @white;
+    }
+    input:-moz-placeholder {
+      color: @white;
+    }
+    input::-moz-placeholder {
+      color: @white;
+    }
+    input:-ms-input-placeholder {
+      color: @white;
+    }
+
+    .input-username-email,
+    .login-input-password,
+    .login-input-username {
+      width: 405px;
+    }
+
+    button {
+      margin-bottom: 5px;
+      width: 445px;
+      height: 65px;
+      font-size: 20px;
+    }
+  }
+
+  .login-remember-me {
+    float: left;
+    font-size: 15px;
+    margin-left: 40px;
+  }
+
+  .remember-me-label {
+    padding-left: 10px;
+    display: inline;
+  }
+
+  .remember-me-checkbox {
+    vertical-align: middle;
+  }
+
+  .login-forgot-password {
+    float: right;
+    margin-right: 80px;
+    a {
+      font-size: 15px;
+      color: @white;
+      text-decoration: none;
+    }
+  }
+}

package/app/modules/user/less/logout.less

@@ -0,0 +1,3 @@
+.logout-inner {
+    padding:30px;
+}

package/app/modules/user/less/resetPassword.less

@@ -0,0 +1,7 @@
+div.reset-password {
+    .cancel {
+        font-size: 15px;
+        color: @white;
+        text-decoration: none;
+    }
+}

package/app/modules/user/less/userProfile.less

@@ -0,0 +1,49 @@
+@import 'colours';
+
+.user-profile {
+    .error-text {
+        padding: 15px 30px;
+        background-color: @alert-color;
+        color: @white;
+    }
+
+    .intro-text {
+        padding: 30px 30px 0 30px;
+    }
+
+    .error,
+    .success {
+        position: static;
+        top: auto;
+        left: auto;
+        font-size: inherit;
+        margin-left: 5px;
+    }
+
+    .editing-overlay-panel-content {
+        border-bottom: none;
+        .inner {
+            margin-bottom: 20px;
+
+            .alert {
+                background-color: transparent;
+                color: @alert-color;
+            }
+            .alert-info {
+                color: @warning-color;
+            }
+            .alert-success {
+                color: @secondary-color;
+            }
+            .feedback {
+                padding-bottom: 15px;
+            }
+        }
+    }
+
+    #passwordFeedback {
+        .feedback;
+    }
+    #passwordFeedback.error { background-color: @alert-color; border-color: darken(@alert-color, 20%); }
+    #passwordFeedback.success { background-color: @success-color; border-color: darken(@success-color, 20%); }
+}

package/app/modules/user/models/userProfileModel.js

@@ -0,0 +1,32 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var _ = require('underscore');
+  var Backbone = require('backbone');
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+
+  var UserProfileModel = Backbone.Model.extend({
+    idAttribute: '_id',
+    url: 'api/users/me',
+
+    validate: function(attributes) {
+      var validationErrors = {};
+
+      if (!attributes.firstName) {
+        validationErrors.firstName = Origin.l10n.t('app.validationrequired');
+      }
+      if (!attributes.lastName) {
+        validationErrors.lastName = Origin.l10n.t('app.validationrequired');
+      }
+      if (!attributes.email) {
+        validationErrors.email = Origin.l10n.t('app.validationrequired');
+      } else if (!Helpers.isValidEmail(attributes.email)) {
+        validationErrors.email = Origin.l10n.t('app.invalidusernameoremail');
+      }
+      return _.isEmpty(validationErrors) ? null : validationErrors;
+    }
+
+  });
+
+  return UserProfileModel;
+});

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

@@ -0,0 +1,36 @@
+{{importConstants}}
+
+<div class="login-logo"></div>
+
+<div class="login-title">{{t 'app.resetpassword'}}</div>
+
+<div class="forgot-password-success display-none">
+    {{t 'app.forgotpasswordsuccess'}}
+    <button class="return btn small secondary">{{t 'app.returnto'}} {{t 'app.login'}}</button>
+</div>
+
+<div class="forgot-container">
+  <div class="forgot-introduction">
+    {{t 'app.forgotpasswordblurb'}}
+  </div>
+  <div class="forgot-form">
+    <form class="forgot-password-form">
+      <div id="loginError" class="forgotError display-none">
+        <i class="fa fa-times"></i> {{t 'app.invalidusernameoremail'}}<span id="loginErrorMessage"/>
+      </div>
+      <div class="forgot-login">
+          <input type="email" autocomplete="off" placeholder="{{t 'app.usernameoremail'}}" class="input-username-email" tabindex="1">
+      </div>
+      <button type="submit" class="submit btn secondary">{{t 'app.continue'}}</button>
+      <button class="cancel btn white-hollow">{{t 'app.cancel'}}</button>
+    </form>
+  </div>
+    <div class="forgot-footer">
+    <strong>{{t 'app.hasyouremailchanged'}}</strong>
+    {{#if constants.supportContact}}
+    {{t 'app.forgotpasswordfooter' supportContact=constants.supportContact}}
+    {{else}}
+    {{t 'app.forgotpasswordfooter' supportContact=(t 'app.anadmin')}}
+    {{/if}}
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+<div class="login-inner">
+    <div class="login-logo"></div>
+
+    <form class="login-form" autocomplete="off">
+        <div class="login-title">{{t 'app.signin'}}</div>
+        {{#if isAuthenticated}}
+            {{t 'app.alreadyloggedin'}}
+            <button class="dash btn small secondary">{{t 'app.gotodashboard'}}</button>
+        {{else}}
+            <div class="login-fields">
+                <div id="loginError" class="display-none">
+                    <i class="fa fa-times"></i><span id="loginErrorMessage"/>
+                </div>
+                <input type="email" autocomplete="off" class="login-input-username" value="" id="login-input-username" placeholder="{{t 'app.usernameoremail'}}" tabindex="1" />
+                <input type="password" autocomplete="off" class="login-input-password" value="" id="login-input-password" placeholder="{{t 'app.password'}}" tabindex="2" />
+                <button type="submit" class="btn secondary login-form-submit" tabindex="3">{{t 'app.login'}}</button>
+            </div>
+            <div class="login-remember-me">
+                <input checked id="remember-me" class="remember-me-checkbox" name="remember-me" type="checkbox"/>
+                <label for="remember-me" class="remember-me-label">{{t 'app.rememberme'}}</label>
+            </div>
+            {{#ifMailEnabled}}
+            <div class="login-forgot-password">
+                <a class="" href="#user/forgot">{{t 'app.forgotpassword'}}</a>
+            </div>
+            {{/ifMailEnabled}}
+        {{/if}}
+    </form>
+</div>

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

@@ -0,0 +1,29 @@
+<div class="inner">
+  <div class="login-logo"></div>
+
+  <div class="login-title">{{t 'app.resetpassword'}}</div>
+
+  <div class="reset-introduction">
+    {{t 'app.passwordtip'}}
+  </div>
+
+  <div class="message">
+    <div class="success display-none">
+      <p>{{t 'app.resetpasswordsuccess'}}</p>
+      <button class="return btn small secondary">{{t 'app.returnto'}} {{t 'app.login'}}</button>
+    </div>
+  </div>
+
+  <form class="form-reset-password forms">
+    <div class="login-fields">
+        <div id="loginError" class="resetError display-none">
+          <i class="fa fa-times"></i><span id="loginErrorMessage" class="message"/>
+        </div>
+        <input type="password" class="login-input-password" id="password" value="" placeholder="{{t 'app.newpassword'}}" autocomplete="off">
+        <div id="passwordStrength"></div>
+        <input type="password" class="login-input-password" id="confirmPassword" value="" placeholder="{{t 'app.confirmpassword'}}" autocomplete="off">
+        <button type="submit" class="btn secondary">{{t 'app.changepassword'}}</button>
+        <button class="cancel btn white-hollow">{{t 'app.cancel'}}</button>
+    </div>
+  </form>
+</div>