);
}
// Terminal root / trust-anchor node — shown when the chain doesn't itself end
// in a self-signed root (e.g. cross-signed chains). The anchor cert lives in
// client trust stores rather than the served bundle, so it's drawn dashed.
function AnchorNode({ label }) {
return (
Root CATrust anchor
{label}
Held in client trust stores — not part of the served bundle
Issuer not in your bundle: {missing.issuerDN.cn || missing.issuerDN.str}
{url ? (
AIA · CA Issuers
{url}
{backendUp !== false && (
{fetching
? <> Downloading and adding it automatically…
: 'Fetched automatically when reachable.'}
)}
{backendUp === false && (
Auto-fetch needs server.js running. Otherwise download the file above, convert to PEM, and paste it in.
)}
) : (
No AIA URL in the certificate — locate this CA's intermediate from your provider and paste it above.
)}
);
}
// Chain output view — fed by the shared input in the parent toolkit. All chain
// state (auto-fetch, options, selection) is owned by the parent and passed in.
function ChainView({ result, error, health, selected, onSelect, onFetch, fetching, backendUp }) {
if (error) {
return {error} — paste at least your server (leaf) certificate.;
}
if (!result) {
return (
Analyze a certificate to see how it links to its trusted root —
and get the exact bundle to install on your server.
);
}
return (
{health && (
)}
{backendUp === false && (
Assembling & validating pasted certs runs fully in your browser. Auto-downloading missing intermediates needs the bundled server.js.
)}
);
}
// One selectable chain option in the picker (shown when a cert has cross-signed
// alternatives, e.g. a root that is also signed by an older, more compatible CA).
const OPT_TAG = {
compatible: { label: 'Most compatible', tone: 'success' },
modern: { label: 'Most modern', tone: 'brand' },
};
function OptionTab({ opt, active, onClick, inUseLevel }) {
const t = opt.terminus;
const tone = active ? 'var(--brand)' : 'var(--border-strong)';
const desc = t.type === 'root' ? 'self-signed root'
: t.type === 'missing' ? 'incomplete' : '→ ' + t.label;
const tag = OPT_TAG[opt.tag];
return (
);
}
function ChainResult({ result, selected, onSelect, onFetch, fetching, backendUp, health }) {
const inUseLevel = health && (health.level === 'warning' || health.level === 'error') ? health.level : null;
const options = result.options || [];
const idx = Math.min(selected || 0, options.length - 1);
const opt = options[idx] || options[0];
const [includeLeaf, setIncludeLeaf] = React.useState(false);
const [includeRoot, setIncludeRoot] = React.useState(false);
if (!opt) return null;
const complete = opt.hasRoot && !opt.missing;
const hasInter = opt.interCount > 0;
// assemble the PEM bundle from the selected option's parts per the toggles
const showRoot = opt.canIncludeRoot && includeRoot;
let chainPem = opt.parts
.filter((p) => p.role === 'leaf' ? includeLeaf : p.role === 'root' ? showRoot : true)
.map((p) => p.pem).join('\n');
// cross-signed chains have no root node in the path; append the available one
if (showRoot && !opt.hasRoot && opt.rootPem) chainPem = (chainPem ? chainPem + '\n' : '') + opt.rootPem;
const fileName = includeLeaf ? 'fullchain.pem' : showRoot ? 'chain-with-root.pem' : 'chain.pem';
return (
This certificate can be chained more than one way — its issuer is cross-signed by multiple roots. Most compatible reaches the oldest, most widely-distributed root (best for old clients); Most modern is the shortest chain to the newest root. When in doubt, use the recommended one.
{includeLeaf
? 'Your leaf certificate first, then each intermediate' + (showRoot ? ', then the self-signed root' : '') + ' — a single "fullchain" file for servers that want it (e.g. nginx ssl_certificate).'
: 'Intermediate CA certificate(s) only, in order — the chain file most servers reference separately (e.g. Apache SSLCertificateChainFile). Toggle on to prepend your leaf.'}
{opt.canIncludeRoot
? (showRoot
? (opt.rootInfo ? ' Root appended: ' + opt.rootInfo.cn + '.' : '')
: ' Including the root is optional — usually not needed or recommended (clients hold the root), handy for trust-store imports and testing.')
: ' This chain ends at an external root (' + opt.terminus.label + ') that isn’t in the bundle, so there’s no root certificate available to include.'}
{chainPem ? (
) : (
{hasInter
? 'Toggle “Include leaf certificate” to build a bundle.'
: 'This chain has no intermediate certificates. Turn on “Include leaf certificate” to output the leaf on its own.'}
)}