portal-mojo 0.2.21 → 0.2.22

package/src/admin/dns/DomainRegisterExisting.tsx

@@ -1,8 +1,9 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { CollectionSelect, toast } from '../../ui';
 import { OperationsHelp } from '../core/OperationsHelp';
-import { DNS_GROUP_CHOICE_ENDPOINT, registerExistingDomain } from './api';
+import { DNS_GROUP_CHOICE_ENDPOINT, fetchDnsCapabilities, registerExistingDomain } from './api';
+import { domainSession, requireDomainManager } from './domain-authority';
 import { DnsCredentialModel, DomainModel, type DnsCredentialRow, type DnsGroupChoice } from './models';
 import { normalizePurchaseDomain, redactRegistrarError } from './purchase-data';
 
@@ -22,6 +23,9 @@ export function DomainRegisterExisting({ close, back, setBusyGate }: { close: ()
     const inFlight = useRef(false);
     // Both picker remounting and this ref reject responses/events from old scope.
     const scope = useRef<number | null>(null);
+    const session = useRef(domainSession());
+    const mounted = useRef(true);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
     const changeGroup = (selected: DnsGroupChoice | null) => {
         if (inFlight.current || attempted) return;
         scope.current = selected?.id ?? null; setGroup(selected); setCredential(null); setError('');
@@ -34,9 +38,12 @@ export function DomainRegisterExisting({ close, back, setBusyGate }: { close: ()
         try { domain = normalizePurchaseDomain(name); } catch (reason) { setError(redactRegistrarError(reason)); return; }
         inFlight.current = true; setBusy(true); setBusyGate(true); setError('');
         // An unknown outcome is terminal for this mounted form: inspect inventory.
-        setAttempted(true);
         try {
-            const saved = await registerExistingDomain({ group: group.id, domain, credential: credential.id });
+            await requireDomainManager(session.current);
+            if (!mounted.current) return;
+            setAttempted(true);
+            const saved = await registerExistingDomain({ group: group.id, domain, credential: credential.id }, () => { if (!mounted.current || domainSession() !== session.current || scope.current !== group.id) throw new Error('Session or group changed. Reopen this task.'); });
+            if (!mounted.current || domainSession() !== session.current) return;
             await DomainModel.invalidate(queryClient); toast.success(`${saved.name} registered`); close();
         } catch (reason) {
             await DomainModel.invalidate(queryClient);
@@ -45,7 +52,7 @@ export function DomainRegisterExisting({ close, back, setBusyGate }: { close: ()
     };
     const groupId = group?.id;
     return <form className="modal-pad domain-onboarding" onSubmit={(event) => void submit(event)} noValidate>
-        <h2 className="modal-title">Register existing domain</h2>
+        <h2 className="modal-title">Connect GoDaddy domain</h2>
         <p className="dim">Connect a GoDaddy domain you already own. <OperationsHelp label="domain registration">The provider checks ownership of this exact name without charging or listing the provider account. Choose an authorized group and an active, verified GoDaddy credential belonging to it. If no credentials appear, link and verify one in Provider Credentials.</OperationsHelp></p>
         {error && <div className="form-alert" role="alert">{error}</div>}
         <div className="dns-registrar-grid">
@@ -57,7 +64,15 @@ export function DomainRegisterExisting({ close, back, setBusyGate }: { close: ()
                 if (!usableRegistrationCredential(row, groupId)) { setCredential(null); setError('That credential is not usable in the selected group'); return; }
                 setCredential(row); setError('');
             }} /> : <p className="dim">Choose an authorized group before selecting its GoDaddy credential.</p>}
+            {group && <button className="btn domains-inline-action" type="button" disabled={busy || attempted} onClick={() => void (async () => {
+                if (inFlight.current) return;
+                inFlight.current = true; setBusy(true); setBusyGate(true);
+                const selected = group.id;
+                try { const caps = await fetchDnsCapabilities(selected); const { showCredentialEditor } = await import('./ProviderCredentialsPage'); if (!mounted.current || scope.current !== selected || domainSession() !== session.current) return; const linked = await showCredentialEditor({ ...caps, providers: caps.providers.filter(provider => provider.name === 'godaddy') }, undefined, group); if (mounted.current && scope.current === selected && domainSession() === session.current && linked && usableRegistrationCredential(linked, selected)) setCredential(linked); }
+                catch (reason) { if (scope.current === selected) setError(redactRegistrarError(reason)); }
+                finally { inFlight.current = false; if (mounted.current) setBusy(false); setBusyGate(false); }
+            })()}><i className="bi bi-key" /> Link credential</button>}
         </div>
-        <div className="modal-actions"><button className="btn" type="button" disabled={busy} onClick={attempted ? close : back}>{attempted ? 'Close and review inventory' : 'Back'}</button><button className="btn btn-primary" type="submit" disabled={busy || attempted || !group || !credential || !name.trim()}>{busy ? 'Checking ownership…' : 'Register existing'}</button></div>
+        <div className="modal-actions"><button className="btn" type="button" disabled={busy} onClick={attempted ? close : back}>{attempted ? 'Close and review inventory' : 'Back'}</button><button className="btn btn-primary" type="submit" disabled={busy || attempted || !group || !credential || !name.trim()}>{busy ? 'Checking ownership…' : 'Connect domain'}</button></div>
     </form>;
 }

package/src/admin/dns/DomainRegistrarSettings.tsx

@@ -1,52 +1,32 @@
-import { useRef, useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { hasPermission, useMe } from '../../client/runtime';
-import { fetchDomainOverview, saveDomainRegistrarSettings } from './registrar-api';
-import { DNS_MANAGE_PERMISSIONS, DomainModel, type DomainRow } from './models';
-import { modal } from '../../ui';
-import { redactRegistrarError } from './purchase-data';
-
-export function DomainRegistrarSettings({ domain, onBusyChange, close }: { domain: DomainRow; onBusyChange?: (busy: boolean) => void; close?: () => void }) {
-    const { data: me } = useMe(); const queryClient = useQueryClient();
-    const [autoRenew, setAutoRenew] = useState(domain.auto_renew === true);
-    const [privacy, setPrivacy] = useState(domain.privacy === true);
-    const [live, setLive] = useState(domain);
-    const [busy, setBusy] = useState(false); const [error, setError] = useState(''); const [saved, setSaved] = useState(false);
-    const [uncertain, setUncertain] = useState(false); const inFlight = useRef(false);
-    if (domain.provider !== 'route53' || !hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null)) return null;
-    const changed = autoRenew !== (live.auto_renew === true) || privacy !== (live.privacy === true);
-    const submit = async (event: React.FormEvent) => {
-        event.preventDefault(); if (inFlight.current || uncertain || !changed) return;
-        const changes: Partial<Pick<DomainRow, 'auto_renew' | 'privacy'>> = {};
-        if (autoRenew !== (live.auto_renew === true)) changes.auto_renew = autoRenew;
-        if (privacy !== (live.privacy === true)) changes.privacy = privacy;
-        inFlight.current = true; onBusyChange?.(true); setBusy(true); setError(''); setSaved(false);
-        let failed = false;
-        try { await saveDomainRegistrarSettings(domain.id, changes); }
-        catch (reason) { failed = true; setUncertain(true); setError(`${redactRegistrarError(reason)} The registrar outcome is uncertain. Inspect the registrar before another change.`); }
-        finally {
-            try {
-                const fresh = await fetchDomainOverview(domain.id);
-                queryClient.setQueryData(DomainModel.keys.one(domain.id), fresh);
-                setLive(fresh); setAutoRenew(fresh.auto_renew === true); setPrivacy(fresh.privacy === true);
-                if (!failed) setSaved(true);
-            } catch { setUncertain(true); setError('The authoritative domain could not be refreshed. Inspect the registrar and reopen this domain before making another change.'); }
-            await DomainModel.invalidate(queryClient);
-            inFlight.current = false; onBusyChange?.(false); setBusy(false);
-        }
-    };
-    return <form className="modal-pad domains-registrar-settings" onSubmit={(event) => void submit(event)}>
-        <h2 className="modal-title">Registrar settings</h2><p className="dim">Route 53 only. A database save does not prove that the registrar applied the change.</p>
-        {error && <div className="form-alert" role="alert">{error}</div>}
-        {live.last_error && <div className="form-alert" role="status"><b>Registrar warning</b><p>{redactRegistrarError(live.last_error)}</p><p>This may be historical. Inspect the registrar before assuming the setting was applied.</p></div>}
-        {saved && <p role="status">Domain refreshed after save. Check the registrar for application of these settings.</p>}
-        <label className="field"><span><input type="checkbox" checked={autoRenew} disabled={busy || uncertain} onChange={(event) => setAutoRenew(event.target.checked)} /> Auto-renew</span></label>
-        <label className="field"><span><input type="checkbox" checked={privacy} disabled={busy || uncertain} onChange={(event) => setPrivacy(event.target.checked)} /> WHOIS privacy</span></label>
-        <div className="modal-actions">{close && <button className="btn" type="button" disabled={busy} onClick={close}>Close</button>}<button className="btn btn-primary" type="submit" disabled={busy || uncertain || !changed}>{busy ? 'Saving and refreshing…' : 'Save registrar settings'}</button></div>
+import { useState } from 'react';
+import { modal } from '../../ui/modal';
+import type { DomainRow } from './models';
+import { registrationAuthority, type DomainRegistration } from './registrar-api';
+export interface RegistrarChanges { auto_renew?: boolean; privacy?: boolean }
+export function DomainRegistrarSettings({ domain, registration, busy = false, locked = false, error, notice, submit, close }: {
+    domain: DomainRow; registration?: DomainRegistration; busy?: boolean; locked?: boolean; error?: string; notice?: string;
+    submit?: (changes: RegistrarChanges) => void; close?: () => void;
+}) {
+    const [autoRenew, setAutoRenew] = useState(registration?.auto_renew ?? null), [privacy, setPrivacy] = useState('');
+    if (!registration || registrationAuthority(registration.registrar) !== 'route53') return <p>Read live registration before changing registrar settings.</p>;
+    const changed = autoRenew !== registration.auto_renew || privacy !== '';
+    return <form className="modal-pad domains-registrar-settings" onSubmit={event => { event.preventDefault(); if (!busy && !locked && changed) submit?.({ ...(autoRenew !== null && autoRenew !== registration.auto_renew ? { auto_renew: autoRenew } : {}), ...(privacy !== '' ? { privacy: privacy === 'true' } : {}) }); }}>
+        <h2 className="modal-title">Registration settings</h2><p className="dim">{domain.name}</p>
+        <div className="form-grid"><label className="field col-12"><span className="field-label">Auto-renew</span><select className="input" value={autoRenew === null ? '' : String(autoRenew)} disabled={busy || locked || registration.auto_renew === null} onChange={event => setAutoRenew(event.target.value === 'true')}><option value="" disabled>Not reported</option><option value="true">On</option><option value="false">Off</option></select></label>
+        <label className="field col-12"><span className="field-label">WHOIS privacy · all contacts</span><select className="input" value={privacy} disabled={busy || locked} onChange={event => setPrivacy(event.target.value)}><option value="">Keep current privacy</option><option value="true" disabled={registration.privacy_supported !== true}>Enable for all contacts</option><option value="false">Disable for all contacts</option></select></label></div>
+        {registration.privacy_supported !== true && <p className="dim">This registry has not confirmed support for enabling privacy.</p>}
+        {error && <p role="alert" className="text-bad">{error}</p>}{notice && <p role="status">{notice}</p>}
+        {(error || notice) && <a className="btn" href="https://console.aws.amazon.com/route53/domains/home" target="_blank" rel="noopener noreferrer">Open Route 53 registered domains</a>}
+        <div className="modal-actions">{close && <button type="button" className="btn" disabled={busy} onClick={close}>Close</button>}<button type="submit" className="btn btn-primary" disabled={busy || locked || !changed}>Save registration settings</button></div>
     </form>;
 }
-
-export function showDomainRegistrarSettings(domain: DomainRow): Promise<unknown> {
+/** Compatibility entry point now requires the same explicit live inspection. */
+export async function showDomainRegistrarSettings(domain: DomainRow): Promise<unknown> {
+    const { DomainRegistrationPanel } = await import('./DomainRegistrationPanel');
     let busy = false;
-    return modal.open((close) => <DomainRegistrarSettings domain={domain} close={() => close(null)} onBusyChange={(value) => { busy = value; }} />, { size: 'md', canDismiss: () => !busy });
+    function Dialog({ close }: { close: () => void }) {
+        const [pending, setPending] = useState(false);
+        return <div className="modal-pad"><h2 className="modal-title">Registration · {domain.name}</h2><DomainRegistrationPanel domain={domain} onBusyChange={value => { busy = value; setPending(value); }}/><div className="modal-actions"><button className="btn" disabled={pending} onClick={() => { if (!busy) close(); }}>Close</button></div></div>;
+    }
+    return modal.open(close => <Dialog close={() => close(null)}/>, { size: 'md', canDismiss: () => !busy });
 }

package/src/admin/dns/DomainRegistrationPanel.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { getAuthSessionRevision, getAuthSnapshot, subscribeAuth, useAuthSnapshot, useMe } from '../../client/runtime';
+import { modal } from '../../ui/modal';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { backendGlobalCan } from '../fleet/access';
+import { FleetHelp } from '../fleet/FleetHelp';
+import { DomainRegistrarSettings, type RegistrarChanges } from './DomainRegistrarSettings';
+import { fetchDomainOverview, fetchDomainRegistration, registrationAuthority, registrationContact, saveDomainRegistrarSettings, saveRegistrationContacts, saveRegistrationPrivacy, type DomainRegistration, type RegistrationRequest } from './registrar-api';
+import { CONTACT_STRING_FIELDS, validateContactDraft } from './registrant-data';
+import type { DomainRow, RegistrantContact } from './models';
+
+const LABELS: Record<(typeof CONTACT_STRING_FIELDS)[number], string> = { FirstName: 'First name', LastName: 'Last name', ContactType: 'Contact type', OrganizationName: 'Organization', AddressLine1: 'Address line 1', AddressLine2: 'Address line 2', City: 'City', State: 'State / province', CountryCode: 'Country code', ZipCode: 'Postal code', PhoneNumber: 'Phone number', Email: 'Email', Fax: 'Fax' };
+const CONTACT_FIELDS = ['FirstName', 'LastName', 'ContactType', 'OrganizationName', 'PhoneNumber', 'Email', 'Fax'] as const;
+const ADDRESS_FIELDS = ['AddressLine1', 'AddressLine2', 'City', 'State', 'CountryCode', 'ZipCode'] as const;
+const groupId = (domain: DomainRow) => typeof domain.group === 'number' ? domain.group : domain.group?.id ?? null;
+const enabled = (value: boolean | null) => value === null ? 'Not reported' : value ? 'On' : 'Off';
+const privacySnapshot = (row: DomainRegistration) => JSON.stringify([row.admin_privacy, row.registrant_privacy, row.tech_privacy]);
+const privacy = (row: DomainRegistration) => {
+    const values = [row.admin_privacy, row.registrant_privacy, row.tech_privacy];
+    return values.every(value => value === true) ? 'On for all contacts' : values.every(value => value === false) ? 'Off for all contacts' : values.some(value => value === null) ? 'Not fully reported' : 'Mixed by contact';
+};
+
+/** Live registrar evidence and contact PII stay in this mounted task, outside Query. */
+export function DomainRegistrationPanel({ domain, onBusyChange, onChanged }: { domain: DomainRow; onBusyChange?: (busy: boolean) => void; onChanged?: () => void }) {
+    const auth = useAuthSnapshot(), { data: me } = useMe();
+    const revision = useSyncExternalStore(subscribeAuth, getAuthSessionRevision, getAuthSessionRevision);
+    const canManage = auth.authenticated && me?.is_active !== false && backendGlobalCan(me, ['manage_dns', 'security']);
+    const identity = JSON.stringify([domain.id, domain.name, domain.provider, groupId(domain), auth.uid, revision, canManage]);
+    const latest = useRef(identity); latest.current = identity;
+    const permitted = useRef(canManage); permitted.current = canManage;
+    const callbacks = useRef({ onBusyChange, onChanged }); callbacks.current = { onBusyChange, onChanged };
+    const controller = useRef<AbortController | null>(null), flight = useRef(false);
+    const [stored, setStored] = useState<{ identity: string; value: DomainRegistration } | null>(null);
+    const [busy, setBusy] = useState(false), [error, setError] = useState('');
+    useEffect(() => {
+        const owner = new AbortController(); controller.current = owner; setStored(null); setError(''); setBusy(false); flight.current = false;
+        return () => { owner.abort(); callbacks.current.onBusyChange?.(false); };
+    }, [identity]);
+    const registration = stored?.identity === identity ? stored.value : null;
+    const request = (): RegistrationRequest => {
+        const signal = controller.current?.signal, selected = identity, uid = auth.uid, rev = revision;
+        const beforeSend = () => { if (!signal || signal.aborted || latest.current !== selected || !permitted.current || !getAuthSnapshot().authenticated || getAuthSnapshot().uid !== uid || getAuthSessionRevision() !== rev) throw new DOMException('Registration view changed', 'AbortError'); };
+        beforeSend(); return { signal, beforeSend };
+    };
+    const accept = (value: DomainRegistration, options: RegistrationRequest) => { options.beforeSend?.(); setStored({ identity, value }); };
+    const read = async () => {
+        if (flight.current) return;
+        let options: RegistrationRequest; try { options = request(); } catch { return; }
+        flight.current = true; setBusy(true); setError(''); callbacks.current.onBusyChange?.(true);
+        try { accept(await fetchDomainRegistration(domain, options), options); }
+        catch { if (!options.signal?.aborted && latest.current === identity) { setStored(null); setError('Registration could not be read. The DNS provider does not establish where this domain is registered. Check the registrar account, then try again.'); } }
+        finally { if (!options.signal?.aborted && latest.current === identity) { flight.current = false; setBusy(false); callbacks.current.onBusyChange?.(false); } }
+    };
+    const openEditor = async (mode: 'settings' | 'contacts') => {
+        if (!registration || registrationAuthority(registration.registrar) !== 'route53') return;
+        let options: RegistrationRequest; try { options = request(); } catch { return; }
+        let pending = false;
+        await modal.open(close => <RegistrationEditor domain={domain} registration={registration} mode={mode} request={request} onEvidence={value => accept(value, options)} onChanged={() => callbacks.current.onChanged?.()} onBusy={value => { pending = value; callbacks.current.onBusyChange?.(value); }} close={() => close(null)}/>, { signal: options.signal, size: mode === 'contacts' ? 'lg' : 'md', canDismiss: () => !pending });
+    };
+    if (!canManage) return <p className="dim">DNS management authority is required to read registration details.</p>;
+    if (domain.provider === 'godaddy') return <section className="domains-registration"><p>Registration, renewal and contact details stay in the GoDaddy account that holds this domain.</p><a className="btn" href="https://dcc.godaddy.com/domains" target="_blank" rel="noopener noreferrer">Open GoDaddy domains</a></section>;
+    if (domain.provider !== 'route53') return <p className="dim">Registration is managed by this domain’s registrar.</p>;
+    return <section className="domains-registration"><div className="domains-overview-actions"><button className="btn" disabled={busy} onClick={() => void read()}>{busy ? 'Reading registration…' : registration ? 'Refresh registration' : 'Read registration'}</button><FleetHelp label="registration details">Reads live registrar data, including private contact details, for this domain only. DNS hosting and domain registration can use different providers.</FleetHelp></div>
+        {error && <p className="text-bad" role="alert">{error}</p>}
+        {registration && <><dl className="detail-grid"><div><dt>Registrar</dt><dd>{registration.registrar || 'Not reported'}</dd></div><div><dt>Expires</dt><dd>{registration.expires ? datetime(registration.expires) : 'Not reported'}</dd></div><div><dt>Auto-renew</dt><dd>{enabled(registration.auto_renew)}</dd></div><div><dt>WHOIS privacy</dt><dd>{privacy(registration)}</dd></div></dl>
+            {registrationAuthority(registration.registrar) === 'route53' ? <div className="domains-overview-actions"><button className="btn" disabled={busy} onClick={() => void openEditor('settings')}>Registration settings…</button><button className="btn" disabled={busy} onClick={() => void openEditor('contacts')}>Contacts…</button></div> : <p className="dim">{registrationAuthority(registration.registrar) === 'godaddy' ? 'Manage registration in the GoDaddy account that holds this domain.' : 'Local registration edits are unavailable because this registrar has not been confirmed as Route 53.'}</p>}
+        </>}
+    </section>;
+}
+
+function RegistrationEditor({ domain, registration, mode, request, onEvidence, onChanged, onBusy, close }: { domain: DomainRow; registration: DomainRegistration; mode: 'settings' | 'contacts'; request: () => RegistrationRequest; onEvidence: (value: DomainRegistration) => void; onChanged: () => void; onBusy: (value: boolean) => void; close: () => void }) {
+    const [busy, setBusy] = useState(false), [locked, setLocked] = useState(false), [error, setError] = useState(''), [notice, setNotice] = useState('');
+    const [editing, setEditing] = useState(false), [tab, setTab] = useState('contact');
+    const [draft, setDraft] = useState<RegistrantContact>(() => registrationContact(registration.registrant));
+    const flight = useRef(false), alive = useRef(true);
+    const callback = useRef(onBusy); callback.current = onBusy;
+    useEffect(() => { alive.current = true; return () => { alive.current = false; callback.current(false); }; }, []);
+    const save = async (changes: RegistrarChanges | RegistrantContact, contact: boolean) => {
+        if (flight.current || locked) return;
+        if (contact) {
+            const problems = validateContactDraft(changes as RegistrantContact);
+            if (problems.length) { setError('Complete the required Contact and Address fields. Use +country.number for phone numbers.'); setTab(problems.some(problem => ADDRESS_FIELDS.some(field => problem.startsWith(field))) ? 'address' : 'contact'); return; }
+        }
+        let options: RegistrationRequest; try { options = request(); } catch { return; }
+        flight.current = true; setBusy(true); setError(''); onBusy(true);
+        let submitted = false, readbackAttempted = false;
+        try {
+            const object = await fetchDomainOverview(domain.id, options);
+            if (object.name !== domain.name || object.provider !== domain.provider || groupId(object) !== groupId(domain)) throw new Error('Domain ownership changed');
+            const fresh = await fetchDomainRegistration(domain, options);
+            if (registrationAuthority(fresh.registrar) !== 'route53') throw new Error('Registrar changed');
+            if (contact ? JSON.stringify([fresh.registrant, fresh.admin, fresh.tech]) !== JSON.stringify([registration.registrant, registration.admin, registration.tech]) : fresh.auto_renew !== registration.auto_renew || privacySnapshot(fresh) !== privacySnapshot(registration) || fresh.privacy_supported !== registration.privacy_supported) throw new Error('Registration changed');
+            if (!contact && (changes as RegistrarChanges).privacy === true && fresh.privacy_supported !== true) throw new Error('Privacy not supported');
+            setLocked(true); submitted = true;
+            if (contact) await saveRegistrationContacts(domain, changes as RegistrantContact, options);
+            else {
+                const settings = changes as RegistrarChanges;
+                if (settings.auto_renew !== undefined) await saveDomainRegistrarSettings(domain.id, { auto_renew: settings.auto_renew }, options);
+                if (settings.privacy !== undefined) await saveRegistrationPrivacy(domain, settings.privacy, options);
+            }
+            readbackAttempted = true;
+            const observed = await fetchDomainRegistration(domain, options); onEvidence(observed);
+            const matched = contact ? Object.entries(changes).every(([key, value]) => JSON.stringify(observed.registrant[key as keyof RegistrantContact]) === JSON.stringify(value)) && [observed.admin, observed.tech].every(role => Object.entries(changes).every(([key, value]) => JSON.stringify(role[key as keyof RegistrantContact]) === JSON.stringify(value))) : ((changes as RegistrarChanges).auto_renew === undefined || observed.auto_renew === (changes as RegistrarChanges).auto_renew) && ((changes as RegistrarChanges).privacy === undefined || [observed.admin_privacy, observed.registrant_privacy, observed.tech_privacy].every(value => value === (changes as RegistrarChanges).privacy));
+            setNotice(matched ? 'Requested values are now visible in the live registrar read.' : 'Request accepted. The registrar has not yet reported all requested values. Refresh registration to check progress.');
+        } catch {
+            if (!options.signal?.aborted && alive.current) setError(submitted ? 'The registrar outcome is unconfirmed. No request will be repeated. Close and refresh registration before another decision.' : 'Registration or domain ownership changed, or could not be checked. Close and refresh registration before editing.');
+        } finally {
+            if (submitted && !readbackAttempted && !options.signal?.aborted) {
+                try { onEvidence(await fetchDomainRegistration(domain, options)); } catch { /* Unknown outcome remains locked; never replay. */ }
+            }
+            if (!options.signal?.aborted && alive.current) { if (submitted) onChanged(); flight.current = false; setBusy(false); onBusy(false); }
+        }
+    };
+    if (mode === 'settings') return <DomainRegistrarSettings domain={domain} registration={registration} busy={busy} locked={locked} error={error} notice={notice} submit={changes => void save(changes, false)} close={close}/>;
+    const fields = (keys: readonly (typeof CONTACT_STRING_FIELDS)[number][]) => <div className="form-grid">{keys.map(key => <label className={`field ${['OrganizationName', 'AddressLine1', 'AddressLine2'].includes(key) ? 'col-12' : 'col-6'}`} key={key}><span className="field-label">{LABELS[key]}</span>{key === 'ContactType' ? <select className="input" value={draft[key] ?? ''} disabled={busy || locked} onChange={event => setDraft(value => ({ ...value, [key]: event.target.value }))}><option value="">Choose…</option>{!['PERSON', 'COMPANY', 'ASSOCIATION', 'PUBLIC_BODY', 'RESELLER'].includes(draft.ContactType ?? '') && draft.ContactType && <option value={draft.ContactType} disabled>Unknown contact type</option>}{['PERSON', 'COMPANY', 'ASSOCIATION', 'PUBLIC_BODY', 'RESELLER'].map(value => <option key={value}>{value}</option>)}</select> : <input className="input" type={key === 'Email' ? 'email' : 'text'} maxLength={500} value={draft[key] ?? ''} disabled={busy || locked} onChange={event => setDraft(value => ({ ...value, [key]: event.target.value }))}/>}</label>)}</div>;
+    return <form className="modal-pad domains-registration-contact" onSubmit={event => { event.preventDefault(); void save(registrationContact(draft), true); }}><h2 className="modal-title">Registration contacts</h2><p className="dim">{domain.name}</p>
+        {editing ? <><p>Replace Registrant, Admin and Technical contacts with these details. A changed email may require verification.</p><Tabs ariaLabel="Contact fields" activeKey={tab} onActiveKeyChange={key => { if (!flight.current) setTab(key); }} items={[{ key: 'contact', label: 'Contact', panel: fields(CONTACT_FIELDS) }, { key: 'address', label: 'Address', panel: fields(ADDRESS_FIELDS) }]}/></> : JSON.stringify(registration.registrant) === JSON.stringify(registration.admin) && JSON.stringify(registration.admin) === JSON.stringify(registration.tech) ? <><p className="dim">Same contact for Registrant, Admin and Technical.</p><ContactFacts contact={registration.registrant}/></> : <Tabs ariaLabel="Registrar contact roles" items={(['registrant', 'admin', 'tech'] as const).map(role => ({ key: role, label: role === 'tech' ? 'Technical' : role === 'admin' ? 'Admin' : 'Registrant', panel: <ContactFacts contact={registration[role]}/> }))}/>}
+        {error && <p role="alert" className="text-bad">{error}</p>}{notice && <p role="status">{notice}</p>}
+        <div className="modal-actions"><button type="button" className="btn" disabled={busy} onClick={close}>Close</button>{editing ? <button key="save" className="btn btn-primary" type="submit" disabled={busy || locked}>Replace all contacts</button> : <button key="edit" className="btn btn-primary" type="button" onClick={event => { event.preventDefault(); setEditing(true); }}>Edit all contacts…</button>}</div>
+    </form>;
+}
+
+function ContactFacts({ contact }: { contact: RegistrantContact }) {
+    const address = [contact.AddressLine1, contact.AddressLine2, [contact.City, contact.State, contact.ZipCode].filter(Boolean).join(', '), contact.CountryCode].filter(Boolean);
+    return <dl className="detail-grid"><div><dt>Contact</dt><dd><strong>{[contact.FirstName, contact.LastName].filter(Boolean).join(' ') || 'Not reported'}</strong>{contact.OrganizationName && <div>{contact.OrganizationName}</div>}{contact.ContactType && <small className="dim">{contact.ContactType}</small>}</dd></div><div><dt>Email / phone</dt><dd>{contact.Email && <div>{contact.Email}</div>}{contact.PhoneNumber && <div>{contact.PhoneNumber}</div>}{contact.Fax && <div>Fax: {contact.Fax}</div>}{!contact.Email && !contact.PhoneNumber && !contact.Fax && 'Not reported'}</dd></div><div><dt>Address</dt><dd>{address.length ? address.map((line, index) => <div key={index}>{line}</div>) : 'Not reported'}</dd></div></dl>;
+}

package/src/admin/dns/DomainsPage.tsx

@@ -1,40 +1,41 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { useRef, useState, useSyncExternalStore } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Badge, ModelTable, fmt, modal, type Column, type FilterDef } from '../../ui';
-import { DomainDetail } from './DomainDetail';
+import { Badge, ModelTable, Popover, fmt, type Column, type FilterDef } from '../../ui';
+import { showDomainDetails } from './DomainDetail';
 import { hasPermission, useMe } from '../../client/runtime';
 import { DomainModel, DNS_MANAGE_PERMISSIONS, type DomainRow } from './models';
 import { providerLabel } from './data';
-import { domainRecordsHref, domainScopeLabel, supportsDomainRecords } from './domain-navigation';
+import { useAdminRouteContext } from '../core/route-context';
+import { domainRecordsHref, domainScopeLabel, dnsAdminMount, supportsDomainRecords } from './domain-navigation';
 
 const filters: FilterDef[] = [
     { key: 'provider', label: 'Provider', type: 'select', options: [{ value: 'route53', label: 'Route 53' }, { value: 'godaddy', label: 'GoDaddy' }, { value: 'mojo', label: 'Mojo certificate-only' }] },
-    { key: 'status', label: 'Status', type: 'select', options: ['pending', 'registering', 'active'].map((value) => ({ value, label: value })) },
+    { key: 'status', label: 'Status', type: 'select', options: ['pending', 'registering', 'active'].map(value => ({ value, label: value })) },
 ];
+const narrowQuery = () => window.matchMedia('(max-width: 560px)');
+const subscribeNarrow = (listener: () => void) => { const media = narrowQuery(); media.addEventListener('change', listener); return () => media.removeEventListener('change', listener); };
 
 export function DomainsPage() {
-    const queryClient = useQueryClient();
-    const { data: me } = useMe();
-    const location = useLocation(); const navigate = useNavigate();
+    const { data: me } = useMe(); const location = useLocation(); const navigate = useNavigate();
+    const [menu, setMenu] = useState(false); const anchor = useRef<HTMLButtonElement>(null);
+    const narrow = useSyncExternalStore(subscribeNarrow, () => narrowQuery().matches, () => false);
     const canManage = hasPermission(me ?? null, DNS_MANAGE_PERMISSIONS, null);
-    const start = async (initialMode: 'register' | 'adopt' | 'purchase') => {
-        const { showDomainOnboarding } = await import('./DomainOnboardingDialog');
-        await showDomainOnboarding({ initialMode });
-    };
-    const open = (row: DomainRow) => {
-        void DomainModel.fetchOne(queryClient, row.id).catch(() => undefined);
-        void modal.detail((close) => <DomainDetail id={row.id} onClose={() => close(null)} />);
-    };
+    const route = useAdminRouteContext();
+    const related = [
+        { path: 'records', label: 'DNS records' },
+        { path: 'credentials', label: 'Provider credentials' },
+        ...(canManage ? [{ path: 'registrant', label: 'Registrant contact' }] : []),
+    ].filter(item => !route || route.paths.includes(`${dnsAdminMount(location.pathname)}/dns/${item.path}`));
+    const start = async () => { const { showDomainOnboarding } = await import('./DomainOnboardingDialog'); await showDomainOnboarding(); };
     const columns: Column<DomainRow>[] = [
-        { key: 'name', label: 'Domain', sortable: true, hideable: false, render: (row) => <span className="ops-cell"><strong>{row.name}</strong><small>{providerLabel(row.provider)}</small></span> },
-        { key: 'status', label: 'Status', sortable: true, render: (row) => <Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge> },
-        { key: 'expires', label: 'Expires', sortable: true, render: (row) => fmt.date(row.expires) },
-        { key: 'group', label: 'Scope', render: (row) => <span className="domains-scope">{domainScopeLabel(row.group)}</span> },
-        { key: 'records', label: 'DNS Records', render: (row) => supportsDomainRecords(row.provider) ? <button className="btn btn-sm" type="button" onClick={(event) => { event.stopPropagation(); navigate(domainRecordsHref(location.pathname, row.id)); }}>DNS Records <i className="bi bi-arrow-right" /></button> : <span className="dim">{row.provider === 'mojo' ? 'Certificate-only' : 'Provider unavailable'}</span> },
+        { key: 'name', label: 'Domain', sortable: true, hideable: false, render: row => <span className="ops-cell"><strong>{row.name}</strong><small>{providerLabel(row.provider)}<span className="domains-narrow-scope"> · {domainScopeLabel(row.group)}</span></small><span className="domains-narrow-status"><Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge></span></span> },
+        { key: 'status', label: 'Status', sortable: true, render: row => <Badge tone={fmt.inferTone(row.status)}>{row.status}</Badge> },
+        { key: 'expires', label: 'Expires', sortable: true, render: row => row.expires ? fmt.date(row.expires) : 'Unknown' },
+        { key: 'group', label: 'Scope', sortable: false, render: row => <span className="domains-scope">{domainScopeLabel(row.group)}</span> },
+        { key: 'records', label: 'DNS records', sortable: false, render: row => supportsDomainRecords(row.provider) ? <button className="btn btn-sm" type="button" onClick={event => { event.stopPropagation(); navigate(domainRecordsHref(location.pathname, row.id)); }}>Records <i className="bi bi-arrow-right" /></button> : <span className="dim">{row.provider === 'mojo' ? 'Certificate-only' : 'Unavailable'}</span> },
     ];
     return <div className="domains-page">
-        <header className="domains-header"><div><div className="eyebrow">Network &amp; hosting</div><h1>Domains</h1><p className="dim">Manage the names this installation controls.</p></div>{canManage && <div className="domains-actions"><button className="btn" onClick={() => void start('register')}>Register existing</button>{me?.is_superuser === true && <button className="btn" onClick={() => void start('adopt')}>Adopt</button>}<button className="btn btn-primary" onClick={() => void start('purchase')}>Buy domain</button></div>}</header>
-        <ModelTable<DomainRow> model={DomainModel} title="Managed domains" searchable searchPlaceholder="Search domain names" columns={columns} filters={filters} defaultParams={{ sort: 'name' }} columnChooser persistState persistKey="admin:dns:domains" onRowClick={open} />
-        {canManage && <details className="domains-advanced"><summary>Advanced</summary><p className="dim">Connect external domains to shared wildcard validation, or review controller allocations and trust.</p><button className="btn" onClick={() => void import('./SharedValidationDialog').then(({ openSharedValidation }) => openSharedValidation())}>Shared validation setup</button></details>}
+        <header className="domains-header"><div><div className="eyebrow">Network &amp; hosting</div><h1>Domains</h1><p className="dim">Manage your domains and DNS.</p></div><div className="domains-actions"><button className="btn" onClick={() => navigate(`${dnsAdminMount(location.pathname)}/dns/purchases`)}>Purchases</button>{canManage && <button className="btn btn-primary" onClick={() => void start()}><i className="bi bi-plus-lg" /> Add domain</button>}{(related.length > 0 || canManage) && <><button ref={anchor} className="btn-icon" aria-label="More domain actions" aria-expanded={menu} onClick={() => setMenu(value => !value)}><i className="bi bi-three-dots-vertical" /></button><Popover anchorRef={anchor} open={menu} onClose={() => setMenu(false)} className="domains-action-menu">{related.map(item => <button key={item.path} className="btn" onClick={() => { setMenu(false); navigate(`${dnsAdminMount(location.pathname)}/dns/${item.path}`); }}>{item.label}</button>)}{canManage && <button className="btn" onClick={() => { setMenu(false); void import('./SharedValidationDialog').then(({ openSharedValidation }) => openSharedValidation()); }}>Shared validation setup</button>}</Popover></>}</div></header>
+        <ModelTable<DomainRow> model={DomainModel} title="Managed domains" searchable searchPlaceholder="Search domain names" columns={narrow ? columns.filter(column => !['expires', 'group', 'status'].includes(column.key)) : columns} filters={filters} defaultParams={{ sort: 'name' }} columnChooser persistState persistKey="admin:dns:domains" onRowClick={row => void showDomainDetails(row.id)} />
     </div>;
 }

package/src/admin/dns/ProviderCredentialsPage.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useCan } from '../../client/runtime';
 import {
     Badge,
@@ -22,6 +22,7 @@ import {
     useDnsCapabilities,
 } from './api';
 import { linkableProviders, providerLabel } from './data';
+import { domainSession, requireDomainManager } from './domain-authority';
 import {
     DNS_MANAGE_PERMISSIONS,
     DNS_VIEW_PERMISSIONS,
@@ -45,10 +46,13 @@ function verificationTone(row: DnsCredentialRow): Tone {
     return row.verified ? 'success' : row.last_error ? 'danger' : 'warning';
 }
 
-function CredentialSecretForm({ row, caps, close }: {
+function CredentialSecretForm({ row, caps, close, fixedGroup, onBusy, signal }: {
     row?: DnsCredentialRow;
     caps: DnsCapabilities;
     close: (saved: DnsCredentialRow | null) => void;
+    fixedGroup?: DnsGroupChoice;
+    onBusy?: (busy: boolean) => void;
+    signal?: AbortSignal;
 }) {
     const queryClient = useQueryClient();
     const providers = linkableProviders(caps);
@@ -56,37 +60,45 @@ function CredentialSecretForm({ row, caps, close }: {
     const secretRef = useRef<HTMLInputElement>(null);
     const [name, setName] = useState(row?.name ?? '');
     const [provider, setProvider] = useState(row?.provider ?? providers[0]?.name ?? '');
-    const [group, setGroup] = useState<DnsGroupChoice | null>(null);
+    const [group, setGroup] = useState<DnsGroupChoice | null>(fixedGroup ?? null);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState('');
-    const fixedGroup = row ? groupLabel(row.group) : null;
+    const scopeLabel = row ? groupLabel(row.group) : fixedGroup?.name;
+    const flight = useRef(false); const session = useRef(domainSession());
+    const mounted = useRef(true);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
 
     const submit = async (event: React.FormEvent) => {
         event.preventDefault();
+        if (flight.current) return;
         const apiKey = keyRef.current?.value ?? '';
         const apiSecret = secretRef.current?.value ?? '';
         if (!apiKey || !apiSecret) { setError('Enter both the API key and API secret'); return; }
         if (!row && !group) { setError('Choose a group'); return; }
         if (!provider) { setError('Choose a provider'); return; }
-        setBusy(true);
+        flight.current = true; setBusy(true); onBusy?.(true);
         setError('');
         try {
+            await requireDomainManager(session.current);
+            const beforeSend = () => { if (!mounted.current || signal?.aborted || domainSession() !== session.current) throw new Error('Session changed. Reopen credential setup.'); };
             const saved = row
-                ? await rotateDnsCredential(row, { name, api_key: apiKey, api_secret: apiSecret })
+                ? await rotateDnsCredential(row, { name, api_key: apiKey, api_secret: apiSecret }, beforeSend)
                 : await linkDnsCredential({
                     group: group!.id, provider, name,
                     api_key: apiKey, api_secret: apiSecret,
-                });
+                }, beforeSend);
+            if (!mounted.current || signal?.aborted || domainSession() !== session.current) return;
             queryClient.setQueryData(DnsCredentialModel.keys.one(saved.id), saved);
             toast.success(row ? 'Credential rotated and verified' : 'Credential linked and verified');
             close(saved);
         } catch (reason) {
-            setError(reason instanceof Error ? reason.message : 'The provider rejected those credentials');
+            if (mounted.current && !signal?.aborted) setError(reason instanceof Error ? reason.message : 'The provider rejected those credentials');
         } finally {
             if (keyRef.current) keyRef.current.value = '';
             if (secretRef.current) secretRef.current.value = '';
             await invalidateDnsCredentials(queryClient);
             setBusy(false);
+            flight.current = false; onBusy?.(false);
         }
     };
 
@@ -101,15 +113,15 @@ function CredentialSecretForm({ row, caps, close }: {
                 <div className="col-12">
                     <label className="field">
                         <span className="field-label">Label</span>
-                        <input className="input" value={name} placeholder="Acme GoDaddy" onChange={(event) => setName(event.target.value)} />
+                        <input className="input" value={name} disabled={busy} placeholder="Acme GoDaddy" onChange={(event) => setName(event.target.value)} />
                     </label>
                 </div>
                 <div className="col-12">
-                    {row ? (
+                    {row || fixedGroup ? (
                         <div className="field">
                             <span className="field-label">Group</span>
-                            <div className="input" aria-readonly="true">{fixedGroup}</div>
-                            <span className="field-help">Rotation keeps the existing credential scope.</span>
+                            <div className="input" aria-readonly="true">{scopeLabel}</div>
+                            {row && <span className="field-help">Rotation keeps the existing credential scope.</span>}
                         </div>
                     ) : (
                         <CollectionSelect<DnsGroupChoice>
@@ -120,6 +132,7 @@ function CredentialSecretForm({ row, caps, close }: {
                             placeholder="Search eligible groups…"
                             help="Only active groups authorized for DNS credential assignment appear."
                             required
+                            disabled={busy}
                             maxItems={25}
                             defaultParams={{ start: 0 }}
                         />
@@ -131,7 +144,7 @@ function CredentialSecretForm({ row, caps, close }: {
                         {row ? (
                             <div className="input" aria-readonly="true">{providerLabel(provider)}</div>
                         ) : (
-                            <select className="input" value={provider} onChange={(event) => setProvider(event.target.value)}>
+                            <select className="input" value={provider} disabled={busy} onChange={(event) => setProvider(event.target.value)}>
                                 {providers.map((entry) => <option key={entry.name} value={entry.name}>{providerLabel(entry.name)}</option>)}
                             </select>
                         )}
@@ -140,13 +153,13 @@ function CredentialSecretForm({ row, caps, close }: {
                 <div className="col-12">
                     <label className="field">
                         <span className="field-label">API key <em>*</em></span>
-                        <input ref={keyRef} className="input" type="password" autoComplete="new-password" spellCheck={false} />
+                        <input ref={keyRef} className="input" type="password" disabled={busy} autoComplete="new-password" spellCheck={false} />
                     </label>
                 </div>
                 <div className="col-12">
                     <label className="field">
                         <span className="field-label">API secret <em>*</em></span>
-                        <input ref={secretRef} className="input" type="password" autoComplete="new-password" spellCheck={false} />
+                        <input ref={secretRef} className="input" type="password" disabled={busy} autoComplete="new-password" spellCheck={false} />
                     </label>
                 </div>
             </div>
@@ -160,10 +173,11 @@ function CredentialSecretForm({ row, caps, close }: {
     );
 }
 
-async function showCredentialEditor(caps: DnsCapabilities, row?: DnsCredentialRow): Promise<DnsCredentialRow | null> {
+export async function showCredentialEditor(caps: DnsCapabilities, row?: DnsCredentialRow, fixedGroup?: DnsGroupChoice, options: { signal?: AbortSignal; onBusyChange?: (busy: boolean) => void } = {}): Promise<DnsCredentialRow | null> {
+    let busy = false;
     return modal.open<DnsCredentialRow | null>((close) => (
-        <CredentialSecretForm caps={caps} row={row} close={close} />
-    ), { size: 'md' });
+        <CredentialSecretForm caps={caps} row={row} fixedGroup={fixedGroup} signal={options.signal} close={close} onBusy={value => { busy = value; options.onBusyChange?.(value); }} />
+    ), { signal: options.signal, size: 'md', canDismiss: () => !busy });
 }
 
 function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabilities; close: () => void }) {