Suspicious Activity Login Block for React

Everything. The events, the place, the device and the address (an address from a documentation range, with its last part hidden) are typed text, any password that is not empty is accepted, and nothing is ended, revoked or stored. In a product, Secure my account should re-check the password on your server, end the other sessions, revoke refresh tokens, flag the account to require a new password and write an audit entry; This was me should record the device as known.

Because it changes the account: it signs devices out and forces a password change, which you do not want a stranger on an unlocked computer to trigger. The field says Any password works in this demo, and an empty one is refused in words with focus on the field.

Only on one small status dot beside the blocked event, which also says Sign-in blocked in words. Every event has its own glyph (a key, a cancel mark, an envelope), the facts are plain text, and the results use a tick and a heading instead of green or red.

The facts and the decision come first, so Secure my account sits on the first screen, and the timeline follows. Each event's one-line detail becomes screen-reader text to keep the page short; the title and the time stay visible.

It waits a moment and shows Marked as safe: Cardwren would record the attempts as yours and stop warning about them, and the demo stored nothing. Both results replace the form in the same space, which is already as tall as the taller result, so the page never changes height; Start over returns focus to the password field.

Yes. The timeline is an ordered list with each event as a heading and a time element, the facts are a description list, the password field has a visible label and a hint tied to it, and the result takes focus on its heading while the status line says what happened.