From 06f09b923cf2a6727e8b990c5543168ab308dd41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20B=C5=99ou=C5=A1ek?= <brousek@ics.muni.cz>
Date: Tue, 28 Jun 2022 22:43:21 +0200
Subject: [PATCH] feat: caps lock warning

---
 locales/cs/LC_MESSAGES/campusmultiauth.po |  5 ++++-
 locales/en/LC_MESSAGES/campusmultiauth.po |  5 ++++-
 templates/includes/local-login.twig       |  3 ++-
 www/resources/campus-idp.js               | 18 ++++++++++++++++--
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/locales/cs/LC_MESSAGES/campusmultiauth.po b/locales/cs/LC_MESSAGES/campusmultiauth.po
index 437497c..80ad7a3 100644
--- a/locales/cs/LC_MESSAGES/campusmultiauth.po
+++ b/locales/cs/LC_MESSAGES/campusmultiauth.po
@@ -62,4 +62,7 @@ msgid "{campusmultiauth:undefined}"
 msgstr "neznámé"
 
 msgid "{campusmultiauth:localLogin_title}"
-msgstr "Login with username and password"
+msgstr "Přihlášení uživatelským jménem a heslem"
+
+msgid "{campusmultiauth:localLogin_capslock}"
+msgstr "Pozor, máte zapnutý Caps lock."
diff --git a/locales/en/LC_MESSAGES/campusmultiauth.po b/locales/en/LC_MESSAGES/campusmultiauth.po
index 9bf444c..bec0f72 100644
--- a/locales/en/LC_MESSAGES/campusmultiauth.po
+++ b/locales/en/LC_MESSAGES/campusmultiauth.po
@@ -62,4 +62,7 @@ msgid "{campusmultiauth:undefined}"
 msgstr "undefined"
 
 msgid "{campusmultiauth:localLogin_title}"
-msgstr "Přihlásit se uživatelským jménem a heslem"
+msgstr "Login with username and password"
+
+msgid "{campusmultiauth:localLogin_capslock}"
+msgstr "Warning! Caps lock is ON."
diff --git a/templates/includes/local-login.twig b/templates/includes/local-login.twig
index 3447ac3..9d43e8d 100644
--- a/templates/includes/local-login.twig
+++ b/templates/includes/local-login.twig
@@ -55,7 +55,7 @@
         </label>
         <br>
         {% if muni_jvs %}
-            <span class="inp-fix inp-icon inp-icon--after">
+            <span class="inp-fix inp-icon inp-icon--after" id="capslock-warning-wrapper">
         {% else %}
             <div class="input-group">
         {% endif %}
@@ -75,6 +75,7 @@
                 {% else %}{{ '{campusmultiauth:password_placeholder}'|trans }}
                 {% endif %}">
             <button id="toggle-password" class="{% if muni_jvs %}btn-icon icon icon-eye color-{{ configuration.priority }}{% else %}btn border border-2 border-{% if configuration.priority == 'primary' %}dark{% else %}muted{% endif %} rounded-end{% endif %}" type="button">{% if not muni_jvs %}<i class="fas fa-eye"></i>{% endif %}</button>
+            {% if muni_jvs %}<span class="inp-info vhide" id="capslock-warning">{{ '{campusmultiauth:localLogin_capslock}'|trans }}</span>{% else %}<div class="invalid-feedback text-warning d-block d-none" id="capslock-warning">{{ '{campusmultiauth:localLogin_capslock}'|trans }}</div>{% endif %}
         {% if muni_jvs %}
             </span>
         {% else %}
diff --git a/www/resources/campus-idp.js b/www/resources/campus-idp.js
index 236cbbf..850d839 100644
--- a/www/resources/campus-idp.js
+++ b/www/resources/campus-idp.js
@@ -90,9 +90,23 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    var togglePassword = document.getElementById("toggle-password");
     var password = document.getElementById("password");
-    if (togglePassword) {
+    var togglePassword = document.getElementById("toggle-password");
+    if (password && togglePassword) {
+        password.addEventListener("keyup", function(event) {
+          var message = document.getElementById('capslock-warning');
+          var wrapper = document.getElementById('capslock-warning-wrapper');
+          var isCapsLock = event.getModifierState("CapsLock");
+          if (isCapsLock) {
+            showElement(message);
+          } else {
+            hideElement(message);
+          }
+          if (wrapper) {
+            wrapper.classList.toggle('warning', isCapsLock);
+          }
+        });
+
         togglePassword.addEventListener("click", function () {
             var type = password.getAttribute("type") === "password" ? "text" : "password";
             password.setAttribute("type", type);
-- 
GitLab