Basic Info Account Block for React

Edit START (the name, username, email, phone, the ISO birth day, whether the email is verified and the verified address it still writes to as earlier), ROWS (a label, a hint and the field's length) and TAKEN, the usernames that are already someone's. The date of birth, the confirmation day and "as of" are fixed ISO values with AS_OF as today, never the clock, so replace it with the current date when you wire it up. The minimum age is MIN_AGE.

Everything. A save changes this page's state and says so in the foot; nothing is sent, nothing is stored and a reload starts again. To make it real, call your endpoint in commitField and saveBirth, change the row only when it answers and put a failure in the same status line. The taken-name list stands in for a server check: call your availability endpoint from the typing handler, debounced, and keep the reason under the field.

As you type, the text is tested against a pattern (3 to 20 lowercase letters, digits, dots or underscores) and the taken list, and the reason shows under the field: "lena is taken. Choose another." or "marisol.k is free." While it fails, the field is marked invalid and the save button is held. If you press Enter anyway, the saved value comes back and the status line says why it was not saved. Escape, or clicking away, cancels the edit.

The new address is saved as unverified. The badge changes from Verified to Unverified, and the row says "Confirm it from your inbox: unverified until then" and which address the app still writes to. The "I clicked the link" button stands in for opening the message; a real app sends the message from its server and flips verified when the link is used. The row keeps its height in both states, so nothing moves.

The phone is shown with every digit but the last four hidden and its country code kept; the field shows the whole number while you edit it. The date of birth is shown as text, and editing opens a date field you fill in again: a future date, or an age under 13, is refused with its reason in the same slot and the old date stays.

Every pencil, check and cross has a name that says which field it is for ("Edit username", "Save username"), each field is linked to its hint or reason, and the foot is a polite live region present from the start. Focus returns to the pencil after a save or a cancel. On a phone each label sits above its value, the hints keep room for two lines, and the foot with the status and Undo stays pinned to the bottom of the screen. Emails and numbers keep their reading order in a right-to-left page.