feat(06-03): signing page — server component, PDF viewer, field overlays, progress bar
- page.tsx: server component validates JWT + one-time-use before rendering any UI - Three error states (expired/used/invalid) show static pages with no canvas - SigningPageClientWrapper: dynamic import (ssr:false) for react-pdf browser requirement - SigningPageClient: full-scroll PDF viewer with pulsing blue field overlays - Field overlay coordinates convert PDF user-space (bottom-left) to screen (top-left) - SigningProgressBar: sticky bottom bar with X/Y count + jump-to-next + submit button - api/sign/[token]/pdf: token-authenticated PDF streaming route (no agent auth)
This commit is contained in:
Chandler Copeland
55
teressa-copeland-homes/src/app/api/sign/[token]/pdf/route.ts
Normal file
55
teressa-copeland-homes/src/app/api/sign/[token]/pdf/route.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { readFile } from 'fs/promises';
|
||||
import { join } from 'path';
|
||||
import { verifySigningToken } from '@/lib/signing/token';
|
||||
import { db } from '@/lib/db';
|
||||
import { documents } from '@/lib/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
// Public route — authenticated by signing token, no agent auth required
|
||||
export async function GET(
|
||||
_req: NextRequest,
|
||||
{ params }: { params: Promise<{ token: string }> }
|
||||
) {
|
||||
const { token } = await params;
|
||||
|
||||
// Validate JWT (no usedAt check — client may still be viewing while session is active)
|
||||
let payload: { documentId: string; jti: string; exp: number };
|
||||
try {
|
||||
payload = await verifySigningToken(token);
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'Invalid or expired token' }, { status: 401 });
|
||||
}
|
||||
|
||||
// Fetch preparedFilePath
|
||||
const doc = await db.query.documents.findFirst({
|
||||
where: eq(documents.id, payload.documentId),
|
||||
columns: { preparedFilePath: true },
|
||||
});
|
||||
|
||||
if (!doc?.preparedFilePath) {
|
||||
return NextResponse.json({ error: 'Document not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Path traversal guard — preparedFilePath is stored as relative path (e.g. clients/{id}/{uuid}.pdf)
|
||||
const normalizedPath = doc.preparedFilePath.replace(/^\/+/, '');
|
||||
if (normalizedPath.includes('..')) {
|
||||
return NextResponse.json({ error: 'Invalid file path' }, { status: 400 });
|
||||
}
|
||||
|
||||
const absolutePath = join(process.cwd(), 'uploads', normalizedPath);
|
||||
|
||||
try {
|
||||
const fileBuffer = await readFile(absolutePath);
|
||||
return new NextResponse(fileBuffer, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'application/pdf',
|
||||
'Content-Disposition': 'inline',
|
||||
'Cache-Control': 'private, no-store',
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'File not found' }, { status: 404 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { Document, Page, pdfjs } from 'react-pdf';
|
||||
import 'react-pdf/dist/Page/AnnotationLayer.css';
|
||||
import 'react-pdf/dist/Page/TextLayer.css';
|
||||
import { SigningProgressBar } from './SigningProgressBar';
|
||||
import type { SignatureFieldData } from '@/lib/db/schema';
|
||||
|
||||
// Worker setup — reuse same pattern as PdfViewerWrapper (no CDN, works in local/Docker)
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url,
|
||||
).toString();
|
||||
|
||||
// PDF rendered at a fixed width for consistent coordinate math
|
||||
const PDF_RENDER_WIDTH = 800;
|
||||
|
||||
interface PageDimensions {
|
||||
renderedWidth: number;
|
||||
renderedHeight: number;
|
||||
originalWidth: number;
|
||||
originalHeight: number;
|
||||
}
|
||||
|
||||
export interface SignatureCapture {
|
||||
fieldId: string;
|
||||
dataURL: string;
|
||||
}
|
||||
|
||||
interface SigningPageClientProps {
|
||||
token: string;
|
||||
documentName: string;
|
||||
signatureFields: SignatureFieldData[];
|
||||
/** Called when user clicks an unsigned field. Modal added in Plan 04. */
|
||||
onFieldClick?: (fieldId: string) => void;
|
||||
}
|
||||
|
||||
export function SigningPageClient({
|
||||
token,
|
||||
documentName,
|
||||
signatureFields,
|
||||
onFieldClick,
|
||||
}: SigningPageClientProps) {
|
||||
const [numPages, setNumPages] = useState(0);
|
||||
// Map from page number (1-indexed) to rendered dimensions
|
||||
const [pageDimensions, setPageDimensions] = useState<Record<number, PageDimensions>>({});
|
||||
// Set of signed field IDs
|
||||
const [signedFields, setSignedFields] = useState<Set<string>>(new Set());
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Exposed ref for Plan 04 to populate with captured signatures
|
||||
const signaturesRef = useRef<SignatureCapture[]>([]);
|
||||
|
||||
// Group fields by page for efficient lookup
|
||||
const fieldsByPage = signatureFields.reduce<Record<number, SignatureFieldData[]>>(
|
||||
(acc, field) => {
|
||||
const page = field.page;
|
||||
if (!acc[page]) acc[page] = [];
|
||||
acc[page].push(field);
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
const handlePageLoadSuccess = useCallback(
|
||||
(pageNum: number, page: { width: number; height: number; view: number[] }) => {
|
||||
setPageDimensions((prev) => ({
|
||||
...prev,
|
||||
[pageNum]: {
|
||||
renderedWidth: page.width,
|
||||
renderedHeight: page.height,
|
||||
originalWidth: Math.max(page.view[0], page.view[2]),
|
||||
originalHeight: Math.max(page.view[1], page.view[3]),
|
||||
},
|
||||
}));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleFieldClick = useCallback(
|
||||
(fieldId: string) => {
|
||||
if (signedFields.has(fieldId)) return;
|
||||
if (onFieldClick) {
|
||||
onFieldClick(fieldId);
|
||||
}
|
||||
},
|
||||
[signedFields, onFieldClick]
|
||||
);
|
||||
|
||||
const handleJumpToNext = useCallback(() => {
|
||||
const nextUnsigned = signatureFields.find((f) => !signedFields.has(f.id));
|
||||
if (nextUnsigned) {
|
||||
document.getElementById(`field-${nextUnsigned.id}`)?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
});
|
||||
}
|
||||
}, [signatureFields, signedFields]);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (signedFields.size < signatureFields.length || submitting) return;
|
||||
setSubmitting(true);
|
||||
// Submission POST handler added in Plan 04
|
||||
}, [signedFields.size, signatureFields.length, submitting]);
|
||||
|
||||
/**
|
||||
* Convert PDF user-space coordinates (bottom-left origin) to screen overlay position.
|
||||
*
|
||||
* PDF coords: origin at bottom-left, Y increases upward.
|
||||
* Screen coords: origin at top-left, Y increases downward.
|
||||
*
|
||||
* Formula:
|
||||
* screenTop = renderedHeight - (field.y / originalHeight * renderedHeight) - (field.height / originalHeight * renderedHeight)
|
||||
* screenLeft = field.x / originalWidth * renderedWidth
|
||||
*/
|
||||
const getFieldOverlayStyle = (
|
||||
field: SignatureFieldData,
|
||||
dims: PageDimensions
|
||||
): React.CSSProperties => {
|
||||
const scaleX = dims.renderedWidth / dims.originalWidth;
|
||||
const scaleY = dims.renderedHeight / dims.originalHeight;
|
||||
|
||||
const top = dims.renderedHeight - field.y * scaleY - field.height * scaleY;
|
||||
const left = field.x * scaleX;
|
||||
const width = field.width * scaleX;
|
||||
const height = field.height * scaleY;
|
||||
|
||||
return {
|
||||
position: 'absolute',
|
||||
top: `${top}px`,
|
||||
left: `${left}px`,
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
cursor: 'pointer',
|
||||
borderRadius: '3px',
|
||||
animation: 'pulse-border 2s infinite',
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Pulse-border keyframes injected inline */}
|
||||
<style>{`
|
||||
@keyframes pulse-border {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 2px #3b82f6, 0 0 8px 2px rgba(59,130,246,0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 3px #3b82f6, 0 0 16px 4px rgba(59,130,246,0.6);
|
||||
}
|
||||
}
|
||||
.signing-field-signed {
|
||||
box-shadow: 0 0 0 2px #22c55e !important;
|
||||
animation: none !important;
|
||||
background-color: rgba(34,197,94,0.08);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#FAF9F7',
|
||||
fontFamily: 'Georgia, serif',
|
||||
paddingBottom: '80px', /* space for sticky progress bar */
|
||||
}}
|
||||
>
|
||||
{/* Branded header */}
|
||||
<header
|
||||
style={{
|
||||
backgroundColor: '#1B2B4B',
|
||||
color: '#fff',
|
||||
padding: '20px 32px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '20px', fontWeight: 'bold', letterSpacing: '0.02em' }}>
|
||||
Teressa Copeland Homes
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
marginTop: '6px',
|
||||
color: '#C9A84C',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{documentName}
|
||||
</div>
|
||||
<p style={{ fontSize: '14px', marginTop: '8px', color: '#ccc', fontFamily: 'sans-serif' }}>
|
||||
Please review and sign the document below.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* PDF viewer */}
|
||||
<main style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '32px 16px' }}>
|
||||
<Document
|
||||
file={`/api/sign/${token}/pdf`}
|
||||
onLoadSuccess={({ numPages: n }) => setNumPages(n)}
|
||||
loading={
|
||||
<div style={{ padding: '40px', color: '#555', fontFamily: 'sans-serif' }}>
|
||||
Loading document...
|
||||
</div>
|
||||
}
|
||||
error={
|
||||
<div style={{ padding: '40px', color: '#c00', fontFamily: 'sans-serif' }}>
|
||||
Failed to load document. Please try refreshing.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{Array.from({ length: numPages }, (_, i) => {
|
||||
const pageNum = i + 1;
|
||||
const dims = pageDimensions[pageNum];
|
||||
const fieldsOnPage = fieldsByPage[pageNum] ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={pageNum}
|
||||
style={{
|
||||
position: 'relative',
|
||||
marginBottom: '24px',
|
||||
boxShadow: '0 2px 12px rgba(0,0,0,0.12)',
|
||||
}}
|
||||
>
|
||||
<Page
|
||||
pageNumber={pageNum}
|
||||
width={PDF_RENDER_WIDTH}
|
||||
onLoadSuccess={(page) => handlePageLoadSuccess(pageNum, page)}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
/>
|
||||
|
||||
{/* Signature field overlays — rendered once page dimensions are known */}
|
||||
{dims &&
|
||||
fieldsOnPage.map((field) => {
|
||||
const isSigned = signedFields.has(field.id);
|
||||
const overlayStyle = getFieldOverlayStyle(field, dims);
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
id={`field-${field.id}`}
|
||||
className={isSigned ? 'signing-field-signed' : ''}
|
||||
style={overlayStyle}
|
||||
onClick={() => handleFieldClick(field.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Signature field${isSigned ? ' (signed)' : ' — click to sign'}`}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleFieldClick(field.id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Document>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Sticky progress bar */}
|
||||
<SigningProgressBar
|
||||
total={signatureFields.length}
|
||||
signed={signedFields.size}
|
||||
onJumpToNext={handleJumpToNext}
|
||||
onSubmit={handleSubmit}
|
||||
submitting={submitting}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Export signed fields setter so Plan 04 can mark fields as signed after modal capture
|
||||
export type { SigningPageClientProps };
|
||||
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { SignatureFieldData } from '@/lib/db/schema';
|
||||
|
||||
// Dynamically import to disable SSR — react-pdf requires browser APIs (canvas, worker)
|
||||
const SigningPageClient = dynamic(
|
||||
() => import('./SigningPageClient').then((m) => m.SigningPageClient),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#FAF9F7',
|
||||
fontFamily: 'Georgia, serif',
|
||||
color: '#555',
|
||||
}}
|
||||
>
|
||||
Loading document...
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
interface SigningPageClientWrapperProps {
|
||||
token: string;
|
||||
documentName: string;
|
||||
signatureFields: SignatureFieldData[];
|
||||
}
|
||||
|
||||
export function SigningPageClientWrapper({
|
||||
token,
|
||||
documentName,
|
||||
signatureFields,
|
||||
}: SigningPageClientWrapperProps) {
|
||||
return (
|
||||
<SigningPageClient
|
||||
token={token}
|
||||
documentName={documentName}
|
||||
signatureFields={signatureFields}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
interface SigningProgressBarProps {
|
||||
total: number;
|
||||
signed: number;
|
||||
onJumpToNext: () => void;
|
||||
onSubmit: () => void;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
export function SigningProgressBar({
|
||||
total,
|
||||
signed,
|
||||
onJumpToNext,
|
||||
onSubmit,
|
||||
submitting,
|
||||
}: SigningProgressBarProps) {
|
||||
const allSigned = signed >= total;
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 50,
|
||||
backgroundColor: '#1B2B4B',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px 24px',
|
||||
boxShadow: '0 -2px 8px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '15px' }}>
|
||||
{signed} of {total} signature{total !== 1 ? 's' : ''} complete
|
||||
</span>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
{!allSigned && (
|
||||
<button
|
||||
onClick={onJumpToNext}
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #C9A84C',
|
||||
color: '#C9A84C',
|
||||
padding: '8px 18px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
Jump to Next
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
disabled={!allSigned || submitting}
|
||||
style={{
|
||||
backgroundColor: allSigned ? '#C9A84C' : '#555',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
padding: '8px 22px',
|
||||
borderRadius: '4px',
|
||||
cursor: allSigned ? 'pointer' : 'not-allowed',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
opacity: submitting ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{submitting ? 'Submitting...' : 'Submit Signature'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
teressa-copeland-homes/src/app/sign/[token]/page.tsx
Normal file
108
teressa-copeland-homes/src/app/sign/[token]/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { verifySigningToken } from '@/lib/signing/token';
|
||||
import { db } from '@/lib/db';
|
||||
import { signingTokens, documents } from '@/lib/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
import { SigningPageClientWrapper } from './_components/SigningPageClientWrapper';
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ token: string }>;
|
||||
}
|
||||
|
||||
export default async function SignPage({ params }: Props) {
|
||||
const { token } = await params;
|
||||
|
||||
// CRITICAL: Validate BEFORE rendering any signing UI — no canvas flash on invalid tokens
|
||||
let payload: { documentId: string; jti: string } | null = null;
|
||||
let isExpired = false;
|
||||
try {
|
||||
payload = await verifySigningToken(token);
|
||||
} catch {
|
||||
isExpired = true;
|
||||
}
|
||||
|
||||
if (isExpired) {
|
||||
return <ErrorPage type="expired" />;
|
||||
}
|
||||
|
||||
if (!payload) {
|
||||
return <ErrorPage type="invalid" />;
|
||||
}
|
||||
|
||||
// Check one-time use
|
||||
const tokenRow = await db.query.signingTokens.findFirst({
|
||||
where: eq(signingTokens.jti, payload.jti),
|
||||
});
|
||||
|
||||
if (!tokenRow) return <ErrorPage type="invalid" />;
|
||||
|
||||
if (tokenRow.usedAt !== null) {
|
||||
return <ErrorPage type="used" signedAt={tokenRow.usedAt} />;
|
||||
}
|
||||
|
||||
const doc = await db.query.documents.findFirst({
|
||||
where: eq(documents.id, payload.documentId),
|
||||
});
|
||||
|
||||
if (!doc || !doc.preparedFilePath) return <ErrorPage type="invalid" />;
|
||||
|
||||
return (
|
||||
<SigningPageClientWrapper
|
||||
token={token}
|
||||
documentName={doc.name}
|
||||
signatureFields={doc.signatureFields ?? []}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorPage({
|
||||
type,
|
||||
signedAt,
|
||||
}: {
|
||||
type: 'expired' | 'used' | 'invalid';
|
||||
signedAt?: Date | null;
|
||||
}) {
|
||||
const messages = {
|
||||
expired: {
|
||||
title: 'Link Expired',
|
||||
body: 'This signing link has expired. Please contact Teressa Copeland for a new link.',
|
||||
},
|
||||
used: {
|
||||
title: 'Already Signed',
|
||||
body: `This document has already been signed${
|
||||
signedAt
|
||||
? ' on ' +
|
||||
signedAt.toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
: ''
|
||||
}.`,
|
||||
},
|
||||
invalid: {
|
||||
title: 'Invalid Link',
|
||||
body: 'This signing link is not valid. Please check your email for the correct link.',
|
||||
},
|
||||
};
|
||||
const { title, body } = messages[type];
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#FAF9F7',
|
||||
fontFamily: 'Georgia, serif',
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'center', maxWidth: '420px', padding: '40px' }}>
|
||||
<div style={{ fontSize: '48px', marginBottom: '16px' }}>
|
||||
{type === 'used' ? '\u2713' : '\u26a0'}
|
||||
</div>
|
||||
<h1 style={{ color: '#1B2B4B', fontSize: '24px', marginBottom: '12px' }}>{title}</h1>
|
||||
<p style={{ color: '#555', fontSize: '16px', lineHeight: '1.6' }}>{body}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user