Pre-Login Security Audit Block for React

No, and the header says so. The six results are typed examples, so the block can show every state. A web page can really read only a few of these facts (whether the page is on a secure connection and whether cookies are on); it cannot see a screen lock, a password manager or the extensions you have installed, so a real audit should check what it can and ask people to confirm the rest, as the checkbox does here.

When no check is failing and at most one warning remains; that limit is a constant, WARNINGS_ALLOWED. Until then the button is quiet but still pressable: it says which kind of problem blocks you, opens the row that needs a fix and moves focus to its box.

Ticking I've done this only records your word and says to re-check. Re-check then turns every ticked fix into a pass and updates the counts; with nothing ticked it says to tick a fix first. Unticking puts a fix back to its first result.

Everything: the results, the fixes and the ticks are typed constants and local state, and nothing is checked, sent or stored. In a product, run the checks you can in the browser or on your server (connection, cookie support, a minimum browser version from the user agent your server sees), keep the rest as advice, and decide on your side whether the sign-in may proceed.

Each row is a button inside a heading, so Tab and Enter or Space open it, and only one row is open at a time with every panel the same height, so opening one never moves the rest of the page. Tab moves between the rows; arrow keys do not.

By three glyph shapes (a tick, a dash and a cross), a word (Passed, Warning, Failing) and weight: a failing row's tile is solid and its word bold. Nothing is green, amber or red.