Connection setup: today vs PR #101

Static mockup of /dashboard/connections/new, built from the real markup on branch fix/setup-ask-email-first and the real Tailwind tokens. Nothing here is invented copy. Buttons do nothing.

What a user sees today

main, in production
1
2
Source & TestConfirm

Source Mailbox

Enter your mail server credentials

Emails will be delivered to you@gmail.com

Nine things on screen at once, and the very first question is “POP3 or IMAP?” Auto-detect exists and has since 2026-04-14, but it fires on the username field, which sits below the two controls it would have filled in for you.

What PR #101 does

open, unmerged

Three screens. Each one asks a single question.

Updated 2026-08-15, after Christian’s review.

Three changes, all the same idea: nothing appears until it has a reason to. The fallbacks (Microsoft sign-in, provider shortcuts, manual server settings) no longer greet people on landing. The permanent “some hosts want just the username” line is gone. And the green destination panel no longer opens the screen: it is a quiet line under the buttons now. Panel 1 is the new landing state.

1. On landing

1
2
3
MailboxPasswordConfirm

Which mailbox do you want to read?

Start with the address. We work out the server settings for you.

Delivering to you@gmail.com. Use a different Gmail

One question. Nothing else on the screen.

2. After they type an address

1
2
3
MailboxPasswordConfirm

Which mailbox do you want to read?

Start with the address. We work out the server settings for you.

Detected: Hostinger
Delivering to you@gmail.com. Use a different Gmail

We know the protocol, the host and the port. We do not mention any of them. The Confirm screen still shows them.

3. Only if we cannot work it out

1
2
3
MailboxPasswordConfirm

Which mailbox do you want to read?

Start with the address. We work out the server settings for you.

Or select your provider:

Delivering to you@gmail.com. Use a different Gmail

The panel opens by itself. The user does not have to find a link first. This is also what a bare username gets, because that has no domain to look up.

4. Second screen, after a refused login

1
2
3
MailboxPasswordConfirm

Enter the password for chris@acme-supplies.co.uk

This is the password for that mailbox, not your Gmail password.

🔒 Encrypted before it leaves your browser. Need help finding it?

Login failed. Double-check the username and password against your mail provider directly.

Three common causes:

  • Web hosts (Bluehost, GoDaddy, Namecheap, cPanel-based, etc.) issue a separate password for each email account, different from your hosting login. Find it in your hosting control panel under Email Accounts.
  • Gmail, iCloud, and accounts with 2FA require an app-specific password, not your normal one. For Outlook.com or Hotmail, use the "Sign in with Microsoft" button instead of POP3/IMAP.
  • If you have already tried several times, your mail server may have temporarily blocked our IP. Wait about 30 minutes and try again. Repeated failed attempts can extend the block, so verify the password in your control panel before retrying.

One block, not two. The button does the edit rather than describing it, and the password survives, so the retry is one click. This panel shows the full message: in production all 746 characters arrive as a single bold red paragraph, because the newlines collapse.

The four real changes

  1. The first question is the address, not the protocol. POP3/IMAP moves behind “Enter server settings myself”, which opens by itself when detection fails.
  2. Password gets its own screen, so the heading can name the mailbox and say it is not the Gmail password.
  3. Microsoft becomes a sentence, not a third protocol tab. It is a sign-in method, and auto-detect can never return it.
  4. SSL moves in with the server settings, away from the password field.
  5. Every fallback waits for a reason to exist. The provider shortcuts, the Microsoft route and the manual settings appear only once we have an address and could not resolve it.
  6. The bare-username advice waits too, and now carries an answer instead of a warning.
  7. The address field opens the screen. The destination moves below the buttons.
  8. The failed-login screen is one block that you can read, instead of two panels and a wall of collapsed text.

The failed-login screen

Two problems stacked on the one screen a person reaches when they are already stuck.

The message did not render. AUTH_FAIL_MESSAGE is written as six lines with three bullets, 746 characters. The form printed it into a single <span>, and HTML collapses newlines, so all of it arrived as one bold red paragraph with - marks running through the prose. This is not new to the wizard: main does the same thing today. The bulk import screen got it right with whitespace-pre-wrap; this one never did.

Then it showed two panels, one red and one bordered, which read as two separate problems rather than a problem and its fix.

Now it is one block: a short headline beside the icon, the action inside it when there is one, and the causes below in body weight. The panel above shows the full message.

The destination panel

A screen that asks “which mailbox do you want to read?” opened with a green panel about a different mailbox, and an invitation to go and connect a third one. The address field, the only question on the page, came after it.

474 of 506 users have exactly one Gmail connected, so that panel asks them nothing. They chose the account at signup and there is one of it. A green bordered box reads as something to deal with.

It is now a quiet line under the buttons: “Delivering to you@gmail.com. Use a different Gmail.” Anybody who wants the reassurance finds it. Nobody has to step over it. The Confirm screen still states the destination in full before a connection is created.

The 32 users with more than one Gmail keep a real picker, because for them it is a real question. It sits below the address field and above the buttons.

The bare-username line

“Some hosts want just the username instead. You can change it below if the test fails.” It sat under the address field for everybody, permanently. It raised a rare exception at the moment somebody was answering a simple question, gave no way to act on it, and pointed at a failure that had not happened.

It is rare. 12 of 427 connections log in without an @. One of those 12 is a Yahoo mailbox on a host where 8 other connections use the full address, so it was not even needed there.

Two triggers replace it.

TriggerWhat the user sees
The provider tells us seo/email-provider-settings.json already records username_format for all 60 providers. 58 say “Full email address”, which is not worth saying. Two do not, and they get named:
Mailfence signs you in with: Mailfence username (not full email address)
United Domains signs you in with: Mailbox name (e.g. musterdomainde-0001)
The login failed On a credentials failure where the address contains an @, a button offers to sign in as the part before it. This is the path that covers hosts no table knows about: pop.free.fr and imap.arnes.si are the two where every connection we have logs in this way.

What counts as “could not resolve it”

The user typedWhat happens
nothing yetAddress field only. No fallbacks.
an address we knowGreen badge, then Continue. No fallbacks.
an address we half knowBadge says “verify settings below”. Fallbacks open, because there has to be something below.
an address we do not knowFallbacks open.
a bare username, no @Fallbacks open. There is no domain to look up.
an outlook.com or Microsoft 365 addressDetection resolves it to outlook.office365.com, and the screen becomes the Microsoft sign-in panel by itself.

The last row is why the Microsoft link can hide. Detection already routes Microsoft mailboxes without it. The link is the fallback for a Microsoft mailbox that detection missed, and for nothing else.

The number behind it

Measured over the 30 days to 2026-08-06: 29 people opened this form and never pressed Test. Only 3 of them ever typed an address auto-detect could read, while 12 had already touched the protocol control. People were answering the technical question and leaving before the question that would have answered it for them.

What this mockup is not

A screenshot. It is hand-built from the branch markup, so spacing and font rendering are close but not pixel-exact, and no state is live. The third screen (Confirm) is unchanged by the PR, so it is not drawn here.

Built 2026-08-15 from fix/setup-ask-email-first · PR #101 · workplan UX-ConnectionSetupWizard (roadmap #103, Draft)