@rndmjoker/proton-mcp 0.4.4

package/dist/web/pages.js

@@ -0,0 +1,284 @@
+/**
+ * The pages that come before anybody is signed in.
+ *
+ * Rendered as strings rather than with a template engine: it keeps the
+ * dependency count at zero for something that handles credentials, and there are
+ * only a handful of pages.
+ *
+ * Everything that could come from outside goes through escapeHtml. The CSP would
+ * already stop injected script from doing anything, but not from making a mess of
+ * the page, and relying on a single layer is how holes happen.
+ *
+ * These three carry no navigation. There is nothing to navigate to yet, and a
+ * rail full of links that all lead back here would suggest otherwise. The
+ * sections that appear afterwards are in sections.ts, the frame they share in
+ * layout.ts.
+ */
+import { layout, escapeHtml, errorBanner } from './layout.js';
+import { EXPOSURE_LABELS, } from '../credentials/store.js';
+export { escapeHtml, formatDuration } from './layout.js';
+function exposureTag(exposure) {
+    return `<span class="tag exposure-${exposure}">${escapeHtml(EXPOSURE_LABELS[exposure])}</span>`;
+}
+/**
+ * One storage option, as a radio inside the sign-in form.
+ *
+ * It used to be a form of its own that posted the choice and re-rendered the
+ * page. That worked and read badly: picking one of four options reloaded
+ * everything, and a page that flashes on every click feels like something went
+ * wrong. Now the choice travels with the credentials in one submission, and
+ * nothing happens until Connect is pressed.
+ *
+ * The whole card is the label, so the click target is the card rather than a
+ * small circle. The radio itself stays a real radio: keyboard and screen readers
+ * get the ordinary control, and the styling is a ring around the card.
+ */
+function storeOption(store, suggested, chosen) {
+    const classes = ['option'];
+    if (!store.available)
+        classes.push('unavailable');
+    const id = `store-${store.kind}`;
+    return `<label class="${classes.join(' ')}" for="${id}">
+  <input type="radio" name="store" id="${id}" value="${escapeHtml(store.kind)}"
+         ${chosen ? 'checked' : ''} ${store.available ? '' : 'disabled'}>
+  <div class="option-body">
+    <header>
+      <h3>${escapeHtml(store.title)}</h3>
+      ${exposureTag(store.exposure)}
+      <span class="tag">prompts: ${escapeHtml(store.prompts)}</span>
+      ${suggested ? '<span class="tag suggested">suggested</span>' : ''}
+    </header>
+    <p class="hint">${escapeHtml(store.summary)}</p>
+    <p class="pro">${escapeHtml(store.benefit)}</p>
+    <p class="con">${escapeHtml(store.cost)}</p>
+    <p class="who">${escapeHtml(store.bestFor)}</p>
+    ${store.reason ? `<p class="blocked">${escapeHtml(store.reason)}</p>` : ''}
+  </div>
+</label>`;
+}
+/**
+ * The warning shown when the plain file is picked.
+ *
+ * The card already states the cost in one line, and one line is easy to read
+ * past when it sits between three other options. This one is in the way, which
+ * is the point: it is the only option that leaves a usable password where
+ * anything that can read your files can read it.
+ *
+ * It is not a refusal. The choice stays available and the warning closes, both
+ * because the trade is sometimes the right one and because nobody is served by
+ * a tool that decides for them. Shown and closed entirely in CSS, since there is
+ * no JavaScript here to open a dialog with.
+ */
+function plainFileWarning() {
+    return `<div class="warning-layer">
+  <label for="warning-seen" class="warning-backdrop" aria-hidden="true"></label>
+  <div class="warning-box">
+    <h3>The password will be readable</h3>
+    <p>A plain file keeps your Bridge password as text. The file is created with mode
+    <code>600</code>, so only your user account can read it, and that is the whole of the
+    protection: <strong>anything running as you can read it too</strong>, including a program
+    you did not mean to run.</p>
+    <p class="hint">The other three options all avoid this. The encrypted file works everywhere
+    the plain one does and asks for a master password once per start.</p>
+    <label for="warning-seen" class="warning-close">I understand, keep this option</label>
+  </div>
+</div>`;
+}
+/**
+ * The extra fields the encrypted file needs.
+ *
+ * Always in the document now, and shown by CSS when that option is selected.
+ * They used to be rendered only for that store, which meant selecting it had to
+ * reload the page to make them appear.
+ *
+ * Two fields rather than one: a mistyped master password that nothing anywhere
+ * can recover is worth one extra line of typing.
+ *
+ * They are not disabled while hidden, and that is deliberate. A hidden field
+ * submits its value, so a master password typed and then abandoned by switching
+ * options would still travel. The server ignores it for any other store, and
+ * ignoring it there is the one place that decision belongs.
+ */
+function masterPasswordFields() {
+    return `<div class="master-fields">
+  <label for="master">Master password for the encrypted file</label>
+  <input id="master" name="master" type="password" autocomplete="new-password">
+  <p class="hint">Chosen by you, and asked for again every time this server starts. It is not stored
+  anywhere: <strong>if you forget it, the saved Bridge password is gone</strong> and you have to
+  fetch it from the Bridge again.</p>
+
+  <label for="masterRepeat">Repeat the master password</label>
+  <input id="masterRepeat" name="masterRepeat" type="password" autocomplete="new-password">
+</div>`;
+}
+/**
+ * Where the Bridge is reached, folded away.
+ *
+ * Almost nobody needs it: the Bridge listens on 1143 and 1025 unless somebody
+ * changed that in the Bridge itself. But a wrong port looks exactly like a
+ * Bridge that is not running, and finding that out after signing in, in a
+ * different section, is a poor way to spend an evening. So it is here, prefilled
+ * with what the server will actually use, and closed.
+ *
+ * `<details>` rather than a scripted panel: it is the browser's own disclosure
+ * element and needs nothing this page cannot have.
+ *
+ * **The host is shown and not editable, and that is deliberate.** A wrong port
+ * means nothing works, which is obvious immediately. A wrong host means the
+ * Bridge password is handed to another machine at the next connection, which is
+ * obvious to nobody. Making it changeable is tracked in #19, where it will sit
+ * behind a key that never travels through a tool call, so that changing it stays
+ * a deliberate act by the person at the keyboard.
+ */
+function advancedSettings(data) {
+    const portFields = data.portsLocked
+        ? `<p class="hint">Both ports come from the environment
+    (<code>BRIDGE_IMAP_PORT</code>, <code>BRIDGE_SMTP_PORT</code>), so they are not changed here.
+    An explicit setting stays explicit.</p>
+    <table>
+      <tr><th>IMAP port</th><td>${escapeHtml(String(data.bridgeImapPort))}</td></tr>
+      <tr><th>SMTP port</th><td>${escapeHtml(String(data.bridgeSmtpPort))}</td></tr>
+    </table>`
+        : `<label for="imapPort">IMAP port</label>
+  <input id="imapPort" name="imapPort" type="text" inputmode="numeric"
+         value="${escapeHtml(String(data.bridgeImapPort))}">
+
+  <label for="smtpPort">SMTP port</label>
+  <input id="smtpPort" name="smtpPort" type="text" inputmode="numeric"
+         value="${escapeHtml(String(data.bridgeSmtpPort))}">
+  <p class="hint">The defaults are what the Bridge uses unless you changed them in the Bridge
+  itself, where you also find the real ones under its settings. They are saved along with the
+  sign-in and can be changed later under Bridge.</p>`;
+    return `<details class="card advanced"${data.showAdvanced ? ' open' : ''}>
+  <summary>Advanced: where the Bridge is reached</summary>
+
+  <label for="bridgeHostShown">Address of the Bridge</label>
+  <input id="bridgeHostShown" type="text" value="${escapeHtml(data.bridgeHost)}" disabled>
+  <p class="hint">Set with <code>BRIDGE_HOST</code> and not editable here yet. A wrong port means
+  nothing works and you notice at once; a wrong address means your Bridge password goes to another
+  machine and nobody notices at all. Making it changeable in the browser is planned, behind a key
+  that no assistant can reach.</p>
+
+  ${portFields}
+</details>`;
+}
+/**
+ * The sign-in form.
+ *
+ * One form for everything: the address, the password and where the password
+ * goes. Nothing is submitted until Connect is pressed, so choosing among the
+ * four options costs no round trip and the page does not move under the
+ * pointer.
+ *
+ * Two things appear and disappear with the selection, both in CSS: the master
+ * password fields for the encrypted file, and the warning for the plain file.
+ * See the stylesheet for how, and for what happens in a browser too old to do
+ * it.
+ */
+export function loginPage(data) {
+    const effective = data.chosen ?? data.suggested;
+    const options = data.stores
+        .map((store) => storeOption(store, store.kind === data.suggested, store.kind === effective))
+        .join('\n');
+    return layout({
+        title: 'Sign in',
+        section: 'none',
+        token: data.token,
+        disclaimer: data.disclaimer,
+        body: `<h1>Connect to Proton Mail Bridge</h1>
+<p class="lead">Enter the credentials the Bridge generated for your account. This page runs on your
+own machine and the password is never sent anywhere else.</p>
+
+${errorBanner(data.error)}
+
+<form method="post" action="/sign-in?token=${escapeHtml(data.token)}" class="sign-in">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrf)}">
+  <input type="checkbox" id="warning-seen" class="offscreen">
+
+<div class="card">
+  <label for="address">Proton address</label>
+  <input id="address" name="address" type="text" autocomplete="off" spellcheck="false"
+         value="${escapeHtml(data.address ?? '')}" placeholder="you@example.com">
+  <p class="hint">The address as it appears in the Bridge.</p>
+
+  <label for="password">Bridge password</label>
+  <input id="password" name="password" type="password" autocomplete="off">
+  <p class="hint"><strong>Not your Proton account password.</strong> The Bridge generates a separate
+  one per account. You find it in the Bridge application under the account, or by running
+  <code>protonmail-bridge --cli</code> and then <code>info</code>.</p>
+
+${masterPasswordFields()}
+</div>
+
+<h2>Where should the password be kept?</h2>
+<p class="lead">${escapeHtml(data.suggestionReason)}</p>
+${options}
+
+${advancedSettings(data)}
+
+<div class="card">
+  <button type="submit">Connect</button>
+  <p class="hint">Nothing is sent until you press this. The Bridge is asked whether the credentials
+  work before they are stored anywhere.</p>
+</div>
+
+${plainFileWarning()}
+</form>`,
+    });
+}
+/**
+ * Asked for when an encrypted credentials file exists but is not open yet.
+ *
+ * The counterpart to the sign-in form, and the reason the encrypted option is
+ * usable at all: after a restart the Bridge password is still on disk, so the
+ * only thing missing is the one password that decrypts it.
+ *
+ * It also offers the way out. Someone who forgot their master password cannot
+ * be left on a page that only accepts the thing they do not have.
+ */
+export function unlockPage(data) {
+    return layout({
+        title: 'Unlock',
+        section: 'none',
+        token: data.token,
+        disclaimer: data.disclaimer,
+        body: `<h1>Unlock the stored credentials</h1>
+<p class="lead">Your Bridge password is saved in an encrypted file. Enter the master password you
+chose for it and the server can connect again.</p>
+
+${errorBanner(data.error)}
+
+<div class="card">
+<form method="post" action="/unlock?token=${escapeHtml(data.token)}">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrf)}">
+  <label for="master">Master password</label>
+  <input id="master" name="master" type="password" autocomplete="current-password" autofocus>
+  <p class="hint">The file is at <code>${escapeHtml(data.path)}</code>. Nothing but this password
+  can open it, not even this server.</p>
+  <button type="submit">Unlock</button>
+</form>
+</div>
+
+<div class="card">
+<h2>Forgot the master password?</h2>
+<p>Then the file cannot be opened, by anyone. Throwing it away is the only way forward. You will
+have to look your Bridge password up in the Bridge again and sign in from scratch.</p>
+<form method="post" action="/discard-encrypted?token=${escapeHtml(data.token)}">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrfDiscard)}">
+  <button type="submit" class="danger">Delete the file and start over</button>
+</form>
+</div>`,
+    });
+}
+/** Shown when a request is rejected. Deliberately says little. */
+export function rejectionPage() {
+    return layout({
+        title: 'Not available',
+        section: 'none',
+        body: `<h1>Not available</h1>
+<p>This request was refused. Either the link is wrong or it has expired.</p>
+<p class="hint">The address for this interface is printed by the server when it asks you to sign in,
+and it changes every time the server restarts.</p>`,
+    });
+}
+//# sourceMappingURL=pages.js.map

