Sign-in History Account Block for React

Edit SOURCES (a place and a program: city, documentation address, browser, the user agent and how it signs in) and ATTEMPTS (a time in UTC, the source, and for a failure its short reason, the full one and the step it stopped at). The four figures, the method chain in each row, the sort orders and the page counts are worked out from those, so nothing is typed twice. KNOWN lists the places the account was already used from; any other place counts as new.

Sort by When, Result, Method or Place: the first press picks the column's usual direction (newest first, failed first, A to Z), the next reverses it, and the header says which with an arrow and for a screen reader with the column's sort state. Search matches part of a place or an address, the result menu limits the list to the ones that went through or failed, and each change goes back to the first page. A search or a result with no match shows an empty state with a button that clears both. The panel keeps the height of a full page, so none of this moves it; choosing 10 per page does, on purpose.

Every result is an icon and a word: a check and Succeeded, or a cross and Failed with its reason ("Wrong password") under it. Only the cross takes the destructive colour, and the row isn't tinted. Opening the row gives the reason in full, the steps it went through ("Password, Rejected") and the full user agent, for the attempts worth a second look.

It is all typed, read-only data, so there is nothing to undo or save. To make it real, build ATTEMPTS from your sign-in log (time, source address, user agent, the method and the outcome) and resolve the place from the address on your server. Page on the server for a long history: the table already shows only one page, and the page links are real links with a page query. Times are shown in UTC; convert them to the person's zone if you prefer.

Below the large breakpoint the table is replaced by a list of cards of the same three lines: when and the result, the method with the browser (or the reason, for a failure), and the place with the address. A card is a button that opens the same details under it. The four figures stay two by two above, and the page links wrap under the row count.

It is a native table with a caption, column headers with their sort state and a button in each sortable header. The first cell of every row is a button that says which sign-in it opens ("Details of the sign-in on 14 Oct, 07:48") and whether it is expanded. The row count is a polite status that is present from the start, the page links are a labelled navigation with the current page marked, and the addresses read start to end in any language.