domma-cms 1.6.34 → 1.6.36

package/plugins/shopping-cart/plugin.public.js

@@ -6,6 +6,8 @@
  *   /shop/<slug>           one product
  *   /shop/cart             the basket and checkout, one page
  *   /shop/order/<id>?t=    a shopper's receipt
+ *   /shop/account          a customer's account: sign in, create one, details, addresses, orders (settings.accounts)
+ *   /shop/account/confirm?u=&t=  /shop/account/reset?t=   the links emailed to them
  *
  * Like the Blog, the pages are answered from ONE onRequest hook matching the
  * address as it is saved NOW, so moving the shop needs no restart. Every page
@@ -16,7 +18,7 @@ import {fileURLToPath} from 'url';
 import {renderBlogPage} from '../../server/services/renderer.js';
 import {parseMarkdown} from '../../server/services/markdown.js';
 import {byShelf, safeImage} from './public/lib/products.js';
-import {cartHtml, esc, productHtml, receiptHtml, scriptJson, storefrontHtml} from './lib/render.js';
+import {accountHtml, cartHtml, esc, productHtml, receiptHtml, scriptJson, storefrontHtml} from './lib/render.js';
 import {allProducts, getOrder, liveSettings, publicOrder, tokenOk} from './lib/shop.js';
 import {cartRegistry} from './lib/extensions.js';
 
@@ -31,6 +33,8 @@ export function matchShopPath(pathname, base) {
     try { parts = pathname.slice(base.length + 1).split('/').map(decodeURIComponent); } catch { return null; }
     if (parts.length === 1 && parts[0] === '') return {name: 'slash', params: {}};
     if (parts.length === 1 && (parts[0] === 'cart' || parts[0] === 'checkout' || parts[0] === 'basket')) return {name: 'cart', params: {}};
+    // Before products: a product called "account" would otherwise take the page.
+    if (parts[0] === 'account' && parts.length <= 2 && ['', 'confirm', 'reset'].includes(parts[1] || '')) return {name: 'account', params: {view: parts[1] || 'account'}};
     if (parts.length === 2 && parts[0] === 'order' && /^[\w-]{8,64}$/.test(parts[1])) return {name: 'order', params: {id: parts[1]}};
     if (parts.length === 1 && /^[a-z0-9-]{1,80}$/.test(parts[0])) return {name: 'product', params: {slug: parts[0]}};
     return null;
@@ -112,6 +116,18 @@ export default async function shopPublic(fastify) {
             });
         },
 
