feat(core): Minor UI fixes for mobile; autofocus

config/env/default.js

@@ -46,5 +46,15 @@ module.exports = {
         fileSize: 1 * 1024 * 1024 // Max file size in bytes (1 MB)
       }
     }
+  },
+  shared: {
+    owasp: {
+      allowPassphrases: true,
+      maxLength: 128,
+      minLength: 10,
+      minPhraseLength: 20,
+      minOptionalTestsToPass: 4
+    }
   }
+
 };

gulpfile.js

@@ -132,9 +132,9 @@ gulp.task('watch:server:run-tests', function () {
 gulp.task('csslint', function () {
   return gulp.src(defaultAssets.client.css)
     .pipe(plugins.csslint('.csslintrc'))
-    .pipe(plugins.csslint.formatter())
+    .pipe(plugins.csslint.formatter());
     // Don't fail CSS issues yet
-    //.pipe(plugins.csslint.failFormatter());
+    // .pipe(plugins.csslint.failFormatter());
 });
 
 // ESLint JS linting task

modules/articles/client/views/admin/form-article.client.view.html

@@ -3,7 +3,7 @@
     <h1>{{vm.article._id ? 'Edit Article' : 'New Article'}}</h1>
   </div>
   <div class="pull-right">
-    <a class="btn btn-primary" ng-click="vm.remove()">
+    <a ng-show="vm.article._id" class="btn btn-primary" ng-click="vm.remove()">
       <i class="glyphicon glyphicon-trash"></i>
     </a>
   </div>

modules/chat/client/css/chat.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 .chat-profile-image {
+  border-radius: 50%;
   height: 28px;
   width: 28px;
-  border-radius: 50%;
 }

modules/chat/client/views/chat.client.view.html

@@ -7,7 +7,7 @@ <h1>Chat Example</h1>
   <form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="vm.sendMessage();">
     <fieldset class="row">
       <div class="input-group">
-        <input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText" placeholder="Enter new message">
+        <input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText" placeholder="Enter new message" autofocus>
         <span class="input-group-btn">
           <button type="submit" class="btn btn-primary" ng-disabled="!vm.messageText.length">Submit</button>
         </span>

modules/core/client/config/core.client.route-filter.js

@@ -25,7 +25,7 @@
 
         if (!allowed) {
           event.preventDefault();
-          if (Authentication.user !== undefined && typeof Authentication.user === 'object') {
+          if (Authentication.user !== null && typeof Authentication.user === 'object') {
             $state.transitionTo('forbidden');
           } else {
             $state.go('authentication.signin').then(function () {

modules/core/client/css/core.css

@@ -12,25 +12,25 @@
   display: none !important;
 }
 .header-profile-image {
-  opacity: 0.8;
-  height: 28px;
-  width: 28px;
   border-radius: 50%;
+  height: 28px;
   margin-right: 5px;
+  opacity: 0.8;
+  width: 28px;
 }
 .open .header-profile-image,
 a:hover .header-profile-image {
   opacity: 1;
 }
 .user-header-dropdown-toggle {
-  padding-top: 11px !important;
   padding-bottom: 11px !important;
+  padding-top: 11px !important;
 }
 .user-primary-account {
   font-size: 30px;
-  top: 10px;
-  right: 10px;
   position: absolute;
+  right: 10px;
+  top: 10px;
 }
 .error-text {
   display: none;

modules/core/client/directives/autofocus.client.directives.js

@@ -0,0 +1,28 @@
+(function () {
+  'use strict';
+
+  // Focus the element on page load
+  // Unless the user is on a small device, because this could obscure the page with a keyboard
+
+  angular.module('core')
+    .directive('autofocus', autofocus);
+
+  autofocus.$inject = ['$timeout', '$window'];
+
+  function autofocus($timeout, $window) {
+    var directive = {
+      restrict: 'A',
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element, attrs) {
+      if ($window.innerWidth >= 800) {
+        $timeout(function() {
+          element[0].focus();
+        }, 100);
+      }
+    }
+  }
+}());

modules/core/server/controllers/core.server.controller.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var validator = require('validator');
+var validator = require('validator'),
+  path = require('path'),
+  config = require(path.resolve('./config/config'));
 
 /**
  * Render the main application page
  */
 exports.renderIndex = function (req, res) {
-
   var safeUserObject = null;
   if (req.user) {
     safeUserObject = {
@@ -24,7 +25,8 @@ exports.renderIndex = function (req, res) {
   }
 
   res.render('modules/core/server/views/index', {
-    user: JSON.stringify(safeUserObject)
+    user: JSON.stringify(safeUserObject),
+    sharedConfig: JSON.stringify(config.shared)
   });
 };
 

modules/core/server/views/layout.server.view.html

@@ -65,6 +65,12 @@
 
   <!--Application JavaScript Files-->
     {{#each jsFiles}}<script type="text/javascript" src="{{this}}"></script>{{/each}}
+
+  <!--owasp config sync-->
+  <script type="text/javascript">
+    var sharedConfig = {{{ sharedConfig }}};
+    owaspPasswordStrengthTest.config(sharedConfig.owasp);
+  </script>
 
   {{#if livereload}}
   <!--Livereload script rendered -->

modules/users/client/controllers/authentication.client.controller.js

@@ -5,9 +5,9 @@
     .module('users')
     .controller('AuthenticationController', AuthenticationController);
 
-  AuthenticationController.$inject = ['$scope', '$state', '$http', '$location', '$window', 'Authentication', 'PasswordValidator'];
+  AuthenticationController.$inject = ['$scope', '$state', 'UsersService', '$location', '$window', 'Authentication', 'PasswordValidator'];
 
-  function AuthenticationController($scope, $state, $http, $location, $window, Authentication, PasswordValidator) {
+  function AuthenticationController($scope, $state, UsersService, $location, $window, Authentication, PasswordValidator) {
     var vm = this;
 
     vm.authentication = Authentication;
@@ -33,15 +33,9 @@
         return false;
       }
 
-      $http.post('/api/auth/signup', vm.credentials).success(function (response) {
-        // If successful we assign the response to the global user model
-        vm.authentication.user = response;
-
-        // And redirect to the previous or home page
-        $state.go($state.previous.state.name || 'home', $state.previous.params);
-      }).error(function (response) {
-        vm.error = response.message;
-      });
+      UsersService.userSignup(vm.credentials)
+        .then(onUserSignupSuccess)
+        .catch(onUserSignupError);
     }
 
     function signin(isValid) {
@@ -53,15 +47,9 @@
         return false;
       }
 
-      $http.post('/api/auth/signin', vm.credentials).success(function (response) {
-        // If successful we assign the response to the global user model
-        vm.authentication.user = response;
-
-        // And redirect to the previous or home page
-        $state.go($state.previous.state.name || 'home', $state.previous.params);
-      }).error(function (response) {
-        vm.error = response.message;
-      });
+      UsersService.userSignin(vm.credentials)
+        .then(onUserSigninSuccess)
+        .catch(onUserSigninError);
     }
 
     // OAuth provider request
@@ -73,5 +61,31 @@
       // Effectively call OAuth authentication route:
       $window.location.href = url;
     }
+
+    // Authentication Callbacks
+
+    function onUserSignupSuccess(response) {
+      // If successful we assign the response to the global user model
+      vm.authentication.user = response;
+
+      // And redirect to the previous or home page
+      $state.go($state.previous.state.name || 'home', $state.previous.params);
+    }
+
+    function onUserSignupError(response) {
+      vm.error = response.data.message;
+    }
+
+    function onUserSigninSuccess(response) {
+      // If successful we assign the response to the global user model
+      vm.authentication.user = response;
+
+      // And redirect to the previous or home page
+      $state.go($state.previous.state.name || 'home', $state.previous.params);
+    }
+
+    function onUserSigninError(response) {
+      vm.error = response.data.message;
+    }
   }
 }());

modules/users/client/controllers/password.client.controller.js

@@ -5,9 +5,9 @@
     .module('users')
     .controller('PasswordController', PasswordController);
 
-  PasswordController.$inject = ['$scope', '$stateParams', '$http', '$location', 'Authentication', 'PasswordValidator'];
+  PasswordController.$inject = ['$scope', '$stateParams', 'UsersService', '$location', 'Authentication', 'PasswordValidator'];
 
-  function PasswordController($scope, $stateParams, $http, $location, Authentication, PasswordValidator) {
+  function PasswordController($scope, $stateParams, UsersService, $location, Authentication, PasswordValidator) {
     var vm = this;
 
     vm.resetUserPassword = resetUserPassword;
@@ -30,16 +30,9 @@
         return false;
       }
 
-      $http.post('/api/auth/forgot', vm.credentials).success(function (response) {
-        // Show user success message and clear form
-        vm.credentials = null;
-        vm.success = response.message;
-
-      }).error(function (response) {
-        // Show user error message and clear form
-        vm.credentials = null;
-        vm.error = response.message;
-      });
+      UsersService.requestPasswordReset(vm.credentials)
+        .then(onRequestPasswordResetSuccess)
+        .catch(onRequestPasswordResetError);
     }
 
     // Change user password
@@ -52,18 +45,37 @@
         return false;
       }
 
-      $http.post('/api/auth/reset/' + $stateParams.token, vm.passwordDetails).success(function (response) {
-        // If successful show success message and clear form
-        vm.passwordDetails = null;
+      UsersService.resetPassword($stateParams.token, vm.passwordDetails)
+        .then(onResetPasswordSuccess)
+        .catch(onResetPasswordError);
+    }
+
+    // Password Reset Callbacks
+
+    function onRequestPasswordResetSuccess(response) {
+      // Show user success message and clear form
+      vm.credentials = null;
+      vm.success = response.message;
+    }
 
-        // Attach user profile
-        Authentication.user = response;
+    function onRequestPasswordResetError(response) {
+      // Show user error message and clear form
+      vm.credentials = null;
+      vm.error = response.data.message;
+    }
+
+    function onResetPasswordSuccess(response) {
+      // If successful show success message and clear form
+      vm.passwordDetails = null;
+
+      // Attach user profile
+      Authentication.user = response;
+      // And redirect to the index page
+      $location.path('/password/reset/success');
+    }
 
-        // And redirect to the index page
-        $location.path('/password/reset/success');
-      }).error(function (response) {
-        vm.error = response.message;
-      });
+    function onResetPasswordError(response) {
+      vm.error = response.data.message;
     }
   }
 }());

modules/users/client/controllers/settings/change-password.client.controller.js

@@ -5,9 +5,9 @@
     .module('users')
     .controller('ChangePasswordController', ChangePasswordController);
 
-  ChangePasswordController.$inject = ['$scope', '$http', 'Authentication', 'PasswordValidator'];
+  ChangePasswordController.$inject = ['$scope', '$http', 'Authentication', 'UsersService', 'PasswordValidator'];
 
-  function ChangePasswordController($scope, $http, Authentication, PasswordValidator) {
+  function ChangePasswordController($scope, $http, Authentication, UsersService, PasswordValidator) {
     var vm = this;
 
     vm.user = Authentication.user;
@@ -24,14 +24,20 @@
         return false;
       }
 
-      $http.post('/api/users/password', vm.passwordDetails).success(function (response) {
-        // If successful show success message and clear form
-        $scope.$broadcast('show-errors-reset', 'vm.passwordForm');
-        vm.success = true;
-        vm.passwordDetails = null;
-      }).error(function (response) {
-        vm.error = response.message;
-      });
+      UsersService.changePassword(vm.passwordDetails)
+        .then(onChangePasswordSuccess)
+        .catch(onChangePasswordError);
+    }
+
+    function onChangePasswordSuccess(response) {
+      // If successful show success message and clear form
+      $scope.$broadcast('show-errors-reset', 'vm.passwordForm');
+      vm.success = true;
+      vm.passwordDetails = null;
+    }
+
+    function onChangePasswordError(response) {
+      vm.error = response.data.message;
     }
   }
 }());