@vimine/sdk 0.2.0 → 0.3.2

package/dist/elements.js

@@ -7,32 +7,100 @@
 //
 //   <vimine-sign-in scope="membership:read"></vimine-sign-in>   a "Sign in with Vimine" button
 //   <vimine-card></vimine-card>                                 the signed-in member's card (SVG + QR)
-//   <vimine-enroll slug="your-slug"></vimine-enroll>            the hosted enrolment form (iframe, Embed v0)
+//   <vimine-enroll slug="your-slug"></vimine-enroll>            the hosted enrolment form (iframe, Embed v0), in the
+//                                                                     element's language; someone who already has a
+//                                                                     Vimine account is offered a hand-off to the hosted
+//                                                                     page, where they join in one step
 //   <vimine-events slug="your-slug"></vimine-events>            the association's events (public ones for
 //                                                                     visitors, every one for a signed-in member) with
 //                                                                     a register button per type
 //
 // The callback page still calls `client.handleRedirect()` (or `<vimine-sign-in>` does it for you when
 // `handle-redirect` is set on the element and the page is the redirect URI).
-import { Vimine } from './index.js';
+import { Vimine } from "./index.js";
 let shared = null;
 const STRINGS = {
     it: {
-        signIn: 'Accedi con Vimine', signOut: 'Esci', loading: 'Caricamento…', notSignedIn: 'Accedi per vedere la tua tessera.', noMembership: 'Nessuna tessera in questa associazione.', notActive: 'La tessera non è ancora attiva: il codice compare quando lo diventa.', error: 'Si è verificato un errore.',
-        noEvents: 'Nessun evento in programma.', free: 'gratuita', places: 'posti', register: 'Iscriviti', signInToRegister: 'Accedi per iscriverti', registered: 'Iscrizione confermata', reserved: 'Posto riservato: in attesa del contributo', details: 'Dettagli',
-        reason: { sold_out: 'esaurito', event_full: 'al completo', registration_not_open: 'iscrizioni non ancora aperte', registration_closed: 'iscrizioni chiuse', membership_required: 'riservato ai soci', membership_not_active: 'tessera non valida', membership_not_yet_valid: 'la tessera non è ancora utilizzabile a quella data', membership_type_not_allowed: 'tipo di tessera non ammesso', max_per_user: 'già iscritto', event_past: 'evento concluso', event_cancelled: 'evento annullato', event_not_published: 'non pubblicato', plan_limit: 'non disponibile', invalid_type: 'tipo non valido' }
+        signIn: "Accedi con Vimine",
+        signOut: "Esci",
+        loading: "Caricamento…",
+        notSignedIn: "Accedi per vedere la tua tessera.",
+        noMembership: "Nessuna tessera in questa associazione.",
+        notActive: "La tessera non è ancora attiva: il codice compare quando lo diventa.",
+        error: "Si è verificato un errore.",
+        noEvents: "Nessun evento in programma.",
+        free: "gratuita",
+        places: "posti",
+        register: "Iscriviti",
+        signInToRegister: "Accedi per iscriverti",
+        joinAndBook: "Iscriviti all’associazione e prenota",
+        alreadyMember: "Sono già socio: accedi",
+        registered: "Iscrizione confermata",
+        reserved: "Posto riservato: in attesa del contributo",
+        details: "Dettagli",
+        reason: {
+            sold_out: "esaurito",
+            event_full: "al completo",
+            registration_not_open: "iscrizioni non ancora aperte",
+            registration_closed: "iscrizioni chiuse",
+            membership_required: "riservato ai soci",
+            membership_not_active: "tessera non valida",
+            membership_not_yet_valid: "la tessera non è ancora utilizzabile a quella data",
+            membership_type_not_allowed: "tipo di tessera non ammesso",
+            max_per_user: "già iscritto",
+            event_past: "evento concluso",
+            event_cancelled: "evento annullato",
+            event_not_published: "non pubblicato",
+            plan_limit: "non disponibile",
+            invalid_type: "tipo non valido",
+        },
     },
     en: {
-        signIn: 'Sign in with Vimine', signOut: 'Sign out', loading: 'Loading…', notSignedIn: 'Sign in to see your card.', noMembership: 'No membership in this association.', notActive: 'The card is not active yet: its code appears once it is.', error: 'Something went wrong.',
-        noEvents: 'No upcoming events.', free: 'free', places: 'places', register: 'Register', signInToRegister: 'Sign in to register', registered: 'Registration confirmed', reserved: 'Place reserved: awaiting the contribution', details: 'Details',
-        reason: { sold_out: 'sold out', event_full: 'full', registration_not_open: 'registrations not open yet', registration_closed: 'registrations closed', membership_required: 'members only', membership_not_active: 'membership not valid', membership_not_yet_valid: 'your card is not usable yet on that date', membership_type_not_allowed: 'membership type not admitted', max_per_user: 'already registered', event_past: 'event over', event_cancelled: 'event cancelled', event_not_published: 'not published', plan_limit: 'not available', invalid_type: 'invalid type' }
-    }
+        signIn: "Sign in with Vimine",
+        signOut: "Sign out",
+        loading: "Loading…",
+        notSignedIn: "Sign in to see your card.",
+        noMembership: "No membership in this association.",
+        notActive: "The card is not active yet: its code appears once it is.",
+        error: "Something went wrong.",
+        noEvents: "No upcoming events.",
+        free: "free",
+        places: "places",
+        register: "Register",
+        signInToRegister: "Sign in to register",
+        joinAndBook: "Join the association and book",
+        alreadyMember: "Already a member? Sign in",
+        registered: "Registration confirmed",
+        reserved: "Place reserved: awaiting the contribution",
+        details: "Details",
+        reason: {
+            sold_out: "sold out",
+            event_full: "full",
+            registration_not_open: "registrations not open yet",
+            registration_closed: "registrations closed",
+            membership_required: "members only",
+            membership_not_active: "membership not valid",
+            membership_not_yet_valid: "your card is not usable yet on that date",
+            membership_type_not_allowed: "membership type not admitted",
+            max_per_user: "already registered",
+            event_past: "event over",
+            event_cancelled: "event cancelled",
+            event_not_published: "not published",
+            plan_limit: "not available",
+            invalid_type: "invalid type",
+        },
+    },
 };
 const langOf = (el) => {
-    const l = (el.getAttribute('lang') || el.closest('[lang]')?.getAttribute('lang') || document.documentElement.lang || 'it').slice(0, 2).toLowerCase();
-    return l === 'en' ? 'en' : 'it';
+    const l = (el.getAttribute("lang") ||
+        el.closest("[lang]")?.getAttribute("lang") ||
+        document.documentElement.lang ||
+        "it")
+        .slice(0, 2)
+        .toLowerCase();
+    return l === "en" ? "en" : "it";
 };
