Verification Record Account Block for React

Edit START. Each proof has a label, what it covers (masked), the method in words, months of validity, the ISO day it was proven in on (or nothing), the check it uses (a code or a name) and the prompt the band says. The end date is derived from on and months, "due soon" is SOON days before it, and every date is relative to AS_OF, never the clock, so nothing here goes stale.

In this demo it is printed in the band, because nothing is sent: "In this demo the code is 482 913." Send a new code moves to the next typed one and says so. Six digits check themselves on the sixth, typed or pasted with spaces, and Enter checks a short entry and says how many digits are missing. A wrong code clears the field and keeps focus in it. To make it real, send the code from your server in begin and check it on the server in checkCode; never ship the code to the page.

No. The check asks for a name, any two words of two letters or more pass, and no file is read or sent. It stands where your real document check would report back. The longer flow with uploads and a selfie is the identity verification block.

Everything. Verifying and re-verifying change this page's state and say so in the foot ("Phone is verified until 14 Oct 2027, in this demo"); nothing is checked, stored or sent, and a reload starts again. Undo walks back the last change, which a real server often can't.

The band holds an unseen copy of its field's boxes, so it has the same height whether it says "Choose Verify" or shows the code field. Every row keeps three lines and a button of one size in every state, and the summary line and the foot have room for their longest sentences.

The rows are a real list. State is a word and a glyph (Verified, Due soon, Not verified), never colour alone, and each button says which proof it is for ("Re-verify Phone"). The code field is named for its row, its problem is linked to it, and the foot is a polite live region present from the start. Dates and masked values keep their reading order in a right-to-left page. On a phone the button sits under each row and the foot with Undo stays pinned to the bottom of the screen.