odentas
59749d481b
- Remplacer Cloudinary (US) par solution 100% AWS eu-west-3 - Lambda odentas-sign-pdf-converter avec pdftoppm - Lambda Layer poppler-utils v5 avec dépendances complètes - Trigger S3 ObjectCreated pour conversion automatique - Support multi-pages validé (PDF 3 pages) - Stockage images dans S3 odentas-docs - PDFImageViewer pour affichage images converties - Conformité RGPD garantie (données EU uniquement)
429 lines
15 KiB
TypeScript
429 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { PenTool, RotateCcw, Check, Loader2, AlertCircle, FileText, Info } from 'lucide-react';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
// Charger le PDFImageViewer côté client uniquement (conversion PDF vers images comme Docuseal)
|
|
const PDFImageViewer = dynamic(() => import('./PDFImageViewer'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="h-[700px] bg-slate-50 rounded-xl flex flex-col items-center justify-center">
|
|
<Loader2 className="w-12 h-12 text-indigo-600 animate-spin mb-4" />
|
|
<p className="text-slate-600 font-medium">Chargement du visualiseur...</p>
|
|
</div>
|
|
),
|
|
});
|
|
|
|
interface SignatureCaptureProps {
|
|
signerId: string;
|
|
requestId: string;
|
|
signerName: string;
|
|
signerRole: string;
|
|
documentTitle: string;
|
|
sessionToken: string;
|
|
onCompleted: () => void;
|
|
}
|
|
|
|
interface SignPosition {
|
|
page: number;
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
role: string;
|
|
}
|
|
|
|
export default function SignatureCapture({
|
|
signerId,
|
|
requestId,
|
|
signerName,
|
|
signerRole,
|
|
documentTitle,
|
|
sessionToken,
|
|
onCompleted,
|
|
}: SignatureCaptureProps) {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const [isDrawing, setIsDrawing] = useState(false);
|
|
const [hasDrawn, setHasDrawn] = useState(false);
|
|
const [consentChecked, setConsentChecked] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [lastPoint, setLastPoint] = useState<{ x: number; y: number } | null>(null);
|
|
|
|
// PDF Viewer state
|
|
const [pdfUrl, setPdfUrl] = useState<string | null>(null);
|
|
const [signaturePositions, setSignaturePositions] = useState<SignPosition[]>([]);
|
|
const [isPdfLoading, setIsPdfLoading] = useState(true);
|
|
|
|
// Load PDF and signature positions
|
|
useEffect(() => {
|
|
async function loadPdfAndPositions() {
|
|
try {
|
|
// Get PDF presigned URL
|
|
const pdfResponse = await fetch(`/api/odentas-sign/requests/${requestId}/pdf-url`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${sessionToken}`,
|
|
},
|
|
});
|
|
|
|
if (!pdfResponse.ok) {
|
|
throw new Error('Impossible de charger le document PDF');
|
|
}
|
|
|
|
const pdfData = await pdfResponse.json();
|
|
setPdfUrl(pdfData.url);
|
|
|
|
// Get signature positions
|
|
const positionsResponse = await fetch(`/api/odentas-sign/requests/${requestId}/positions`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${sessionToken}`,
|
|
},
|
|
});
|
|
|
|
if (!positionsResponse.ok) {
|
|
throw new Error('Impossible de charger les positions de signature');
|
|
}
|
|
|
|
const positionsData = await positionsResponse.json();
|
|
setSignaturePositions(positionsData.positions || []);
|
|
} catch (err) {
|
|
console.error('[PDF] Erreur lors du chargement:', err);
|
|
setError(err instanceof Error ? err.message : 'Erreur de chargement');
|
|
} finally {
|
|
setIsPdfLoading(false);
|
|
}
|
|
}
|
|
|
|
loadPdfAndPositions();
|
|
}, [requestId, sessionToken]);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
// Set canvas size to match display size
|
|
const rect = canvas.getBoundingClientRect();
|
|
canvas.width = rect.width * window.devicePixelRatio;
|
|
canvas.height = rect.height * window.devicePixelRatio;
|
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
|
|
|
// Set drawing style
|
|
ctx.strokeStyle = '#1e293b';
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
// Clear canvas
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}, []);
|
|
|
|
function getCoordinates(e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return { x: 0, y: 0 };
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
if ('touches' in e) {
|
|
return {
|
|
x: e.touches[0].clientX - rect.left,
|
|
y: e.touches[0].clientY - rect.top,
|
|
};
|
|
}
|
|
|
|
return {
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top,
|
|
};
|
|
}
|
|
|
|
function startDrawing(e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) {
|
|
e.preventDefault();
|
|
setIsDrawing(true);
|
|
setHasDrawn(true);
|
|
|
|
const coords = getCoordinates(e);
|
|
setLastPoint(coords);
|
|
|
|
const ctx = canvasRef.current?.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(coords.x, coords.y);
|
|
}
|
|
|
|
function draw(e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) {
|
|
e.preventDefault();
|
|
if (!isDrawing) return;
|
|
|
|
const coords = getCoordinates(e);
|
|
const ctx = canvasRef.current?.getContext('2d');
|
|
if (!ctx || !lastPoint) return;
|
|
|
|
ctx.lineTo(coords.x, coords.y);
|
|
ctx.stroke();
|
|
|
|
setLastPoint(coords);
|
|
}
|
|
|
|
function stopDrawing() {
|
|
setIsDrawing(false);
|
|
setLastPoint(null);
|
|
}
|
|
|
|
function clearSignature() {
|
|
const canvas = canvasRef.current;
|
|
const ctx = canvas?.getContext('2d');
|
|
if (!canvas || !ctx) return;
|
|
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
setHasDrawn(false);
|
|
}
|
|
|
|
function canvasToBase64(): string {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
throw new Error('Canvas not found');
|
|
}
|
|
|
|
// Get full data URL including the data:image/png;base64, prefix
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
async function submitSignature() {
|
|
if (!hasDrawn || !consentChecked) return;
|
|
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Convert canvas to base64
|
|
const signatureImageBase64 = canvasToBase64();
|
|
|
|
const consentText = `Je consens à signer électroniquement le document "${documentTitle}" et confirme que cette signature a la même valeur juridique qu'une signature manuscrite.`;
|
|
|
|
// Submit
|
|
const response = await fetch(`/api/odentas-sign/signers/${signerId}/sign`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${sessionToken}`,
|
|
},
|
|
body: JSON.stringify({
|
|
signatureImageBase64,
|
|
consentText,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Erreur lors de la signature');
|
|
}
|
|
|
|
// Success!
|
|
onCompleted();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Erreur inconnue');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
className="w-full min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4"
|
|
>
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden mb-6">
|
|
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 px-8 py-6 text-white">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2">Signature du document</h1>
|
|
<p className="text-indigo-100 text-lg">{documentTitle}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-xs text-indigo-200 uppercase tracking-wider mb-1">Signataire</p>
|
|
<p className="font-semibold text-lg">{signerName}</p>
|
|
<p className="text-sm text-indigo-100">{signerRole}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two-column layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Left: PDF Viewer */}
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden h-full">
|
|
<div className="px-6 py-4 border-b border-slate-200 bg-slate-50">
|
|
<h2 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
|
<FileText className="w-5 h-5 text-indigo-600" />
|
|
Document à signer
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
{isPdfLoading ? (
|
|
<div className="h-[700px] bg-slate-50 rounded-xl flex flex-col items-center justify-center">
|
|
<Loader2 className="w-12 h-12 text-indigo-600 animate-spin mb-4" />
|
|
<p className="text-slate-600 font-medium">Chargement du document...</p>
|
|
</div>
|
|
) : pdfUrl ? (
|
|
<div className="h-[700px]">
|
|
<PDFImageViewer
|
|
pdfUrl={pdfUrl}
|
|
positions={signaturePositions}
|
|
currentSignerRole={signerRole}
|
|
requestId={requestId}
|
|
sessionToken={sessionToken}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="h-[700px] bg-slate-50 rounded-xl flex flex-col items-center justify-center">
|
|
<FileText className="w-16 h-16 text-slate-300 mb-4" />
|
|
<p className="text-slate-500">Aucun document à afficher</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Signature panel */}
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white rounded-2xl shadow-xl overflow-hidden sticky top-8">
|
|
<div className="px-6 py-4 border-b border-slate-200 bg-slate-50">
|
|
<h2 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
|
<PenTool className="w-5 h-5 text-indigo-600" />
|
|
Votre signature
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Info notice */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6 flex gap-3">
|
|
<Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
|
<div className="text-sm text-blue-900">
|
|
<p className="font-medium mb-1">Dessinez votre signature</p>
|
|
<p className="text-blue-700">
|
|
Utilisez votre souris, trackpad ou doigt pour signer dans le cadre ci-dessous.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Signature canvas */}
|
|
<div className="mb-6">
|
|
<div className="border-2 border-dashed border-slate-300 rounded-xl overflow-hidden bg-white relative group hover:border-indigo-400 transition-colors">
|
|
<canvas
|
|
ref={canvasRef}
|
|
onMouseDown={startDrawing}
|
|
onMouseMove={draw}
|
|
onMouseUp={stopDrawing}
|
|
onMouseLeave={stopDrawing}
|
|
onTouchStart={startDrawing}
|
|
onTouchMove={draw}
|
|
onTouchEnd={stopDrawing}
|
|
className="w-full h-48 cursor-crosshair touch-none"
|
|
style={{ touchAction: 'none' }}
|
|
/>
|
|
|
|
{!hasDrawn && (
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<div className="text-center">
|
|
<PenTool className="w-8 h-8 text-slate-400 mx-auto mb-2" />
|
|
<p className="text-slate-500 text-sm">Signez ici</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Clear button */}
|
|
{hasDrawn && (
|
|
<motion.button
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
onClick={clearSignature}
|
|
disabled={isSubmitting}
|
|
className="mt-3 px-4 py-2 text-sm text-slate-700 hover:text-slate-900 font-medium flex items-center gap-2 hover:bg-slate-100 rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
Recommencer
|
|
</motion.button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Consent checkbox */}
|
|
<div className="bg-slate-50 rounded-xl p-5 mb-6">
|
|
<label className="flex items-start gap-3 cursor-pointer group">
|
|
<div className="flex-shrink-0 pt-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={consentChecked}
|
|
onChange={(e) => setConsentChecked(e.target.checked)}
|
|
disabled={isSubmitting}
|
|
className="w-5 h-5 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 focus:ring-2 cursor-pointer"
|
|
/>
|
|
</div>
|
|
<div className="text-sm text-slate-700 leading-relaxed">
|
|
<p>
|
|
Je consens à signer électroniquement le document <span className="font-semibold">"{documentTitle}"</span> et confirme que cette signature a la même valeur juridique qu'une signature manuscrite.
|
|
</p>
|
|
<p className="mt-2 text-xs text-slate-500">
|
|
Signature horodatée et archivée de manière sécurisée pendant 10 ans (eIDAS).
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Error message */}
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl flex items-start gap-3"
|
|
>
|
|
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-red-800">{error}</p>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Submit button */}
|
|
<button
|
|
onClick={submitSignature}
|
|
disabled={!hasDrawn || !consentChecked || isSubmitting}
|
|
className="w-full px-6 py-4 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:shadow-lg flex items-center justify-center gap-2 text-lg"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
Signature en cours...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Check className="w-5 h-5" />
|
|
Valider ma signature
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{/* Help text */}
|
|
<p className="mt-4 text-center text-xs text-slate-500">
|
|
En validant, vous acceptez que votre signature soit juridiquement contraignante.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|