Validate signup email and password strength

The password was only ever checked for length. It is now checked on both
sides, with each side doing the job it can actually do.

The browser scores it with zxcvbn, through WordPress's own
password-strength-meter script rather than a second opinion of our own, and
refuses to submit below "medium". That is the nuanced test — it knows
Tr0ub4dor&3 is weaker than it looks — but it is advice a client can decline
to take.

Auth\PasswordPolicy runs on the server and is the rule that holds. It does
not try to reproduce a strength score in PHP; it rejects the categorically
bad, which is what a server can check without shipping a dictionary: too
short, a well-known leaked password, fewer than four distinct characters, or
the user's own name or email inside it. No composition rules — NIST advises
against them, and they mostly produce predictable substitutions.

Both thresholds come from the same two constants, handed to JavaScript by
wp_localize_script, so the sides cannot drift into disagreeing about what
was accepted.

The verdict is attached to the field with setCustomValidity() rather than by
disabling a button. The form has up to three submits plus a "Next" that
already gates on checkValidity(), and an invalid field stops all of them
without any of them needing to know why.

Email validation moved ahead of the password check, since the password is
now checked against the email. A blank form therefore reports the email
first, which also matches the order the fields appear in.

Verified the browser half against a controllable scorer: each score band
blocks or allows as intended, the identity list reaches the meter, and the
gate stays open while zxcvbn's dictionary is still loading — the server
covers that window.

Closes #150

Co-Authored-By: Claude Opus 5 <[email protected]>

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"]');
@@ -154,6 +257,7 @@
 				: null;
 
 			enhanceGuardian(forms[i], steps);
+			enhancePassword(forms[i]);
 		}
 	});
 })();