domains: what you own, who runs its DNS, and the keys
one section, not two. a provider serves many domains so the lists differ, but a person thinks in DOMAINS — the provider is something the check discovers, and a key only matters as the answer to "can officer do anything for THIS domain". two tabs would make somebody hold that join in their head, and the providers tab would be two rows most of the time. so the key is entered from the row that needs one and stored against its provider: add it for one cloudflare domain and every other cloudflare domain turns green at once. THE CHECK runs before you commit, because its answer is usually the reason you would or would not add it, and a list of unchecked rows is a list somebody has to remember to revisit. it reports five verdicts, not two, and the extra three are the interesting ones. `private` — atelier.officer.dev resolves to 100.64.x, which is CORRECT and reads as broken against any public-IP comparison. `unknown` — we could not establish our own address, so "is that us" has no answer and saying so beats a confident wrong one. `nowhere` — a name bought ten minutes ago. plus maybeProxied, because a cloudflare domain resolving to cloudflare is a working setup rather than a misconfiguration. NS gives the DNS HOST, not the registrar. officer.dev is godaddy on both counts here, but a domain bought at godaddy and delegated to cloudflare answers cloudflare — and that is the one that matters, since its API is what places an ACME challenge. the UI says so where it would otherwise be read as wrong. only an apex has NS records, so the lookup walks up to find them. verified live: platform.officer.dev now answers godaddy instead of nothing. CREDENTIALS are keyed on the provider, encrypted under this plugin's purpose key, never returned by any route. scope is narrow|broad and NOT read|write — DNS-01 works by WRITING a TXT record, so no read-only key can ever issue a certificate, and offering one would produce a setup that looks configured and fails at the first renewal sixty days later. the dialog says that out loud. the form is generated from NPM's own dns-providers template, so the field names are the provider's and it stays right for providers we have never heard of. the routes live under /_config, which the manifest already marks ownerOnly: a DNS key can rewrite every record for a domain, which is strictly more than the NPM login kept there, and declaring it once beats checking it twice. tables verified by query rather than by db:push's exit code. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,248 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { KeyRound, Loader2, ShieldAlert } from 'lucide-react';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { readableError } from './errors';
|
||||
|
||||
/**
|
||||
* Entering a DNS provider's API credential.
|
||||
*
|
||||
* ── The fields are NPM's, not ours ──
|
||||
*
|
||||
* `GET /nginx/certificates/dns-providers` returns a `credentials` TEMPLATE per provider, carrying that
|
||||
* provider's own field names — one token for Cloudflare, a key and a secret for others. So the form is
|
||||
* GENERATED rather than written per provider, and it stays right for providers nobody here has heard of.
|
||||
*
|
||||
* When the template cannot be fetched — no NPM connection yet, or a provider it does not support — the
|
||||
* fallback is a single box in `key = value` form, which is the shape certbot wants anyway. Worse to use
|
||||
* and not wrong, which is the correct direction for a fallback.
|
||||
*
|
||||
* ── Narrow versus broad, and why it is not read versus write ──
|
||||
*
|
||||
* Both can issue certificates, because a DNS-01 challenge WRITES a TXT record — there is no read-only
|
||||
* credential that works, and offering one would produce a setup that looks configured and fails at the
|
||||
* first renewal, sixty days later. What differs is what else the key can do if it leaks.
|
||||
*/
|
||||
|
||||
type NpmProvider = { id: string; name: string; credentials: string };
|
||||
|
||||
/**
|
||||
* Pull field names out of certbot's ini template.
|
||||
*
|
||||
* `dns_cloudflare_api_token = <token>` → `dns_cloudflare_api_token`. Anything that is not a `key = value`
|
||||
* line is skipped rather than guessed at.
|
||||
*/
|
||||
const fieldsFromTemplate = (template: string): string[] =>
|
||||
template
|
||||
.split('\n')
|
||||
.map((line) => line.split('=')[0]?.trim())
|
||||
.filter((key): key is string => !!key && /^[a-z0-9_]+$/i.test(key));
|
||||
|
||||
/** `dns_cloudflare_api_token` → `Api token`. The prefix is noise once the provider is named above. */
|
||||
const labelFor = (field: string, provider: string): string => {
|
||||
const stripped = field.replace(new RegExp(`^dns_${provider}_`, 'i'), '').replace(/^dns_/, '');
|
||||
const words = stripped.replace(/_/g, ' ').trim();
|
||||
return words.charAt(0).toUpperCase() + words.slice(1);
|
||||
};
|
||||
|
||||
type Props = {
|
||||
provider: string;
|
||||
hasExisting: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
};
|
||||
|
||||
export const CredentialDialog = ({ provider, hasExisting, onClose, onSaved }: Props) => {
|
||||
const client = useClient();
|
||||
const clientRef = useRef(client);
|
||||
clientRef.current = client;
|
||||
|
||||
const [fields, setFields] = useState<string[] | null>(null);
|
||||
const [values, setValues] = useState<Record<string, string>>({});
|
||||
const [raw, setRaw] = useState('');
|
||||
const [scope, setScope] = useState<'narrow' | 'broad'>('narrow');
|
||||
const [label, setLabel] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [forbidden, setForbidden] = useState(false);
|
||||
|
||||
const loadTemplate = useCallback(async () => {
|
||||
try {
|
||||
const list = await clientRef.current.get<NpmProvider[]>(
|
||||
'/proxy-manager/npm/nginx/certificates/dns-providers',
|
||||
);
|
||||
const match = list.find((entry) => entry.id.toLowerCase() === provider.toLowerCase());
|
||||
setFields(match ? fieldsFromTemplate(match.credentials) : []);
|
||||
} catch {
|
||||
// No connection, or NPM does not know this provider. The free-form box covers both.
|
||||
setFields([]);
|
||||
}
|
||||
}, [provider]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadTemplate();
|
||||
}, [loadTemplate]);
|
||||
|
||||
const save = async () => {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const entered =
|
||||
fields && fields.length > 0
|
||||
? values
|
||||
: Object.fromEntries(
|
||||
raw
|
||||
.split('\n')
|
||||
.map((line) => {
|
||||
const index = line.indexOf('=');
|
||||
return index === -1 ? null : [line.slice(0, index).trim(), line.slice(index + 1).trim()];
|
||||
})
|
||||
.filter((pair): pair is [string, string] => !!pair && !!pair[0] && !!pair[1]),
|
||||
);
|
||||
|
||||
await clientRef.current.put(`/proxy-manager/_config/dns-providers/${encodeURIComponent(provider)}`, {
|
||||
fields: entered,
|
||||
scope,
|
||||
label: label.trim() || undefined,
|
||||
});
|
||||
onSaved();
|
||||
} catch (caught) {
|
||||
if ((caught as { status?: number })?.status === 403) setForbidden(true);
|
||||
else setError(readableError(caught, 'Could not save that.'));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const generated = fields && fields.length > 0;
|
||||
const filled = generated ? fields.some((f) => values[f]?.trim()) : raw.trim().length > 0;
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
|
||||
<div
|
||||
className="flex max-h-full w-full max-w-md flex-col gap-3 overflow-auto rounded-lg border bg-background p-4"
|
||||
onClick={(ev) => ev.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<KeyRound className="size-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">
|
||||
{hasExisting ? 'Replace' : 'Add'} the {provider} API key
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{forbidden ? (
|
||||
<>
|
||||
<p className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<ShieldAlert className="size-4" /> Only the server owner can store a DNS credential.
|
||||
</p>
|
||||
<p className="text-[11px] leading-relaxed text-muted-foreground">
|
||||
It can rewrite every record for a domain, which is more than the proxy login already kept here.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{fields === null ? (
|
||||
<p className="text-xs text-muted-foreground">Looking up what {provider} needs…</p>
|
||||
) : generated ? (
|
||||
fields.map((field) => (
|
||||
<label key={field} className="flex flex-col gap-1">
|
||||
<span className="text-xs font-medium">{labelFor(field, provider)}</span>
|
||||
<Input
|
||||
value={values[field] ?? ''}
|
||||
onChange={(ev) => setValues((prev) => ({ ...prev, [field]: ev.target.value }))}
|
||||
placeholder={hasExisting ? 'unchanged' : field}
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</label>
|
||||
))
|
||||
) : (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs font-medium">Credential</span>
|
||||
<textarea
|
||||
value={raw}
|
||||
onChange={(ev) => setRaw(ev.target.value)}
|
||||
rows={4}
|
||||
spellCheck={false}
|
||||
placeholder={`dns_${provider}_api_key = …`}
|
||||
className="rounded-md border bg-transparent p-2 font-mono text-xs"
|
||||
/>
|
||||
<span className="text-[11px] leading-relaxed text-muted-foreground">
|
||||
One `name = value` per line. Officer could not fetch this provider's field names from Nginx Proxy
|
||||
Manager, so they are yours to supply — its own documentation lists them.
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<fieldset className="flex flex-col gap-1.5 rounded-lg border p-2.5">
|
||||
<legend className="px-1 text-xs font-medium">What this key can do</legend>
|
||||
{(
|
||||
[
|
||||
{
|
||||
value: 'narrow' as const,
|
||||
title: 'Certificates only',
|
||||
hint: 'Scoped by the provider to DNS edits, ideally on just these zones. Enough to prove ownership and get a certificate. Not every provider can scope a key — some only issue account-wide ones.',
|
||||
},
|
||||
{
|
||||
value: 'broad' as const,
|
||||
title: 'Full DNS access',
|
||||
hint: 'Also lets an agent create and change records for you when asked. Everything the narrow key does, plus everything else that key can reach if it leaks.',
|
||||
},
|
||||
]
|
||||
).map((option) => (
|
||||
<label key={option.value} className="flex cursor-pointer items-start gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="scope"
|
||||
className="mt-1"
|
||||
checked={scope === option.value}
|
||||
onChange={() => setScope(option.value)}
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-xs">{option.title}</span>
|
||||
<span className="block text-[11px] leading-relaxed text-muted-foreground">{option.hint}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
{/* The correction that stops somebody creating a read-only key and finding out in sixty days. */}
|
||||
<p className="px-1 text-[11px] leading-relaxed text-muted-foreground">
|
||||
There is no read-only option, and that is not an omission: proving you own a domain means writing a
|
||||
record into it, so any key that can get a certificate can write.
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs font-medium">Label (optional)</span>
|
||||
<Input
|
||||
value={label}
|
||||
onChange={(ev) => setLabel(ev.target.value)}
|
||||
placeholder="which key this is, for when you rotate it"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||
|
||||
<p className="text-[11px] leading-relaxed text-muted-foreground">
|
||||
Stored encrypted under this plugin's own key and never returned by the API — not to a member, not to
|
||||
you. To change it, enter a new one.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" size="sm" onClick={onClose}>
|
||||
{forbidden ? 'Close' : 'Cancel'}
|
||||
</Button>
|
||||
{!forbidden && (
|
||||
<Button type="button" size="sm" onClick={() => void save()} disabled={!filled || saving}>
|
||||
{saving ? <Loader2 className="size-3.5 animate-spin" /> : null} Save
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -7,6 +7,7 @@ import { CertificatesPanel } from './CertificatesPanel';
|
||||
import { ConnectionPanel } from './ConnectionPanel';
|
||||
import { ListSection, REDIRECTIONS, STREAMS, DEAD_HOSTS, ACCESS_LISTS } from './ListSection';
|
||||
import { PlannedSection } from './PlannedSection';
|
||||
import { DomainsSection } from './DomainsSection';
|
||||
import { useNpmChanged } from './channel';
|
||||
|
||||
/**
|
||||
@@ -62,6 +63,10 @@ export const DetailPanel = () => {
|
||||
const planned = SECTIONS.find((s) => s.key === section && s.planned);
|
||||
if (planned) return <PlannedSection section={planned} />;
|
||||
|
||||
// Domains is exempt from the connection check: it asks public DNS and reads Officer's own rows, so it
|
||||
// works before NPM is connected at all — and telling somebody to connect NPM first would be false.
|
||||
if (section === 'domains') return <DomainsSection />;
|
||||
|
||||
if (!configured || section === 'connection') return <ConnectionPanel />;
|
||||
|
||||
switch (section) {
|
||||
|
||||
@@ -0,0 +1,311 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { CheckCircle2, KeyRound, Loader2, Network, RefreshCw, Search, Trash2, TriangleAlert } from 'lucide-react';
|
||||
import { useClient } from 'hooks/useClient';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { readableError } from './errors';
|
||||
import { CredentialDialog } from './CredentialDialog';
|
||||
|
||||
/**
|
||||
* Domains, and the DNS credentials that go with them — one screen, deliberately.
|
||||
*
|
||||
* ── Why not two sections ──
|
||||
*
|
||||
* A provider serves many domains, so the two are not the same list. But a person thinks in DOMAINS: the
|
||||
* provider is something the check discovers, and the key is a property of the provider that only ever
|
||||
* matters as an answer to "can Officer do anything for THIS domain". Two tabs would make you hold the join
|
||||
* in your head, and the providers tab would be two rows most of the time.
|
||||
*
|
||||
* So the key is entered from the domain row that needs one, and stored against the provider — add it for
|
||||
* `officer.dev` and every other Cloudflare domain in the list turns green at once, which is the correct
|
||||
* surprise.
|
||||
*
|
||||
* ── The check runs before you commit ──
|
||||
*
|
||||
* Typing a domain and pressing Check tells you who runs its DNS and where it points, without storing
|
||||
* anything. That ordering matters: the answer is usually the reason you would or would not add it, and a
|
||||
* list of unchecked rows is a list somebody has to remember to go back to.
|
||||
*/
|
||||
|
||||
type DomainRow = {
|
||||
id: number;
|
||||
domain: string;
|
||||
dnsProvider: string | null;
|
||||
pointsTo: string | null;
|
||||
resolvedIps: string[];
|
||||
lastCheckedAt: string | null;
|
||||
hasCredential: boolean;
|
||||
credentialScope: string | null;
|
||||
};
|
||||
|
||||
type Check = {
|
||||
domain: string;
|
||||
nameservers: string[];
|
||||
dnsProvider: string | null;
|
||||
resolvedIps: string[];
|
||||
pointsTo: 'here' | 'private' | 'elsewhere' | 'nowhere' | 'unknown';
|
||||
maybeProxied: boolean;
|
||||
machineIp: string | null;
|
||||
};
|
||||
|
||||
const HINT = 'text-[11px] leading-relaxed text-muted-foreground';
|
||||
|
||||
/**
|
||||
* The verdict, in a sentence.
|
||||
*
|
||||
* Five outcomes rather than two, because "does it point here" has more than two honest answers and the
|
||||
* missing ones are the interesting ones: a tailnet name resolving to `100.64.x` is CORRECT and would read
|
||||
* as broken against a public-IP comparison, and a proxied domain resolves to the proxy rather than to us.
|
||||
*/
|
||||
const VERDICT: Record<Check['pointsTo'], { text: string; tone: string }> = {
|
||||
here: { text: 'Points at this machine', tone: 'text-emerald-600 dark:text-emerald-400' },
|
||||
private: { text: 'Points inside a private network', tone: 'text-sky-600 dark:text-sky-400' },
|
||||
elsewhere: { text: 'Points somewhere else', tone: 'text-amber-600 dark:text-amber-400' },
|
||||
nowhere: { text: 'Does not resolve yet', tone: 'text-muted-foreground' },
|
||||
unknown: { text: 'Resolves — could not tell if it is this machine', tone: 'text-muted-foreground' },
|
||||
};
|
||||
|
||||
const verdictOf = (value: string | null) => (value && value in VERDICT ? VERDICT[value as Check['pointsTo']] : null);
|
||||
|
||||
const AddDomain = ({ onAdded }: { onAdded: () => void }) => {
|
||||
const client = useClient();
|
||||
const clientRef = useRef(client);
|
||||
clientRef.current = client;
|
||||
|
||||
const [domain, setDomain] = useState('');
|
||||
const [check, setCheck] = useState<Check | null>(null);
|
||||
const [busy, setBusy] = useState<'check' | 'add' | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const run = async () => {
|
||||
setBusy('check');
|
||||
setError(null);
|
||||
setCheck(null);
|
||||
try {
|
||||
setCheck(await clientRef.current.get<Check>(`/proxy-manager/domains/check?domain=${encodeURIComponent(domain)}`));
|
||||
} catch (caught) {
|
||||
setError(readableError(caught, 'Could not look that up.'));
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const add = async () => {
|
||||
setBusy('add');
|
||||
setError(null);
|
||||
try {
|
||||
await clientRef.current.post('/proxy-manager/domains', { domain });
|
||||
setDomain('');
|
||||
setCheck(null);
|
||||
onAdded();
|
||||
} catch (caught) {
|
||||
setError(readableError(caught, 'Could not add that.'));
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
};
|
||||
|
||||
const verdict = check && VERDICT[check.pointsTo];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 border-b p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
value={domain}
|
||||
onChange={(ev) => {
|
||||
setDomain(ev.target.value);
|
||||
setCheck(null);
|
||||
}}
|
||||
onKeyDown={(ev) => {
|
||||
if (ev.key === 'Enter' && domain.trim() && busy === null) void run();
|
||||
}}
|
||||
placeholder="example.com"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
className="h-8"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => void run()} disabled={!domain.trim() || busy !== null}>
|
||||
{busy === 'check' ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
|
||||
Check
|
||||
</Button>
|
||||
{/* Adding is only offered AFTER a check, so nothing lands on the list unexamined. */}
|
||||
{check && (
|
||||
<Button type="button" size="sm" onClick={() => void add()} disabled={busy !== null}>
|
||||
{busy === 'add' ? <Loader2 className="size-3.5 animate-spin" /> : null}
|
||||
Add
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{check && verdict && (
|
||||
<div className="rounded-lg border p-2.5 text-xs">
|
||||
<p className={`flex items-center gap-1.5 ${verdict.tone}`}>
|
||||
{check.pointsTo === 'here' ? <CheckCircle2 className="size-3.5" /> : <TriangleAlert className="size-3.5" />}
|
||||
{verdict.text}
|
||||
{check.maybeProxied && ' — possibly through its provider'}
|
||||
</p>
|
||||
<p className={`mt-1 ${HINT}`}>
|
||||
{check.dnsProvider ? (
|
||||
<>
|
||||
DNS is run by <strong>{check.dnsProvider}</strong>.
|
||||
</>
|
||||
) : check.nameservers.length ? (
|
||||
<>Nameservers not recognised: {check.nameservers.join(', ')}.</>
|
||||
) : (
|
||||
<>No nameservers found.</>
|
||||
)}
|
||||
{check.resolvedIps.length > 0 && <> Resolves to {check.resolvedIps.join(', ')}.</>}
|
||||
{check.machineIp && <> This machine is {check.machineIp}.</>}
|
||||
</p>
|
||||
{/* The registrar/DNS-host distinction, said once and where it will be misread otherwise. */}
|
||||
{check.dnsProvider && (
|
||||
<p className={`mt-1 ${HINT}`}>
|
||||
That is where the DNS is hosted, which may not be where you bought the domain — it is the one that
|
||||
matters, because its API is what can prove ownership for a certificate.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DomainsSection = () => {
|
||||
const client = useClient();
|
||||
const clientRef = useRef(client);
|
||||
clientRef.current = client;
|
||||
|
||||
const [rows, setRows] = useState<DomainRow[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busyId, setBusyId] = useState<number | null>(null);
|
||||
const [keyFor, setKeyFor] = useState<DomainRow | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setRows(await clientRef.current.get<DomainRow[]>('/proxy-manager/domains'));
|
||||
setError(null);
|
||||
} catch (caught) {
|
||||
setError(readableError(caught, 'Could not load domains.'));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const recheck = async (row: DomainRow) => {
|
||||
setBusyId(row.id);
|
||||
try {
|
||||
await clientRef.current.post(`/proxy-manager/domains/${row.id}/recheck`, {});
|
||||
await load();
|
||||
} catch (caught) {
|
||||
setError(readableError(caught, 'Could not re-check that.'));
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (row: DomainRow) => {
|
||||
setBusyId(row.id);
|
||||
try {
|
||||
await clientRef.current.delete(`/proxy-manager/domains/${row.id}`);
|
||||
await load();
|
||||
} catch (caught) {
|
||||
setError(readableError(caught, 'Could not remove that.'));
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (!rows) {
|
||||
return <div className="flex size-full items-center justify-center p-6 text-sm text-muted-foreground">Loading…</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex size-full flex-col">
|
||||
<AddDomain onAdded={() => void load()} />
|
||||
|
||||
{error && <p className="border-b px-3 py-2 text-xs text-destructive">{error}</p>}
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
|
||||
<Network className="size-8 text-muted-foreground" />
|
||||
<p className="text-sm text-muted-foreground">No domains yet.</p>
|
||||
<p className={`max-w-sm ${HINT}`}>
|
||||
Add the ones this machine is responsible for. Officer will remember who runs their DNS, which is what
|
||||
it needs in order to get certificates for names that are not reachable from the internet.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="flex-1 overflow-auto">
|
||||
{rows.map((row) => {
|
||||
const verdict = verdictOf(row.pointsTo);
|
||||
return (
|
||||
<li key={row.id} className="flex items-start gap-2 border-b px-3 py-2.5">
|
||||
<Network className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
|
||||
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-sm">{row.domain}</span>
|
||||
<span className={`block truncate text-xs ${verdict?.tone ?? 'text-muted-foreground'}`}>
|
||||
{verdict?.text ?? 'Not checked'}
|
||||
{row.resolvedIps.length > 0 && ` · ${row.resolvedIps.join(', ')}`}
|
||||
</span>
|
||||
<span className={`block truncate ${HINT}`}>
|
||||
{row.dnsProvider ? `DNS: ${row.dnsProvider}` : 'DNS provider not recognised'}
|
||||
{row.dnsProvider &&
|
||||
(row.hasCredential ? ` · key stored (${row.credentialScope})` : ' · no key yet')}
|
||||
{row.lastCheckedAt && ` · checked ${new Date(row.lastCheckedAt).toLocaleString()}`}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* Offered only when we know WHICH provider to store it against. */}
|
||||
{row.dnsProvider && (
|
||||
<button
|
||||
type="button"
|
||||
title={row.hasCredential ? 'Replace the API key' : 'Add an API key'}
|
||||
onClick={() => setKeyFor(row)}
|
||||
className={row.hasCredential ? 'text-emerald-500' : 'text-muted-foreground hover:text-foreground'}
|
||||
>
|
||||
<KeyRound className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
title="Check again"
|
||||
onClick={() => void recheck(row)}
|
||||
disabled={busyId === row.id}
|
||||
className="text-muted-foreground hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`size-4 ${busyId === row.id ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title="Forget this domain — changes nothing at the registrar"
|
||||
onClick={() => void remove(row)}
|
||||
disabled={busyId === row.id}
|
||||
className="text-muted-foreground hover:text-destructive disabled:opacity-50"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{keyFor?.dnsProvider && (
|
||||
<CredentialDialog
|
||||
provider={keyFor.dnsProvider}
|
||||
hasExisting={keyFor.hasCredential}
|
||||
onClose={() => setKeyFor(null)}
|
||||
onSaved={() => {
|
||||
setKeyFor(null);
|
||||
void load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+8
-10
@@ -13,16 +13,14 @@ import type { Section } from './sections';
|
||||
* the full design; this is the two sentences that fit on a screen.
|
||||
*/
|
||||
|
||||
const COPY: Partial<Record<Section['key'], { what: string; why: string }>> = {
|
||||
domains: {
|
||||
what: 'The domains you manage on this machine, and who each one is registered with.',
|
||||
why: 'Right now that list lives in a document somebody edits by hand, which is right on the day it is written. Officer knowing it for real is what lets a certificate be issued without being told the same facts again.',
|
||||
},
|
||||
'dns-providers': {
|
||||
what: 'An API key per registrar — Cloudflare, GoDaddy, whoever — kept in the secret store and never handed back out.',
|
||||
why: 'This is what makes HTTPS possible on a hostname that only exists on your private network. Let’s Encrypt cannot visit a private address, so the only proof it accepts is a DNS record, and placing one needs the registrar’s API.',
|
||||
},
|
||||
};
|
||||
/**
|
||||
* **Empty, and the component stays.**
|
||||
*
|
||||
* `domains` and `dns-providers` were both here and both got built, which is the outcome this was for. The
|
||||
* mechanism is worth keeping for the next agreed-and-unbuilt section: a nav that shows where the plugin is
|
||||
* going is more useful than one that only shows where it is.
|
||||
*/
|
||||
const COPY: Partial<Record<Section['key'], { what: string; why: string }>> = {};
|
||||
|
||||
export const PlannedSection = ({ section }: { section: Section }) => {
|
||||
const copy = COPY[section.key];
|
||||
|
||||
+11
-13
@@ -1,5 +1,5 @@
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Globe, Cable, Radio, FileX2, Users, ShieldCheck, Plug, Network, KeyRound } from 'lucide-react';
|
||||
import { Globe, Cable, Radio, FileX2, Users, ShieldCheck, Plug, Network } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* The sections.
|
||||
@@ -22,6 +22,14 @@ import { Globe, Cable, Radio, FileX2, Users, ShieldCheck, Plug, Network, KeyRoun
|
||||
* Everything above `domains` is a thing NPM owns and this reads. From `domains` down is OFFICER's own —
|
||||
* what it knows about your domains, the DNS credentials it holds, and where NPM is. Those are not NPM
|
||||
* concepts and should not pretend to be.
|
||||
*
|
||||
* ── Domains and DNS Providers are ONE section ──
|
||||
*
|
||||
* They were briefly two. A provider serves many domains, so the lists are genuinely different — but a
|
||||
* person thinks in domains, the provider is something the check discovers, and a key only ever matters as
|
||||
* the answer to "can Officer do anything for THIS domain". Two tabs would make somebody hold that join in
|
||||
* their head, and the providers tab would be two rows most of the time. So the key is entered from the
|
||||
* domain row that needs one and stored against its provider.
|
||||
*/
|
||||
|
||||
export type SectionKey =
|
||||
@@ -32,7 +40,6 @@ export type SectionKey =
|
||||
| 'dead-hosts'
|
||||
| 'access-lists'
|
||||
| 'domains'
|
||||
| 'dns-providers'
|
||||
| 'connection';
|
||||
|
||||
export type Section = {
|
||||
@@ -103,17 +110,8 @@ export const SECTIONS: Section[] = [
|
||||
key: 'domains',
|
||||
label: 'Domains',
|
||||
icon: Network,
|
||||
hint: 'The domains you manage, and who registers each',
|
||||
path: null,
|
||||
planned: true,
|
||||
},
|
||||
{
|
||||
key: 'dns-providers',
|
||||
label: 'DNS Providers',
|
||||
icon: KeyRound,
|
||||
hint: 'API keys, so a private hostname can still get TLS',
|
||||
path: null,
|
||||
planned: true,
|
||||
hint: 'What you own, who runs its DNS, and the keys',
|
||||
path: '/proxy-manager/domains',
|
||||
},
|
||||
{
|
||||
key: 'connection',
|
||||
|
||||
Reference in New Issue
Block a user