accounts

Summary

Connect or disconnect OAuth login providers.

Raw wireframe

• .context/designs/web/settings/accounts.html

Why it is drawn this way

Google is the only provider. OAUTH_PROVIDERS has one entry. Its icon is lucide Mail on solid red, not a Google mark.

Drawn connected. The row shows "Connected as {providerAccountId}" — the provider's account id, not an email — and the connect date. Not connected shows "Not connected" and an outline Connect button.

The dialog prints the lowercase id. handleDisconnectClick(provider.id) passes "google", so the title reads "Disconnect google?" and the toast "google account disconnected".

The info card stays light in dark mode. border-blue-200 bg-blue-50 and its text carry no dark: classes. The drawing uses tokens, so its dark preview is darker than the app.

"At least one login method" is not enforced here. The page shows the sentence; any check is the server's.

Not drawn. Loading is a LoadingSpinner; error is an ErrorCard titled "Error loading accounts".

Related

• user-menu
• sessions
• confirm-dialogs
• oauth-callback

Sources

• apps/website/src/app/settings/accounts/page.tsx
• packages/ui/src/hooks/use-auth.ts