@glw907/cairn-cms 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.37.0
+
+The magic-link sign-in confirmation is now a branded panel in place of the flat success bar. After an
+editor requests a link, the page shows a mail icon in a soft success tile, a "Check your email"
+heading, and the ten-minute expiry note, all in the admin's Warm Stone styling. Below a divider it
+adds guidance for the link that never arrives: check the spam folder first, then confirm the address
+matches the one the site owner added. This covers the common fat-finger case, where a mistyped address
+gets the same neutral confirmation and no email. A "Use a different email" action returns to the form
+so the address gets corrected without a reload. The confirmation copy stays identical whether or not
+the email is on the allowlist, so the page still never leaks membership.
+
+The change is internal to the `LoginPage` component and needs no action.
+
 ## 0.36.0
 
 cairn now emits structured diagnostic events. The engine had three bare `console.error` calls and no

package/dist/components/LoginPage.svelte

@@ -7,6 +7,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
 <script lang="ts">
   import './cairn-admin.css';
   import { onMount } from 'svelte';
+  import MailCheckIcon from '@lucide/svelte/icons/mail-check';
   import CairnLogo from './CairnLogo.svelte';
   import CsrfField from './CsrfField.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
@@ -22,6 +23,9 @@ the allowlist, so the page never leaks membership (spec §7.1).
   let { data, form }: Props = $props();
 
   let rootEl = $state<HTMLElement>();
+  // Lets a mistyped address go back to the form without a reload, even though the server still
+  // reports `sent`. The success copy never reveals whether the email was on the allowlist.
+  let dismissed = $state(false);
   onMount(() => {
     if (rootEl) warnIfChromeWrapped(rootEl);
   });
@@ -44,13 +48,35 @@ the allowlist, so the page never leaks membership (spec §7.1).
     </div>
 
     <h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
-    <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
 
-    {#if form?.sent}
-      <div role="status" class="alert alert-success text-sm">
-        Check your email for a sign-in link. It expires in 10 minutes.
+    {#if form?.sent && !dismissed}
+      <div role="status" class="mt-5 flex flex-col items-center text-center">
+        <div
+          class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl text-[var(--color-success)]"
+          style="background-color: color-mix(in oklch, var(--color-success) 16%, transparent);"
+        >
+          <MailCheckIcon class="h-6 w-6" />
+        </div>
+        <h2 class="text-lg font-semibold">Check your email</h2>
+        <p class="mt-1 text-sm text-[var(--color-muted)]">
+          We sent a sign-in link to your inbox. Open it within 10 minutes to finish signing in.
+        </p>
+        <div class="mt-5 w-full border-t border-[var(--cairn-card-border)] pt-4 text-left">
+          <p class="text-sm text-[var(--color-muted)]">
+            No link after a minute or two? Check your spam folder first. If it still hasn't arrived,
+            double-check the address. It has to match the one your site owner added.
+          </p>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm mt-3 -ml-2 text-primary"
+            onclick={() => (dismissed = true)}
+          >
+            Use a different email
+          </button>
+        </div>
       </div>
     {:else}
+      <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
       {#if data.error}
         <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}

package/dist/components/cairn-admin.css

@@ -3337,6 +3337,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -3394,6 +3398,10 @@
     margin-bottom: calc(var(--spacing) * 6);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .-ml-2 {
+    margin-left: calc(var(--spacing) * -2);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -3786,6 +3794,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -3794,6 +3806,10 @@
     height: calc(var(--spacing) * 8);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -3852,6 +3868,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -3864,6 +3884,10 @@
     width: calc(var(--spacing) * 9);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -4420,6 +4444,10 @@
     padding-top: calc(var(--spacing) * 3);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -4432,6 +4460,10 @@
     text-align: center;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-left {
+    text-align: left;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-right {
     text-align: right;
   }
@@ -4561,6 +4593,10 @@
     color: var(--color-subtle);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-\[var\(--color-success\)\] {
+    color: var(--color-success);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-base-content {
     color: var(--color-base-content);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [

package/src/lib/components/LoginPage.svelte

@@ -7,6 +7,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
 <script lang="ts">
   import './cairn-admin.css';
   import { onMount } from 'svelte';
+  import MailCheckIcon from '@lucide/svelte/icons/mail-check';
   import CairnLogo from './CairnLogo.svelte';
   import CsrfField from './CsrfField.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
@@ -22,6 +23,9 @@ the allowlist, so the page never leaks membership (spec §7.1).
   let { data, form }: Props = $props();
 
   let rootEl = $state<HTMLElement>();
+  // Lets a mistyped address go back to the form without a reload, even though the server still
+  // reports `sent`. The success copy never reveals whether the email was on the allowlist.
+  let dismissed = $state(false);
   onMount(() => {
     if (rootEl) warnIfChromeWrapped(rootEl);
   });
@@ -44,13 +48,35 @@ the allowlist, so the page never leaks membership (spec §7.1).
     </div>
 
     <h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
-    <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
 
-    {#if form?.sent}
-      <div role="status" class="alert alert-success text-sm">
-        Check your email for a sign-in link. It expires in 10 minutes.
+    {#if form?.sent && !dismissed}
+      <div role="status" class="mt-5 flex flex-col items-center text-center">
+        <div
+          class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl text-[var(--color-success)]"
+          style="background-color: color-mix(in oklch, var(--color-success) 16%, transparent);"
+        >
+          <MailCheckIcon class="h-6 w-6" />
+        </div>
+        <h2 class="text-lg font-semibold">Check your email</h2>
+        <p class="mt-1 text-sm text-[var(--color-muted)]">
+          We sent a sign-in link to your inbox. Open it within 10 minutes to finish signing in.
+        </p>
+        <div class="mt-5 w-full border-t border-[var(--cairn-card-border)] pt-4 text-left">
+          <p class="text-sm text-[var(--color-muted)]">
+            No link after a minute or two? Check your spam folder first. If it still hasn't arrived,
+            double-check the address. It has to match the one your site owner added.
+          </p>
+          <button
+            type="button"
+            class="btn btn-ghost btn-sm mt-3 -ml-2 text-primary"
+            onclick={() => (dismissed = true)}
+          >
+            Use a different email
+          </button>
+        </div>
       </div>
     {:else}
+      <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
       {#if data.error}
         <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}