@arcblock/did-connect-service 4.1.61 → 4.1.63

package/dist/pages/admin/tab-profile-accounts.js

@@ -3,8 +3,8 @@
  * Grouped chip layout: bound accounts as chips, unbound as dashed add-chips.
  */
 import { ICON_DID_WALLET, ICON_EMAIL, ICON_PASSKEY, OAUTH_ICONS, } from "@arcblock/did-connect-core/ui";
-import { renderMergeConfirmBodyHtml, toMergeConfirmViewModel } from "./merge-confirm-view.js";
-import { renderMergeMethodPickerHtml } from "./merge-method-picker.js";
+import { renderMergeConfirmBodyHtml, renderMergeDoneBodyHtml, toMergeConfirmViewModel, } from "./merge-confirm-view.js";
+import { formatMergeCandidateWhen, partitionMergeMethods, renderMergeMethodPickerHtml, renderMergePromptHtml, } from "./merge-method-picker.js";
 /** Providers hidden from the Connected Accounts UI. */
 const HIDDEN_PROVIDERS = new Set(["facebook", "auth0-legacy"]);
 /** Build a JS-safe icon map to embed in inline <script>. */
@@ -40,11 +40,16 @@ var __connectedAccounts = [];
 var __oauthProviders = [];
 var __accountMergeOAuthCleanup = null;
 var __mergePromptDid = "";
+var __mergePromptCandidates = [];
 var __providerIcons = ${buildIconMapJSON()};
 var __hiddenProviders = ${JSON.stringify([...HIDDEN_PROVIDERS])};
 ${toMergeConfirmViewModel.toString()}
 ${renderMergeConfirmBodyHtml.toString()}
+${renderMergeDoneBodyHtml.toString()}
 ${renderMergeMethodPickerHtml.toString()}
+${formatMergeCandidateWhen.toString()}
+${partitionMergeMethods.toString()}
+${renderMergePromptHtml.toString()}
 
 async function loadConnectedAccounts() {
   var card = document.getElementById("connected-accounts-card");
@@ -179,7 +184,7 @@ function renderConnectedAccounts() {
   html += '<div class="ca-section">';
   html += '<div class="ca-section-label">' + __t("profile.mergeAccount") + '</div>';
   html += '<p class="ca-merge-hint" style="margin:0 0 8px;color:var(--text-secondary);font-size:13px;">' + __t("profile.mergeAccountHint") + '</p>';
-  html += '<button class="btn btn-secondary" onclick="startAccountMerge()">' + __t("profile.mergeChooseMethod") + '</button>';
+  html += '<button class="btn btn-secondary" onclick="startAccountMerge()">' + __t("profile.mergeStart") + '</button>';
   html += '</div>';
 
   list.innerHTML = html;
@@ -510,17 +515,29 @@ function cleanupAccountMergeOAuth() {
   if (__accountMergeOAuthCleanup) __accountMergeOAuthCleanup();
 }
 
+function mergeChallengeLooksExpired(error) {
+  return error === "Invalid or expired merge challenge"
+    || error === "合并验证无效或已过期"
+    || error === "合併驗證無效或已過期"
+    || error === "統合チャレンジが無効か、期限切れです";
+}
+
+function emailCodeAlreadySent(error) {
+  return error === "Code already sent, please wait"
+    || error === "验证码已发送，请稍候"
+    || error === "驗證碼已寄出，請稍候"
+    || error === "確認コードは送信済みです。しばらくお待ちください";
+}
+
 async function proveAccountMergeWithWallet(mergeChallenge) {
   var tokenData;
   try {
-    tokenData = await api("GET", "/../did/merge-proof/token");
+    tokenData = await api("GET", "/../did/merge-proof/token", undefined, { silent: true });
   } catch (e) {
-    showToast(__t("profile.mergeFailed"), "error");
-    return null;
+    return { ok: false, error: __t("profile.mergeFailed") };
   }
   if (!tokenData || !tokenData.token) {
-    showToast(__t("profile.mergeFailed"), "error");
-    return null;
+    return { ok: false, error: (tokenData && tokenData.error) || __t("profile.mergeFailed") };
   }
 
   var token = tokenData.token;
@@ -596,17 +613,16 @@ async function proveAccountMergeWithWallet(mergeChallenge) {
           var proved = await api("POST", "/../did/connect/complete", {
             token: token,
             mergeChallenge: mergeChallenge,
-          });
+          }, { silent: true });
           if (!proved || !proved.mergeIntent) {
-            statusEl.textContent = (proved && proved.error) || __t("profile.mergeFailed");
-            polling = false;
+            finish(proved || { ok: false, error: __t("profile.mergeFailed") });
             return;
           }
           finish(proved);
         } else if (status.status === "error") {
           clearInterval(pollTimer);
           pollTimer = null;
-          statusEl.textContent = status.error || __t("profile.mergeFailed");
+          finish({ ok: false, error: status.error || __t("profile.mergeFailed") });
         }
       } catch (e) { /* ignore poll errors */ }
       polling = false;
