@dbx-tools/ui-email 0.6.55 → 0.6.57

package/README.md

@@ -66,7 +66,10 @@ import { EmailPreview } from "@dbx-tools/ui-email/react";
 ```
 
 Use `EmailPreview` when a page needs the same full branded card without action
-buttons, such as a review queue, audit log, or test harness.
+buttons, such as a review queue, audit log, or test harness. It projects the
+nearest `BrandProvider` context into email-safe colors and typography, so a live
+site brand picker updates the preview too. Pass the optional `brand` prop when a
+specific message needs an independent campaign or partner identity.
 
 ## Provide A Compose View
 
@@ -134,6 +137,11 @@ It holds no token: the session lives in an HttpOnly cookie the browser sends
 automatically. `title` and `description` override the default copy, which
 otherwise names the app from the brand context.
 
+Before requesting a code, the email field requires exactly one address parsed
+and validated by `@dbx-tools/shared-core`'s `net.parseEmails` + `net.isEmail`.
+Malformed or multi-address input stays in the browser and never reaches the auth
+endpoint.
+
 The code field carries `autocomplete="one-time-code"`, which is what lets iOS,
 Android, and Safari offer the code straight from the notification. That only pays
 off while the email keeps the conventional `Your verification code is: / <code>`

package/package.json

@@ -24,11 +24,11 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.55",
-    "@dbx-tools/shared-email": "0.6.55",
-    "@dbx-tools/shared-email-template": "0.6.55",
-    "@dbx-tools/ui-appkit": "0.6.55",
-    "@dbx-tools/ui-branding": "0.6.55",
+    "@dbx-tools/shared-core": "0.6.57",
+    "@dbx-tools/shared-email": "0.6.57",
+    "@dbx-tools/shared-email-template": "0.6.57",
+    "@dbx-tools/ui-appkit": "0.6.57",
+    "@dbx-tools/ui-branding": "0.6.57",
     "lucide-react": "^0.554.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
@@ -37,7 +37,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.55",
+  "version": "0.6.57",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/auth-gate.tsx

@@ -1,4 +1,4 @@
-import { string } from "@dbx-tools/shared-core";
+import { net, string } from "@dbx-tools/shared-core";
 import type { AuthStatus } from "@dbx-tools/shared-email";
 import { Button, Input } from "@dbx-tools/ui-appkit/react";
 import { BrandIcon, useBrand } from "@dbx-tools/ui-branding/react";
@@ -86,12 +86,19 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
   const requestCode = useCallback(
     async (e: FormEvent) => {
       e.preventDefault();
-      if (!email.trim() || busy) return;
+      if (busy) return;
+      const addresses = net.parseEmails(email);
+      const normalizedEmail = addresses[0];
+      if (addresses.length !== 1 || !normalizedEmail || !net.isEmail(normalizedEmail)) {
+        setNotice("Enter a valid email address.");
+        return;
+      }
       setBusy(true);
       setNotice(null);
+      setEmail(normalizedEmail);
       try {
         const result = await postJson<{ ok: true; retryAfter?: number }>(`${AUTH_BASE}/request`, {
-          email: email.trim(),
+          email: normalizedEmail,
         });
         // Anti-enumeration: always advance to the code step. Surface only a
         // rate-limit cooldown, which leaks no allow-list state.
@@ -158,12 +165,13 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
         </p>
 
         {phase === "email" ? (
-          <form onSubmit={requestCode} className="space-y-3">
+          <form key="email" noValidate onSubmit={requestCode} className="space-y-3">
             <Input
               type="email"
+              name="email"
               autoComplete="email"
               aria-label="Email address"
-              placeholder="you@company.com"
+              placeholder="you@example.com"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
@@ -173,7 +181,7 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
             </Button>
           </form>
         ) : (
-          <form onSubmit={verifyCode} className="space-y-3">
+          <form key="code" onSubmit={verifyCode} className="space-y-3">
             {/*
               `autoComplete="one-time-code"` is what lets iOS/Android/Safari offer
               the code straight from the notification, and it only pays off when
@@ -182,6 +190,8 @@ export function AuthGate({ children, title, description }: AuthGateProps): React
               number pad without rejecting a paste.
             */}
             <Input
+              type="text"
+              name="code"
               inputMode="numeric"
               autoComplete="one-time-code"
               aria-label="Verification code"

package/src/react/email-approval-card.tsx

@@ -1,5 +1,10 @@
-import { EmailCard } from "@dbx-tools/shared-email-template";
+import {
+  EmailCard,
+  emailBrandFromContext,
+  type EmailBrand,
+} from "@dbx-tools/shared-email-template";
 import { Button } from "@dbx-tools/ui-appkit/react";
+import { useBrand } from "@dbx-tools/ui-branding/react";
 import { CheckIcon, MailIcon, XIcon } from "lucide-react";
 import { attachmentNames, joinAddresses, type EmailDraft } from "./fields.ts";
 
@@ -16,6 +21,8 @@ export type { EmailDraft } from "./fields.ts";
 /** Props for {@link EmailPreview}. */
 export interface EmailPreviewProps {
   email: EmailDraft;
+  /** Optional email-only brand. Defaults to the active `BrandProvider` context. */
+  brand?: EmailBrand;
 }
 
 /**
@@ -24,7 +31,8 @@ export interface EmailPreviewProps {
  * rendered through the same React Email body used for delivery. Fields that
  * are empty are omitted.
  */
-export const EmailPreview = ({ email }: EmailPreviewProps) => {
+export const EmailPreview = ({ email, brand }: EmailPreviewProps) => {
+  const { context } = useBrand();
   const to = joinAddresses(email.to);
   const cc = joinAddresses(email.cc);
   const bcc = joinAddresses(email.bcc);
@@ -36,7 +44,12 @@ export const EmailPreview = ({ email }: EmailPreviewProps) => {
   if (attachments) headers.push(["Files", attachments]);
   return (
     <div className="overflow-x-auto rounded-2xl bg-muted/20 p-2">
-      <EmailCard subject={email.subject || "Message"} body={email.body || ""} headers={headers} />
+      <EmailCard
+        subject={email.subject || "Message"}
+        body={email.body || ""}
+        headers={headers}
+        brand={brand ?? emailBrandFromContext(context)}
+      />
     </div>
   );
 };