+        async account(request, reply, s, {view}) {
+            if (!s.accounts) return null;
+            return send(reply, request, s, {
+                page: 'account',
+                body: accountHtml({settings: s, view}),
+                title: view === 'reset' ? 'Set a new password' : view === 'confirm' ? 'Confirm your account' : `Your account - ${s.shopTitle || 'Shop'}`,
+                urlPath: `${s.shopPath}/account`,
+                noindex: true,
+                extra: {account: {view}}
+            });
+        },
+
         async order(request, reply, s, {id}) {
             let entry = await getOrder(id);
             if (!entry || !tokenOk(entry, request.query?.t)) return null;

package/plugins/shopping-cart/public/account.js

@@ -0,0 +1,277 @@
+/**
+ * Customer accounts in the browser (loaded by cart.js on the account pages, and on a receipt that offers to make
+ * one): sign in, create an account, forgotten password; signed in - details, saved addresses, orders (with what
+ * extensions add beside each: Takeaway's Reorder), sign out, delete my account. The confirm and reset links
+ * emailed to customers land on /account/confirm and /account/reset.
+ *
+ * @module shopping-cart/public/account
+ */
+import {formatMoney} from './lib/money.js';
+import {COUNTRIES, STATUS_PUBLIC} from './lib/orders.js';
+import {account, me, signIn, signOut, signedIn} from './lib/session.js';
+
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const el = (html) => { const t = document.createElement('template'); t.innerHTML = html.trim(); return t.content.firstElementChild; };
+const params = new URLSearchParams(location.search);
+const config = (() => { try { return JSON.parse(document.getElementById('dm-shop-config')?.textContent || '{}'); } catch { return {}; } })();
+const shopPath = config.shopPath || '/shop';
+const dmy = (iso) => { const d = new Date(iso); return Number.isNaN(d.getTime()) ? '' : `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`; };
+
+/** A form's error line. */
+const say = (box, msg, good = false) => { box.textContent = msg; box.hidden = !msg; box.classList.toggle('is-good', good); };
+async function busy(btn, fn) {
+    const was = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = 'One moment…';
+    try { return await fn(); } finally { btn.disabled = false; btn.textContent = was; }
+}
+
+// ---- Signed out: sign in, create, forgotten -----------------------------------------------------
+
+function signedOutView(body, {email = '', notice = ''} = {}) {
+    body.innerHTML = '';
+    const view = el(`<div class="shop-acc">
+  ${notice ? `<p class="shop-acc-note is-good">${esc(notice)}</p>` : ''}
+  <div class="shop-seg" role="tablist"><button type="button" data-tab="in" class="is-on">Sign in</button><button type="button" data-tab="new">Create an account</button></div>
+  <form class="shop-acc-form" data-form="in" novalidate>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <label class="shop-field"><span>Password</span><input name="password" type="password" autocomplete="current-password" required></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Sign in</button>
+    <button type="button" class="shop-linkbtn" data-forgot>Forgotten your password?</button>
+  </form>
+  <form class="shop-acc-form" data-form="new" novalidate hidden>
+    <p class="shop-muted">Your details are filled in when you check out, and your orders are listed here. You can still check out as a guest.</p>
+    <label class="shop-field"><span>Name</span><input name="name" autocomplete="name" required maxlength="120"></label>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <label class="shop-field"><span>Password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" required minlength="8"></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Create my account</button>
+  </form>
+  <form class="shop-acc-form" data-form="forgot" novalidate hidden>
+    <p class="shop-muted">We will email you a link to set a new password.</p>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Send the link</button>
+    <button type="button" class="shop-linkbtn" data-back>Back to sign in</button>
+  </form>
+</div>`);
+    body.appendChild(view);
+    const show = (key) => {
+        for (const f of view.querySelectorAll('[data-form]')) f.hidden = f.dataset.form !== key;
+        for (const b of view.querySelectorAll('[data-tab]')) b.classList.toggle('is-on', b.dataset.tab === key);
+        view.querySelector(`[data-form="${key}"] input`)?.focus();
+    };
+    for (const f of view.querySelectorAll('input[name="email"]')) f.value = email;
+    view.querySelectorAll('[data-tab]').forEach(b => b.addEventListener('click', () => show(b.dataset.tab)));
+    view.querySelector('[data-forgot]').addEventListener('click', () => { view.querySelector('[data-form="forgot"] [name="email"]').value = view.querySelector('[data-form="in"] [name="email"]').value; show('forgot'); });
+    view.querySelector('[data-back]').addEventListener('click', () => show('in'));
+
+    view.querySelector('[data-form="in"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        const err = f.querySelector('[data-err]');
+        say(err, '');
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => signIn(f.email.value.trim(), f.password.value));
+            await render();
+        } catch (ex) {
+            say(err, ex.status === 401 || ex.status === 400 ? 'That email and password do not match an account - or the account is not confirmed yet.' : ex.message);
+        }
+    });
+    view.querySelector('[data-form="new"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        const err = f.querySelector('[data-err]');
+        say(err, '');
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => account.register({name: f.name.value, email: f.email.value.trim(), password: f.password.value}));
+            f.innerHTML = `<p class="shop-acc-note is-good">Nearly there - we have emailed <strong>${esc(f.email.value.trim())}</strong> a link to confirm your account. It works for 48 hours.</p>`;
+        } catch (ex) { say(err, ex.message); }
+    });
+    view.querySelector('[data-form="forgot"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => account.forgot(f.email.value.trim()));
+            f.innerHTML = '<p class="shop-acc-note is-good">If there is an account with that email, a link to set a new password is on its way.</p>';
+        } catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+    if (params.get('join') === '1') show('new');
+}
+
+// ---- Signed in: details, addresses, orders ------------------------------------------------------
+
+const addressText = (a) => [a.line1, a.line2, a.city, a.postcode].filter(Boolean).join(', ');
+
+function signedInView(body, me) {
+    let addresses = me.addresses.map(a => ({...a}));
+    body.innerHTML = '';
+    const countries = Object.entries(COUNTRIES).map(([c, n]) => `<option value="${c}">${esc(n)}</option>`).join('');
+    const view = el(`<div class="shop-acc is-in">
+  <p class="shop-muted">Signed in as <strong>${esc(me.email)}</strong> · <button type="button" class="shop-linkbtn" data-out>Sign out</button></p>
+  <section class="shop-acc-card"><h2>Your orders</h2><div data-orders></div></section>
+  <section class="shop-acc-card"><h2>Your details</h2>
+    <form data-details novalidate>
+      <label class="shop-field"><span>Name</span><input name="name" autocomplete="name" maxlength="120"></label>
+      <label class="shop-field"><span>Phone</span><input name="phone" type="tel" autocomplete="tel" maxlength="40"></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-pay-btn">Save</button>
+    </form>
+  </section>
+  <section class="shop-acc-card"><h2>Saved addresses</h2><ul class="shop-acc-addrs" data-addrs></ul>
+    <button type="button" class="shop-linkbtn" data-add>Add an address</button>
+    <form class="shop-acc-addr" data-addr-form hidden novalidate>
+      <input type="hidden" name="id">
+      <label class="shop-field"><span>Label <em>optional</em></span><input name="label" maxlength="40" placeholder="Home, Work…"></label>
+      <label class="shop-field"><span>Address</span><input name="line1" autocomplete="address-line1" maxlength="160"></label>
+      <label class="shop-field"><span class="sr-only">Address line 2</span><input name="line2" autocomplete="address-line2" maxlength="160" placeholder="Flat, building (optional)"></label>
+      <label class="shop-field"><span>Town or city</span><input name="city" autocomplete="address-level2" maxlength="100"></label>
+      <label class="shop-field"><span>Postcode</span><input name="postcode" autocomplete="postal-code" maxlength="20"></label>
+      <label class="shop-field"><span>Country</span><select name="country">${countries}</select></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-pay-btn">Save address</button> <button type="button" class="shop-linkbtn" data-cancel>Cancel</button>
+    </form>
+  </section>
+  <details class="shop-acc-card shop-acc-danger"><summary>Delete my account</summary>
+    <form data-delete novalidate><p class="shop-muted">Your sign-in and saved details go. Orders you have placed stay with the shop as a record of the sale.</p>
+      <label class="shop-field"><span>Your password, to confirm</span><input name="password" type="password" autocomplete="current-password"></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-linkbtn is-danger">Delete my account</button></form>
+  </details>
+</div>`);
+    body.appendChild(view);
+    const details = view.querySelector('[data-details]');
+    details.name.value = me.name;
+    details.phone.value = me.phone;
+
+    // Orders, newest first, with what extensions add (Takeaway: Reorder).
+    view.querySelector('[data-orders]').innerHTML = me.orders.length ? `<ul class="shop-acc-orders">${me.orders.map(o => `<li>
+  <a href="${esc(o.receipt)}" class="shop-acc-order"><strong>#${esc(o.number)}</strong><span>${esc(dmy(o.placedAt))}</span><span>${esc(STATUS_PUBLIC[o.status] || o.status)}</span><span>${esc(formatMoney(o.total, o.currency))}</span></a>
+  <small>${esc(o.lines.slice(0, 4).join(', '))}${o.lines.length > 4 ? '…' : ''}</small>
+  ${o.parts.map(p => `<div class="shop-acc-ext" data-ext="${esc(p.owner)}">${p.html}</div>`).join('')}</li>`).join('')}</ul>`
+        : '<p class="shop-muted">No orders yet - everything you order with this email shows here.</p>';
+
+    const addrList = view.querySelector('[data-addrs]');
+    const addrForm = view.querySelector('[data-addr-form]');
+    const drawAddresses = () => {
+        addrList.innerHTML = addresses.length ? addresses.map(a => `<li data-id="${esc(a.id)}"><span>${a.label ? `<strong>${esc(a.label)}</strong> ` : ''}${esc(addressText(a))}</span>
+  <span><button type="button" class="shop-linkbtn" data-edit>Edit</button> · <button type="button" class="shop-linkbtn" data-remove>Remove</button></span></li>`).join('') : '<li class="shop-muted">None yet.</li>';
+    };
+    drawAddresses();
+    const saveAll = async (patch) => {
+        const r = await account.save(patch);
+        addresses = r.addresses.map(a => ({...a}));
+        drawAddresses();
+        return r;
+    };
+    const openAddr = (a = {}) => {
+        addrForm.hidden = false;
+        for (const k of ['id', 'label', 'line1', 'line2', 'city', 'postcode']) addrForm.elements[k].value = a[k] || '';
+        addrForm.country.value = a.country || 'GB';
+        addrForm.line1.focus();
+    };
+    view.querySelector('[data-add]').addEventListener('click', () => openAddr());
+    view.querySelector('[data-cancel]').addEventListener('click', () => { addrForm.hidden = true; });
+    addrList.addEventListener('click', async (e) => {
+        const id = e.target.closest('[data-id]')?.dataset.id;
+        if (!id) return;
+        if (e.target.closest('[data-edit]')) openAddr(addresses.find(a => a.id === id));
+        if (e.target.closest('[data-remove]')) await saveAll({addresses: addresses.filter(a => a.id !== id)}).catch(err => alert(err.message));
+    });
+    addrForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const a = Object.fromEntries(['id', 'label', 'line1', 'line2', 'city', 'postcode', 'country'].map(k => [k, addrForm.elements[k].value.trim()]));
+        const err = addrForm.querySelector('[data-err]');
+        if (!a.line1 || !a.city) return say(err, 'The first line of the address and the town.');
+        const next = a.id ? addresses.map(x => (x.id === a.id ? {...x, ...a} : x)) : [...addresses, a];
+        try { await saveAll({addresses: next}); addrForm.hidden = true; say(err, ''); } catch (ex) { say(err, ex.message); }
+    });
+
+    details.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const err = details.querySelector('[data-err]');
+        try { await busy(details.querySelector('button'), () => account.save({name: details.name.value, phone: details.phone.value})); say(err, 'Saved.', true); }
+        catch (ex) { say(err, ex.message); }
+    });
+    view.querySelector('[data-out]').addEventListener('click', async () => { await signOut(); render({notice: 'You are signed out.'}); });
+    view.querySelector('[data-delete]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        if (!confirm('Delete your account? This cannot be undone.')) return;
+        try { await account.remove(f.password.value); await signOut(); render({notice: 'Your account has been deleted.'}); }
+        catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+}
+
+// ---- The emailed links --------------------------------------------------------------------------
+
+async function confirmView(body) {
+    try {
+        await account.confirm(params.get('u'), params.get('t'));
+        document.querySelector('.shop-account h1').textContent = 'Your account';
+        signedOutView(body, {notice: 'Thank you - your account is confirmed. Sign in to carry on.'});
+    } catch (err) {
+        document.querySelector('.shop-account h1').textContent = 'That link did not work';
+        body.innerHTML = `<p class="shop-co-error">${esc(err.message)}</p><p><a class="shop-linkbtn" href="${esc(shopPath)}/account">Sign in or create an account</a></p>`;
+    }
+}
+
+function resetView(body) {
+    body.innerHTML = '';
+    const f = el(`<form class="shop-acc-form" novalidate>
+  <label class="shop-field"><span>New password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" minlength="8"></label>
+  <label class="shop-field"><span>Again</span><input name="again" type="password" autocomplete="new-password"></label>
+  <p class="shop-co-error" data-err hidden></p>
+  <button type="submit" class="shop-drawer-go">Set my password</button>
+</form>`);
+    body.appendChild(f);
+    f.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const err = f.querySelector('[data-err]');
+        if (f.password.value.length < 8) return say(err, '8 characters or more, please.');
+        if (f.password.value !== f.again.value) return say(err, 'The two passwords are not the same.');
+        try {
+            await busy(f.querySelector('button'), () => account.reset(params.get('t') || '', f.password.value));
+            document.querySelector('.shop-account h1').textContent = 'Your account';
+            signedOutView(body, {notice: 'Your password is set - sign in with it now.'});
+        } catch (ex) { say(err, ex.status === 400 && /token/i.test(ex.message) ? 'That link has run out or was used already - ask for a new one.' : ex.message); }
+    });
+}
+
+// ---- The receipt: "save your details" -------------------------------------------------------------
+
+function joinBox(box) {
+    if (signedIn()) return;
+    box.hidden = false;
+    box.innerHTML = `<h2>Save your details for next time</h2>
+<p class="shop-muted">Create an account with <strong>${esc(box.dataset.email)}</strong> - your details are filled in next time, and this order is listed in it.</p>
+<form novalidate><label class="shop-field"><span>Choose a password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" minlength="8"></label>
+<p class="shop-co-error" data-err hidden></p><button type="submit" class="shop-pay-btn">Create my account</button></form>`;
+    const f = box.querySelector('form');
+    f.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        try {
+            await busy(f.querySelector('button'), () => account.register({name: box.dataset.name || box.dataset.email.split('@')[0], email: box.dataset.email, password: f.password.value}));
+            f.innerHTML = `<p class="shop-acc-note is-good">We have emailed you a link to confirm your account.</p>`;
+        } catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+}
+
+// ---- Start ---------------------------------------------------------------------------------
+
+async function render({notice = ''} = {}) {
+    const body = document.querySelector('[data-acc-body]');
+    if (!body) return;
+    const view = document.querySelector('[data-shop-account]').dataset.shopAccount;
+    if (view === 'confirm') return confirmView(body);
+    if (view === 'reset') return resetView(body);
+    let mine = null;
+    try { mine = await me(); } catch { /* signed out below */ }
+    if (mine) signedInView(body, mine);
+    else signedOutView(body, {notice});
+}
+
+const join = document.querySelector('[data-shop-join]');
+if (join) joinBox(join);
+render();

