feat: guard password fields in login/register against accidental caps lock

install/package.json

@@ -101,9 +101,9 @@
         "nodebb-plugin-spam-be-gone": "0.7.7",
         "nodebb-rewards-essentials": "0.1.4",
         "nodebb-theme-lavender": "5.0.17",
-        "nodebb-theme-persona": "10.4.1",
+        "nodebb-theme-persona": "10.4.2",
         "nodebb-theme-slick": "1.3.8",
-        "nodebb-theme-vanilla": "11.3.10",
+        "nodebb-theme-vanilla": "11.3.11",
         "nodebb-widget-essentials": "5.0.2",
         "nodemailer": "^6.4.6",
         "nprogress": "0.2.0",

public/language/en-GB/login.json

@@ -8,5 +8,6 @@
 	"failed_login_attempt": "Login Unsuccessful",
 	"login_successful": "You have successfully logged in!",
 	"dont_have_account": "Don't have an account?",
-	"logged-out-due-to-inactivity": "You have been logged out of the Admin Control Panel due to inactivity"
+	"logged-out-due-to-inactivity": "You have been logged out of the Admin Control Panel due to inactivity",
+	"caps-lock-enabled": "Caps Lock is enabled"
 }

public/src/client/login.js

@@ -2,7 +2,9 @@
 
 
 define('forum/login', ['jquery-form'], function () {
-	var	Login = {};
+	var	Login = {
+		_capsState: false,
+	};
 
 	Login.init = function () {
 		var errorEl = $('#login-error-notify');
@@ -59,6 +61,9 @@ define('forum/login', ['jquery-form'], function () {
 			}
 		});
 
+		// Guard against caps lock
+		Login.capsLockCheck(document.querySelector('#password'), document.querySelector('#caps-lock-warning'));
+
 		$('#login-error-notify button').on('click', function (e) {
 			e.preventDefault();
 			errorEl.hide();
@@ -73,5 +78,32 @@ define('forum/login', ['jquery-form'], function () {
 		$('#content #noscript').val('false');
 	};
 
+	Login.capsLockCheck = (inputEl, warningEl) => {
+		const toggle = (state) => {
+			warningEl.classList[state ? 'remove' : 'add']('hidden');
+			warningEl.parentNode.classList[state ? 'add' : 'remove']('has-warning');
+		};
+
+		inputEl.addEventListener('keyup', function (e) {
+			if (Login._capsState && e.key === 'CapsLock') {
+				toggle(false);
+				Login._capsState = !Login._capsState;
+				return;
+			}
+
+			if (e.getModifierState('CapsLock')) {
+				toggle(true);
+			} else {
+				toggle(false);
+			}
+
+			Login._capsState = e.getModifierState('CapsLock');
+		});
+
+		if (Login._capsState) {
+			toggle(true);
+		}
+	};
+
 	return Login;
 });

public/src/client/register.js

@@ -2,8 +2,8 @@
 
 
 define('forum/register', [
-	'translator', 'zxcvbn', 'slugify', 'api', 'jquery-form',
-], function (translator, zxcvbn, slugify, api) {
+	'translator', 'zxcvbn', 'slugify', 'api', 'forum/login', 'jquery-form',
+], function (translator, zxcvbn, slugify, api, Login) {
 	var Register = {};
 	var validationError = false;
 	var successIcon = '';
@@ -65,6 +65,9 @@ define('forum/register', [
 			});
 		}
 
+		// Guard against caps lock
+		Login.capsLockCheck(document.querySelector('#password'), document.querySelector('#caps-lock-warning'));
+
 		register.on('click', function (e) {
 			var registerBtn = $(this);
 			var errorEl = $('#register-error-notify');