shadcn.io is not affiliated with official shadcn/ui
Was This You Sign-In Alert Notification Block for React Aria
A password manager asking whether a new sign-in was you: the device, browser, place, IP and time in hairline cells, one answer that marks it as yours, and one that opens a three-step checklist with an alert dialog before it signs the session out.
Installation
Overview
Ask about an odd sign-in in a way that is easy to answer, with this security alert for React with React Aria. It is Vaultwren, a password manager, in a hairline frame with a plus mark on each corner. The first band is a Data List in cells: the device (a made-up laptop), the browser, the place (a made-up one), the IP address, the time (worked out from the page's fixed now) and how it signed in. Under it one band answers the question: Yes, it was me, an outline Button, marks it as yours with an Undo; No, secure my account, the one Shine Button, opens a three-step checklist in the same room, counted by read-only Steps. Step 1 asks first in an Alert Dialog, Cancel first and the destructive action in a readable colour, then the password step and the devices step are marked in order and the last says the account is secured, in this demo. Guides draw the lines. For account security, login alerts and any prompt that asks you to confirm a sign-in.
FAQ
How do I fill it with a real sign-in?
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.
What really happens when I press the buttons?
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.
Why does signing out ask first?
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. React Aria focuses Cancel through its own auto-focus.
Does the panel move between the question, the answer and the checklist?
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.
Is it accessible?
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.