Refactor password strength JS (#3459)

web/js/events.js

@@ -245,6 +245,21 @@ const VE = {
 			document.body.appendChild(dialog);
 			dialog.showModal();
 		},
+		recalculatePasswordStrength: (input) => {
+			const password = input.value;
+			const meter = input.parentNode.querySelector('.js-password-meter');
+			if (meter) {
+				// TODO: Switch to zxcvbn or something when we can load modules
+				const validations = [
+					password.length >= 8, // Min length of 8
+					password.search(/[a-z]/) > -1, // Contains 1 lowercase letter
+					password.search(/[A-Z]/) > -1, // Contains 1 uppercase letter
+					password.search(/[0-9]/) > -1, // Contains 1 number
+				];
+				const strength = validations.reduce((acc, cur) => acc + cur, 0);
+				meter.value = strength;
+			}
+		},
 		warn: (msg) => {
 			alert('WARNING: ' + msg);
 		},

web/js/pages/add_db.js

@@ -60,36 +60,12 @@ App.Listeners.DB.keypress_db_databasename = function () {
 	});
 };
 
-App.Actions.DB.update_password_meter = function () {
-	var password = $('input[name="v_password"]').val();
-	var min_small = new RegExp(/^(?=.*[a-z]).+$/);
-	var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-	var min_num = new RegExp(/^(?=.*\d).+$/);
-	var min_length = 8;
-	var score = 0;
-
-	if (password.length >= min_length) {
-		score = score + 1;
-	}
-	if (min_small.test(password)) {
-		score = score + 1;
-	}
-	if (min_cap.test(password)) {
-		score = score + 1;
-	}
-	if (min_num.test(password)) {
-		score = score + 1;
-	}
-	$('.js-password-meter').val(score);
-};
-
 App.Listeners.DB.keypress_v_password = function () {
 	var ref = $('input[name="v_password"]');
 	ref.bind('keypress input', function (evt) {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_password_meter(elm, $(elm).val());
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	});
 };
@@ -103,6 +79,9 @@ App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
 applyRandomPassword = function (min_length = 16) {
-	$('input[name=v_password]').val(randomString(min_length));
-	App.Actions.DB.update_password_meter();
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomString(min_length);
+		VE.helpers.recalculatePasswordStrength(passwordInput);
+	}
 };

web/js/pages/add_mail_acc.js

@@ -73,36 +73,12 @@ $('form[name="v_quota"]').on('submit', function () {
 	});
 });
 
-App.Actions.MAIL_ACC.update_password_meter = function () {
-	var password = $('input[name="v_password"]').val();
-	var min_small = new RegExp(/^(?=.*[a-z]).+$/);
-	var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-	var min_num = new RegExp(/^(?=.*\d).+$/);
-	var min_length = 8;
-	var score = 0;
-
-	if (password.length >= min_length) {
-		score = score + 1;
-	}
-	if (min_small.test(password)) {
-		score = score + 1;
-	}
-	if (min_cap.test(password)) {
-		score = score + 1;
-	}
-	if (min_num.test(password)) {
-		score = score + 1;
-	}
-	$('.js-password-meter').val(score);
-};
-
 App.Listeners.MAIL_ACC.keypress_v_password = function () {
 	var ref = $('input[name="v_password"]');
 	ref.bind('keypress input', function (evt) {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.MAIL_ACC.update_password_meter(elm, $(elm).val());
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	});
 };
@@ -110,13 +86,19 @@ App.Listeners.MAIL_ACC.keypress_v_password = function () {
 App.Listeners.MAIL_ACC.keypress_v_password();
 
 applyRandomPassword = function (min_length = 16) {
-	var randomPassword = randomString(min_length);
-	$('input[name=v_password]').val(randomPassword);
-	if ($('input[name=v_password]').attr('type') == 'text')
-		$('.js-password-output').text(randomPassword);
-	else $('.js-password-output').text(Array(randomPassword.length + 1).join('*'));
-	App.Actions.MAIL_ACC.update_password_meter();
-	generate_mail_credentials();
+	const randomPassword = randomString(min_length);
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomPassword;
+		VE.helpers.recalculatePasswordStrength(passwordInput);
+		const passwordOutput = document.querySelector('.js-password-output');
+		if (passwordInput.getAttribute('type') === 'text' && passwordOutput) {
+			passwordOutput.textContent = randomPassword;
+		} else {
+			passwordOutput.textContent = Array(randomPassword.length + 1).join('*');
+		}
+		generate_mail_credentials();
+	}
 };
 
 generate_mail_credentials = function () {

web/js/pages/add_user.js

@@ -14,31 +14,11 @@ $(function () {
 });
 
 applyRandomPassword = function (min_length = 16) {
-	$('input[name=v_password]').val(randomString(min_length));
-	App.Actions.WEB.update_password_meter();
-};
-
-App.Actions.WEB.update_password_meter = function () {
-	var password = $('input[name="v_password"]').val();
-	var min_small = new RegExp(/^(?=.*[a-z]).+$/);
-	var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-	var min_num = new RegExp(/^(?=.*\d).+$/);
-	var min_length = 8;
-	var score = 0;
-
-	if (password.length >= min_length) {
-		score = score + 1;
-	}
-	if (min_small.test(password)) {
-		score = score + 1;
-	}
-	if (min_cap.test(password)) {
-		score = score + 1;
-	}
-	if (min_num.test(password)) {
-		score = score + 1;
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomString(min_length);
+		VE.helpers.recalculatePasswordStrength(passwordInput);
 	}
-	$('.js-password-meter').val(score);
 };
 
 App.Listeners.WEB.keypress_v_password = function () {
@@ -46,8 +26,7 @@ App.Listeners.WEB.keypress_v_password = function () {
 	ref.bind('keypress input', function (evt) {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.WEB.update_password_meter(elm, $(elm).val());
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	});
 };

web/js/pages/edit_db.js

@@ -67,36 +67,12 @@ App.Listeners.DB.keypress_db_databasename = function () {
 	});
 };
 