package/plugins/shopping-cart/public/cart.js

@@ -486,6 +486,20 @@ function checkout() {
     };
     form.addEventListener('input', keep);
 
+    // A signed-in customer: their details, and their first saved address, where nothing is typed yet.
+    import('./lib/session.js').then(async ({me}) => {
+        const mine = await me().catch(() => null);
+        if (!mine) return;
+        document.querySelector('[data-acc-link]')?.remove();
+        const a = mine.addresses[0] || {};
+        const fill = {name: mine.name, email: mine.email, phone: mine.phone, line1: a.line1, line2: a.line2, city: a.city, region: a.region, postcode: a.postcode, country: a.country};
+        for (const [k, v] of Object.entries(fill)) {
+            const el = form.elements[k];
+            if (el && v && !el.value) el.value = v;
+        }
+        keep();
+    }).catch(() => {});
+
     // A reminder email links here with the order: fill the basket from it (another device, a cleared browser).
     const params = new URLSearchParams(location.search);
     if (params.get('restore') && params.get('t')) {
@@ -713,3 +727,5 @@ if (page === 'product') productPage();
 if (page === 'index') storefront();
 if (page === 'cart') checkout();
 if (page === 'order') receipt();
+// Customer accounts: their own pages, and a receipt's "save your details" box.
+if (page === 'account' || document.querySelector('[data-shop-join]')) import('./account.js').catch(() => {});

package/plugins/shopping-cart/public/lib/session.js

@@ -0,0 +1,82 @@
+/**
+ * A customer's sign-in, in the browser - shared by the Shop's pages and any extension's (Takeaway).
+ *
+ * Signing in is core's own `/api/auth/login`; the tokens it gives are kept in this browser (localStorage, one
+ * key for the whole site) and sent as a Bearer header to the Cart's account routes. A 401 refreshes once through
+ * `/api/auth/refresh`; a refresh that fails signs the customer out here.
+ *
+ * @module shopping-cart/public/lib/session
+ */
+
+const KEY = 'dm-shop:account';
+const ACCOUNT_API = '/api/plugins/shopping-cart/account';
+
+const read = () => { try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch { return null; } };
+const write = (v) => { try { if (v) localStorage.setItem(KEY, JSON.stringify(v)); else localStorage.removeItem(KEY); } catch { /* private mode */ } };
+
+/** {name, email} when this browser holds a sign-in, else null. */
+export function signedIn() {
+    const s = read();
+    return s?.token ? {name: s.name || '', email: s.email || ''} : null;
+}
+
+async function json(res) {
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw Object.assign(new Error(body.error || body.message || `The server answered ${res.status}`), {status: res.status, body});
+    return body;
+}
+
+/**
+ * Sign in with core's login. A staff account with a sign-in check (a code) is sent to /admin.
+ * @returns {Promise<{name: string, email: string}>}
+ */
+export async function signIn(email, password) {
+    const body = await json(await fetch('/api/auth/login', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({email, password})}));
+    if (!body.token) throw new Error('This account signs in at /admin.');
+    write({token: body.token, refreshToken: body.refreshToken, name: body.user?.name || '', email: body.user?.email || email});
+    return signedIn();
+}
+
+export async function signOut() {
+    const s = read();
+    write(null);
+    if (s?.refreshToken) await fetch('/api/auth/logout', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({refreshToken: s.refreshToken})}).catch(() => {});
+}
+
+async function refresh() {
+    const s = read();
+    if (!s?.refreshToken) return false;
+    try {
+        const r = await fetch('/api/auth/refresh', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({refreshToken: s.refreshToken})});
+        if (!r.ok) { write(null); return false; }
+        const {token} = await r.json();
+        write({...s, token});
+        return true;
+    } catch { return false; }
+}
+
+/** A request as the signed-in customer; one refresh on a 401. */
+export async function authed(url, {method = 'GET', body} = {}) {
+    const go = () => fetch(url, {method, headers: {...(body ? {'Content-Type': 'application/json'} : {}), Authorization: `Bearer ${read()?.token || ''}`},
+        body: body ? JSON.stringify(body) : undefined});
+    let res = await go();
+    if (res.status === 401 && await refresh()) res = await go();
+    if (res.status === 401) write(null);
+    return json(res);
+}
+
+/** The signed-in customer's account (details, addresses, orders), or null when nobody is signed in here. */
+export async function me() {
+    if (!read()?.token) return null;
+    try { return await authed(ACCOUNT_API); } catch (err) { if (err.status === 401) return null; throw err; }
+}
+
+export const account = {
+    register: (d) => fetch(`${ACCOUNT_API}/register`, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(d)}).then(json),
+    confirm: (u, t) => fetch(`${ACCOUNT_API}/confirm`, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({u, t})}).then(json),
+    forgot: (email) => fetch(`${ACCOUNT_API}/forgot`, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({email})}).then(json),
+    /** Core's own reset, with the token from the emailed link. */
+    reset: (token, password) => fetch('/api/auth/reset-password', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({token, password})}).then(json),
+    save: (d) => authed(ACCOUNT_API, {method: 'PUT', body: d}),
+    remove: (password) => authed(ACCOUNT_API, {method: 'DELETE', body: {password}})
+};