@@ -616,14 +632,12 @@ async function proveAccountMergeWithWallet(mergeChallenge) {
 
 async function proveAccountMergeWithPasskey(mergeChallenge) {
   if (typeof PublicKeyCredential === "undefined" || !navigator.credentials || !navigator.credentials.get) {
-    showToast(__t("profile.mergePasskeyUnavailable"), "error");
-    return null;
+    return { ok: false, error: __t("profile.mergePasskeyUnavailable") };
   }
-  var opts = await api("GET", "/../passkey/auth");
+  var opts = await api("GET", "/../passkey/auth", undefined, { silent: true });
   var publicKey = opts.authentication || opts;
-  if (!opts.challengeId || !publicKey || !publicKey.challenge) {
-    showToast((opts && opts.error) || __t("profile.mergeFailed"), "error");
-    return null;
+  if (!opts || opts.ok === false || !opts.challengeId || !publicKey || !publicKey.challenge) {
+    return { ok: false, error: (opts && opts.error) || __t("profile.mergeFailed") };
   }
   publicKey.challenge = base64urlToBuffer(publicKey.challenge);
   if (publicKey.allowCredentials) {
@@ -636,7 +650,7 @@ async function proveAccountMergeWithPasskey(mergeChallenge) {
     credential = await navigator.credentials.get({ publicKey: publicKey });
   } catch (e) {
     if (!e || e.name !== "NotAllowedError") {
-      showToast((e && e.message) || __t("profile.mergeFailed"), "error");
+      return { ok: false, error: (e && e.message) || __t("profile.mergeFailed") };
     }
     return null;
   }
@@ -656,7 +670,7 @@ async function proveAccountMergeWithPasskey(mergeChallenge) {
       },
     },
     mergeChallenge: mergeChallenge,
-  });
+  }, { silent: true });
 }
 
 function proveAccountMergeWithOAuth(provider, mergeChallenge) {
@@ -666,15 +680,23 @@ function proveAccountMergeWithOAuth(provider, mergeChallenge) {
       return;
     }
     cleanupAccountMergeOAuth();
+    var mergeResultPrefix = "connect.mergeOAuthResult.";
+    try {
+      var staleKeys = [];
+      for (var s = 0; s < localStorage.length; s++) {
+        var staleKey = localStorage.key(s);
+        if (staleKey && staleKey.indexOf(mergeResultPrefix) === 0) staleKeys.push(staleKey);
+      }
+      for (var t = 0; t < staleKeys.length; t++) localStorage.removeItem(staleKeys[t]);
+    } catch (e0) {}
     var returnUrl = encodeURIComponent(window.location.href);
-    var url = window.__BASE_PATH + "/../oauth/" + encodeURIComponent(provider) + "/login?returnUrl=" + returnUrl;
+    var url = window.__BASE_PATH + "/../oauth/" + encodeURIComponent(provider) + "/login?returnUrl=" + returnUrl + "&mergeChallenge=" + encodeURIComponent(mergeChallenge);
     var redirectUri = location.origin + "/.well-known/service/oauth/callback/" + encodeURIComponent(provider);
     var w = 500, h = 600;
     var left = (screen.width - w) / 2, top = (screen.height - h) / 2;
     var popup = window.open(url, "oauth_merge", "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top);
     if (!popup) {
-      showToast(__t("common.popupBlocked"), "error");
-      resolve(null);
+      resolve({ ok: false, error: __t("common.popupBlocked") });
       return;
     }
     var settled = false;
@@ -685,6 +707,7 @@ function proveAccountMergeWithOAuth(provider, mergeChallenge) {
     }, 5 * 60 * 1000);
     function cleanup() {
       window.removeEventListener("message", onMessage);
+      window.removeEventListener("storage", onStorage);
       clearTimeout(abandonTimer);
       if (__accountMergeOAuthCleanup === cancel) __accountMergeOAuthCleanup = null;
     }
@@ -694,6 +717,37 @@ function proveAccountMergeWithOAuth(provider, mergeChallenge) {
       cleanup();
       resolve(value);
     }
+    function parseMergeOAuthResult(raw) {
+      if (!raw) return null;
+      try {
+        var parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object") return { ok: false, error: __t("profile.mergeFailed") };
+        return parsed;
+      } catch (e1) {
+        return { ok: false, error: __t("profile.mergeFailed") };
+      }
+    }
+    function readMergeOAuthResultOnce() {
+      try {
+        for (var i = 0; i < localStorage.length; i++) {
+          var key = localStorage.key(i);
+          if (!key || key.indexOf(mergeResultPrefix) !== 0) continue;
+          var raw = localStorage.getItem(key);
+          try { localStorage.removeItem(key); } catch (e2) {}
+          return parseMergeOAuthResult(raw);
+        }
+      } catch (e3) {}
+      return null;
+    }
+    function onStorage(event) {
+      if (settled || !event || !event.key || event.key.indexOf(mergeResultPrefix) !== 0) return;
+      var raw = event.newValue;
+      try { localStorage.removeItem(event.key); } catch (e4) {}
+      var payload = parseMergeOAuthResult(raw);
+      if (!payload) return;
+      try { popup.close(); } catch (e5) {}
+      finish(payload);
+    }
     async function onMessage(event) {
       if (event.origin !== location.origin) return;
       if (!event.data || event.data.type !== "authorization_response") return;
@@ -711,23 +765,28 @@ function proveAccountMergeWithOAuth(provider, mergeChallenge) {
           code: resp.code,
           redirectUri: redirectUri,
           mergeChallenge: mergeChallenge,
-        });
+        }, { silent: true });
         finish(proved);
       } catch (e) {
-        showToast((e && e.message) || __t("profile.mergeFailed"), "error");
-        finish(null);
+        finish({ ok: false, error: (e && e.message) || __t("profile.mergeFailed") });
       }
     }
     window.addEventListener("message", onMessage);
