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

* Added configuration for owasp. Synchronize client owap configs with the server configs.
Also added a time indicator on failed login attempts to give the user feedback on subsequent failed login attempts.

* switched to handlebar template for passing the server's owasp config down to the client.

reverted some of the other changes (regarding the http request).

* Removed debug code.

* Changed variable name to owaspConfig

* Fixed minor type-o's and set owasp.config() rather than the underlying configs.

* chore(tidy): tidying up minor lint and layout issues

* fix(lint): CSS alphabetize warnings (#1498)

Fixes css lintings warnings of properties not alphabetized.

* fix(authentication) Stops error on signin/signup (#1495)

Uses the passport info object to simplify login and remove the need to
temporarily cache the redirect within the session.

* Moved owasp config into default and reverted other config files.

Modified config to be "shared". This will allow future configurations to be easily passed to the client.

* fixed 403 redirect if not signed in (#1496)

* Update form-article.client.view.html

For New Article, delete function no required

* UI changes for mobile; autofocus

* fixed broken password popover balloon

* add e2e test for autofocus

* Remove test, fix delete social login button

* feat(core): Move template to .github folder

* Deprecated $http success/error promise methods (#1508)

Replaces the $http service calls with promise based methods
of the client-side UsersService for the following:
  Users Change Password
  Users Manage Social Accounts
  Users Password Forgot
  Users Password Reset
  Users Signup
  Users Signin

Modifies tests to reflect changes.

Closes #1479

* rebase

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

@@ -7,7 +7,7 @@
   <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/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/users/client/views/authentication/signin.client.view.html

@@ -4,8 +4,11 @@
     <form name="vm.userForm" ng-submit="vm.signin(vm.userForm.$valid)" class="signin" novalidate autocomplete="off">
       <fieldset>
         <div class="form-group" show-errors>
+          <uib-alert type="danger" ng-show="vm.error" class="text-center text-danger">
+            <span ng-bind="vm.error"></span>
+          </uib-alert>
           <label for="username">Username</label>
-          <input type="text" id="username" name="username" class="form-control" ng-model="vm.credentials.username" placeholder="Username" lowercase required>
+          <input type="text" id="username" name="username" class="form-control" ng-model="vm.credentials.username" placeholder="Username" lowercase required autofocus>
           <div ng-messages="vm.userForm.username.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Username is required.</p>
           </div>
@@ -25,12 +28,7 @@
         <div class="text-center forgot-password">
           <a ui-sref="password.forgot">Forgot your password?</a>
         </div>
-        <p> 
-          &nbsp;
-        </p>
-        <uib-alert type="danger" ng-show="vm.error" class="text-center text-danger">
-          <span ng-bind="vm.error"></span>
-        </uib-alert>
+        <br />
       </fieldset>
     </form>
   </div>

modules/users/client/views/authentication/signup.client.view.html

@@ -5,7 +5,7 @@
       <fieldset>
         <div class="form-group" show-errors>
           <label for="firstName">First Name</label>
-          <input type="text" id="firstName" name="firstName" class="form-control" ng-model="vm.credentials.firstName" placeholder="First Name" required>
+          <input type="text" id="firstName" name="firstName" class="form-control" ng-model="vm.credentials.firstName" placeholder="First Name" required autofocus>
           <div ng-messages="vm.userForm.firstName.$error" role="alert">
             <p class="help-block error-text" ng-message="required">First name is required.</p>
           </div>
@@ -34,7 +34,7 @@
         </div>
         <div class="form-group" show-errors>
           <label for="password">Password</label>
-            <input type="password" id="password" name="password" class="form-control" ng-model="vm.credentials.password" placeholder="Password" uib-popover="{{vm.getPopoverMsg()}}" uib-popover-trigger="focus" password-validator required>
+            <input type="password" id="password" name="password" class="form-control" ng-model="vm.credentials.password" placeholder="Password" uib-popover="{{vm.getPopoverMsg()}}" popover-trigger="outsideClick" password-validator required>
           <div ng-messages="vm.userForm.password.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Password is required.</p>
             <div ng-repeat="passwordError in passwordErrors">

modules/users/client/views/settings/edit-profile.client.view.html

@@ -4,7 +4,7 @@
       <fieldset>
         <div class="form-group" show-errors>
           <label for="firstName">First Name</label>
-          <input type="text" id="firstName" name="firstName" class="form-control" ng-model="vm.user.firstName" placeholder="First Name" required>
+          <input type="text" id="firstName" name="firstName" class="form-control" ng-model="vm.user.firstName" placeholder="First Name" required autofocus>
           <div ng-messages="vm.userForm.firstName.$error" role="alert">
             <p class="help-block error-text" ng-message="required">First name is required.</p>
           </div>

modules/users/client/views/settings/manage-social-accounts.client.view.html

@@ -7,9 +7,11 @@
       <i class="glyphicon glyphicon-check text-success user-primary-account" data-toggle="popover" title="Primary: {{vm.user.provider}}"></i>
     </div>
     <div ng-repeat="(providerName, providerData) in vm.user.additionalProvidersData" class="social-account-container">
-      <img ng-src="/modules/users/client/img/buttons/{{providerName}}.png">
-      <a class="btn btn-danger btn-add-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
-        <i class="glyphicon glyphicon-trash"></i>
+      <a href ng-click="vm.removeUserSocialAccount(providerName)">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/{{::providerName}}.png">
+        <span class="btn btn-danger btn-add-remove-account">
+          <i class="glyphicon glyphicon-trash"></i>
+        </span>
       </a>
     </div>
   </div>