@startup-api/cloudflare 0.2.0 → 0.3.1

package/README.md

@@ -160,7 +160,34 @@ Configure an ordered list of rules (first match wins) mapping a path pattern to
 - **`authenticated`** — any logged-in user.
 - **`entitlement`** — a provider condition: Patreon `active_patron`, a specific `benefit` (perk) ID, or a `tier` ID.
 
-Patterns are exact (`/special`), prefix (`/app/*`), or `/` (homepage only). Each rule's `on_unauthorized` is `login` (redirect to sign in), `forbidden` (403), or `upgrade` (redirect to `upgrade_url`, e.g. a Patreon join page). When no policy is configured at all, every path is treated as `public` (backward compatible).
+Patterns are exact (`/special`), prefix (`/app/*`), or `/` (homepage only). Each rule's `on_unauthorized` is `login` (redirect to sign in), `forbidden` (403), `upgrade` (redirect to `upgrade_url`, e.g. a Patreon join page), or `gate` (serve an explainer page **in place**, with no redirect — see below). When no policy is configured at all, every path is treated as `public` (backward compatible).
+
+#### Serving a gate page in place (`on_unauthorized: 'gate'`)
+
+Instead of redirecting, a denied request can serve an explainer page **at the requested URL** (no redirect, status `200` by default). The page shown depends on login state, so anonymous and logged-in-but-unentitled visitors can see different copy:
+
+- **`anonymous`** (required) — shown to visitors who are **not** logged in (e.g. a "become a patron + log in" page).
+- **`unentitled`** (optional) — shown to logged-in visitors who fail the requirement (e.g. a "pledge/upgrade" page). Falls back to `anonymous` when omitted.
+- **`status`** (optional) — HTTP status for the served page; defaults to `200` to preserve typical explainer-page UX (set `403` if you prefer).
+
+Each variant is a `PageSource` whose body comes from **either** the `ASSETS` binding **or** a path proxied from `ORIGIN_URL` — exactly one of:
+
+- **`{ asset: '/early-access' }`** — a local file from `ASSETS` (resolved like other assets, `/early-access` → `early-access.html`).
+- **`{ origin: '/early-access' }`** — a path proxied from `ORIGIN_URL`. The path must be reachable directly on the origin (the raw site, not behind this worker).
+
+The gate config is set per rule via `gate`, or on the policy default via `default_gate`. The served gate page is produced inside the deny path, so it is not re-subjected to the access policy and no power-strip is injected — the page is expected to carry its own login CTA. Because nothing redirects, there is no loop risk.
+
+```ts
+const accessPolicy = {
+  default: { mode: 'entitlement', provider: 'patreon', condition: { type: 'benefit', benefit_id: '<BENEFIT_ID>' } },
+  default_on_unauthorized: 'gate',
+  default_gate: {
+    anonymous: { origin: '/early-access' }, // or { asset: '/early-access' }
+    unentitled: { origin: '/pledge-needed' }, // or { asset: '/pledge-needed' }
+    // status: 403, // optional; defaults to 200
+  },
+};
+```
 
 Admin users (those listed in `ADMIN_IDS`) bypass every `authenticated`/`entitlement` requirement and can reach any gated path. Their identity is still resolved and the usual identity/entitlement headers are forwarded to the origin — only the gate itself is skipped. (`bypass` paths remain a raw pass-through for everyone, with no identity resolution.)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startup-api/cloudflare",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package/public/users/accounts.html

@@ -12,10 +12,7 @@
     data-ssr-members="{{ssr:account_members_json}}"
     data-ssr-plans="{{ssr:plans_json}}"
   >
-    <power-strip
-      providers="{{ssr:providers}}"
-      style="position: absolute; top: 0; right: 0; z-index: 9999; padding: 0.1rem; border-radius: 0 0 0 0.3rem"
-    >
+    <power-strip providers="{{ssr:providers}}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem">
       <svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem"><path d="M7 2v11h3v9l7-12h-4l4-8z" fill="#ffcc00" /></svg>
     </power-strip>
     <script src="/users/power-strip.js" async></script>
@@ -61,7 +58,7 @@
               <div
                 id="account-avatar-placeholder"
                 class="account-avatar-large"
-                style="background: #f1f3f4; {{ssr:account_placeholder_display}} align-items: center; justify-content: center; color: #5f6368"
+                style="background: var(--surface-alt); {{ssr:account_placeholder_display}} align-items: center; justify-content: center; color: var(--muted-badge-text)"
               >
                 <svg viewBox="0 0 24 24" style="width: 48px; height: 48px; fill: currentColor">
                   <path
@@ -97,8 +94,8 @@
               </button>
             </div>
             <div>
-              <h2 id="display-account-name" style="margin: 0; color: #333">{{ssr:account_name}}</h2>
-              <p id="display-account-plan" style="margin: 0.25rem 0 0 0; color: #666">{{ssr:account_plan_name}}</p>
+              <h2 id="display-account-name" style="margin: 0; color: var(--text)">{{ssr:account_name}}</h2>
+              <p id="display-account-plan" style="margin: 0.25rem 0 0 0; color: var(--text-faint)">{{ssr:account_plan_name}}</p>
             </div>
           </div>
 

package/public/users/admin/index.html

@@ -5,6 +5,56 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Admin Dashboard</title>
     <style>
