Certificate Validity Chain Success Block for React

Nothing was issued. The hostname (under .example), the dates, the key types and the fingerprints are made-up sample data, and the marker only changes this page. To wire it, set ISSUED, EXPIRES and RENEW_WINDOW from the certificate, and build the chain from the one your platform installed, with each real SHA-256 fingerprint in place of the generated one.

From two typed days. The length (90 days) is the number of days between them, the renewal day is that length minus the 31-day renewal window, and every date on the page, including the one a marker lands on, is worked out in UTC from those two. Nothing reads the clock, so the page says the same on every device.

It is a native range input in whole days, laid over the bar, so the arrow keys, Home, End and the page keys all work and a screen reader says the date and what it means (valid, in the renewal window, or the last day). The sentence under the bar changes at once, and a hidden status message speaks it a moment after the last change, so dragging does not talk over itself. The bar is left-to-right whatever the page's direction.

The chain is one list inside another inside another, so a screen reader announces its levels, with the leaf first. Each fingerprint shows its first and last four bytes and its button copies the whole value (32 bytes in colon-separated hex) through the browser's clipboard, and says it was copied. The sample fingerprints come from a small generator and are not the hash of any certificate.

No. It names no standard, no real authority and no real host, says in its last line that the chain is a sample, and its words are about dates and what renews when.

The header's button drops under the sentence, the three dates stay in one row, the bar is full width and the chain cards narrow with each level indented a little less, with the fingerprint cut short.

It is a Shine Button used as a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.