feat: caps lock warning

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."

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."

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 %}

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);