package/dist/web/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.js","sourceRoot":"","sources":["../../src/web/pages.ts"],"names":[],"mappings":"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"}

package/dist/web/sections.d.ts

@@ -0,0 +1,105 @@
+/**
+ * The sections shown once somebody is signed in.
+ *
+ * One page each, rather than one long page with headings. The split is not
+ * cosmetic: it decides what is on screen without being asked for. Mailbox names
+ * had that treatment already, for reasons written at mailboxSection, and the
+ * same reasoning applies more weakly to everything else here. A page is also a
+ * place to put a setting, and the settings that limit what the agent may do are
+ * arriving next.
+ *
+ * The counterpart is pages.ts, which holds what comes before signing in.
+ */
+import { type DisclaimerState } from './layout.js';
+import type { StoreKind } from '../credentials/store.js';
+/** What every section needs to draw itself. */
+interface Common {
+    token: string;
+    error?: string;
+    notice?: string;
+    /**
+     * Required rather than optional on purpose. Forgetting it would make the
+     * notice quietly disappear, and a legal statement is not something to lose by
+     * omission.
+     */
+    disclaimer: DisclaimerState;
+}
+export interface OverviewData extends Common {
+    connected: boolean;
+    address?: string;
+    storeTitle?: string;
+    readOnly: boolean;
+    webPort: number;
+    uptimeMs: number;
+    mailboxCount?: number;
+    messageCount?: number;
+    unseenCount?: number;
+    bridgeHost: string;
+    bridgeImapPort: number;
+    bridgeSmtpPort: number;
+}
+/**
+ * The first page, and the only one that answers "is this working".
+ *
+ * It carries state and no controls. Every button lives in the section it belongs
+ * to, so that a page somebody opens to check something cannot be the page where
+ * they change it by accident.
+ */
+export declare function overviewSection(data: OverviewData): string;
+export interface BridgeData extends Common {
+    csrfSettings: string;
+    csrfTest: string;
+    bridgeHost: string;
+    bridgeImapPort: number;
+    bridgeSmtpPort: number;
+    /** True when the port came from the environment and cannot be changed here. */
+    portsLocked: boolean;
+    certificate?: {
+        fingerprint: string;
+        subject: string;
+        firstSeen: string;
+    };
+}
+/** Ports, the pinned certificate, and the button that tries the Bridge. */
+export declare function bridgeSection(data: BridgeData): string;
+export interface CredentialsData extends Common {
+    csrfSignOut: string;
+    address?: string;
+    storeKind?: StoreKind;
+    storeTitle?: string;
+}
+/** Where the Bridge password is kept, and the way to take it back out. */
+export declare function credentialsSection(data: CredentialsData): string;
+export interface ActivityData extends Common {
+    /** Calls in progress, so a slow search is visibly a slow search. */
+    running: Array<{
+        tool: string;
+        forMs: number;
+    }>;
+    /** Finished calls, newest first. */
+    recent: Array<{
+        tool: string;
+        at: number;
+        durationMs: number;
+        outcome: 'ok' | 'failed';
+    }>;
+}
+/** What the server has been doing, in tool names and timings and nothing else. */
+export declare function activitySection(data: ActivityData): string;
+export interface MailboxData extends Common {
+    mailboxes: Array<{
+        path: string;
+        kind: 'system' | 'folder' | 'label';
+        selectable: boolean;
+    }>;
+}
+/**
+ * The folders and labels, on their own page.
+ *
+ * Its own page because of what these names are. They belong to the Proton
+ * account, not the address that signed in, so this is the full structure of the
+ * account even when the mail in it is invisible. Showing that as part of an
+ * answer nobody asked for would hand it over unasked.
+ */
+export declare function mailboxSection(data: MailboxData): string;
+export {};

