Merge Two Accounts Account Block for React

Edit MINE and THEIRS (name, email, plan and what each holds), SHARED_SONGS and SHARED_ARTISTS (what both hold, which merge instead of doubling) and CONFLICTS: each has a label, the two values and what is lost when you keep yours or theirs. Every total, every line of what moves and every line of what is lost is worked out from those, so the page never contradicts itself.

In this demo the other account is a typed one and its code is printed, because nothing is sent: "In this demo the code is 482 913." Any other email is refused in words. Six digits check themselves on the sixth, pasted or typed, Enter checks a short entry, and a wrong code clears the field. To make it real, send a code to the other account's address from send and check it on the server in accept; never ship the code to the page.

A merge always costs something and people should read it before they type the word. Three losses are fixed (the other plan, its username, the downloads on its devices) and each of the three choices adds the loser, so choosing Keep theirs for the theme says "Your Dark theme" is lost. Until a choice is made its line says it is not chosen yet, and Review the merge rests quietly and, if pressed, takes you to the first open choice.

The last step's button opens an alert dialog with the consequence in its first sentence and a field for the word MERGE; the action stays off until it matches and the field is marked invalid meanwhile. Cancel has focus when it opens, Escape closes it and focus returns to the button. Confirming only changes this page: it says the other account is closed, shows the result and offers Start over. Nothing is moved or closed.

The three steps share one grid cell, the inactive ones hidden and out of the tab order, so the cell is as tall as the tallest step. The lists of what moves and what is lost always have the same number of lines.

The steps are a real list, the choices are native radio groups named for what they decide, problems sit under their field and the status line in the foot is a polite live region present from the start. On a phone the Steps bar shows only its numbers with "Step 2 of 3" under it, the two accounts and the lists stack, and the foot with Back and the action stays pinned to the bottom.