@novacraft-engineering/mailbox 0.4.3 → 0.4.5

package/app/api/share/[id]/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from 'next/server'
 import { getShare, getSharePasswordHash, recordShareDownload } from '@/lib/mailbox'
 import { verifyPassword } from '@/lib/password'
-import { objectExists, presign } from '@/lib/r2'
+import { objectExists } from '@/lib/r2'
 import { clientKey, rateLimit } from '@/lib/rate-limit'
+import { issueShareTicket } from '@/lib/share-ticket'
 
 export const runtime = 'nodejs'
 export const dynamic = 'force-dynamic'
@@ -37,7 +38,7 @@ export async function GET(_req: Request, context: { params: Promise<{ id: string
   })
 }
 
-/** Exchanges the password for a short-lived signed URL to the object itself. */
+/** Exchanges the password for a short-lived link to the bytes, served from this domain. */
 export async function POST(req: Request, context: { params: Promise<{ id: string }> }) {
   const { id } = await context.params
 
@@ -77,9 +78,13 @@ export async function POST(req: Request, context: { params: Promise<{ id: string
   }
 
   await recordShareDownload(id)
-  // Two minutes: long enough to start the download, too short to pass around.
-  const url = presign(share.objectKey, 'GET', 120, {
-    'response-content-disposition': `attachment; filename="${share.filename.replace(/"/g, '')}"`,
-  })
+  // Served from this domain rather than the bucket: the bucket is a second hostname for
+  // the recipient's network to reach, and when it cannot the download silently never
+  // starts. The ticket carries the password decision the short distance to the bytes.
+  const ticket = issueShareTicket(id)
+  if (!ticket) {
+    return NextResponse.json({ ok: false, error: 'Downloads are not configured.' }, { status: 503 })
+  }
+  const url = `/api/share/${encodeURIComponent(id)}/download?t=${encodeURIComponent(ticket)}`
   return NextResponse.json({ ok: true, url, filename: share.filename })
 }

package/app/mail/ConfirmDialog.tsx

@@ -11,40 +11,64 @@ export type ConfirmRequest = {
   cancelLabel?: string
   /** Paints the confirm button as destructive. */
   danger?: boolean
+  /** Asks for a value as well, replacing window.prompt. */
+  field?: { label: string; type?: 'text' | 'password'; placeholder?: string; initial?: string }
 }
 
-type Pending = ConfirmRequest & { resolve: (value: boolean) => void }
+type Settled = { ok: boolean; value: string }
+type Pending = ConfirmRequest & { resolve: (value: Settled) => void }
 
-const ConfirmContext = createContext<(request: ConfirmRequest) => Promise<boolean>>(async () => false)
+const ConfirmContext = createContext<(request: ConfirmRequest) => Promise<Settled>>(async () => ({ ok: false, value: '' }))
 
 /** Replaces window.confirm, which cannot be styled and looks like the browser, not the app. */
 export function useConfirm() {
-  return useContext(ConfirmContext)
+  const ask = useContext(ConfirmContext)
+  return useCallback(async (request: ConfirmRequest) => (await ask(request)).ok, [ask])
+}
+
+/** Replaces window.prompt. Resolves to null when dismissed, so a blank answer stays meaningful. */
+export function usePrompt() {
+  const ask = useContext(ConfirmContext)
+  return useCallback(
+    async (request: ConfirmRequest & { field: NonNullable<ConfirmRequest['field']> }) => {
+      const settled = await ask(request)
+      return settled.ok ? settled.value : null
+    },
+    [ask],
+  )
 }
 
 export function ConfirmProvider({ children }: { children: ReactNode }) {
   const [pending, setPending] = useState<Pending | null>(null)
+  const [draft, setDraft] = useState('')
+  const [reveal, setReveal] = useState(false)
   const confirmRef = useRef<HTMLButtonElement>(null)
+  const fieldRef = useRef<HTMLInputElement>(null)
 
   const confirm = useCallback(
-    (request: ConfirmRequest) => new Promise<boolean>(resolve => setPending({ ...request, resolve })),
+    (request: ConfirmRequest) => new Promise<Settled>(resolve => {
+      setDraft(request.field?.initial ?? '')
+      setReveal(false)
+      setPending({ ...request, resolve })
+    }),
     [],
   )
 
   const settle = useCallback(
-    (value: boolean) => {
+    (ok: boolean) => {
       setPending(current => {
-        current?.resolve(value)
+        current?.resolve({ ok, value: draft })
         return null
       })
     },
-    [],
+    [draft],
   )
 
   // Escape cancels and Enter confirms, matching what the native dialog did.
   useEffect(() => {
     if (!pending) return
-    confirmRef.current?.focus()
+    if (pending.field) fieldRef.current?.focus()
+    else confirmRef.current?.focus()
     const onKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') { event.preventDefault(); settle(false) }
       if (event.key === 'Enter') { event.preventDefault(); settle(true) }
@@ -67,6 +91,27 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
           >
             <p className={styles.confirmTitle}>{pending.title}</p>
             {pending.body && <div className={styles.confirmBody}>{pending.body}</div>}
+            {pending.field && (
+              <label className={styles.confirmField}>
+                <span>{pending.field.label}</span>
+                <div className={styles.pwWrap}>
+                  <input
+                    ref={fieldRef}
+                    className={styles.confirmInput}
+                    type={pending.field.type === 'password' && !reveal ? 'password' : 'text'}
+                    autoComplete={pending.field.type === 'password' ? 'new-password' : 'off'}
+                    placeholder={pending.field.placeholder}
+                    value={draft}
+                    onChange={event => setDraft(event.target.value)}
+                  />
+                  {pending.field.type === 'password' && (
+                    <button type="button" className={styles.pwToggle} onClick={() => setReveal(show => !show)}>
+                      {reveal ? 'Hide' : 'Show'}
+                    </button>
+                  )}
+                </div>
+              </label>
+            )}
             <div className={styles.confirmActions}>
               <button type="button" className={styles.confirmCancel} onClick={() => settle(false)}>
                 {pending.cancelLabel ?? 'Cancel'}

package/app/mail/page.module.css

@@ -1007,6 +1007,7 @@
 .chipDelivered { color: var(--nc-success); border-color: rgba(52,211,153,.3); }
 .chipBounced { color: var(--nc-danger); border-color: color-mix(in srgb, var(--nc-danger) 30%, transparent); }
 .chipDraft { color: var(--nc-violet-200); border-color: rgba(165,120,255,.3); }
+.chipAuto { color: var(--nc-fg-3); border-color: var(--nc-line-2); }
 
 .emptyList {
   display: flex;
@@ -5395,6 +5396,32 @@
   word-break: break-word;
 }
 
+.confirmField {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 14px;
+}
+
+.confirmField > span {
+  font: 500 12.5px/1.4 var(--nc-font-sans);
+  color: var(--nc-fg-2);
+}
+
+.confirmField .pwWrap { width: 100%; }
+
+.confirmInput {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 10px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 400 14px/1.4 var(--nc-font-sans);
+}
+
+.confirmInput:focus { border-color: var(--nc-violet-400); outline: none; }
+
 .confirmActions {
   display: flex;
   justify-content: flex-end;
@@ -7007,3 +7034,35 @@
     width: auto;
   }
 }
+
+
+/* ── Field-level validation ─────────────────────────────────────────────── */
+/* Shake stays on transform so it composites; the ring is a box-shadow rather
+   than a border so the field does not reflow by a pixel when it errors. */
+@keyframes ncFieldShake {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  15%      { transform: translate3d(-5px, 0, 0); }
+  30%      { transform: translate3d(4px, 0, 0); }
+  45%      { transform: translate3d(-3px, 0, 0); }
+  60%      { transform: translate3d(2px, 0, 0); }
+  80%      { transform: translate3d(-1px, 0, 0); }
+}
+
+.fieldBad,
+.fieldBad input {
+  border-color: var(--nc-danger) !important;
+  box-shadow: 0 0 0 1px var(--nc-danger);
+}
+.fieldBad {
+  animation: ncFieldShake .4s cubic-bezier(.36, .07, .19, .97) both;
+  will-change: transform;
+}
+.msgBad {
+  color: var(--nc-danger);
+  animation: ncFieldShake .4s cubic-bezier(.36, .07, .19, .97) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fieldBad,
+  .msgBad { animation: none; }
+}