Password Expiry Notification Block for React

No. Update password only checks the four rules in the browser, then the notice reads as renewed with a new expiry day, and the status line says "Password updated in this demo. Nothing was saved." The line under the field says the same from the start. In your app call your identity service from submit, keep the rules in CHECKS in step with your policy, and check reuse on the server, since the page never sees your real history.

REUSED is a made-up list of five, compared without regard to case, so you can see the fourth check fail by typing one of them. A real app should never send old passwords to the page: ask the server whether the new one is allowed and show the answer in the same checklist row.

The button is marked unavailable rather than disabled, so it keeps focus and stays readable. Pressing it says how many checks are still to go ("Not updated: 2 checks to go.") and moves focus back to the password field. Enter in the field does the same.

AS_OF is the page's fixed now (a Wednesday) and the last change is a typed ISO moment; the expiry is that moment plus POLICY_DAYS, and the days to go are the difference in whole days. Nothing reads the clock, so the page says the same thing everywhere. In your app pass the real change and expiry times and format them in the viewer's zone if you prefer.

The checklist is a labelled list and each row says "Met:" or "Not met:" to a screen reader as well as showing a tick or an empty circle, so no state is colour alone. The strength bar is named, the field keeps its label and a description, and one polite status line reports each result. The Show password button is part of the field.

The halves stack with the reason first, the divider becomes a rule above the form, and the status line and the button sit one under the other with the button at full width of its column.