@arcblock/did-connect-core 4.1.53 → 4.1.55

package/dist/ui/login-page.js

@@ -268,6 +268,8 @@ export class LoginPage {
     }
     /** Locale sits on the card's top-right row, level with Back / Cancel. */
     renderCardTools(card) {
+        if (!(this.options.showLocaleSelector ?? this.options.mode !== 'dialog'))
+            return;
         const tools = document.createElement('div');
         tools.className = 'card-tools';
         this.renderLocaleSwitcher(tools);
@@ -325,6 +327,8 @@ export class LoginPage {
         trigger.addEventListener('click', (event) => {
             event.stopPropagation();
             setOpen(menu.hidden);
+            if (!menu.hidden)
+                menu.querySelector('[aria-checked="true"]')?.focus();
         });
         for (const item of locales) {
             const checked = item.code === current.code;
@@ -334,12 +338,13 @@ export class LoginPage {
             btn.setAttribute('role', 'menuitemradio');
             btn.setAttribute('aria-checked', checked ? 'true' : 'false');
             btn.dataset.locale = item.code;
+            btn.tabIndex = -1;
             btn.title = item.label;
-            if (checked) {
+            {
                 const mark = document.createElement('span');
                 mark.className = 'locale-check';
                 mark.setAttribute('aria-hidden', 'true');
-                mark.textContent = '✓';
+                mark.textContent = checked ? '✓' : '';
                 btn.appendChild(mark);
             }
             const label = document.createElement('span');
@@ -351,6 +356,25 @@ export class LoginPage {
             });
             menu.appendChild(btn);
         }
+        wrapper.addEventListener('keydown', (event) => {
+            const items = [...menu.querySelectorAll('.locale-btn')];
+            const active = this.shadow?.activeElement ?? document.activeElement;
+            const index = items.indexOf(active);
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                setOpen(false);
+                trigger.focus();
+            }
+            else if (event.key === 'Tab')
+                setOpen(false);
+            else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                event.preventDefault();
+                setOpen(true);
+                const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : index < 0 ? (event.key === 'ArrowUp' ? items.length - 1 : 0) : (index + (event.key === 'ArrowUp' ? -1 : 1) + items.length) % items.length;
+                items[next]?.focus();
+            }
+        });
         const onOutsideClick = (event) => {
             const path = event.composedPath();
             if (path.includes(wrapper))
@@ -406,6 +430,21 @@ export class LoginPage {
                 break;
         }
     }
+    /** Keep recognition next to the action, without a second page subtitle. */
+    markLastUsed(button, method, locale) {
+        if (!this.options.preferenceKey)
+            return;
+        try {
+            if (localStorage.getItem(`did-login-method:${this.options.preferenceKey}`) !== method)
+                return;
+            const hint = document.createElement('span');
+            hint.className = 'last-used';
+            hint.textContent = t('lastUsed', locale);
+            button.classList.add('has-last-used');
+            button.appendChild(hint);
+        }
+        catch { /* Storage may be unavailable in private mode. */ }
+    }
     renderMethodsView(card, locale, methods) {
         // ── Escape hatch ("Cancel") — top-left, mirrors the locale switcher
         //    (top-right). Standard placement for a standalone auth card. ──
@@ -413,21 +452,6 @@ export class LoginPage {
             this.renderHomeLink(card, locale);
         // ── Brand header ──
         this.renderBrandHeader(card, locale);
-        if (this.options.preferenceKey) {
-            try {
-                const last = localStorage.getItem(`did-login-method:${this.options.preferenceKey}`);
-                const labels = { passkey: 'Passkey', oauth: 'OAuth', email: t('emailButton', locale), 'did-connect': 'DID Wallet' };
-                const provider = last?.startsWith('oauth:') ? this.options.oauthProviders?.find(p => p.enabled && `oauth:${p.id}` === last) : undefined;
-                const label = provider?.name ?? (last ? labels[last] : undefined);
-                if (last && label && (methods.includes(last) || (provider && methods.includes('oauth')))) {
-                    const hint = document.createElement('p');
-                    hint.className = 'subtitle';
-                    hint.textContent = t('lastUsed', locale, { method: label });
-                    card.appendChild(hint);
-                }
-            }
-            catch { /* private mode */ }
-        }
         // Passkey unsupported warning
         const requestedPasskey = this.options.methods.includes('passkey');
         if (requestedPasskey && !methods.includes('passkey')) {
@@ -721,11 +745,12 @@ export class LoginPage {
             }
         });
     }
-    renderBackButton(parent, locale) {
+    renderBackButton(parent, locale, onBack = () => this.switchView('methods')) {
         const btn = document.createElement('button');
+        btn.type = 'button';
         btn.className = 'back-btn';
         btn.innerHTML = `${ICON_BACK_ARROW} ${escapeHtml(t('back', locale))}`;
-        btn.addEventListener('click', () => this.switchView('methods'));
+        btn.addEventListener('click', onBack);
         parent.appendChild(btn);
     }
     /**
@@ -838,12 +863,6 @@ export class LoginPage {
             }
             footer.appendChild(links);
         }
-        if (this.currentView !== 'methods' && this.options.mode !== 'dialog') {
-            this.renderHomeLink(footer, locale);
-            const cancel = footer.querySelector('.home-link');
-            if (cancel)
-                cancel.style.cssText = 'position:static;display:inline-flex;margin-top:12px';
-        }
         parent.appendChild(footer);
     }
     renderDivider(parent, locale) {
@@ -943,11 +962,8 @@ export class LoginPage {
             createBtn.id = 'passkey-btn';
             createBtn.innerHTML = `${ICON_PASSKEY} ${escapeHtml(t('passkeyCreate', locale))}`;
             section.appendChild(createBtn);
-            const backLink = document.createElement('button');
-            backLink.type = 'button';
-            backLink.className = 'passkey-alt';
-            backLink.textContent = t('passkeyBackToSignIn', locale);
-            section.appendChild(backLink);
+            parent.querySelector('.back-btn')?.remove();
+            this.renderBackButton(parent, locale, () => renderSignInState());
             const doCreate = async () => {
                 if (createBtn.disabled)
                     return; // Enter-key auto-repeat on the name input
@@ -976,7 +992,6 @@ export class LoginPage {
             createBtn.addEventListener('click', doCreate);
             nameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter')
                 doCreate(); });
-            backLink.addEventListener('click', () => renderSignInState());
             createBtn.focus();
         };
         // ── State 0: sign-in (default) ──
@@ -1015,6 +1030,7 @@ export class LoginPage {
         };
         const renderSignInState = () => {
             this.cardEl?.classList.remove('passkey-creating');
+            parent.querySelector('.back-btn')?.remove();
             this.abort?.abort();
             this.generation++;
             const heading = this.cardEl?.querySelector('h1');
@@ -1026,6 +1042,7 @@ export class LoginPage {
             signInBtn.className = this.cardEl?.classList.contains('social-first') ? 'btn btn-secondary' : 'btn';
             signInBtn.id = 'passkey-btn';
             signInBtn.innerHTML = `${ICON_PASSKEY} ${escapeHtml(t('passkeySignIn', locale))}`;
+            this.markLastUsed(signInBtn, 'passkey', locale);
             section.appendChild(signInBtn);
             signInBtn.addEventListener('click', () => doSignIn());
             const createLink = document.createElement('button');
@@ -1049,172 +1066,235 @@ export class LoginPage {
     startOAuthPopup(providerId, btn) {
         this.oauthCleanup?.();
         const epoch = this.generation;
+        const locale = this.options.locale;
         const servicePrefix = this.config.servicePrefix ?? '/.well-known/service';
-        // Federation: popup opens Master's OAuth login URL (cross-domain callback)
         const oauthBase = this.options.masterOAuthOrigin
-            ? `${this.options.masterOAuthOrigin}${servicePrefix}`
-            : servicePrefix;
+            ? `${this.options.masterOAuthOrigin}${servicePrefix}` : servicePrefix;
         const oauthOrigin = new URL(oauthBase, window.location.href).origin;
-        const loginUrl = `${oauthBase}/api/oauth/${encodeURIComponent(providerId)}/login?returnUrl=${encodeURIComponent(window.location.href)}`;
-        // Open centered popup — compact size, enough for provider auth pages
-        const width = 500;
-        const height = 620;
-        const left = window.screenX + (window.innerWidth - width) / 2;
-        const top = window.screenY + (window.innerHeight - height) / 2;
-        const popup = window.open(loginUrl, 'oauth-login:popup', `left=${left},top=${top},width=${width},height=${height},resizable,scrollbars=yes,status=1,popup`);
-        if (!popup) {
-            this.options.onBeforeRedirect?.();
-            window.location.href = loginUrl;
-            return;
+        let returnUrl = window.location.href;
+        if (this.options.mode !== 'dialog' && window.location.pathname === `${servicePrefix}/login`) {
+            const requested = new URLSearchParams(window.location.search).get('return_to');
+            try {
+                const target = new URL(requested || '/', window.location.origin);
+                returnUrl = target.origin === window.location.origin && !/^\/[/\\]/.test(target.pathname) ? target.href : `${window.location.origin}/`;
+            }
+            catch {
+                returnUrl = `${window.location.origin}/`;
+            }
         }
-        // Save original button content and enter loading state
+        const loginUrl = `${oauthBase}/api/oauth/${encodeURIComponent(providerId)}/login?returnUrl=${encodeURIComponent(returnUrl)}`;
+        const provider = this.options.oauthProviders?.find(p => p.id === providerId)?.name ?? providerId;
         const originalHTML = btn.innerHTML;
-        btn.textContent = t('oauthWaiting', this.options.locale, { provider: this.options.oauthProviders?.find(p => p.id === providerId)?.name ?? providerId });
-        btn.disabled = true;
-        btn.classList.add('oauth-btn-loading');
+        let popup = null;
+        let settled = false;
+        let exchanging = false;
+        let probing = false;
+        let pollTimer;
+        let sessionTimer;
+        let abandonTimer;
+        const current = () => !settled && this.mounted && epoch === this.generation;
+        const locked = [];
+        const lockMethods = () => {
+            for (const button of this.cardEl?.querySelectorAll('.method-btn, .passkey-create-entry, #passkey-btn, .locale-trigger, .locale-btn') ?? []) {
+                locked.push({ button, disabled: button.disabled });
+                button.disabled = true;
+            }
+        };
         const recovery = document.createElement('div');
         recovery.className = 'oauth-recovery';
         recovery.setAttribute('role', 'status');
         const hint = document.createElement('p');
-        hint.textContent = t('oauthIncomplete', this.options.locale);
+        const actions = document.createElement('div');
+        actions.className = 'oauth-recovery-actions';
+        const reopen = document.createElement('button');
+        reopen.type = 'button';
+        reopen.className = 'oauth-retry';
+        reopen.textContent = t('oauthReopen', locale);
+        reopen.hidden = true;
+        reopen.onclick = () => { this.select('oauth'); this.activeProvider = providerId; this.startOAuthPopup(providerId, btn); };
         const fullPage = document.createElement('a');
         fullPage.href = loginUrl;
-        fullPage.textContent = t('oauthFullPage', this.options.locale);
-        fullPage.addEventListener('click', () => { this.options.onBeforeRedirect?.(); this.oauthCleanup?.(); });
-        recovery.append(hint, fullPage);
-        recovery.hidden = true;
+        fullPage.textContent = t('oauthFullPage', locale);
+        fullPage.addEventListener('click', event => {
+            const reconcile = recovery.dataset.state === 'oauthUnconfirmed';
+            if (exchanging && !settled) {
+                event.preventDefault();
+                return;
+            }
+            if (reconcile)
+                event.preventDefault();
+            this.options.onBeforeRedirect?.();
+            this.oauthCleanup?.();
+            if (reconcile)
+                window.location.reload();
+        });
+        const cancel = document.createElement('button');
+        cancel.type = 'button';
+        cancel.className = 'oauth-cancel';
+        cancel.textContent = t('cancel', locale);
+        actions.append(reopen, fullPage, cancel);
+        recovery.append(hint, actions);
         btn.parentElement?.after(recovery);
-        const restore = () => {
-            recovery.hidden = false;
-            this.emit('incomplete');
+        const restoreButton = () => {
             btn.innerHTML = originalHTML;
             btn.disabled = false;
             btn.classList.remove('oauth-btn-loading');
         };
-        let settled = false;
-        let sessionPollTimer;
+        const closePopup = () => { try {
+            popup?.close();
+        }
+        catch { /* COOP can sever the window reference. */ } };
+        const cleanup = () => {
+            settled = true;
+            clearInterval(pollTimer);
+            clearInterval(sessionTimer);
+            clearTimeout(abandonTimer);
+            window.removeEventListener('message', onMessage);
+            for (const item of locked.splice(0))
+                item.button.disabled = item.disabled;
+            restoreButton();
+        };
+        const showRecovery = (key) => {
+            hint.textContent = t(key, locale, { provider });
+            recovery.dataset.state = key;
+            actions.hidden = false;
+            reopen.hidden = false;
+            cancel.hidden = true;
+            restoreButton();
+        };
+        const fail = (key) => {
+            if (!current())
+                return;
+            cleanup();
+            closePopup();
+            showRecovery(key);
+            this.emit('incomplete');
+        };
         const succeed = () => {
-            if (settled || !this.mounted || epoch !== this.generation)
+            if (!current())
                 return;
-            settled = true;
             cleanup();
-            btn.textContent = t('success', this.options.locale);
+            closePopup();
+            recovery.remove();
+            btn.textContent = t('success', locale);
+            btn.disabled = true;
             this.handleSuccess();
         };
