cloud-hosting-platform/kb-anhonesthost
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(email): update Create an email account for the new tabbed layout

Browse Source 
The Email page is now organized into tabs (Email Accounts / Forwarders /
Email Domains (DNS)) with a top button strip (Webmail / Admin Panel /
Setup Instructions). Reworked the how-to to match:
- orient readers to the tabs + top buttons; create on the Email Accounts tab
- autodiscovery records now live in Email Domains (DNS) → Autodiscovery
  Records (DNS) (was "Mail Client Setup")
- DKIM is in the DKIM Management section on the Email Domains (DNS) tab
- Webmail / Setup Instructions are the top-strip buttons

Recaptured whp-email.png (Email Accounts tab) and whp-email-autodiscovery.png
(DNS tab) via the rewritten capture-email.ts (clicks the DNS tab; fleet
hostnames/IPs redacted, brand demo domain kept).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Josh
2026-06-23 14:49:33 -07:00
parent a6269d18fd
commit f1159867df
4 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/screenshots/capture-email.ts
+38 -20
View File
@@ -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();
}