warning about CAPS lock on login page is visible when necessary

CHANGELOG

@@ -12,6 +12,8 @@ minerva (12.3.0~alpha.0) unstable; urgency=low
   * Small improvement: Plugin API allows to clear search results on map (#702)
   * Small improvement: edit/remove project button is disabled until project is 
     uploaded (#683)
+  * Small improvement: warning about capslock is visible on login page when 
+    necessary (#658)
   * Bug fix: progress bar of gene genome mapping upload is refreshing properly 
     (#728)
 

frontend-js/src/main/css/global.css

@@ -1114,3 +1114,11 @@ input[type=file] {
 #minervaAppDiv table.dataTable.order-column.stripe tbody tr:hover > .sorting_1 {
     background-color: #D3D3D3;
 }
+
+.minerva-login-caps-lock-warning {
+    background-color: yellow;
+    color: black;
+    font-weight: bold;
+    padding: 5px;
+    display: none;
+}

frontend-js/src/main/js/GuiConnector.js

@@ -5,6 +5,7 @@ var Promise = require("bluebird");
 var logger = require('./logger');
 
 var Functions = require('./Functions');
+var ObjectWithListeners = require('./ObjectWithListeners');
 var SecurityError = require('./SecurityError');
 var ValidationError = require('./ValidationError');
 
@@ -13,6 +14,7 @@ var ValidationError = require('./ValidationError');
  * the Gui (html).
  */
 function GuiConnector() {
+  ObjectWithListeners.call(this);
   // X coordinate of the mouse in a browser.
   //@type {number}
   this.xPos = 0;
@@ -21,8 +23,13 @@ function GuiConnector() {
   this.yPos = 0;
 
   this.getParams = [];
+
+  this.registerListenerType("onCapsLockChange");
 }
 
+GuiConnector.prototype = Object.create(ObjectWithListeners.prototype);
+GuiConnector.prototype.constructor = GuiConnector;
+
 /**
  *
  * @param {GuiConnector} object
@@ -92,6 +99,14 @@ GuiConnector.prototype.init = function () {
     $(document).on('touchmove', self._touchMoveEvent);
   });
 
+  document.addEventListener( 'keydown', function( event ) {
+    var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
+    if (self._caps !== caps) {
+      self._caps = caps;
+      return self.callListeners("onCapsLockChange", caps);
+    }
+  });
+
   if (self._windowResizeEvents === undefined) {
     self._windowResizeEvents = [];
 
@@ -153,6 +168,7 @@ GuiConnector.prototype.addWindowResizeEvent = function (handler) {
   this._windowResizeEvents.push(handler);
 };
 
+
 /**
  *
  * @param {function} handler

frontend-js/src/main/js/minerva.js

@@ -687,6 +687,18 @@ function createLoginDiv(configuration) {
     className: "minerva-login-form-title",
     content: "AUTHORIZATION FORM"
   }));
+  resultDiv.appendChild(functions.createElement({
+    type: "div",
+    className: "minerva-login-caps-lock-warning",
+    content: "Warning: Caps lock is on"
+  }));
+  GuiConnector.addListener("onCapsLockChange",function(e){
+    if (e.arg) {
+      $(".minerva-login-caps-lock-warning").css("display", "block");
+    } else {
+      $(".minerva-login-caps-lock-warning").css("display", "none");
+    }
+  });
   var guiUtils = new GuiUtils();
   var table = functions.createElement({
     type: "div",