From 4bb3b0323dc2252cf00cede438acc0e9da1d38a8 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Thu, 28 Jan 2021 15:00:26 -0500
Subject: [PATCH] feat: guard password fields in login/register against
 accidental caps lock

---
 install/package.json             |  4 ++--
 public/language/en-GB/login.json |  3 ++-
 public/src/client/login.js       | 34 +++++++++++++++++++++++++++++++-
 public/src/client/register.js    |  7 +++++--
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/install/package.json b/install/package.json
index de8219ef2f..c5db246695 100644
--- a/install/package.json
+++ b/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",
diff --git a/public/language/en-GB/login.json b/public/language/en-GB/login.json
index b03ee269cf..c0ae9b7624 100644
--- a/public/language/en-GB/login.json
+++ b/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"
 }
diff --git a/public/src/client/login.js b/public/src/client/login.js
index 91a69c3166..f8f25c8aee 100644
--- a/public/src/client/login.js
+++ b/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;
 });
diff --git a/public/src/client/register.js b/public/src/client/register.js
index 8010835c86..e05b7cc828 100644
--- a/public/src/client/register.js
+++ b/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');