+        cancel.onclick = () => { if (exchanging)
+            return; fail('oauthCancelled'); btn.focus(); };
         const onMessage = async (event) => {
-            if (event.origin !== oauthOrigin || event.source !== popup)
-                return;
-            if (!event.data || event.data.type !== 'authorization_response')
+            if (event.origin !== oauthOrigin || event.source !== popup || !popup)
                 return;
-            if (settled || !this.mounted || epoch !== this.generation)
+            if (!event.data || event.data.type !== 'authorization_response' || !current() || exchanging)
                 return;
-            // Stop the closed-poll only. Do NOT drop this listener from popup.closed —
-            // GitHub/Twitter COOP reports closed while the provider page is still up,
-            // and the callback also window.close()s itself after postMessage.
-            if (pollTimer !== undefined) {
-                clearInterval(pollTimer);
-                pollTimer = undefined;
-            }
-            try {
-                popup.close();
-            }
-            catch {
-                /* ignore */
-            }
+            clearInterval(pollTimer);
+            clearInterval(sessionTimer);
             if (event.data.error) {
-                restore();
-                cleanup();
+                fail(event.data.error === 'access_denied' ? 'oauthDenied' : event.data.error === 'cancelled' ? 'oauthCancelled' : 'oauthFailed');
                 return;
             }
             const { code, state } = event.data.response ?? event.data;
-            if (!code) {
-                restore();
-                cleanup();
+            if (typeof code !== 'string' || !code || typeof state !== 'string' || !state) {
+                fail('oauthFailed');
                 return;
             }
-            btn.textContent = t('verifying', this.options.locale);
+            exchanging = true;
+            lockMethods();
+            actions.hidden = true;
+            closePopup();
+            hint.textContent = t('verifying', locale);
+            btn.textContent = t('verifying', locale);
             btn.disabled = true;
             try {
                 const oauthBody = { provider: providerId, code, state };
                 if (this.options.invitationId)
                     oauthBody.invitationId = this.options.invitationId;
-                await this.http.post(`${servicePrefix}/api/oauth/login`, oauthBody);
+                await this.http.post(`${servicePrefix}/api/oauth/login`, oauthBody, { signal: this.abort?.signal });
                 succeed();
             }
-            catch (oauthErr) {
-                if (settled || !this.mounted || epoch !== this.generation)
+            catch (err) {
+                if (!current())
                     return;
-                const errMsg = oauthErr instanceof Error ? oauthErr.message : '';
-                const errCode = oauthErr instanceof Error && 'code' in oauthErr ? oauthErr.code : '';
-                if (errCode === 'FORBIDDEN' || errMsg === 'registration_closed' || errCode === 'registration_closed') {
-                    settled = true;
+                const code = err instanceof Error && 'code' in err ? String(err.code) : '';
+                const message = err instanceof Error ? err.message : '';
+                if (code === 'FORBIDDEN' || code === 'registration_closed' || message === 'registration_closed') {
                     cleanup();
-                    this.showFullError(friendlyError(oauthErr, this.options.locale));
-                }
-                else {
-                    restore();
+                    recovery.remove();
+                    this.showFullError(friendlyError(err, locale));
                 }
+                else
+                    fail('oauthFailed');
             }
         };
-        // popup.closed is not "user cancelled". Provider COOP and the callback's
-        // own window.close() both flip it. Dropping the message listener here is
-        // what made GitHub login fail: authorize succeeds, parent already gave up.
-        let pollTimer = setInterval(() => {
+        this.oauthCleanup = () => { cleanup(); recovery.remove(); closePopup(); };
+        window.addEventListener('message', onMessage);
+        try {
+            popup = window.open(loginUrl, 'oauth-login:popup', `left=${window.screenX + (window.innerWidth - 500) / 2},top=${window.screenY + (window.innerHeight - 620) / 2},width=500,height=620,resizable,scrollbars=yes,status=1,popup`);
+        }
+        catch { /* Treat a browser refusal like a blocked popup. */ }
+        if (!popup) {
+            fail('oauthBlocked');
+            return;
+        }
+        hint.textContent = t('oauthWaiting', locale, { provider });
+        btn.textContent = t('oauthWaiting', locale, { provider });
+        btn.disabled = true;
+        btn.classList.add('oauth-btn-loading');
+        // COOP can report closed before the callback arrives. Keep the listener,
+        // but show recovery immediately and never overlap server session probes.
+        const checkSession = async () => {
+            if (!current() || exchanging || probing)
+                return;
+            probing = true;
+            try {
+                const session = await this.http.get(`${servicePrefix}/api/did/session`);
+                if (current() && !exchanging && session?.authenticated === true)
+                    succeed();
+            }
+            catch { /* A later probe or callback may still complete this attempt. */ }
+            finally {
+                probing = false;
+            }
+        };
+        pollTimer = setInterval(() => {
             let closed = false;
             try {
-                closed = popup.closed;
+                closed = !!popup?.closed;
             }
             catch {
                 return;
             }
-            if (!closed)
+            if (!closed || !current())
                 return;
-            if (pollTimer !== undefined) {
-                clearInterval(pollTimer);
-                pollTimer = undefined;
-            }
-            restore();
-            const checkSession = () => {
-                void this.http
-                    .get(`${servicePrefix}/api/did/session`)
-                    .then((session) => {
-                    if (session?.authenticated)
-                        succeed();
-                })
-                    .catch(() => {
-                    /* keep waiting for postMessage or the next session probe */
-                });
-            };
-            checkSession();
-            sessionPollTimer = setInterval(checkSession, 500);
+            clearInterval(pollTimer);
+            showRecovery('oauthIncomplete');
+            // Remain explicitly cancellable while a COOP callback may still arrive.
+            cancel.hidden = false;
+            void checkSession();
+            sessionTimer = setInterval(() => { void checkSession(); }, 2000);
         }, 500);
-        const abandonTimer = setTimeout(() => {
-            if (settled)
+        abandonTimer = setTimeout(() => {
+            if (!current())
                 return;
+            if (!exchanging) {
+                fail('oauthTimedOut');
+                return;
+            }
+            // A request may have reached the server even if its response never arrived.
+            // Do not promise cancellation or start a second exchange in that ambiguity.
+            this.abort?.abort();
             cleanup();
-            restore();
+            closePopup();
+            lockMethods();
+            hint.textContent = t('oauthUnconfirmed', locale);
+            recovery.dataset.state = 'oauthUnconfirmed';
+            actions.hidden = false;
+            reopen.hidden = true;
+            cancel.hidden = true;
+            fullPage.href = window.location.href;
+            fullPage.textContent = t('oauthCheckSession', locale);
+            this.emit('incomplete');
         }, 5 * 60 * 1000);
-        const cleanup = () => {
-            settled = true;
-            btn.innerHTML = originalHTML;
-            btn.disabled = false;
-            btn.classList.remove('oauth-btn-loading');
-            if (pollTimer !== undefined) {
-                clearInterval(pollTimer);
-                pollTimer = undefined;
-            }
-            if (sessionPollTimer !== undefined) {
-                clearInterval(sessionPollTimer);
-                sessionPollTimer = undefined;
-            }
-            clearTimeout(abandonTimer);
-            window.removeEventListener('message', onMessage);
-        };
-        this.oauthCleanup = () => { cleanup(); recovery.remove(); try {
-            popup.close();
-        }
-        catch { /* COOP */ } };
-        window.addEventListener('message', onMessage);
     }
     // (removed dead code: renderEmailButton — email now renders through renderSecondaryGrid)
     /**
@@ -1240,6 +1320,7 @@ export class LoginPage {
                 btn.dataset.provider = provider.id;
                 const icon = getOAuthIcon(provider.id);
                 btn.innerHTML = `${icon} ${escapeHtml(t('continueWith', locale, { provider: provider.name }))}`;
+                this.markLastUsed(btn, `oauth:${provider.id}`, locale);
                 grid.appendChild(btn);
                 btn.addEventListener('click', () => {
                     this.select('oauth');
@@ -1254,6 +1335,7 @@ export class LoginPage {
             btn.className = 'method-btn';
             btn.id = 'email-btn';
             btn.innerHTML = `${ICON_EMAIL} ${escapeHtml(t('emailButton', locale))}`;
+            this.markLastUsed(btn, 'email', locale);
             grid.appendChild(btn);
             btn.addEventListener('click', () => {
                 this.select('email');
@@ -1268,6 +1350,7 @@ export class LoginPage {
             // Use short label when sharing grid with other methods
             const walletLabel = grid.children.length > 0 ? t('didWalletButtonShort', locale) : t('didWalletButton', locale);
             btn.innerHTML = `${ICON_DID_WALLET} ${escapeHtml(walletLabel)}`;
+            this.markLastUsed(btn, 'did-connect', locale);
             grid.appendChild(btn);
             btn.addEventListener('click', () => {
                 this.select('did-connect');
@@ -1308,8 +1391,9 @@ export class LoginPage {
                 }
             });
             this.tokenSession.on('timeout', () => {
-                statusEl.textContent = t('timeout', locale);
-                // Show overlay on top of the expired QR code with a refresh button
+                statusEl.textContent = '';
+                // Cover the expired code itself. The notice lives on that plate, so the
+                // status line under the wallet button does not repeat it.
                 const overlay = document.createElement('div');
                 overlay.className = 'qr-timeout-overlay';
                 overlay.innerHTML = `<span class="timeout-text">${escapeHtml(t('timeout', locale))}</span>`;
@@ -1324,7 +1408,8 @@ export class LoginPage {
                     this.startDIDConnectInView(statusEl, qrContainer, walletBtn, locale);
                 });
                 overlay.appendChild(refreshBtn);
-                qrContainer.appendChild(overlay);
+                const plate = qrContainer.querySelector('.qr-plate');
+                (plate ?? qrContainer).appendChild(overlay);
             });
             this.tokenSession.on('error', (err) => {
                 this.showConnectResult(qrContainer, walletBtn, statusEl, friendlyError(err, locale), true);