Was This You Sign-In Alert Notification Block for React

Edit FACTS, DEVICE, PLACE, MINUTES_AGO and STEPS. The device, place and address are made up (the IP is from a range reserved for examples), and the time is worked out from the page's fixed now, so it reads the same everywhere. In your app pass the sign-in your server recorded and format its time in the viewer's zone if you prefer.

Only this page changes. Yes, it was me marks the sign-in as yours and shows an Undo; the checklist marks each step in order and says so ("Marked signed out. Nothing was signed out in this demo."). No session is ended, no password changes and nothing is sent, and Start over brings the question back. In your app call your server from itWasMe, signOut and the two marks, and let the password and device steps link to your settings pages.

Signing a session out is a security action that someone else will notice, so it confirms in an alert dialog: it cannot be closed by clicking outside, first focus is on Cancel ("Keep it signed in"), and the action is a destructive button whose text is mixed toward the foreground so it stays readable in every theme. Escape closes it and returns focus to Sign out.

No. The question, the "marked as you" answer and the checklist are stacked in one cell, and the inactive ones are hidden and inert, so the band keeps the height of the tallest. The four steps' panes are stacked the same way inside the checklist.

Each pane has a heading, only the visible one can be reached, and after every answer focus moves to its next control (Undo, the next step, or Start over at the end). A single polite status line says each result and how many steps are done. The steps' titles are hidden on a phone but still read by a screen reader.