Merge pull request 'Validate signup email and password strength' (#155) from feature/150-signup-credential-validation into main

Reviewed-on: #155

assets/css/frontend.css

@@ -525,6 +525,30 @@
     }
 }
 
+/*
+ * The live password verdict under the signup field. Colour is a reinforcement,
+ * not the message — the text says what is wrong on its own, so this still reads
+ * correctly to anyone who cannot separate the hues.
+ */
+.us-password-strength {
+    display: block;
+    margin-top: 4px;
+    font-size: 0.85em;
+}
+
+.us-password-strength.is-short,
+.us-password-strength.is-weak {
+    color: #c00;
+}
+
+.us-password-strength.is-medium {
+    color: #7a5c00;
+}
+
+.us-password-strength.is-strong {
+    color: #1a7d2e;
+}
+
 /* Shown only in block-editor previews (see BlockPreview). */
 .us-editor-note {
     font-size: 0.85em;

assets/js/register.js

@@ -14,10 +14,113 @@
  *    block. Ticking the box also takes the guardian's *own* question panel out
  *    of play — in guardian mode the questions are asked per child, so the
  *    server ignores those answers and the browser must not demand them.
+ * 3. **Password strength.** The password is scored with zxcvbn (via WordPress's
+ *    own `wp.passwordStrength`) and a weak one is refused. The server applies
+ *    its own, coarser rule regardless — see `Auth\PasswordPolicy`.
  */
 (function () {
 	'use strict';
 
+	var PASSWORD = window.usSchedulerPassword || {};
+
+	/**
+	 * Gate the form on password strength.
+	 *
+	 * The verdict is attached to the field with `setCustomValidity()` rather than
+	 * by disabling the submit button: the form has up to three submits (the plain
+	 * one, the guardian-mode early one, and step two's) plus a "Next" that
+	 * already gates on `checkValidity()`, and an invalid field blocks all of them
+	 * at once without any of them having to know why.
+	 */
+	function enhancePassword(form) {
+		var field = form.querySelector('#us-reg-pass');
+		var output = form.querySelector('#us-reg-pass-strength');
+		var strings = PASSWORD.strings || {};
+
+		if (!field || !PASSWORD.minScore) {
+			return;
+		}
+
+		// What the password must not simply repeat back. Mirrors the identity
+		// check PasswordPolicy makes server-side.
+		function identity() {
+			var out = [];
+			var sources = form.querySelectorAll('#us-reg-email, #us-reg-name');
+
+			for (var i = 0; i < sources.length; i++) {
+				var value = (sources[i].value || '').trim();
+				if (value) {
+					out.push(value);
+					if (value.indexOf('@') > 0) {
+						out.push(value.split('@')[0]);
+					}
+				}
+			}
+
+			return out;
+		}
+
+		function assess() {
+			var value = field.value || '';
+
+			if (!value) {
+				report('', '');
+				return;
+			}
+
+			if (value.length < (PASSWORD.minLength || 8)) {
+				report(strings.short, 'short');
+				return;
+			}
+
+			// zxcvbn's dictionary is fetched after load, and wp.passwordStrength
+			// reports -1 until it arrives. Say nothing and allow the submit in that
+			// window — the server still checks, and the next keystroke re-runs this
+			// once the dictionary is in.
+			if (!window.wp || !window.wp.passwordStrength || typeof window.zxcvbn === 'undefined') {
+				report('', '');
+				return;
+			}
+
+			var score = window.wp.passwordStrength.meter(value, identity(), '');
+
+			if (score < 0) {
+				report('', '');
+				return;
+			}
+
+			if (score >= 3) {
+				report(strings.strong, 'strong');
+			} else if (score >= PASSWORD.minScore) {
+				report(strings.medium, 'medium');
+			} else {
+				report(score <= 0 ? strings.veryWeak : strings.weak, 'weak');
+			}
+		}
+
+		/** Show the verdict, and make it the field's validity at the same time. */
+		function report(message, level) {
+			var acceptable = '' === level || 'medium' === level || 'strong' === level;
+
+			if (output) {
+				output.textContent = message || '';
+				output.className = 'us-password-strength' + (level ? ' is-' + level : '');
+			}
+
+			field.setCustomValidity(acceptable ? '' : message || '');
+		}
+
+		field.addEventListener('input', assess);
+		field.addEventListener('blur', assess);
+
+		// The identity check depends on these, so a password typed first and an
+		// email typed second is still caught.
+		var sources = form.querySelectorAll('#us-reg-email, #us-reg-name');
+		for (var i = 0; i < sources.length; i++) {
+			sources[i].addEventListener('change', assess);
+		}
+	}
+
 	function enhanceSteps(form) {
 		var step1 = form.querySelector('[data-step="1"]');
 		var step2 = form.querySelector('[data-step="2"]');
@@ -168,6 +271,7 @@
 				: null;
 
 			enhanceGuardian(forms[i], steps);
+			enhancePassword(forms[i]);
 		}
 	});
 })();