List the action's rejected fields above the register form

web/frontend/app/features/auth/components/AuthErrorAlert.tsx

@@ -1,10 +1,20 @@
 interface AuthErrorAlertProps {
     message: string;
+    /** Per-field messages to list beneath the summary. */
+    details?: readonly string[];
 }
 
-const AuthErrorAlert = ({ message }: AuthErrorAlertProps) => (
+const AuthErrorAlert = ({ message, details }: AuthErrorAlertProps) => (
-    <div role="alert" className="alert alert-error alert-soft">
+    <div role="alert" className="alert alert-error alert-soft flex-col items-start">
         <span>{message}</span>
+
+        {details?.length ? (
+            <ul className="list-inside list-disc text-sm">
+                {details.map((detail) => (
+                    <li key={detail}>{detail}</li>
+                ))}
+            </ul>
+        ) : null}
     </div>
 );
 

web/frontend/app/features/auth/routes/register.tsx

@@ -51,6 +51,12 @@ const Register = ({ actionData }: Route.ComponentProps) => {
         submit(data, { method: 'post' });
     });
 
+    // A request that reached the action without passing client validation, so the
+    // rejected fields may well sit on a step other than the one on screen.
+    const rejectedFields = Object.values(actionData?.fieldErrors ?? {}).flatMap(
+        (messages) => messages ?? [],
+    );
+
     useActionErrorToast(actionData?.error);
 
     return (
@@ -68,6 +74,13 @@ const Register = ({ actionData }: Route.ComponentProps) => {
 
             {actionData?.error && <AuthErrorAlert message={actionData.error} />}
 
+            {rejectedFields.length > 0 && (
+                <AuthErrorAlert
+                    message="Check these details before creating your account."
+                    details={rejectedFields}
+                />
+            )}
+
             <RegisterForm wizard={wizard} submitting={isSubmitting} />
 
             <AuthSwitchPrompt lead="Already have an account?" to="/login" label="Sign in" />