-const BASE_CSS = `
+const BASE_CSS = /* CSS */ `
 :host { display: inline-block; font-family: var(--vimine-font, system-ui, sans-serif); color: var(--vimine-color, #111); }
 button { cursor: pointer; border: 0; border-radius: var(--vimine-radius, 999px); padding: var(--vimine-padding, 0.65rem 1.1rem);
   background: var(--vimine-accent, #0a0e1a); color: var(--vimine-accent-contrast, #fff); font: inherit; font-weight: 600; }
@@ -41,28 +109,28 @@ button:disabled { opacity: .6; cursor: default; }
 .error { color: var(--vimine-error, #a33); font-size: .9em; }
 `;
 const shadow = (el, css) => {
-    const root = el.shadowRoot || el.attachShadow({ mode: 'open' });
+    const root = el.shadowRoot || el.attachShadow({ mode: "open" });
     root.innerHTML = `<style>${BASE_CSS}${css}</style>`;
     return root;
 };
 /** The client the elements use. Call once; pass your own instance to share it with the rest of the page. */
 export function defineVimineElements(options) {
     shared = options instanceof Vimine ? options : new Vimine(options);
-    if (typeof customElements !== 'undefined') {
-        if (!customElements.get('vimine-sign-in'))
-            customElements.define('vimine-sign-in', VimineSignIn);
-        if (!customElements.get('vimine-card'))
-            customElements.define('vimine-card', VimineCard);
-        if (!customElements.get('vimine-enroll'))
-            customElements.define('vimine-enroll', VimineEnroll);
-        if (!customElements.get('vimine-events'))
-            customElements.define('vimine-events', VimineEvents);
+    if (typeof customElements !== "undefined") {
+        if (!customElements.get("vimine-sign-in"))
+            customElements.define("vimine-sign-in", VimineSignIn);
+        if (!customElements.get("vimine-card"))
+            customElements.define("vimine-card", VimineCard);
+        if (!customElements.get("vimine-enroll"))
+            customElements.define("vimine-enroll", VimineEnroll);
+        if (!customElements.get("vimine-events"))
+            customElements.define("vimine-events", VimineEvents);
     }
     return shared;
 }
 const client = () => {
     if (!shared)
-        throw new Error('Vimine elements: call defineVimineElements({ clientId, redirectUri }) first');
+        throw new Error("Vimine elements: call defineVimineElements({ clientId, redirectUri }) first");
     return shared;
 };
 /** `<vimine-sign-in scope="…" return-to="/area" label="…" handle-redirect>` — a sign-in / sign-out button. */
@@ -77,7 +145,7 @@ export class VimineSignIn extends HTMLElement {
     }
     async boot() {
         const mp = client();
-        if (this.hasAttribute('handle-redirect')) {
+        if (this.hasAttribute("handle-redirect")) {
             try {
                 await mp.handleRedirect();
             }
@@ -92,28 +160,38 @@ export class VimineSignIn extends HTMLElement {
     render(error) {
         const mp = client();
         const t = STRINGS[langOf(this)];
-        const root = shadow(this, '');
-        const btn = document.createElement('button');
-        btn.type = 'button';
+        const root = shadow(this, "");
+        const btn = document.createElement("button");
+        btn.type = "button";
         if (mp.isSignedIn()) {
-            btn.textContent = this.getAttribute('label-signed-in') || t.signOut;
-            btn.addEventListener('click', () => void mp.signOut({ everywhere: this.hasAttribute('everywhere') }));
+            btn.textContent = this.getAttribute("label-signed-in") || t.signOut;
+            btn.addEventListener("click", () => void mp.signOut({ everywhere: this.hasAttribute("everywhere") }));
         }
         else {
-            btn.textContent = this.getAttribute('label') || t.signIn;
-            btn.addEventListener('click', () => {
-                const scopes = (this.getAttribute('scope') || '').split(/[\s,]+/).filter(Boolean);
-                void mp.signIn({ ...(scopes.length ? { scopes } : {}), ...(this.getAttribute('return-to') ? { returnTo: this.getAttribute('return-to') } : {}) });
+            btn.textContent = this.getAttribute("label") || t.signIn;
+            btn.addEventListener("click", () => {
+                const scopes = (this.getAttribute("scope") || "")
+                    .split(/[\s,]+/)
+                    .filter(Boolean);
+                void mp.signIn({
+                    ...(scopes.length ? { scopes } : {}),
+                    ...(this.getAttribute("return-to")
+                        ? { returnTo: this.getAttribute("return-to") }
+                        : {}),
+                });
             });
         }
         root.appendChild(btn);
         if (error) {
-            const e = document.createElement('div');
-            e.className = 'error';
+            const e = document.createElement("div");
+            e.className = "error";
             e.textContent = error;
             root.appendChild(e);
         }
-        this.dispatchEvent(new CustomEvent('vimine-change', { detail: { signedIn: mp.isSignedIn() }, bubbles: true }));
+        this.dispatchEvent(new CustomEvent("vimine-change", {
+            detail: { signedIn: mp.isSignedIn() },
+            bubbles: true,
+        }));
     }
 }
 /** `<vimine-card>` — the signed-in member's card as SVG (with the live QR); refreshes when the session changes. */
@@ -130,55 +208,168 @@ export class VimineCard extends HTMLElement {
     async render() {
         const mp = client();
         const t = STRINGS[langOf(this)];
-        const root = shadow(this, ':host { display: block; max-width: var(--vimine-card-width, 600px); } svg { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--vimine-card-shadow, 0 8px 30px rgba(0,0,0,.12)); }');
+        const root = shadow(this, ":host { display: block; max-width: var(--vimine-card-width, 600px); } svg { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--vimine-card-shadow, 0 8px 30px rgba(0,0,0,.12)); }");
         const note = (cls, text) => {
-            const d = document.createElement('div');
+            const d = document.createElement("div");
             d.className = cls;
             d.textContent = text;
             root.appendChild(d);
         };
         if (!mp.isSignedIn())
-            return note('muted', t.notSignedIn);
-        note('muted', t.loading);
+            return note("muted", t.notSignedIn);
+        note("muted", t.loading);
         try {
             const svg = await mp.membership.cardSvg();
             root.innerHTML = `<style>${BASE_CSS}:host { display: block; max-width: var(--vimine-card-width, 600px); } svg { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--vimine-card-shadow, 0 8px 30px rgba(0,0,0,.12)); }</style>${svg}`;
-            this.dispatchEvent(new CustomEvent('vimine-card', { detail: { loaded: true }, bubbles: true }));
+            this.dispatchEvent(new CustomEvent("vimine-card", {
+                detail: { loaded: true },
+                bubbles: true,
+            }));
         }
         catch (err) {
             root.innerHTML = `<style>${BASE_CSS}</style>`;
             const code = err?.code;
             // `not_active`: the membership exists but has no card (pending, suspended, revoked) — a state, not a failure.
-            const quiet = code === 'not_found' || code === 'not_active';
-            note(quiet ? 'muted' : 'error', code === 'not_found' ? t.noMembership : code === 'not_active' ? t.notActive : t.error);
+            const quiet = code === "not_found" || code === "not_active";
+            note(quiet ? "muted" : "error", code === "not_found"
+                ? t.noMembership
+                : code === "not_active"
+                    ? t.notActive
+                    : t.error);
         }
     }
 }
-/** `<vimine-enroll slug="…" app-url="https://app.vimine.network" height="900">` — the hosted enrolment form. */
+/** The faces the hosted page offers — served by Vimine itself — or `system`, the device's own. They set everything. */
+export const TYPEFACES = [
+    "system",
+    "inter",
+    "roboto",
+    "open-sans",
+    "montserrat",
+    "nunito",
+    "lora",
+    "merriweather",
+    "roboto-slab",
+];
+const HEX = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const appearanceQuery = (a) => {
+    if (!a)
+        return "";
+    const out = [];
+    if (a.scheme === "light" || a.scheme === "dark")
+        out.push(`scheme=${a.scheme}`);
+    if (a.accent && HEX.test(a.accent))
+        out.push(`accent=${encodeURIComponent(a.accent.replace(/^#/, ""))}`);
+    if (a.background === "transparent")
+        out.push("background=transparent");
+    else if (a.background && HEX.test(a.background))
+        out.push(`background=${encodeURIComponent(a.background.replace(/^#/, ""))}`);
+    if (a.font && TYPEFACES.includes(a.font))
+        out.push(`font=${a.font}`);
+    return out.length ? `&${out.join("&")}` : "";
+};
+export const enrollUrl = (appUrl, slug, lang, appearance) => `${appUrl.replace(/\/+$/, "")}/enroll/${encodeURIComponent(slug)}?locale=${encodeURIComponent(lang)}${appearanceQuery(appearance)}`;
+/**
+ * The same page, opened FROM an event: the person joins the association and asks for a place at the event in one go.
+ * The request carries the event; the place is confirmed, or held until the membership is active.
+ */
+export const eventEnrollUrl = (appUrl, slug, event, lang) => `${enrollUrl(appUrl, slug, lang)}&event=${encodeURIComponent(event)}`;
+/** Any CSS colour (a name, `rgb()`, `hsl()`, a hex) as `#rrggbb`, resolved by the browser; null when it is none. */
+const hexColour = (root, value) => {
+    const v = value.trim();
+    if (!v)
+        return null;
+    const probe = document.createElement("span");
+    probe.style.color = v;
+    if (!probe.style.color)
+        return null;
+    root.appendChild(probe);
+    const m = /rgba?\(([^)]+)\)/.exec(getComputedStyle(probe).color);
+    probe.remove();
+    const parts = (m?.[1] ?? "").split(/[\s,/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3)
+        return null;
+    const [r = 0, g = 0, b = 0, alpha] = parts;
+    if (alpha === 0)
+        return null;
+    return `#${[r, g, b].map((n) => Math.round(n).toString(16).padStart(2, "0")).join("")}`;
+};
+/**
+ * The page's look from the host's CSS: `--vimine-scheme` (light | dark), `--vimine-accent` and `--vimine-background` (a
+ * colour, or `transparent`), `--vimine-typeface` (one of TYPEFACES) — custom properties inherit, so one rule on `:root`
+ * styles every Vimine element at once.
+ */
+const appearanceOf = (el, root) => {
+    const css = getComputedStyle(el);
+    const read = (name) => css.getPropertyValue(name).trim();
+    const out = {};
+    const scheme = read("--vimine-scheme");
+    if (scheme === "light" || scheme === "dark")
+        out.scheme = scheme;
+    const accent = hexColour(root, read("--vimine-accent"));
+    if (accent)
+        out.accent = accent;
+    const background = read("--vimine-background");
+    if (background === "transparent")
+        out.background = "transparent";
+    else {
+        const bg = hexColour(root, background);
+        if (bg)
+            out.background = bg;
+    }
+    const typeface = read("--vimine-typeface");
+    if (TYPEFACES.includes(typeface))
+        out.font = typeface;
+    return out;
+};
+/**
+ * `<vimine-enroll slug="…" app-url="https://app.vimine.network" height="900" lang="en">` — the hosted enrolment form.
+ *
+ * Styled like the other elements, through CSS custom properties on the element or any ancestor:
+ *
+ *   vimine-enroll { --vimine-scheme: light; --vimine-accent: #1e3a5f; --vimine-background: transparent; }
+ *
+ * `--vimine-scheme` the page's scheme; `--vimine-accent` its buttons, links and the association's name (moved towards
+ * the page's ink when it would not read on its cards); `--vimine-background` the ground behind the cards;
+ * `--vimine-typeface` the face of the whole page, fields included — one of TYPEFACES, served by Vimine (a framed page
+ * cannot use the host's fonts). The frame is styled once, when the element connects.
+ *
+ * The form opens in the element's language (`lang` on the element or the page; Italian by default). Someone who already
+ * has a Vimine account need not fill it: the form offers *Continua su Vimine*, which opens the hosted page in a new
+ * tab — there their session is recognised and they join in one step (the association's statuto and privacy notice, and
+ * nothing they have already told Vimine). It is a hand-off and not a sign-in inside the frame because a browser keeps a
+ * framed page's session apart from the same site opened directly; the frame's sandbox lets that tab open as an ordinary
+ * page (`allow-popups-to-escape-sandbox`).
+ */
 export class VimineEnroll extends HTMLElement {
     connectedCallback() {
-        const slug = this.getAttribute('slug');
-        const root = shadow(this, ':host { display: block; } iframe { width: 100%; border: 0; border-radius: var(--vimine-radius, 16px); background: transparent; }');
+        const slug = this.getAttribute("slug");
+        const root = shadow(this, ":host { display: block; } iframe { width: 100%; border: 0; border-radius: var(--vimine-radius, 16px); background: transparent; }");
         if (!slug) {
-            const e = document.createElement('div');
-            e.className = 'error';
-            e.textContent = 'vimine-enroll: missing slug';
+            const e = document.createElement("div");
+            e.className = "error";
+            e.textContent = "vimine-enroll: missing slug";
             root.appendChild(e);
             return;
         }
-        const appUrl = (this.getAttribute('app-url') || client().options.appUrl || 'https://app.vimine.network').replace(/\/+$/, '');
-        const frame = document.createElement('iframe');
-        frame.src = `${appUrl}/enroll/${encodeURIComponent(slug)}`;
-        frame.title = 'Vimine';
-        frame.loading = 'lazy';
-        frame.style.height = `${Number(this.getAttribute('height')) || 900}px`;
-        frame.setAttribute('sandbox', 'allow-forms allow-scripts allow-same-origin allow-popups');
+        const appUrl = (this.getAttribute("app-url") ||
+            client().options.appUrl ||
+            "https://app.vimine.network").replace(/\/+$/, "");
+        const frame = document.createElement("iframe");
+        frame.src = enrollUrl(appUrl, slug, langOf(this), appearanceOf(this, root));
+        frame.title = "Vimine";
+        frame.loading = "lazy";
+        frame.style.height = `${Number(this.getAttribute("height")) || 900}px`;
+        frame.setAttribute("sandbox", "allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox");
         root.appendChild(frame);
     }
 }
 const money = (amount, currency, lang) => {
     try {
-        return new Intl.NumberFormat(lang === 'en' ? 'en-GB' : 'it-IT', { style: 'currency', currency: currency || 'EUR' }).format(amount);
+        return new Intl.NumberFormat(lang === "en" ? "en-GB" : "it-IT", {
+            style: "currency",
+            currency: currency || "EUR",
+        }).format(amount);
     }
     catch {
         return `${amount.toFixed(2)} ${currency}`;
@@ -186,7 +377,11 @@ const money = (amount, currency, lang) => {
 };
 const when = (iso, tz, lang) => {
     try {
-        return new Date(iso).toLocaleString(lang === 'en' ? 'en-GB' : 'it-IT', { timeZone: tz, dateStyle: 'full', timeStyle: 'short' });
+        return new Date(iso).toLocaleString(lang === "en" ? "en-GB" : "it-IT", {
+            timeZone: tz,
+            dateStyle: "full",
+            timeStyle: "short",
+        });
     }
     catch {
         return new Date(iso).toLocaleString();
@@ -195,8 +390,13 @@ const when = (iso, tz, lang) => {
 /**
  * `<vimine-events slug="…" filter="upcoming" limit="10" detail-url="/eventi/{slug}">` — the association's events:
  * the public ones for a visitor (no sign-in), every published one for a signed-in member, each with its registration
- * types (contribution, places left) and a register button (`registrations:write`) — or a sign-in button. Fires
- * `vimine-registration` `{ registration }` after a registration. `detail-url` (with `{slug}`) adds a details link.
+ * types (contribution, places left) and a register button (`registrations:write`). Fires `vimine-registration`
+ * `{ registration }` after a registration. `detail-url` (with `{slug}`) adds a details link.
+ *
+ * A VISITOR is offered a way in, not a bare sign-in: *Iscriviti all’associazione e prenota* opens the association's
+ * hosted enrolment page with the event (a new tab; `app-url` as on `<vimine-enroll>`) — they join and ask for the place
+ * in one go — and *Sono già socio: accedi* signs a member in here. The first is shown while the event has a registration
+ * that can be had and the association takes enrolment requests; otherwise the sign-in alone.
  */
 export class VimineEvents extends HTMLElement {
     unsubscribe = null;
@@ -213,117 +413,180 @@ export class VimineEvents extends HTMLElement {
         const mp = client();
         const lang = langOf(this);
         const t = STRINGS[lang];
-        const root = shadow(this, `:host { display: block; }
+        const root = shadow(this, 
+        /* CSS */ `:host { display: block; }
 .event { border: 1px solid var(--vimine-border, #e5e5e5); border-radius: var(--vimine-radius, 16px); padding: var(--vimine-padding, 1rem); margin: 0 0 1rem; }
 .event h3 { margin: 0 0 .25rem; font-size: 1.15em; } .event img { width: 100%; border-radius: var(--vimine-radius, 16px); margin-bottom: .75rem; display: block; }
 .type { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--vimine-border, #eee); }
-.type .n { font-weight: 600; } .type button { padding: .45rem .9rem; } a { color: var(--vimine-accent, #0a0e1a); }`);
+.type .n { font-weight: 600; } .type button { padding: .45rem .9rem; } a { color: var(--vimine-accent, #0a0e1a); }
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: .75rem; border-top: 1px solid var(--vimine-border, #eee); }
+a.button { display: inline-block; text-decoration: none; border-radius: var(--vimine-radius, 999px); padding: var(--vimine-padding, 0.65rem 1.1rem);
+  background: var(--vimine-accent, #0a0e1a); color: var(--vimine-accent-contrast, #fff); font-weight: 600; }
+button.link { background: none; color: var(--vimine-accent, #0a0e1a); padding: 0; border-radius: 0; text-decoration: underline; font-weight: 400; }`);
         const note = (cls, text) => {
-            const d = document.createElement('div');
+            const d = document.createElement("div");
             d.className = cls;
             d.textContent = text;
             root.appendChild(d);
         };
-        note('muted', t.loading);
-        const slug = this.getAttribute('slug') || '';
-        const filter = (this.getAttribute('filter') || 'upcoming');
-        const limit = Number(this.getAttribute('limit')) || undefined;
+        note("muted", t.loading);
+        const slug = this.getAttribute("slug") || "";
+        const filter = (this.getAttribute("filter") || "upcoming");
+        const limit = Number(this.getAttribute("limit")) || undefined;
         let items;
+        // For a visitor: does the association take enrolment requests? Only then is joining a way to a place. A side
+        // read — a failure leaves the sign-in alone.
+        let joinable = false;
         try {
             const params = { filter, ...(limit ? { limit } : {}) };
-            items = mp.isSignedIn() ? (await mp.events.list(params)).items : (await mp.public.events.list(slug, params)).items;
+            items = mp.isSignedIn()
+                ? (await mp.events.list(params)).items
+                : (await mp.public.events.list(slug, params)).items;
+            if (!mp.isSignedIn() && slug)
+                joinable = await mp.public
+                    .association(slug)
+                    .then((config) => config.aps.accepting_requests === true)
+                    .catch(() => false);
         }
         catch {
             root.innerHTML = `<style>${BASE_CSS}</style>`;
-            return note('error', t.error);
+            return note("error", t.error);
         }
-        root.innerHTML = root.querySelector('style').outerHTML;
+        root.innerHTML = root.querySelector("style").outerHTML;
         if (!items.length)
-            return note('muted', t.noEvents);
-        const detailUrl = this.getAttribute('detail-url');
+            return note("muted", t.noEvents);
+        const detailUrl = this.getAttribute("detail-url");
+        const join = joinable
+            ? {
+                slug,
+                appUrl: (this.getAttribute("app-url") ||
+                    mp.options.appUrl ||
+                    "https://app.vimine.network").replace(/\/+$/, ""),
+            }
+            : null;
         for (const ev of items)
-            root.appendChild(this.card(ev, mp, lang, detailUrl));
+            root.appendChild(this.card(ev, mp, lang, detailUrl, join));
     }
-    card(ev, mp, lang, detailUrl) {
+    card(ev, mp, lang, detailUrl, join) {
         const t = STRINGS[lang];
-        const el = document.createElement('article');
-        el.className = 'event';
+        const el = document.createElement("article");
+        el.className = "event";
         if (ev.cover_url) {
-            const img = document.createElement('img');
+            const img = document.createElement("img");
             img.src = ev.cover_url;
-            img.alt = '';
+            img.alt = "";
             el.appendChild(img);
         }
-        const h = document.createElement('h3');
+        const h = document.createElement("h3");
         h.textContent = ev.title;
         el.appendChild(h);
-        const meta = document.createElement('div');
-        meta.className = 'muted';
-        meta.textContent = `${when(ev.starts_at, ev.timezone, lang)}${ev.location ? ` · ${ev.location.name || ev.location.address || ''}` : ''}`;
+        const meta = document.createElement("div");
+        meta.className = "muted";
+        meta.textContent = `${when(ev.starts_at, ev.timezone, lang)}${ev.location ? ` · ${ev.location.name || ev.location.address || ""}` : ""}`;
         el.appendChild(meta);
         if (ev.summary) {
-            const p = document.createElement('p');
+            const p = document.createElement("p");
             p.textContent = ev.summary;
             el.appendChild(p);
         }
         if (detailUrl) {
-            const a = document.createElement('a');
-            a.href = detailUrl.replace('{slug}', encodeURIComponent(ev.slug));
+            const a = document.createElement("a");
+            a.href = detailUrl.replace("{slug}", encodeURIComponent(ev.slug));
             a.textContent = t.details;
             el.appendChild(a);
         }
         const mine = this.state[ev.id];
         if (mine) {
-            const d = document.createElement('div');
-            d.className = 'muted';
-            d.textContent = mine.status === 'confirmed' ? t.registered : t.reserved;
+            const d = document.createElement("div");
+            d.className = "muted";
+            d.textContent = mine.status === "confirmed" ? t.registered : t.reserved;
             el.appendChild(d);
             return el;
         }
-        if (ev.status === 'published')
+        if (ev.status === "published")
             for (const tp of ev.registration_types)
                 el.appendChild(this.typeRow(ev, tp, mp, lang));
+        // A visitor: one call for the event, under its registrations — join and book on the hosted page, or sign in here.
+        if (ev.status === "published" &&
+            !mp.isSignedIn() &&
+            ev.registration_types.some((tp) => tp.open)) {
+            const actions = document.createElement("div");
+            actions.className = "actions";
+            const signIn = document.createElement("button");
+            signIn.type = "button";
+            signIn.addEventListener("click", () => void mp.signIn({
+                scopes: [
+                    "events:read",
+                    "registrations:read",
+                    "registrations:write",
+                ],
+            }));
+            if (join) {
+                const a = document.createElement("a");
+                a.className = "button";
+                a.href = eventEnrollUrl(join.appUrl, join.slug, ev.slug, lang);
+                a.target = "_blank";
+                a.rel = "noopener";
+                a.textContent = t.joinAndBook;
+                actions.appendChild(a);
+                signIn.className = "link";
+                signIn.textContent = t.alreadyMember;
+            }
+            else
+                signIn.textContent = t.signInToRegister;
+            actions.appendChild(signIn);
+            el.appendChild(actions);
+        }
         return el;
     }
     typeRow(ev, tp, mp, lang) {
         const t = STRINGS[lang];
-        const row = document.createElement('div');
-        row.className = 'type';
-        const left = document.createElement('div');
-        const n = document.createElement('div');
-        n.className = 'n';
+        const row = document.createElement("div");
+        row.className = "type";
+        const left = document.createElement("div");
+        const n = document.createElement("div");
+        n.className = "n";
         n.textContent = `${tp.name} · ${tp.amount > 0 ? money(tp.amount, tp.currency, lang) : t.free}`;
         left.appendChild(n);
-        const s = document.createElement('div');
-        s.className = 'muted';
-        s.textContent = [tp.remaining != null ? `${tp.remaining} ${t.places}` : '', tp.reason ? t.reason[tp.reason] || tp.reason : ''].filter(Boolean).join(' · ');
+        const s = document.createElement("div");
+        s.className = "muted";
+        s.textContent = [
+            tp.remaining != null ? `${tp.remaining} ${t.places}` : "",
+            tp.reason ? t.reason[tp.reason] || tp.reason : "",
+        ]
+            .filter(Boolean)
+            .join(" · ");
         left.appendChild(s);
         row.appendChild(left);
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        if (!mp.isSignedIn()) {
-            btn.textContent = t.signInToRegister;
-            btn.addEventListener('click', () => void mp.signIn({ scopes: ['events:read', 'registrations:read', 'registrations:write'] }));
-        }
-        else {
-            btn.textContent = t.register;
-            btn.disabled = !tp.open;
-            btn.addEventListener('click', async () => {
-                btn.disabled = true;
-                try {
-                    const reg = await mp.registrations.create(ev.slug, { registration_type: tp.uid });
-                    this.state[ev.id] = reg;
-                    this.dispatchEvent(new CustomEvent('vimine-registration', { detail: { registration: reg }, bubbles: true }));
-                    void this.render();
-                }
-                catch (err) {
-                    btn.disabled = false;
-                    const reasons = (err?.errors || []).map((e) => t.reason[e.code || ''] || e.code).filter(Boolean);
-                    s.textContent = reasons.length ? reasons.join(', ') : t.error;
-                    s.className = 'error';
-                }
-            });
-        }
+        // A visitor has the event's own call below the registrations (`card`): no button per registration.
+        if (!mp.isSignedIn())
+            return row;
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = t.register;
+        btn.disabled = !tp.open;
+        btn.addEventListener("click", async () => {
+            btn.disabled = true;
+            try {
+                const reg = await mp.registrations.create(ev.slug, {
+                    registration_type: tp.uid,
+                });
+                this.state[ev.id] = reg;
+                this.dispatchEvent(new CustomEvent("vimine-registration", {
+                    detail: { registration: reg },
+                    bubbles: true,
+                }));
+                void this.render();
+            }
+            catch (err) {
+                btn.disabled = false;
+                const reasons = (err?.errors || [])
+                    .map((e) => t.reason[e.code || ""] || e.code)
+                    .filter(Boolean);
+                s.textContent = reasons.length ? reasons.join(", ") : t.error;
+                s.className = "error";
+            }
+        });
         row.appendChild(btn);
         return row;
     }