package/dist/web/sections.js

@@ -0,0 +1,207 @@
+/**
+ * The sections shown once somebody is signed in.
+ *
+ * One page each, rather than one long page with headings. The split is not
+ * cosmetic: it decides what is on screen without being asked for. Mailbox names
+ * had that treatment already, for reasons written at mailboxSection, and the
+ * same reasoning applies more weakly to everything else here. A page is also a
+ * place to put a setting, and the settings that limit what the agent may do are
+ * arriving next.
+ *
+ * The counterpart is pages.ts, which holds what comes before signing in.
+ */
+import { layout, escapeHtml, formatDuration, errorBanner, noticeBanner, } from './layout.js';
+/** A wall-clock time, local to whoever is looking at the page. */
+function formatTime(at) {
+    return new Date(at).toLocaleTimeString();
+}
+/** A row of the definition tables that carry most of the state here. */
+function row(key, value, raw = false) {
+    return `<tr><th>${escapeHtml(key)}</th><td>${raw ? value : escapeHtml(value)}</td></tr>`;
+}
+function frame(section, title, data, body) {
+    return layout({
+        title,
+        section,
+        token: data.token,
+        disclaimer: data.disclaimer,
+        body: `${errorBanner(data.error)}${noticeBanner(data.notice)}${body}`,
+    });
+}
+/**
+ * The first page, and the only one that answers "is this working".
+ *
+ * It carries state and no controls. Every button lives in the section it belongs
+ * to, so that a page somebody opens to check something cannot be the page where
+ * they change it by accident.
+ */
+export function overviewSection(data) {
+    const connection = data.connected
+        ? '<span class="state good">connected</span>'
+        : '<span class="state bad">not connected</span>';
+    const rows = [
+        row('Connection', connection, true),
+        row('Address', data.address ?? 'not signed in'),
+        row('Credentials kept in', data.storeTitle ?? 'nowhere yet'),
+        row('Mode', data.readOnly ? 'read-only, nothing can be changed or sent' : 'read and write'),
+        row('Bridge IMAP', `${data.bridgeHost}:${data.bridgeImapPort}`),
+        row('Bridge SMTP', `${data.bridgeHost}:${data.bridgeSmtpPort}`),
+        row('This interface', `127.0.0.1:${data.webPort}`),
+        row('Server running for', formatDuration(data.uptimeMs)),
+    ];
+    const counters = [];
+    if (data.mailboxCount !== undefined)
+        counters.push(row('Mailboxes', String(data.mailboxCount)));
+    if (data.messageCount !== undefined) {
+        const unseen = data.unseenCount === undefined ? '' : ` (${data.unseenCount} unread)`;
+        counters.push(row('Messages in inbox', `${data.messageCount}${unseen}`));
+    }
+    return frame('overview', 'Overview', data, `<h1>Overview</h1>
+<p class="lead">What this server currently knows. No message content is shown anywhere in this
+interface: it is for configuration and state, not a mail client.</p>
+
+<div class="card"><table>${rows.join('\n')}</table></div>
+${counters.length > 0 ? `<h2>Mailbox counts</h2>\n<div class="card"><table>${counters.join('\n')}</table></div>` : ''}`);
+}
+/** Ports, the pinned certificate, and the button that tries the Bridge. */
+export function bridgeSection(data) {
+    const ports = data.portsLocked
+        ? `<p class="hint">The ports come from the environment (<code>BRIDGE_IMAP_PORT</code> or
+    <code>BRIDGE_SMTP_PORT</code>), so they are not changed here. An explicit setting stays
+    explicit.</p>`
+        : `<form method="post" action="/settings?token=${escapeHtml(data.token)}">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrfSettings)}">
+  <label for="imapPort">IMAP port</label>
+  <input id="imapPort" name="imapPort" type="text" inputmode="numeric"
+         value="${escapeHtml(String(data.bridgeImapPort))}">
+  <label for="smtpPort">SMTP port</label>
+  <input id="smtpPort" name="smtpPort" type="text" inputmode="numeric"
+         value="${escapeHtml(String(data.bridgeSmtpPort))}">
+  <p class="hint">The Bridge lets you change these, so a wrong value here looks exactly like a Bridge
+  that is not running. You find the real ones in the Bridge under settings. The host is not
+  changeable here on purpose: it would be a field that sends your Bridge password to another
+  machine.</p>
+  <button type="submit">Save ports</button>
+</form>`;
+    const certificate = data.certificate
+        ? `<div class="card">
+<table>
+${row('Fingerprint (SHA-256)', `<code>${escapeHtml(data.certificate.fingerprint)}</code>`, true)}
+${row('Subject', data.certificate.subject)}
+${row('First seen', data.certificate.firstSeen.slice(0, 10))}
+</table>
+<p class="hint">The Bridge signs its own certificate, so it was recorded on first use and is checked
+against that record every time. If it ever changes, the server refuses to connect rather than hand
+your password to whatever is answering on that port.</p>
+</div>`
+        : `<div class="card"><p class="hint">Nothing recorded yet. The certificate is read and pinned on the
+first connection to the Bridge.</p></div>`;
+    return frame('bridge', 'Bridge', data, `<h1>Bridge</h1>
+<p class="lead">Where the Proton Mail Bridge is reached, and the certificate this server holds it
+to. The host stays at <code>${escapeHtml(data.bridgeHost)}</code> and cannot be changed here.</p>
+
+<h2>Connection test</h2>
+<div class="card">
+<form method="post" action="/test-connection?token=${escapeHtml(data.token)}">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrfTest)}">
+  <p>Checks that the Bridge answers on the ports below and accepts the stored credentials.</p>
+  <button type="submit">Test the connection</button>
+</form>
+</div>
+
+<h2>Ports</h2>
+<div class="card">${ports}</div>
+
+<h2>Certificate</h2>
+${certificate}`);
+}
+/** Where the Bridge password is kept, and the way to take it back out. */
+export function credentialsSection(data) {
+    return frame('credentials', 'Credentials', data, `<h1>Credentials</h1>
+<p class="lead">The Bridge password this server signs in with, and where it is kept between
+restarts.</p>
+
+<div class="card"><table>
+${row('Signed in as', data.address ?? 'not signed in')}
+${row('Kept in', data.storeTitle ?? 'nowhere yet')}
+</table></div>
+
+<h2>Sign out</h2>
+<div class="card">
+<form method="post" action="/sign-out?token=${escapeHtml(data.token)}">
+  <input type="hidden" name="csrf" value="${escapeHtml(data.csrfSignOut)}">
+  <p>Removes the stored credentials from wherever they are kept, everywhere at once, and
+  disconnects.</p>
+  <button type="submit" class="danger">Sign out and forget credentials</button>
+</form>
+</div>`);
+}
+/** What the server has been doing, in tool names and timings and nothing else. */
+export function activitySection(data) {
+    const running = data.running.length === 0
+        ? '<p class="hint">Nothing running right now.</p>'
+        : `<table>
+  <tr><th>In progress</th><th>Running for</th></tr>
+  ${data.running
+            .map((call) => `<tr><td><code>${escapeHtml(call.tool)}</code></td><td>${escapeHtml(formatDuration(call.forMs))}</td></tr>`)
+            .join('\n  ')}
+</table>
+<p class="hint">A full-text search over a large mailbox takes a few seconds. This is how you tell
+that apart from a server that has stopped answering.</p>`;
+    const recent = data.recent.length === 0
+        ? '<p class="hint">No tool has been called yet in this session.</p>'
+        : `<table>
+  <tr><th>Tool</th><th>When</th><th>Took</th><th>Result</th></tr>
+  ${data.recent
+            .map((call) => `<tr><td><code>${escapeHtml(call.tool)}</code></td><td>${escapeHtml(formatTime(call.at))}</td>` +
+            `<td>${escapeHtml(formatDuration(call.durationMs))}</td>` +
+            `<td>${call.outcome === 'ok' ? 'ok' : 'failed'}</td></tr>`)
+            .join('\n  ')}
+</table>`;
+    return frame('activity', 'Activity', data, `<h1>Activity</h1>
+<p class="lead">Which tools were called and how long they took. This is the record of what an
+assistant did with the connection.</p>
+
+<h2>Right now</h2>
+<div class="card">${running}</div>
+
+<h2>Finished calls</h2>
+<div class="card">
+${recent}
+<p class="hint">Tool names and timings only. What was searched for, which message was read and which
+mailbox was opened are deliberately not recorded: that would turn this page into a log of your mail
+habits.</p>
+</div>`);
+}
+/**
+ * The folders and labels, on their own page.
+ *
+ * Its own page because of what these names are. They belong to the Proton
+ * account, not the address that signed in, so this is the full structure of the
+ * account even when the mail in it is invisible. Showing that as part of an
+ * answer nobody asked for would hand it over unasked.
+ */
+export function mailboxSection(data) {
+    const groups = [
+        ['system', 'System mailboxes'],
+        ['folder', 'Folders'],
+        ['label', 'Labels'],
+    ];
+    const sections = groups
+        .map(([kind, heading]) => {
+        const part = data.mailboxes.filter((m) => m.kind === kind && m.selectable);
+        if (part.length === 0)
+            return '';
+        return `<h2>${escapeHtml(heading)} (${part.length})</h2>
+<div class="card"><table>
+${part.map((m) => `<tr><td><code>${escapeHtml(m.path)}</code></td></tr>`).join('\n')}
+</table></div>`;
+    })
+        .filter(Boolean)
+        .join('\n');
+    return frame('mailboxes', 'Folders and labels', data, `<h1>Folders and labels</h1>
+<p class="lead">Names only, never contents. Proton distinguishes folders, where a message lives in
+exactly one, from labels, where it can carry any number.</p>
+${sections || '<div class="card"><p class="hint">No mailboxes were returned.</p></div>'}`);
+}
+//# sourceMappingURL=sections.js.map

package/dist/web/sections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections.js","sourceRoot":"","sources":["../../src/web/sections.ts"],"names":[],"mappings":"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"}