+      /* Color tokens, flipped by the user's OS color-scheme preference (with a
+         [data-theme] escape hatch) — same approach as the shared user pages
+         (/users/style.css) and the landing page. */
+      :root {
+        --bg: #f9f9f9;
+        --surface: #fff;
+        --surface-muted: #eee;
+        --hover-bg: #f0f0f0;
+        --text: #333;
+        --border: #ddd;
+        --border-light: #eee;
+        --accent: #ffcc00;
+        --accent-hover: #e6b800;
+        --on-accent: #202124;
+        --secondary-btn-bg: #eee;
+        --secondary-btn-hover-bg: #e0e0e0;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-theme='light']) {
+          --bg: #1a1a1a;
+          --surface: #2d2d2d;
+          --surface-muted: #333;
+          --hover-bg: #3c4043;
+          --text: #e0e0e0;
+          --border: #5f6368;
+          --border-light: #444;
+          --accent: #ffcc00;
+          --accent-hover: #e6b800;
+          --on-accent: #202124;
+          --secondary-btn-bg: #3c4043;
+          --secondary-btn-hover-bg: #4a4f54;
+        }
+      }
+
+      [data-theme='dark'] {
+        --bg: #1a1a1a;
+        --surface: #2d2d2d;
+        --surface-muted: #333;
+        --hover-bg: #3c4043;
+        --text: #e0e0e0;
+        --border: #5f6368;
+        --border-light: #444;
+        --accent: #ffcc00;
+        --accent-hover: #e6b800;
+        --on-accent: #202124;
+        --secondary-btn-bg: #3c4043;
+        --secondary-btn-hover-bg: #4a4f54;
+      }
+
       body {
         font-family:
           system-ui,
@@ -13,14 +63,15 @@
         padding: 2rem;
         max-width: 1200px;
         margin: 0 auto;
-        background: #f9f9f9;
+        background: var(--bg);
+        color: var(--text);
       }
       h1,
       h2 {
-        color: #333;
+        color: var(--text);
       }
       section {
-        background: white;
+        background: var(--surface);
         padding: 1.5rem;
         border-radius: 8px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -33,20 +84,22 @@
       }
       input[type='text'] {
         padding: 0.5rem;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border);
         border-radius: 4px;
         flex-grow: 1;
+        background: var(--surface);
+        color: var(--text);
       }
       button {
         padding: 0.5rem 1rem;
-        background: #1a73e8;
-        color: white;
+        background: var(--accent);
+        color: var(--on-accent);
         border: none;
         border-radius: 4px;
         cursor: pointer;
       }
       button:hover {
-        background: #1557b0;
+        background: var(--accent-hover);
       }
       table {
         width: 100%;
@@ -56,21 +109,21 @@
       td {
         text-align: left;
         padding: 0.75rem;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-light);
       }
       th {
-        background: #f0f0f0;
+        background: var(--hover-bg);
       }
       .actions {
         display: flex;
         gap: 0.5rem;
       }
       .secondary-btn {
-        background: #eee;
-        color: #333;
+        background: var(--secondary-btn-bg);
+        color: var(--text);
       }
       .secondary-btn:hover {
-        background: #e0e0e0;
+        background: var(--secondary-btn-hover-bg);
       }
       #toast {
         position: fixed;
@@ -89,6 +142,8 @@
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         width: 400px;
+        background: var(--surface);
+        color: var(--text);
       }
       dialog::backdrop {
         background: rgba(0, 0, 0, 0.5);
@@ -108,9 +163,11 @@
       .form-group select {
         width: 100%;
         padding: 0.5rem;
-        border: 1px solid #ddd;
+        border: 1px solid var(--border);
         border-radius: 4px;
         box-sizing: border-box;
+        background: var(--surface);
+        color: var(--text);
       }
       .modal-actions {
         display: flex;
@@ -121,10 +178,7 @@
     </style>
   </head>
   <body data-ssr-plans="{{ssr:plans_json}}">
-    <power-strip
-      providers="{{ssr:providers}}"
-      style="position: absolute; top: 0; right: 0; z-index: 9999; padding: 0.1rem; border-radius: 0 0 0 0.3rem"
-    >
+    <power-strip providers="{{ssr:providers}}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem">
       <svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem"><path d="M7 2v11h3v9l7-12h-4l4-8z" fill="#ffcc00" /></svg>
     </power-strip>
     <script src="/users/power-strip.js" async></script>
@@ -417,7 +471,7 @@
                         <button class="secondary-btn" onclick="openEditUser('${u.id}')">Edit</button>
                         <button class="secondary-btn" onclick="openUserMemberships('${u.id}')">Memberships</button>
                         <button onclick="impersonate('${u.id}')">Impersonate</button>
-                        <button style="background: #d93025;" onclick="deleteUser('${u.id}')">Delete</button>
+                        <button style="background: #d93025; color: #fff;" onclick="deleteUser('${u.id}')">Delete</button>
                     </td>
                 </tr>
             `,
@@ -443,7 +497,7 @@
                     <td class="actions">
                          <button class="secondary-btn" onclick="openEditAccount('${a.id}')">Edit</button>
                          <button class="secondary-btn" onclick="openMembers('${a.id}')">Members</button>
-                         <button style="background: #d93025;" onclick="deleteAccount('${a.id}')">Delete</button>
+                         <button style="background: #d93025; color: #fff;" onclick="deleteAccount('${a.id}')">Delete</button>
                     </td>
                 </tr>
             `;