In login modal, displays an alert if Caps lock key is pressed

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added tooltip concerning images insertion while configuring the about page
 - Ability for admins to configure the maximum visibility for availabilities reservation
 - Administrators isolation in a special group
+- In login modal, displays an alert if Caps lock key is pressed
 - Fix a bug: admins cannot see all availabilities for spaces in reservation calendar when a user is selected
 - Fix a bug: missing translation after payment in english and portuguese
 - Fix a bug: invalid notification when sending monetary coupon to users

app/assets/javascripts/app.js.erb

@@ -20,7 +20,7 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ngCooki
                'ui.select', 'ui.calendar', 'angularMoment', 'Devise', 'DeviseModal', 'angular-growl', 'xeditable',
                'checklist-model', 'unsavedChanges', 'angular-loading-bar', 'ngTouch', 'angular-google-analytics',
                'angularUtils.directives.dirDisqus', 'summernote', 'elasticsearch', 'angular-medium-editor', 'naif.base64',
-               'minicolors', 'pascalprecht.translate', 'ngFitText', 'ngAside']).
+               'minicolors', 'pascalprecht.translate', 'ngFitText', 'ngAside', 'ngCapsLock']).
 config(['$httpProvider', 'AuthProvider', "growlProvider", "unsavedWarningsConfigProvider", "AnalyticsProvider", "uibDatepickerPopupConfig", "$provide", "$translateProvider",
     function($httpProvider, AuthProvider, growlProvider, unsavedWarningsConfigProvider, AnalyticsProvider, uibDatepickerPopupConfig, $provide, $translateProvider) {
 

app/assets/javascripts/application.js.erb

@@ -68,6 +68,7 @@
 //= require angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat
 //= require ngFitText/dist/ng-FitText.min
 //= require angular-aside/dist/js/angular-aside
+//= require ngCapsLock/ng-caps-lock
 //= require_tree ./controllers
 //= require_tree ./services
 //= require_tree ./directives

app/assets/templates/shared/deviseModal.html.erb

@@ -42,6 +42,10 @@
                          ng-minlength="8"/>
                 </div>
                 <a href="#" ng-click="openResetPassword($event)" class="text-xs">{{ 'password_forgotten' | translate }}</a>
+                <div class="alert alert-warning m-t-sm m-b-none text-xs p-sm" ng-show='isCapsLockOn' role="alert">
+                  <i class="fa fa-warning"></i>
+                  {{ 'caps_lock_is_on' | translate }}
+                </div>
               </div>
             </div>
 

bower.json

@@ -54,7 +54,8 @@
     "messageformat": "=0.1.8",
     "moment-timezone": "~0.5.0",
     "ngFitText": "~4.1.1",
-    "angular-aside": "^1.3.2"
+    "angular-aside": "^1.3.2",
+    "ngCapsLock": "ng-caps-lock#^1.0.2"
   },
   "resolutions": {
     "jquery": ">=1.10.2",

config/locales/app.public.en.yml

@@ -97,6 +97,7 @@ en:
         not_registered_to_the_fablab: "Not registered to the Fablab?"
         create_an_account: "Create an account"
         wrong_email_or_password: "Wrong e-mail or password."
+        caps_lock_is_on: "Caps lock key is on."
 
         # forgotten password modal
         your_email_address_is_unknown: "Your e-mail address is unknown."

config/locales/app.public.fr.yml

@@ -97,6 +97,7 @@ fr:
         not_registered_to_the_fablab: "Vous n'êtes pas inscrit au FAB LAB ?"
         create_an_account: "Créer un compte"
         wrong_email_or_password: "Adresse courriel ou mot de passe incorrect."
+        caps_lock_is_on: "La touche de verrouillage des majuscules est activée."
 
         # mot de passe oublié
         your_email_address_is_unknown: "Votre adresse de courriel est inconnue."

config/locales/app.public.pt.yml

@@ -97,6 +97,7 @@ pt:
           not_registered_to_the_fablab: "Ainda não registrado no Fablab?"
           create_an_account: "Criar conta"
           wrong_email_or_password: "E-mail ou senha incorretos."
+          caps_lock_is_on: "A tecla Caps Lock está ativada."
 
           # forgotten password modal
           your_email_address_is_unknown: "Seu e-mail não está cadastrado."

vendor/assets/components/ngCapsLock/.bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "ngCapsLock",
+  "version": "1.0.2",
+  "main": "./ng-caps-lock.js",
+  "license": "MIT",
+  "authors": [
+    "Fábio Rodrigues <fabio.info@gmail.com>"
+  ],
+  "dependencies": {
+    "angular": ">=1.1"
+  },
+  "homepage": "https://github.com/FabioMR/ng-caps-lock",
+  "_release": "1.0.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.0.2",
+    "commit": "f28192faa10107db6b5b7db7a77109d36b16c0b9"
+  },
+  "_source": "https://github.com/FabioMR/ng-caps-lock.git",
+  "_target": "^1.0.2",
+  "_originalSource": "ng-caps-lock",
+  "_direct": true
+}

vendor/assets/components/ngCapsLock/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 FabioMR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

vendor/assets/components/ngCapsLock/README.md

@@ -0,0 +1,25 @@
+# ngCapsLock
+
+ngCapsLock is a module for [AngularJS](http://angularjs.org/) to detect if caps-lock is on/off.
+
+Getting Started
+---------------
+
+ * Download ngCapsLock or install it with [Bower](http://bower.io/) via `bower install ng-caps-lock`
+ * Include the script tag on your page after the AngularJS script tags
+
+        <script type='text/javascript' src='path/to/angular.min.js'></script>
+        <script type='text/javascript' src='path/to/ng-caps-lock.min.js'></script>
+
+ * Ensure that your application module specifies `ngCapsLock` as a dependency:
+
+        angular.module('myApp', ['ngCapsLock']);
+
+ * Use the property `isCapsLockOn` on a `ng-show` directive.
+
+        <p class="caps-lock-alert" ng-show='isCapsLockOn'>Caps lock is on</p>
+
+License
+-------
+
+ngCapsLock is licensed under the MIT license. See the LICENSE file for more details.

vendor/assets/components/ngCapsLock/bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "ngCapsLock",
+  "version": "1.0.2",
+  "main": "./ng-caps-lock.js",
+  "license": "MIT",
+  "authors": [
+    "Fábio Rodrigues <fabio.info@gmail.com>"
+  ],
+  "dependencies": {
+    "angular": ">=1.1"
+  },
+  "homepage": "https://github.com/FabioMR/ng-caps-lock"
+}

vendor/assets/components/ngCapsLock/ng-caps-lock.js

@@ -0,0 +1,61 @@
+(function () {
+  'use strict';
+
+  angular.module('ngCapsLock', []).run(['$rootScope', '$document', '$timeout', function ($rootScope, $document, $timeout) {
+
+    var bindingForAppleDevice = function () {
+      $document.bind("keydown", function (event) {
+        if (event.keyCode === 20) { setCapsLockOn(true); }
+      });
+
+      $document.bind("keyup", function (event) {
+        if (event.keyCode === 20) { setCapsLockOn(false); }
+      });
+
+      $document.bind("keypress", function (event) {
+        var code = event.charCode || event.keyCode;
+        var shift = event.shiftKey;
+
+        if (code > 96 && code < 123) { setCapsLockOn(false); }
+        if (code > 64 && code < 91 && !shift) { setCapsLockOn(true); }
+      });
+    };
+
+    var bindingForOthersDevices = function () {
+      var isKeyPressed = true;
+
+      $document.bind("keydown", function (event) {
+        if (!isKeyPressed && event.keyCode === 20) {
+          isKeyPressed = true;
+          if ($rootScope.isCapsLockOn != null) { setCapsLockOn(!$rootScope.isCapsLockOn); }
+        }
+      });
+
+      $document.bind("keyup", function (event) {
+        if (event.keyCode === 20) { isKeyPressed = false; }
+      });
+
+      $document.bind("keypress", function (event) {
+        var code = event.charCode || event.keyCode;
+        var shift = event.shiftKey;
+
+        if (code > 96 && code < 123) { setCapsLockOn(shift); }
+        if (code > 64 && code < 91) { setCapsLockOn(!shift); }
+      });
+    };
+
+    if (/Mac|iPad|iPhone|iPod/.test(navigator.platform)) {
+      bindingForAppleDevice();
+    } else {
+      bindingForOthersDevices();
+    }
+
+    var setCapsLockOn = function (isOn) {
+      $timeout(function () {
+        $rootScope.isCapsLockOn = isOn;
+      });
+    };
+
+  }]);
+
+}());

vendor/assets/components/ngCapsLock/ng-caps-lock.min.js

@@ -0,0 +1 @@
+!function(){"use strict";angular.module("ngCapsLock",[]).run(["$rootScope","$document","$timeout",function(n,o,e){var i=function(){o.bind("keydown",function(n){20===n.keyCode&&c(!0)}),o.bind("keyup",function(n){20===n.keyCode&&c(!1)}),o.bind("keypress",function(n){var o=n.charCode||n.keyCode,e=n.shiftKey;o>96&&123>o&&c(!1),o>64&&91>o&&!e&&c(!0)})},t=function(){var e=!0;o.bind("keydown",function(o){e||20!==o.keyCode||(e=!0,null!=n.isCapsLockOn&&c(!n.isCapsLockOn))}),o.bind("keyup",function(n){20===n.keyCode&&(e=!1)}),o.bind("keypress",function(n){var o=n.charCode||n.keyCode,e=n.shiftKey;o>96&&123>o&&c(e),o>64&&91>o&&c(!e)})};/Mac|iPad|iPhone|iPod/.test(navigator.platform)?i():t();var c=function(o){e(function(){n.isCapsLockOn=o})}}])}();