Data Export Requests Account Block for React

Edit CATEGORIES (an id and a label) and the typed rows each one exports in rowsOf: the first row of a list is its header, the rest are sample rows. The requests when the page opens are FIRST: each has a category, a format and days, the ISO day every stage was reached, so one to four days is how far it got. The dates around them (how long an archive lasts, whether it has expired, the days to expiry) are worked out from AS_OF and LIFETIME, never from the clock.

All of it. A request is added to the list in this page, Prepare now only adds a day to its track and nothing is checked, prepared or sent. To make it real, send the request from the form's submit handler with the password, and let your server move the stages; show the stage it reports instead of adding days yourself. Download here makes a small file in the tab from typed sample rows and the status line says it is not the person's data: point it at the real archive's address.

It stands in for the identity check a real export needs. Any password of 8 or more characters passes in this demo, a shorter one is refused in words under the field and focus goes back to it, and the field is emptied after a request so the next one asks again. Never keep or log the password: check it on the server, and prefer a fresh sign-in for something this sensitive.

A real file in the format you chose, JSON or CSV, with a few typed rows for the category and a note that it is a sample. The CSV quotes any cell with a comma, a quote or a line break and keeps text that starts with an equals sign, a plus, a minus or an at sign as text, so a spreadsheet never reads it as a formula. The file is named with the product, the category and the as-of day.

The form's three fields stack, the header's button sits under the sentence and each request keeps one height. The four-stage track becomes a thin four-part bar and the line Stage 3 of 4 with the stage's name; the track itself stays in the page as text for screen readers, with each stage and its day. The two buttons of a request sit side by side.

Every field has a label, the password's problem is read out when it appears and the field is marked invalid, and the stage track is an ordered list that says each stage and its day or Not yet. The one status line is polite and present from the start, and after a press focus moves to the request's button, which stays the same node through Prepare now so it is not lost. Colour is never the only sign: reached stages are solid, the rest hollow, and every stage has its name.