Merge branch 'Aufinal/capslock_indicator' into 'k-fet'

Indicateur capslock

Détecteur de capslock en js.

Détecte les incohérences du capslock (majuscule entrée quand shift non enfoncé) puis suit aussi la pression de la touche capslock.

Nécessite un caractère affecté par capslock pour commencer à fonctionner (au départ, l'état de la touche capslock est inconnu)

Fix #96

See merge request !119

kfet/static/kfet/css/jconfirm-kfet.css

@@ -64,3 +64,22 @@
     color:#FFF !important;
     background:#C8102E !important;
 }
+
+.jconfirm .capslock {
+    position: relative ;
+}
+
+.jconfirm .capslock .glyphicon {
+    position: absolute;
+    padding: 10px;
+    right: 0px;
+    top: 15px;
+    font-size: 30px;
+    display: none ;
+    margin-left: 60px !important;
+}
+
+.jconfirm .capslock input {
+    padding-right: 50px;
+    padding-left: 50px;
+}

kfet/static/kfet/js/kfet.js

@@ -88,7 +88,7 @@ function getErrorsHtml(data) {
 
 function requestAuth(data, callback, focus_next = null) {
     var content = getErrorsHtml(data);
-    content += '<input type="password" name="password" autofocus>',
+    content += '<div class="capslock"><span class="glyphicon glyphicon-lock"></span><input type="password" name="password" autofocus><div>',
     $.confirm({
         title: 'Authentification requise',
         content: content,
@@ -102,14 +102,39 @@ function requestAuth(data, callback, focus_next = null) {
         },
         onOpen: function() {
             var that = this;
+            var capslock = -1 ; // 1 -> caps on ; 0 -> caps off ; -1 or 2 -> unknown
             this.$content.find('input').on('keypress', function(e) {
                 if (e.keyCode == 13)
                     that.$confirmButton.click();
+
+                var s = String.fromCharCode(e.which);
+                if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps on, shift off
+                    (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) { //caps on, shift on
+                        capslock = 1 ;
+                } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)|| //caps off, shift off
+                           (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps off, shift on
+                        capslock = 0 ;
+                }
+                if (capslock == 1)
+                    $('.capslock .glyphicon').show() ;
+                else if (capslock == 0)
+                    $('.capslock .glyphicon').hide() ;
+            });
+            // Capslock key is not detected by keypress
+            this.$content.find('input').on('keydown', function(e) {
+                if (e.which == 20) {
+                    capslock = 1-capslock ;
+                }
+                if (capslock == 1)
+                    $('.capslock .glyphicon').show() ;
+                else if (capslock == 0)
+                    $('.capslock .glyphicon').hide() ;
             });
         },
         onClose: function() {
             if (focus_next)
                 this._lastFocused = focus_next;
         }
+
     });
 }