+    window.addEventListener("storage", onStorage);
     function cancel() {
       try { popup.close(); } catch (e) {}
       finish(null);
     }
     __accountMergeOAuthCleanup = cancel;
+    var existing = readMergeOAuthResultOnce();
+    if (existing) {
+      try { popup.close(); } catch (e6) {}
+      finish(existing);
+    }
   });
 }
 
-async function proveAccountMergeWithEmail(mergeChallenge) {
+async function proveAccountMergeWithEmail(mergeChallenge, prefillEmail) {
   return new Promise(function(resolve) {
     var d = document.getElementById("email-merge-dialog");
     if (!d) {
@@ -744,6 +803,7 @@ async function proveAccountMergeWithEmail(mergeChallenge) {
       + '</div></div>'
       + '<div class="dialog-actions">'
       + '<button type="button" class="btn btn-secondary" id="email-merge-cancel">' + __t("common.cancel") + '</button>'
+      + '<button type="button" class="btn btn-secondary" id="email-merge-switch">' + __t("profile.mergeEmailSwitchMethod") + '</button>'
       + '<button type="button" class="btn btn-secondary" id="email-merge-send">' + __t("profile.mergeEmailSendCode") + '</button>'
       + '<button type="button" class="btn" id="email-merge-ok" disabled>' + __t("common.confirm") + '</button>'
       + '</div>';
@@ -755,31 +815,86 @@ async function proveAccountMergeWithEmail(mergeChallenge) {
     var okBtn = document.getElementById("email-merge-ok");
     var verifyId = null;
     var settled = false;
+    var activeChallenge = mergeChallenge;
+    var sentAt = 0;
+    var cooldownTimer = null;
+    var lastError = "";
     function finish(value) {
       if (settled) return;
       settled = true;
+      if (cooldownTimer) clearInterval(cooldownTimer);
+      cooldownTimer = null;
       if (d.open) d.close();
       resolve(value);
     }
+    function secondsLeft() {
+      if (!sentAt) return 0;
+      var left = 60000 - (Date.now() - sentAt);
+      if (left <= 0) return 0;
+      return Math.ceil(left / 1000);
+    }
+    function paintSendButton() {
+      var left = secondsLeft();
+      if (left > 0) {
+        sendBtn.disabled = true;
+        sendBtn.textContent = __t("profile.mergeEmailResendWait", { seconds: String(left) });
+        return;
+      }
+      sendBtn.disabled = false;
+      sendBtn.textContent = sentAt ? __t("profile.mergeEmailResend") : __t("profile.mergeEmailSendCode");
+    }
+    function startCooldown() {
+      if (cooldownTimer) clearInterval(cooldownTimer);
+      paintSendButton();
+      cooldownTimer = setInterval(function() {
+        paintSendButton();
+        if (secondsLeft() <= 0 && cooldownTimer) {
+          clearInterval(cooldownTimer);
+          cooldownTimer = null;
+        }
+      }, 1000);
+    }
+    function markCodeConsumed(message) {
+      codeEl.value = "";
+      codeEl.disabled = true;
+      okBtn.disabled = true;
+      lastError = message || "";
+      statusEl.textContent = lastError
+        ? lastError + " " + __t("profile.mergeEmailRequestNewCode")
+        : __t("profile.mergeEmailRequestNewCode");
+      if (secondsLeft() > 0) startCooldown();
+      else paintSendButton();
+    }
     document.getElementById("email-merge-cancel").onclick = function() { finish(null); };
+    document.getElementById("email-merge-switch").onclick = function() {
+      finish({ switchMethod: true, error: lastError, challenge: activeChallenge });
+    };
     d.onclose = function() { finish(null); };
     sendBtn.onclick = async function() {
       var email = (emailEl.value || "").trim();
       if (!email || email.indexOf("@") === -1) return;
       sendBtn.disabled = true;
       statusEl.textContent = __t("profile.emailSending");
-      var sent = await api("POST", "/../email/sendCode", { email: email });
+      var sent = await api("POST", "/../email/sendCode", { email: email }, { silent: true });
       if (!sent || sent.id == null) {
-        statusEl.textContent = (sent && sent.error) || __t("profile.emailSendFailed");
-        sendBtn.disabled = false;
+        var sendError = (sent && sent.error) || __t("profile.emailSendFailed");
+        statusEl.textContent = sendError;
+        if (emailCodeAlreadySent(sendError)) {
+          if (!sentAt) sentAt = Date.now();
+          startCooldown();
+        } else {
+          sendBtn.disabled = false;
+        }
         return;
       }
       verifyId = sent.id;
+      sentAt = Date.now();
+      codeEl.value = "";
       codeEl.disabled = false;
       okBtn.disabled = false;
       codeEl.focus();
       statusEl.textContent = __t("profile.emailCodeSent");
-      sendBtn.disabled = false;
+      startCooldown();
     };
     okBtn.onclick = async function() {
       var code = (codeEl.value || "").trim();
@@ -788,39 +903,58 @@ async function proveAccountMergeWithEmail(mergeChallenge) {
       var proved = await api("POST", "/../email/login", {
         code: code,
         id: verifyId,
-        mergeChallenge: mergeChallenge,
-      });
-      if (!proved || !proved.mergeIntent) {
-        statusEl.textContent = (proved && proved.error) || __t("profile.mergeFailed");
-        okBtn.disabled = false;
+        mergeChallenge: activeChallenge,
+      }, { silent: true });
+      if (proved && proved.mergeIntent) {
+        finish(proved);
         return;
       }
-      finish(proved);
+      var err = (proved && proved.error) || __t("profile.mergeFailed");
+      if (mergeChallengeLooksExpired(err)) {
+        var restarted = await api("POST", "/../account/merge/start", {}, { silent: true });
+        if (restarted && restarted.challenge) activeChallenge = restarted.challenge;
+      }
+      markCodeConsumed(err);
     };
+    if (typeof prefillEmail === "string" && prefillEmail) emailEl.value = prefillEmail;
     d.showModal();
     emailEl.focus();
   });
 }
 
-async function finalizeAccountMerge(proved) {
+async function finalizeAccountMerge(proved, candidate) {
   if (!proved || !proved.mergeIntent) {
     showToast((proved && proved.error) || __t("profile.mergeFailed"), "error");
     return false;
   }
   var plan = await api("POST", "/../account/merge/dry-run", { mergeIntent: proved.mergeIntent });
-  var ok = await confirmMergePlan(plan);
-  if (!ok) {
+  if (!plan || plan.ok === false || !plan.accounts) return false;
+  // Server omits keep → session. The first paint must match recommendedKeep.
+  if ((plan.recommendedKeep === "session" || plan.recommendedKeep === "proved") && plan.keep !== plan.recommendedKeep) {
+    var next = plan.recommendedKeep;
+    var aligned = await api("POST", "/../account/merge/dry-run", { mergeIntent: proved.mergeIntent, keep: next }, { silent: true });
+    if (aligned && aligned.ok !== false && aligned.accounts) plan = aligned;
+    else showToast((aligned && aligned.error) || __t("profile.mergeFailed"), "error");
+  }
+  var candidateEmail = candidate && typeof candidate.email === "string" ? candidate.email : "";
+  plan.__hasCandidate = !!(candidate && typeof candidate === "object");
+  var confirmed = await confirmMergePlan(plan, proved.mergeIntent, candidateEmail);
+  if (!confirmed) {
     showToast(__t("profile.mergeCancelled"), "error");
     return false;
   }
-  var committed = await api("POST", "/../account/merge/commit", { mergeIntent: proved.mergeIntent });
-  if (committed && committed.ok) {
-    showToast(__t("profile.mergeSuccess"), "success");
-    loadConnectedAccounts();
-    return true;
-  }
-  showToast((committed && committed.error) || __t("profile.mergeFailed"), "error");
-  return false;
+  return true;
+}
+
+function mergeCandidateWhenLabel(iso) {
+  var lang = (document.documentElement && document.documentElement.lang) || "en";
+  return formatMergeCandidateWhen(iso, Date.now(), lang, __t);
+}
+
+function mergePromptIcon(provider) {
+  if (provider && __providerIcons[provider]) return getProviderIconSvg(provider);
+  var ch = provider ? provider.charAt(0).toUpperCase() : "?";
+  return '<span class="ca-merge-prompt-fallback">' + escapeHtml(ch) + '</span>';
 }
 
 function hideMergePrompt() {
@@ -831,10 +965,48 @@ function hideMergePrompt() {
   el.innerHTML = "";
 }
 
-function dismissMergePrompt() {
+function paintMergePrompt(rows, hiddenProviders) {
+  var el = document.getElementById("merge-candidate-prompt");
+  if (!el) return;
+  if (!rows || !rows.length) {
+    hideMergePrompt();
+    return;
+  }
+  el.innerHTML = renderMergePromptHtml(rows[0].email || "", rows, __t, escapeHtml, mergePromptIcon, getProviderLabel, mergeCandidateWhenLabel, hiddenProviders || __hiddenProviders);
+  el.hidden = false;
+  el.style.display = "";
+}
+
+function startMergeCandidate(btn) {
+  var ref = btn && btn.getAttribute ? btn.getAttribute("data-merge-ref") : "";
+  var list = __mergePromptCandidates || [];
+  for (var i = 0; i < list.length; i++) {
+    if (list[i].ref === ref) {
+      startAccountMerge(list[i]);
+      return;
+    }
+  }
+}
+
+function hideMergeCandidate(btn) {
+  var ref = btn && btn.getAttribute ? btn.getAttribute("data-merge-ref") : "";
+  var did = __mergePromptDid || "";
+  if (did && ref) {
+    try { localStorage["connect.mergePrompt.notMine." + did + "." + ref] = "1"; } catch (e) {}
+  }
+  var next = [];
+  var list = __mergePromptCandidates || [];
+  for (var i = 0; i < list.length; i++) {
+    if (list[i].ref !== ref) next.push(list[i]);
+  }
+  __mergePromptCandidates = next;
+  paintMergePrompt(next, __hiddenProviders);
+}
+
+function dismissMergePromptLater() {
   var did = __mergePromptDid || "";
   if (did) {
-    try { localStorage["connect.mergePrompt.dismissed." + did] = "1"; } catch (e) {}
+    try { sessionStorage["connect.mergePrompt.later." + did] = "1"; } catch (e) {}
   }
   hideMergePrompt();
 }
@@ -842,74 +1014,117 @@ function dismissMergePrompt() {
 async function maybeShowMergePrompt(did) {
   hideMergePrompt();
   __mergePromptDid = did || "";
+  __mergePromptCandidates = [];
   if (!did) return;
   try {
-    if (localStorage["connect.mergePrompt.dismissed." + did] === "1") return;
+    if (sessionStorage["connect.mergePrompt.later." + did] === "1") return;
   } catch (e) {}
   var data = await api("GET", "/../account/merge/candidate", undefined, { silent: true });
-  if (!data || data.mergeCandidate !== true) return;
+  if (!data || data.mergeCandidate !== true || !data.candidates || !data.candidates.length) return;
   try {
-    if (localStorage["connect.mergePrompt.dismissed." + did] === "1") return;
-  } catch (e) {}
+    if (sessionStorage["connect.mergePrompt.later." + did] === "1") return;
+  } catch (e2) {}
+  var email = typeof data.email === "string" ? data.email : "";
+  if (!email) return;
+  var visible = [];
+  for (var i = 0; i < data.candidates.length && visible.length < 5; i++) {
+    var c = data.candidates[i];
+    if (!c || typeof c.ref !== "string" || !c.ref) continue;
+    try {
+      if (localStorage["connect.mergePrompt.notMine." + did + "." + c.ref] === "1") continue;
+    } catch (e3) {}
+    visible.push({
+      ref: c.ref,
+      methods: Array.isArray(c.methods) ? c.methods : [],
+      emailLogin: c.emailLogin === true,
+      email: email,
+      createdAt: typeof c.createdAt === "string" ? c.createdAt : "",
+      lastLoginAt: typeof c.lastLoginAt === "string" ? c.lastLoginAt : "",
+    });
+  }
+  if (!visible.length) return;
   var el = document.getElementById("merge-candidate-prompt");
   if (!el) return;
-  el.innerHTML = '<div class="ca-merge-prompt-title">' + escapeHtml(__t("profile.mergePromptTitle")) + '</div>'
-    + '<p class="ca-merge-prompt-body">' + escapeHtml(__t("profile.mergePromptBody")) + '</p>'
-    + '<div class="ca-merge-prompt-actions">'
-    + '<button type="button" class="btn" id="merge-candidate-prompt-action" onclick="startAccountMerge()">' + escapeHtml(__t("profile.mergePromptAction")) + '</button>'
-    + '<button type="button" class="btn btn-secondary" id="merge-candidate-prompt-dismiss" onclick="dismissMergePrompt()">' + escapeHtml(__t("profile.mergePromptDismiss")) + '</button>'
-    + '</div>';
-  el.hidden = false;
-  el.style.display = "";
+  __mergePromptCandidates = visible;
+  paintMergePrompt(visible, __hiddenProviders);
 }
 
-async function startAccountMerge() {
+async function startAccountMerge(candidate) {
   cleanupAccountMergeOAuth();
-  var start;
-  try {
-    start = await api("POST", "/../account/merge/start", {});
-  } catch (e) {
-    showToast((e && e.message) || __t("profile.mergeFailed"), "error");
-    return;
-  }
-  if (!start || !start.challenge) {
-    showToast(__t("profile.mergeFailed"), "error");
-    return;
+  var guided = null;
+  if (candidate && typeof candidate.ref === "string" && candidate.ref) {
+    guided = partitionMergeMethods(candidate, listMergeMethods(), __hiddenProviders);
   }
-
   var d = document.getElementById("account-merge-method-dialog");
   if (!d) {
     d = document.createElement("dialog");
     d.id = "account-merge-method-dialog";
     document.body.appendChild(d);
   }
-  d.innerHTML = renderMergeMethodPickerHtml(listMergeMethods(), __t, escapeHtml, getProviderIconSvg, getProviderLabel);
-  document.getElementById("account-merge-method-cancel").onclick = function() { d.close(); };
-  var buttons = d.querySelectorAll("[data-merge-method]");
-  for (var b = 0; b < buttons.length; b++) {
-    buttons[b].onclick = async function(event) {
-      var button = event.currentTarget;
-      var method = button.getAttribute("data-merge-method");
-      var selectedProvider = button.getAttribute("data-merge-provider");
-      d.close();
-      try {
-        var proved = null;
-        if (method === "wallet") proved = await proveAccountMergeWithWallet(start.challenge);
-        else if (method === "passkey") proved = await proveAccountMergeWithPasskey(start.challenge);
-        else if (method === "oauth") proved = await proveAccountMergeWithOAuth(selectedProvider, start.challenge);
-        else if (method === "email") proved = await proveAccountMergeWithEmail(start.challenge);
-        if (proved) await finalizeAccountMerge(proved);
-      } catch (e) {
-        if (!e || e.name !== "NotAllowedError") {
-          showToast((e && e.message) || __t("profile.mergeFailed"), "error");
+  var challenge = null;
+  function paint(errorText) {
+    d.innerHTML = renderMergeMethodPickerHtml(guided ? [] : listMergeMethods(), __t, escapeHtml, getProviderIconSvg, getProviderLabel, errorText || "", guided);
+    var cancel = document.getElementById("account-merge-method-cancel");
+    if (cancel) cancel.onclick = function() { d.close(); };
+    var buttons = d.querySelectorAll("[data-merge-method]");
+    for (var b = 0; b < buttons.length; b++) {
+      buttons[b].onclick = onPick;
+    }
+  }
+  paint("");
+  d.showModal();
+
+  async function ensureChallenge(force) {
+    if (challenge && !force) return challenge;
+    var start = await api("POST", "/../account/merge/start", {}, { silent: true });
+    if (!start || !start.challenge) {
+      paint((start && start.error) || __t("profile.mergeFailed"));
+      return null;
+    }
+    challenge = start.challenge;
+    return challenge;
+  }
+
+  async function onPick(event) {
+    var button = event.currentTarget;
+    var method = button.getAttribute("data-merge-method");
+    var selectedProvider = button.getAttribute("data-merge-provider");
+    paint("");
+    var active = await ensureChallenge(false);
+    if (!active) return;
+    try {
+      var proved = null;
+      if (method === "wallet") proved = await proveAccountMergeWithWallet(active);
+      else if (method === "passkey") proved = await proveAccountMergeWithPasskey(active);
+      else if (method === "oauth") proved = await proveAccountMergeWithOAuth(selectedProvider, active);
+      else if (method === "email") proved = await proveAccountMergeWithEmail(active, button.getAttribute("data-merge-email") || "");
+      if (proved && proved.switchMethod) {
+        if (typeof proved.challenge === "string" && proved.challenge) challenge = proved.challenge;
+        paint(proved.error || "");
+        return;
+      }
+      if (proved && proved.mergeIntent) {
+        if (d.open) d.close();
+        await finalizeAccountMerge(proved, candidate);
+        return;
+      }
+      if (proved && proved.error) {
+        if (mergeChallengeLooksExpired(proved.error)) {
+          challenge = null;
+          await ensureChallenge(true);
         }
+        paint(proved.error);
+        return;
       }
-    };
+    } catch (e) {
+      if (!e || e.name !== "NotAllowedError") {
+        paint((e && e.message) || __t("profile.mergeFailed"));
+      }
+    }
   }
-  d.showModal();
 }
 
-function confirmMergePlan(plan) {
+function confirmMergePlan(plan, mergeIntent, candidateEmail) {
   return new Promise(function(resolve) {
     var d = document.getElementById("merge-confirm-dialog");
     if (!d) {
@@ -918,32 +1133,193 @@ function confirmMergePlan(plan) {
       d.className = "merge-confirm-dialog";
       document.body.appendChild(d);
     }
-    d.innerHTML = '<div class="dialog-content">'
-      + '<h3>' + escapeHtml(__t("profile.mergeConfirmTitle")) + '</h3>'
-      + renderMergeConfirmBodyHtml(plan, __t, escapeHtml, getProviderLabel)
-      + '</div>'
-      + '<div class="dialog-actions">'
-      + '<button class="btn btn-secondary" id="merge-confirm-cancel">' + escapeHtml(__t("common.cancel")) + '</button>'
-      + '<button class="btn btn-danger" id="merge-confirm-ok">' + escapeHtml(__t("common.confirm")) + '</button>'
-      + '</div>';
+    var current = plan || {};
+    var selectedKeep = current.keep === "proved" || current.keep === "session" ? current.keep : "session";
+    // accounts.session.did stays the signed-in DID. intoDid follows keep.
+    var sessionAccount = current.accounts && current.accounts.session;
+    var sessionDid = sessionAccount && typeof sessionAccount.did === "string" ? sessionAccount.did : "";
+    var hasCandidate = current.__hasCandidate === true;
+    var loading = false;
+    var generation = 0;
+    var phase = "preview";
+    var settled = false;
+    var resultPayload = null;
 
-    var okBtn = document.getElementById("merge-confirm-ok");
-    var cancelBtn = document.getElementById("merge-confirm-cancel");
-    if (plan && plan.tooLarge) okBtn.disabled = true;
+    function keptDid() {
+      var side = selectedKeep === "proved" ? current.accounts && current.accounts.proved : current.accounts && current.accounts.session;
+      if (side && typeof side.did === "string" && side.did) return side.did;
+      return typeof current.intoDid === "string" ? current.intoDid : "";
+    }
+
+    function submitLabel() {
+      if (selectedKeep === "session") return __t("profile.mergeConfirmSubmitKeep");
+      return __t("profile.mergeConfirmSubmitSwitch", { did: truncateDid(keptDid()) });
+    }
+
+    function paint() {
+      d.innerHTML = '<div class="dialog-content">'
+        + '<h3 id="merge-confirm-title">' + escapeHtml(__t("profile.mergeConfirmTitle")) + '</h3>'
+        + renderMergeConfirmBodyHtml(current, __t, escapeHtml, getProviderLabel, {
+          selectedKeep: selectedKeep,
+          hasCandidate: hasCandidate,
+          candidateEmail: candidateEmail || "",
+          shortDid: truncateDid,
+          loading: loading
+        })
+        + '</div>'
+        + '<div class="dialog-actions">'
+        + '<button type="button" class="btn btn-secondary" id="merge-confirm-cancel">' + escapeHtml(__t("common.cancel")) + '</button>'
+        + '<button type="button" class="btn btn-danger" id="merge-confirm-ok">' + escapeHtml(submitLabel()) + '</button>'
+        + '</div>';
+      var okBtn = document.getElementById("merge-confirm-ok");
+      var cancelBtn = document.getElementById("merge-confirm-cancel");
+      if (loading || current.tooLarge || phase !== "preview") okBtn.disabled = true;
+      cancelBtn.onclick = function() { finish(false); };
+      okBtn.onclick = onOk;
+      var radios = d.querySelectorAll('input[name="merge-keep"]');
+      for (var i = 0; i < radios.length; i++) radios[i].onchange = onKeepChange;
+      var copies = d.querySelectorAll("[data-copy-did]");
+      for (var c = 0; c < copies.length; c++) copies[c].onclick = onCopy;
+    }
+
+    function onCopy(event) {
+      if (event) {
+        if (event.preventDefault) event.preventDefault();
+        if (event.stopPropagation) event.stopPropagation();
+      }
+      var btn = event && event.currentTarget;
+      var full = btn && btn.getAttribute ? btn.getAttribute("data-copy-did") : "";
+      if (full) copyToClipboard(full);
+    }
+
+    function onKeepChange(event) {
+      if (phase !== "preview") return;
+      var input = event && event.currentTarget;
+      var next = input && input.value;
+      if (next !== "session" && next !== "proved") return;
+      if (next === selectedKeep) return;
+      selectedKeep = next;
+      loading = true;
+      var token = ++generation;
+      var okBtn = document.getElementById("merge-confirm-ok");
+      if (okBtn) okBtn.disabled = true;
+      setTimeout(function() {
+        if (token !== generation || !loading || phase !== "preview") return;
+        paint();
+      }, 0);
+      refreshKeep(next, token);
+    }
+
+    async function refreshKeep(next, token) {
+      var refreshed = await api("POST", "/../account/merge/dry-run", { mergeIntent: mergeIntent, keep: next }, { silent: true });
+      if (token !== generation) return;
+      loading = false;
+      if (!refreshed || refreshed.ok === false || !refreshed.accounts) {
+        showToast((refreshed && refreshed.error) || __t("profile.mergeFailed"), "error");
+        selectedKeep = current.keep === "proved" || current.keep === "session" ? current.keep : "session";
+        paint();
+        return;
+      }
+      current = refreshed;
+      selectedKeep = current.keep === "proved" || current.keep === "session" ? current.keep : next;
+      paint();
+    }
+
+    async function onOk() {
+      if (phase !== "preview" || loading || current.tooLarge) return;
+      var okBtn = document.getElementById("merge-confirm-ok");
+      if (!okBtn || okBtn.disabled) return;
+      okBtn.disabled = true;
+      phase = "committing";
+      generation += 1;
+      var committed = await api("POST", "/../account/merge/commit", { mergeIntent: mergeIntent, keep: selectedKeep });
+      if (settled) return;
+      if (!committed || committed.ok === false || !committed.survivorDid) {
+        phase = "preview";
+        if (!d.open) {
+          try { d.showModal(); } catch (err) {}
+        }
+        paint();
+        return;
+      }
+      phase = "done";
+      resultPayload = committed;
+      showDone(committed);
+    }
+
+    function showDone(committed) {
+      var survivorDid = committed && typeof committed.survivorDid === "string" ? committed.survivorDid : "";
+      d.innerHTML = '<div class="dialog-content">'
+        + '<h3 id="merge-confirm-title">' + escapeHtml(__t("profile.mergeDoneTitle")) + '</h3>'
+        + renderMergeDoneBodyHtml({
+          survivorDid: survivorDid,
+          survivorMethods: current.survivorMethods
+        }, __t, escapeHtml, getProviderLabel, truncateDid)
+        + '</div>'
+        + '<div class="dialog-actions">'
+        + '<button type="button" class="btn" id="merge-confirm-finish">' + escapeHtml(__t("profile.mergeDoneFinish")) + '</button>'
+        + '</div>';
+      var finishBtn = document.getElementById("merge-confirm-finish");
+      finishBtn.onclick = function() { finishDone(survivorDid); };
+      if (!d.open) {
+        try { d.showModal(); } catch (err) {}
+      }
+    }
+
+    function finishDone(survivorDid) {
+      if (settled) return;
+      settled = true;
+      d.oncancel = null;
+      d.onclose = null;
+      if (d.open) d.close();
+      if (survivorDid && sessionDid && survivorDid !== sessionDid) location.reload();
+      else loadConnectedAccounts();
+      resolve(true);
+    }
 
-    var settled = false;
     function finish(result) {
       if (settled) return;
+      if (phase === "done") {
+        finishDone(resultPayload && resultPayload.survivorDid ? resultPayload.survivorDid : "");
+        return;
+      }
+      if (phase === "committing") {
+        if (!d.open) {
+          try { d.showModal(); } catch (err) {}
+        }
+        return;
+      }
       settled = true;
-      okBtn.onclick = null;
-      cancelBtn.onclick = null;
+      d.oncancel = null;
       d.onclose = null;
-      d.close();
+      if (d.open) d.close();
       resolve(result);
     }
-    okBtn.onclick = function() { if (okBtn.disabled) return; finish(true); };
-    cancelBtn.onclick = function() { finish(false); };
-    d.onclose = function() { finish(false); };
+
+    d.oncancel = function(event) {
+      if (event && event.preventDefault) event.preventDefault();
+      if (phase === "committing") return;
+      if (phase === "done") {
+        finishDone(resultPayload && resultPayload.survivorDid ? resultPayload.survivorDid : "");
+        return;
+      }
+      finish(false);
+    };
+    d.onclose = function() {
+      if (settled) return;
+      if (phase === "committing") {
+        if (!d.open) {
+          try { d.showModal(); } catch (err) {}
+        }
+        return;
+      }
+      if (phase === "done") {
+        finishDone(resultPayload && resultPayload.survivorDid ? resultPayload.survivorDid : "");
+        return;
+      }
+      finish(false);
+    };
+    paint();
     d.showModal();
   });
 }