shadcn.io is not affiliated with official shadcn/ui
Merge Two Accounts Account Block for React Aria
A merge in three steps: the other account's email and code, the two accounts side by side with what moves, what is lost and three choices, and a confirm that closes the other account behind an alert dialog.
Installation
Overview
Let people join two accounts without losing track of what they give up, with this merge panel for React with React Aria. A Steps bar runs across the top: Choose, Resolve, Confirm. Choose takes the other account's email and a six-digit Input OTP code, with the demo's code and the one email it knows printed. Resolve puts the two accounts side by side in hairline cells, lists what moves to this account (playlists, saved songs, followed artists and listening history, each added up) and what is lost (the other plan and username, the downloads on its devices, and the loser of each choice), and asks for three decisions as Keep mine or Keep theirs. Confirm shows the one account that results, and Merge accounts opens an Alert Dialog that closes the other account and asks for the word MERGE, with Cancel focused first. It is a panel with steps, not the dialog that merges two accounts field by field. It's built from Steps, Input OTP, Alert Dialog, Field, Input, Button, Shine Button and Guides, with a CSS entrance only. For a music, media or any service where a person ends up with two accounts.
FAQ
How do I fill it with my own accounts and conflicts?
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.
How does the code step work?
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.
Why does the panel list what is lost?
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.
What does the confirm do?
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.
Why does the panel keep its height between steps?
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.
Is it accessible, and how does it look on a phone?
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. On React Aria focus is set on Keep both accounts a moment after the alert dialog opens.