Custom Domain Settings Block for React

Edit the constants at the top. SITE is the address the site keeps while no domain is connected, TARGET is where the CNAME points, TOKEN is the verification value for the TXT record and START_HOST is what the field holds on load. ANSWERS lists what the sample resolver finds on each check, one entry per press, so a third entry or a different order changes the story. AS_OF and LIFETIME_DAYS fix the certificate's dates. The sentences, the rail's notes and the record names (the TXT name is built from the host's first label) are all worked out from these, so nothing is typed twice.

Nothing is looked up. The panel says so under the results: the check is made against sample records in this demo, not the real DNS. The first press shows the CNAME as found and the TXT record as not found yet, and the status line says so; the second shows both found and the main button becomes Continue. Pressing it again after a pass does not recheck. To make it real, resolve the CNAME and the TXT name on your server, return what you found for each record, and show the same three words (not checked, not found yet, found).

A subdomain: at least three dot-separated parts, each made of letters, digits and hyphens and at most 63 characters, with no scheme, port or path. It is lower-cased and a trailing dot is dropped. An address under the product's own domain is refused, and so is anything that looks like a link, each with a message in a reserved line under the field and focus kept on it. A bare domain would need a different kind of record, which this panel doesn't draw. Changing the host after a pass starts the check again.

Everything. No domain is added, no record is published, no certificate is requested and the certificate's dates are a fixed sample: Issue certificate only turns the stage to issued in this page. To make it real, create the domain on your server when the first stage is submitted, show the records your server expects, check them for real, request a certificate from your certificate authority once DNS passes, and read its real dates back to the last stage.

Below the medium breakpoint the rail becomes a bar of four markers with the stage's name in its heading, and the records become one card each with labelled name and value, from the same markup as the table. The foot is pinned to the bottom of the screen. Enter in the field submits the stage. When you move forward or back, focus goes to the new stage's heading, and the status line is a polite live region that says what happened. Stages you aren't on are inert and hidden from assistive technology, and the panel keeps one height whichever stage shows.