SMTP Settings Block for React

Edit PRESETS at the top (each has a host, a port and an encryption) and SAVED, which holds what the account has stored when the page opens. KNOWN_PORTS lists the ports the sample server answers on, and CLIENT is the name the client gives in EHLO. The lead sentence, the transcript and the unsaved count are worked out from the fields. The password in SAVED is a plain placeholder, shown masked and revealed only by the eye button.

It never connects. The transcript is a pure function of the fields: a port the sample server doesn't answer on is refused, TLS on a port that expects STARTTLS (587), plain text or STARTTLS on a port that expects TLS from the first byte (465) and TLS on port 25 each stop with the message a real server gives, no encryption on 587 is told to issue STARTTLS first, a missing username or password gets an authentication required answer, and anything else plays out to a sender accepted. The password never appears: AUTH shows four stars. Changing a field marks the result as out of date.

A terminal is dark by nature, so it keeps the dark scope and everything around it follows the theme. Its text sits on the dark surface at full contrast, the lines read as client, server or note with a sign and, for assistive technology, a spoken word, and the region scrolls and takes focus so a long transcript can be read by keyboard.

Everything. Nothing is saved, tested or sent: Save keeps the settings in this page's state, and the passed or failed test is the simulation above. To make it real, post the settings to your server, store the password encrypted, run the test from your server (a browser can't open an SMTP connection) and stream its real transcript, with the password redacted, into the same pane.

The form comes first and the test pane under it, with the transcript wrapping and scrolling inside its own region. Each field has a visible label and a reserved line for its problem, which is set only after Save or Run test and is read with the field; the encryption choice is a group of native radio buttons; the status line is a polite live region that also reads the test's verdict. The preset select and the fields keep the layout from moving as the lead sentence changes length.