package/plugins/shopping-cart/public/shop.css

@@ -425,3 +425,30 @@ html.shop-locked { overflow: hidden; }
     .shop-line-controls { flex-wrap: wrap; }
 }
 .shop-co-title { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 1.25rem; }
+/* Customer accounts */
+.shop-account { max-width: 44rem; margin: 2rem auto; }
+.shop-account h1 { margin: 0 0 1rem; }
+.shop-acc { display: flex; flex-direction: column; gap: 1rem; }
+.shop-acc-form { display: flex; flex-direction: column; gap: .75rem; max-width: 26rem; }
+.shop-acc-note { padding: .75rem 1rem; border-radius: var(--shop-radius-sm); background: var(--shop-softer); border: 1px solid var(--shop-line); margin: 0; }
+.shop-acc-note.is-good, .shop-co-error.is-good { color: var(--shop-good); }
+.shop-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--shop-soft); align-self: flex-start; }
+.shop-seg button { border: 0; background: none; color: var(--shop-text); font: inherit; font-weight: 600; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; }
+.shop-seg button.is-on { background: var(--shop-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
+.shop-acc-card { border: 1px solid var(--shop-line); border-radius: var(--shop-radius); padding: 1rem 1.2rem; }
+.shop-acc-card h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
+.shop-acc-card form { display: flex; flex-direction: column; gap: .6rem; max-width: 26rem; }
+.shop-acc-orders, .shop-acc-addrs { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .6rem; }
+.shop-acc-orders li { border-bottom: 1px solid var(--shop-line); padding-bottom: .6rem; }
+.shop-acc-order { display: grid; grid-template-columns: auto 1fr auto auto; gap: .75rem; color: var(--shop-text); text-decoration: none !important; }
+.shop-acc-orders small { color: var(--shop-muted); }
+.shop-acc-ext { margin-top: .35rem; }
+.shop-acc-addrs li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+.shop-acc-addr { margin-top: .75rem; }
+.shop-acc-danger summary { cursor: pointer; color: var(--shop-muted); }
+.shop-linkbtn.is-danger { color: var(--shop-sale); }
+.shop-acc-link { font-size: .92rem; }
+.shop-crumbs .shop-acc-link { float: right; }
+.shop-r-join { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--shop-line); }
+.shop-r-join h2 { font-size: 1rem; }
+.shop-r-join form { display: flex; flex-direction: column; gap: .6rem; }

package/plugins/shopping-cart/roles/shop-customer.json

@@ -0,0 +1,8 @@
+{
+  "name": "shop-customer",
+  "label": "Shop Customer",
+  "level": 5,
+  "permissions": [],
+  "badgeClass": "badge-secondary",
+  "admin": {"home": "/my-profile", "allow": []}
+}

package/plugins/shopping-cart/tests/accounts.test.js

@@ -0,0 +1,136 @@
+/**
+ * Customer accounts against the real user and collection services in the domma-cms checkout `make test` runs in.
+ * The test's authenticate reads `x-user` (a real user id) the way core's reads a token; mail is caught with
+ * setAccountMailer. Every user it makes, and its collections, are removed; config/plugins.json is restored.
+ */
+import {test, before, after} from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import Fastify from 'fastify';
+import shoppingCart from '../plugin.js';
+import {setAccountMailer, cleanAddress, ordersFor} from '../lib/accounts.js';
+import {deleteUser, getUserByEmail, getUserById} from '../../../server/services/users.js';
+import {checkResetToken} from '../../../server/services/passwordReset.js';
+
+const PLUGINS = path.resolve('config/plugins.json');
+const DIRS = ['shop-products', 'shop-orders'].map(c => path.resolve('content/collections', c));
+const EMAILS = ['acc-ann@example.test', 'acc-bo@example.test'];
+let saved;
+let app;
+const mail = [];
+
+async function cleanUsers() {
+    for (const e of EMAILS) { const u = await getUserByEmail(e); if (u) await deleteUser(u.id); }
+}
+
+before(async () => {
+    saved = await fs.readFile(PLUGINS, 'utf8').catch(() => null);
+    for (const d of DIRS) await fs.rm(d, {recursive: true, force: true});
+    await cleanUsers();
+    setAccountMailer((m) => { mail.push(m); });
+    delete globalThis[Symbol.for('domma.shopping-cart')];
+    app = Fastify();
+    // x-user: that real user; x-anon: nobody (401); neither: the shop's admin, for the admin routes.
+    const authenticate = async (req, reply) => {
+        if (req.headers['x-anon']) return reply.code(401).send({error: 'Unauthorised'});
+        if (!req.headers['x-user']) { req.user = {id: 'admin', name: 'Sam', role: 'admin'}; return undefined; }
+        const u = await getUserById(String(req.headers['x-user']));
+        if (!u) return reply.code(401).send({error: 'Unauthorised'});
+        req.user = {id: u.id, name: u.name, email: u.email, role: u.role};
+        return undefined;
+    };
+    await app.register(shoppingCart, {auth: {authenticate, requirePermission: () => async () => {}}, settings: {}, hooks: {registerShortcode() {}}});
+});
+
+after(async () => {
+    setAccountMailer(null);
+    await app?.close();
+    await cleanUsers();
+    for (const d of DIRS) await fs.rm(d, {recursive: true, force: true});
+    if (saved === null) await fs.rm(PLUGINS, {force: true});
+    else await fs.writeFile(PLUGINS, saved);
+});
+
+const call = async (method, url, body, user = null) => {
+    const res = await app.inject({method, url, payload: body, headers: user === 'anon' ? {'x-anon': '1'} : user ? {'x-user': user} : {}});
+    let json = null;
+    try { json = res.json(); } catch { /* not JSON */ }
+    return {status: res.statusCode, body: json};
+};
+const linkIn = (m) => /https?:\/\/\S+/.exec(m.text)?.[0] || '';
+
+test('accounts: off by default; create, confirm by email, details, addresses, orders by email, reset, delete', async () => {
+    assert.equal((await call('POST', '/account/register', {name: 'Ann', email: EMAILS[0], password: 'a-long-password'})).status, 404, 'off until switched on');
+    assert.equal((await call('POST', '/account/confirm', {u: '00000000-0000-4000-8000-000000000000', t: '0'.repeat(48)})).status, 404, 'confirm is off too');
+    const put = await call('PUT', '/settings', {accounts: true, offlineEnabled: true, countries: ['GB']});
+    assert.equal(put.status, 200, JSON.stringify(put.body));
+    assert.equal(put.body.settings?.accounts ?? put.body.accounts, true, JSON.stringify(put.body).slice(0, 300));
+
+    assert.equal((await call('POST', '/account/register', {name: 'Ann', email: EMAILS[0], password: 'short'})).status, 400);
+    assert.equal((await call('POST', '/account/register', {name: '', email: EMAILS[0], password: 'a-long-password'})).status, 400);
+    let r = await call('POST', '/account/register', {name: 'Ann Example', email: EMAILS[0], password: 'a-long-password'});
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+    let user = await getUserByEmail(EMAILS[0]);
+    assert.deepEqual([user.isActive, user.role], [false, 'shop-customer'], 'inactive until confirmed');
+    const confirmLink = new URL(linkIn(mail.at(-1)));
+    assert.match(confirmLink.pathname, /\/shop\/account\/confirm$/);
+
+    // A second try with the same email says the same, and tells the holder - nothing new is made.
+    r = await call('POST', '/account/register', {name: 'Someone', email: EMAILS[0], password: 'another-password'});
+    assert.equal(r.status, 200);
+    assert.equal(mail.length, 1, 'still pending: no second email, no second account');
+
+    assert.equal((await call('POST', '/account/confirm', {u: user.id, t: '0'.repeat(48)})).status, 404);
+    assert.equal((await call('POST', '/account/confirm', {u: user.id})).status, 404, 'no token, no answer');
+    r = await call('POST', '/account/confirm', {u: confirmLink.searchParams.get('u'), t: confirmLink.searchParams.get('t')});
+    assert.deepEqual(r.body, {confirmed: true}, 'confirms, and says nothing about the account - not even its email');
+    user = await getUserById(user.id);
+    assert.equal(user.isActive, true);
+    assert.ok(!user.meta.shop.pending);
+    // The link is spent: a second click, or any guess at an active user's id, learns nothing (ids are public).
+    r = await call('POST', '/account/confirm', {u: confirmLink.searchParams.get('u'), t: confirmLink.searchParams.get('t')});
+    assert.equal(r.status, 404);
+    assert.equal(JSON.stringify(r.body).includes(EMAILS[0]), false);
+    r = await call('POST', '/account/confirm', {u: user.id, t: 'x'});
+    assert.equal(r.status, 404);
+    assert.equal(JSON.stringify(r.body).includes(EMAILS[0]), false);
+    r = await call('POST', '/account/register', {name: 'Ann', email: EMAILS[0], password: 'a-long-password'});
+    assert.match(mail.at(-1).subject, /already have an account/);
+
+    // Signed in: details, addresses (junk dropped), and the orders placed with this email - from before it existed too.
+    assert.equal((await call('GET', '/account', null, 'anon')).status, 401);
+    const product = (await call('POST', '/products', {name: 'Mug', price: 1000, status: 'active', shippable: false})).body;
+    const placed = await call('POST', '/checkout', {lines: [{productId: product.id, qty: 1}], provider: 'offline', customer: {name: 'Ann', email: EMAILS[0].toUpperCase()}});
+    assert.equal(placed.status, 200, JSON.stringify(placed.body));
+    await call('POST', '/checkout', {lines: [{productId: product.id, qty: 1}], provider: 'offline', customer: {name: 'Bo', email: EMAILS[1]}});
+    r = await call('GET', '/account', null, user.id);
+    assert.equal(r.status, 200, JSON.stringify(r.body));
+    assert.deepEqual([r.body.name, r.body.email, r.body.orders.length], ['Ann Example', EMAILS[0], 1], 'only her own orders');
+    assert.match(r.body.orders[0].receipt, /^\/shop\/order\/.+\?t=/);
+    r = await call('PUT', '/account', {phone: '07700 900000', addresses: [{label: 'Home', line1: '1 High St', city: 'York', postcode: 'yo1 7hh'}, {line1: '', city: 'x'}]}, user.id);
+    assert.deepEqual([r.body.phone, r.body.addresses.length, r.body.addresses[0].postcode], ['07700 900000', 1, 'YO1 7HH']);
+
+    // Forgotten password: core's reset token, the link to the shop's page; nobody else is told anything.
+    const sent = mail.length;
+    assert.deepEqual((await call('POST', '/account/forgot', {email: 'nobody@example.test'})).body, {ok: true});
+    assert.equal(mail.length, sent, 'no account, no email - and the same answer');
+    await call('POST', '/account/forgot', {email: EMAILS[0]});
+    const reset = new URL(linkIn(mail.at(-1)));
+    assert.match(reset.pathname, /\/shop\/account\/reset$/);
+    assert.equal((await checkResetToken(reset.searchParams.get('t')))?.id, user.id, 'core accepts the token');
+
+    // Delete: only with the password; the orders stay.
+    assert.equal((await call('DELETE', '/account', {password: 'wrong'}, user.id)).status, 403);
+    assert.equal((await call('DELETE', '/account', {password: 'a-long-password'}, user.id)).status, 200);
+    assert.equal(await getUserByEmail(EMAILS[0]), null);
+    assert.equal((await call('GET', '/orders')).body.filter(o => o.data.email === EMAILS[0]).length, 1);
+});
+
+test('accounts: pure helpers', () => {
+    assert.equal(cleanAddress({line1: '1 High St'}), null, 'a town too');
+    assert.equal(cleanAddress({line1: '1 High St', city: 'York', country: 'ZZ'}).country, 'GB');
+    const o = (email, status = 'paid', at = '2026-10-01') => ({data: {email, status}, meta: {createdAt: at}});
+    assert.deepEqual(ordersFor([o('a@x.test'), o('A@X.test', 'paid', '2026-10-05'), o('a@x.test', 'pending'), o('b@x.test')], 'a@x.test').map(x => x.meta.createdAt),
+        ['2026-10-05', '2026-10-01'], 'theirs, newest first, no unfinished checkouts');
+});