Merge pull request 'docs(email): update Create an email account for the tabbed layout' (#4) from docs/email-tabs into main

Reviewed-on: #4

src/content/docs/whp/how-to/create-an-email-account.mdx

@@ -23,14 +23,14 @@ import Support from '~/content/partials/support-link.mdx';
 
 <Steps>
 
-1. In the sidebar, click **Email**.
-   ![WHP Email Management page](~/assets/screenshots/whp/whp-email.png)
+1. In the sidebar, click **Email**. The page is organized into tabs — **Email Accounts**, **Forwarders**, and **Email Domains (DNS)** — and opens on **Email Accounts**. The buttons along the top (**Webmail**, **Admin Panel**, **Setup Instructions**) open the mail server's web tools in a new tab.
+   ![The WHP Email page on the Email Accounts tab, showing the tab bar and the top access buttons](~/assets/screenshots/whp/whp-email.png)
 
-2. Scroll to **Email Accounts** and use the form to create a new account on one of your domains. You'll be asked for the domain, the local part, a password, and an optional mailbox size cap.
+2. On the **Email Accounts** tab, click **Create Email Account** to open the new-account form. You'll be asked for the domain, the local part, a password, and an optional mailbox size cap.
 
 3. Set a **strong password** — at least 12 characters with a mix of upper case, lower case, numbers, and symbols. Email accounts are common attack targets.
 
-4. Click **Create**. The new account appears in the **Email Accounts** list.
+4. Click **Create Account**. The new account appears in the **Email Accounts** list.
 
 </Steps>
 
@@ -42,9 +42,9 @@ Most modern mail apps — Outlook, Apple Mail, Thunderbird, and the iOS and Andr
 
 ### If your DNS is hosted elsewhere
 
-If your domain's DNS lives at another provider (Cloudflare, GoDaddy, Namecheap, and so on), your mail app can't auto-configure until you add a few records there yourself. The Email page builds the exact records for you: open the **Mail Client Setup** section, pick the domain, and copy them in.
+If your domain's DNS lives at another provider (Cloudflare, GoDaddy, Namecheap, and so on), your mail app can't auto-configure until you add a few records there yourself. The Email page builds the exact records for you: open the **Email Domains (DNS)** tab, find **Autodiscovery Records (DNS)**, pick the domain, and copy them in.
 
-![The Mail Client Setup section on the WHP Email page, showing autodiscovery DNS records for a domain](~/assets/screenshots/whp/whp-email-autodiscovery.png)
+![The Autodiscovery Records (DNS) section on the Email Domains (DNS) tab, showing autodiscovery DNS records for a domain](~/assets/screenshots/whp/whp-email-autodiscovery.png)
 
 Add these records to the domain's zone at your DNS provider. The names are **relative to your domain** — most providers fill in the rest automatically, so `autoconfig` becomes `autoconfig.example.com`.
 
@@ -56,7 +56,7 @@ Add these records to the domain's zone at your DNS provider. The names are **rel
 | SRV | `_submission._tcp` | 0 | 1 | 587 | your mail server |
 | SRV | `_pop3s._tcp` | 0 | 1 | 995 | your mail server |
 
-Use the **mail server hostname shown in the Mail Client Setup section** as the value — it's the same host your **MX** record points at. The `_pop3s` record is only needed if you read mail over POP3 instead of IMAP. Click **Copy records** to grab them all at once in zone-file format.
+Use the **mail server hostname shown in the Autodiscovery Records (DNS) section** as the value — it's the same host your **MX** record points at. The `_pop3s` record is only needed if you read mail over POP3 instead of IMAP. Click **Copy records** to grab them all at once in zone-file format.
 
 <Aside type="tip">
   If your provider has a proxy toggle (such as Cloudflare's orange cloud), keep these records **DNS only** — proxying them stops mail clients from reading them.
@@ -68,7 +68,7 @@ Use the **mail server hostname shown in the Mail Client Setup section** as the v
 
 ## Set up your email client
 
-Most apps configure themselves from the records above once you enter your address and password. If yours doesn't support that — or you'd rather enter the settings by hand — the exact IMAP, POP3, and SMTP hostnames are listed on the Email page: click **Setup Instructions → View Instructions** under **Mail Server Access** for a step-by-step that includes the right hostnames, ports, and security settings for your server.
+Most apps configure themselves from the records above once you enter your address and password. If yours doesn't support that — or you'd rather enter the settings by hand — the exact IMAP, POP3, and SMTP hostnames are listed on the Email page: click **Setup Instructions** at the top of the page for a step-by-step that includes the right hostnames, ports, and security settings for your server.
 
 The typical settings look like this; substitute the hostname shown in the Setup Instructions:
 
@@ -92,21 +92,21 @@ For per-client walkthroughs (Outlook, Apple Mail, Thunderbird, etc.), see the Em
 
 ## Webmail
 
-Click **Webmail Access → Open Webmail** on the Email page to sign in to webmail in a new tab.
+Click **Webmail** at the top of the Email page to sign in to webmail in a new tab.
 
 ## Verify it worked
 
 Send yourself a test message from another account (your personal Gmail, for example). It should arrive within a minute or two and be retrievable from both your client and webmail.
 
 <Aside type="caution">
-  **SPF and DKIM records matter.** Without them, your outgoing mail will get flagged or rejected by other providers. We add an SPF record automatically when you add a domain. DKIM records are listed in the **DKIM Records** section near the bottom of the Email page — make sure they're present at your registrar if the domain isn't using our nameservers.
+  **SPF and DKIM records matter.** Without them, your outgoing mail will get flagged or rejected by other providers. We add an SPF record automatically when you add a domain. DKIM records are listed in the **DKIM Management** section on the **Email Domains (DNS)** tab — make sure they're present at your registrar if the domain isn't using our nameservers.
 </Aside>
 
 ## Troubleshooting
 
 **Webmail isn't reachable.** DNS for the mail subdomain may still be propagating — wait an hour and try again.
 
-**Outgoing mail is bouncing or going to spam.** Check the SPF and DKIM records. The DKIM Records panel on the Email page shows whether DKIM is configured for each of your domains.
+**Outgoing mail is bouncing or going to spam.** Check the SPF and DKIM records. The **DKIM Management** section on the **Email Domains (DNS)** tab shows whether DKIM is configured for each of your domains.
 
 **Client can connect on IMAP but not SMTP.** Some ISPs and corporate networks block outgoing port 587. Try sending from a different network to confirm; if the issue is your network, your ISP is the place to ask.
 

tools/screenshots/capture-email.ts

@@ -1,16 +1,21 @@
 /**
- * Email capture — the customer "Mail Client Setup" section on the Email page.
+ * Email capture — the tabbed Email Management page, as the demo customer.
  *
- * Captures, as the demo customer:
- *   - whp-email-autodiscovery.png   the Mail Client Setup accordion section,
- *                                   expanded, with the per-domain autodiscovery
- *                                   DNS records table + copyable zone block.
+ * Captures:
+ *   - whp-email.png                 the Email page on its default "Email Accounts"
+ *                                   tab: the top button strip (Webmail / Admin
+ *                                   Panel / Setup Instructions) + the tab bar
+ *                                   (Email Accounts · Forwarders · Email Domains
+ *                                   (DNS)) + the Email Accounts card.
+ *   - whp-email-autodiscovery.png   the "Autodiscovery Records (DNS)" card on the
+ *                                   "Email Domains (DNS)" tab: the per-domain
+ *                                   autodiscovery DNS records table + copyable zone.
  *
- * Viewport-only (1440x900), redacted for our multi-server fleet: the mail-server
- * hostname becomes a neutral placeholder, while the brand demo domain
- * (whp-demo.anhh.co) is kept visible on purpose.
+ * Viewport-only (1440x900, deviceScaleFactor 2), redacted for our multi-server
+ * fleet: server/mail hostnames + IPs become placeholders, while the brand demo
+ * domain (whp-demo.anhh.co) is kept visible on purpose.
  *
- * Read-only: expands an accordion section for the screenshot, never saves.
+ * Read-only: switches tabs / selects a domain for the shot, never saves.
  */
 import { chromium, type Page } from 'playwright';
 import { mkdir } from 'node:fs/promises';
@@ -42,8 +47,9 @@ async function login(page: Page) {
 
 /**
  * Neutralise fleet-identifying text before the screenshot. The brand demo
- * domain (anhh.co) is intentionally preserved; the mail-server host and any
- * server hostnames/IPs are swapped for placeholders.
+ * domain (anhh.co) is intentionally preserved; mail/server hosts and IPs are
+ * swapped for placeholders. Inline only — no named helpers inside evaluate
+ * (esbuild's __name instrumentation isn't defined in the browser context).
  */
 async function redact(page: Page) {
   await page.addStyleTag({ content: HIDE_CSS });
@@ -79,24 +85,36 @@ async function main() {
   try {
     await login(page);
     await page.goto(`${BASE}/index.php?page=email-management`, { waitUntil: 'networkidle' });
+    await page.waitForSelector('#email-mgmt-nav', { state: 'visible' });
 
-    // Expand the (collapsed-by-default) "Mail Client Setup" accordion section.
-    await page.locator('button[data-bs-target="#mail-client-setup"]').click();
+    // --- Shot 1: the default Email Accounts tab (orientation) ---
+    await page.waitForTimeout(300);
+    await redact(page);
+    await page.evaluate(() => window.scrollTo(0, 0));
+    const mainPath = resolve(OUT_DIR, 'whp-email.png');
+    await page.screenshot({ path: mainPath }); // viewport-only, no chrome
+    console.log(`captured whp-email -> ${mainPath}`);
+
+    // --- Shot 2: the Autodiscovery Records (DNS) card on the DNS tab ---
+    await page.locator('#email-mgmt-nav button[data-bs-target="#email-mgmt-dns"]').click();
     await page.waitForSelector('#custMailDnsDomain', { state: 'visible' });
-    // The zone <pre> is populated on DOMContentLoaded; re-run to be safe.
+    // Ensure a domain is selected, then (re)render the zone block.
     await page.evaluate(() => {
+      const sel = document.getElementById('custMailDnsDomain') as HTMLSelectElement | null;
+      if (sel && sel.selectedIndex < 0 && sel.options.length) sel.selectedIndex = 0;
       const fn = (window as unknown as { renderCustMailDns?: () => void }).renderCustMailDns;
       if (typeof fn === 'function') fn();
     });
     await page.waitForTimeout(500);
+    await redact(page); // re-run: tab content rendered after the first pass
 
-    await redact(page);
-    const item = page.locator('#mail-client-setup').locator('xpath=ancestor::div[contains(@class,"accordion-item")]');
-    await item.scrollIntoViewIfNeeded();
+    // The autodiscovery section is the .card wrapping the domain <select>.
+    const card = page.locator('#custMailDnsDomain').locator('xpath=ancestor::div[contains(@class,"card")][1]');
+    await card.scrollIntoViewIfNeeded();
     await page.waitForTimeout(300);
-    const path = resolve(OUT_DIR, 'whp-email-autodiscovery.png');
-    await item.screenshot({ path });
-    console.log(`captured whp-email-autodiscovery -> ${path}`);
+    const autoPath = resolve(OUT_DIR, 'whp-email-autodiscovery.png');
+    await card.screenshot({ path: autoPath });
+    console.log(`captured whp-email-autodiscovery -> ${autoPath}`);
   } finally {
     await browser.close();
   }