-App.Actions.DB.update_password_meter = function () {
-	var password = $('input[name="v_password"]').val();
-	var min_small = new RegExp(/^(?=.*[a-z]).+$/);
-	var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-	var min_num = new RegExp(/^(?=.*\d).+$/);
-	var min_length = 8;
-	var score = 0;
-
-	if (password.length >= min_length) {
-		score = score + 1;
-	}
-	if (min_small.test(password)) {
-		score = score + 1;
-	}
-	if (min_cap.test(password)) {
-		score = score + 1;
-	}
-	if (min_num.test(password)) {
-		score = score + 1;
-	}
-	$('.js-password-meter').val(score);
-};
-
 App.Listeners.DB.keypress_v_password = function () {
 	var ref = $('input[name="v_password"]');
 	ref.bind('keypress input', function (evt) {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.DB.update_password_meter(elm, $(elm).val());
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	});
 };
@@ -110,6 +86,9 @@ App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
 applyRandomPassword = function (min_length = 16) {
-	$('input[name=v_password]').val(randomString(min_length));
-	App.Actions.DB.update_password_meter();
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomString(min_length);
+		VE.helpers.recalculatePasswordStrength(passwordInput);
+	}
 };

web/js/pages/edit_mail_acc.js

@@ -53,36 +53,12 @@ App.Listeners.MAIL_ACC.init = function () {
 App.Listeners.MAIL_ACC.init();
 App.Listeners.MAIL_ACC.checkbox_unlimited_feature();
 
-App.Actions.MAIL_ACC.update_password_meter = function () {
-	var password = $('input[name="v_password"]').val();
-	var min_small = new RegExp(/^(?=.*[a-z]).+$/);
-	var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-	var min_num = new RegExp(/^(?=.*\d).+$/);
-	var min_length = 8;
-	var score = 0;
-
-	if (password.length >= min_length) {
-		score = score + 1;
-	}
-	if (min_small.test(password)) {
-		score = score + 1;
-	}
-	if (min_cap.test(password)) {
-		score = score + 1;
-	}
-	if (min_num.test(password)) {
-		score = score + 1;
-	}
-	$('.js-password-meter').val(score);
-};
-
 App.Listeners.MAIL_ACC.keypress_v_password = function () {
 	var ref = $('input[name="v_password"]');
 	ref.bind('keypress input', function (evt) {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(function () {
-			var elm = $(evt.target);
-			App.Actions.MAIL_ACC.update_password_meter(elm, $(elm).val());
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	});
 };
@@ -101,13 +77,19 @@ $('#v_blackhole').on('click', function () {
 App.Listeners.MAIL_ACC.keypress_v_password();
 
 applyRandomPassword = function (min_length = 16) {
-	var randomPassword = randomString(min_length);
-	$('input[name=v_password]').val(randomPassword);
-	if ($('input[name=v_password]').attr('type') == 'text')
-		$('.js-password-output').text(randomPassword);
-	else $('.js-password-output').text(Array(randomPassword.length + 1).join('*'));
-	App.Actions.MAIL_ACC.update_password_meter();
-	generate_mail_credentials();
+	const randomPassword = randomString(min_length);
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomPassword;
+		VE.helpers.recalculatePasswordStrength(passwordInput);
+		const passwordOutput = document.querySelector('.js-password-output');
+		if (passwordInput.getAttribute('type') === 'text' && passwordOutput) {
+			passwordOutput.textContent = randomPassword;
+		} else {
+			passwordOutput.textContent = Array(randomPassword.length + 1).join('*');
+		}
+		generate_mail_credentials();
+	}
 };
 
 generate_mail_credentials = function () {

web/js/pages/edit_user.js

@@ -1,30 +1,16 @@
 applyRandomPassword = function (min_length = 16) {
-	$('input[name=v_password]').val(randomString(min_length));
-	App.Actions.WEB.update_password_meter();
-};
-
-App.Actions.WEB.update_password_meter = () => {
-	/**
-	 * @type string
-	 */
-	const password = document.querySelector('input[name=v_password]').value;
-
-	const validations = [
-		password.length >= 8, // Min length of 8
-		password.search(/[a-z]/) > -1, // Contains 1 lowercase letter
-		password.search(/[A-Z]/) > -1, // Contains 1 uppercase letter
-		password.search(/[0-9]/) > -1, // Contains 1 number
-	];
-	const strength = validations.reduce((acc, cur) => acc + cur, 0);
-
-	document.querySelector('.js-password-meter').value = strength;
+	const passwordInput = document.querySelector('input[name=v_password]');
+	if (passwordInput) {
+		passwordInput.value = randomString(min_length);
+		VE.helpers.recalculatePasswordStrength(passwordInput);
+	}
 };
 
 App.Listeners.WEB.keypress_v_password = () => {
 	const updateTimeout = (evt) => {
 		clearTimeout(window.frp_usr_tmt);
 		window.frp_usr_tmt = setTimeout(() => {
-			App.Actions.WEB.update_password_meter(evt.target, evt.target.value);
+			VE.helpers.recalculatePasswordStrength(evt.target);
 		}, 100);
 	};