Rodrigo B. de Sousa Martins
59ea762227
Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo@martinsevieira.adv.br>
357 lines
13 KiB
TypeScript
357 lines
13 KiB
TypeScript
import { useState, useCallback, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useDropzone } from 'react-dropzone';
|
|
import { toast } from 'react-toastify';
|
|
|
|
// Página pública: NÃO requer autenticação do usuário
|
|
|
|
export function ClientProvaUpload() {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [uploadProgress, setUploadProgress] = useState(0);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [userLocation, setUserLocation] = useState<{ latitude: number; longitude: number } | null>(null);
|
|
const [locationPermission, setLocationPermission] = useState<string>('pending');
|
|
const [filePreview, setFilePreview] = useState<string | null>(null);
|
|
const navigate = useNavigate();
|
|
|
|
// Tentar obter a localização do usuário quando o componente montar
|
|
useEffect(() => {
|
|
if (navigator.geolocation) {
|
|
setLocationPermission('requesting');
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
console.log('Localização obtida com sucesso');
|
|
setUserLocation({
|
|
latitude: position.coords.latitude,
|
|
longitude: position.coords.longitude
|
|
});
|
|
setLocationPermission('granted');
|
|
},
|
|
(error) => {
|
|
console.log('Erro ao obter localização:', error.message);
|
|
setLocationPermission('denied');
|
|
},
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 5000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
} else {
|
|
console.log('Geolocalização não suportada pelo navegador');
|
|
setLocationPermission('unsupported');
|
|
}
|
|
}, []);
|
|
|
|
// Validação extra do arquivo antes do upload
|
|
function validateFile(file: File | null): string | null {
|
|
if (!file) return 'Nenhum arquivo selecionado.';
|
|
const allowedTypes = [
|
|
'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf'
|
|
];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
return 'Tipo de arquivo não suportado. Use JPG, PNG, GIF, WEBP ou PDF.';
|
|
}
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
return 'Arquivo excede o tamanho máximo de 10MB.';
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const onDrop = useCallback(async (acceptedFiles: File[]) => {
|
|
if (acceptedFiles.length > 0) {
|
|
const selectedFile = acceptedFiles[0];
|
|
const validationError = validateFile(selectedFile);
|
|
if (validationError) {
|
|
toast.error(validationError);
|
|
setFile(null);
|
|
setFilePreview(null);
|
|
return;
|
|
}
|
|
setFile(selectedFile);
|
|
|
|
// Criar preview para imagens
|
|
if (selectedFile.type.startsWith('image/')) {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
setFilePreview(reader.result as string);
|
|
};
|
|
reader.readAsDataURL(selectedFile);
|
|
} else {
|
|
setFilePreview(null);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
onDrop,
|
|
accept: {
|
|
'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
|
|
'application/pdf': ['.pdf']
|
|
},
|
|
multiple: false,
|
|
maxSize: 10 * 1024 * 1024 // 10MB
|
|
});
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
if (!file) {
|
|
toast.error('Por favor, selecione um arquivo primeiro');
|
|
return;
|
|
}
|
|
// Validação extra antes do envio
|
|
const validationError = validateFile(file);
|
|
if (validationError) {
|
|
toast.error(validationError);
|
|
return;
|
|
}
|
|
|
|
setUploading(true);
|
|
setUploadProgress(0);
|
|
setError(null);
|
|
|
|
const formData = new FormData();
|
|
|
|
// Adicionar arquivo com todas as informações preservadas
|
|
formData.append('files', file);
|
|
formData.append('modification_times', String(file.lastModified));
|
|
formData.append('file_names', file.name);
|
|
formData.append('file_sizes', String(file.size));
|
|
formData.append('file_types', file.type);
|
|
|
|
// Adicionar metadados de contexto
|
|
formData.append('user_agent', navigator.userAgent);
|
|
formData.append('language', navigator.language);
|
|
formData.append('viewport_width', String(window.innerWidth));
|
|
formData.append('viewport_height', String(window.innerHeight));
|
|
formData.append('referrer', document.referrer);
|
|
formData.append('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
|
|
formData.append('timezone_offset', String(new Date().getTimezoneOffset()));
|
|
formData.append('platform', navigator.platform);
|
|
formData.append('cookies_enabled', String(navigator.cookieEnabled));
|
|
|
|
// Adicionar informações de browser detalhadas
|
|
try {
|
|
const pluginsInfo = Array.from(navigator.plugins).map(p => p.name).join(',');
|
|
formData.append('browser_plugins', pluginsInfo);
|
|
} catch (e) {
|
|
formData.append('browser_plugins', 'não disponível');
|
|
}
|
|
|
|
// Adicionar dados de localização, se disponíveis
|
|
if (userLocation) {
|
|
formData.append('latitude', String(userLocation.latitude));
|
|
formData.append('longitude', String(userLocation.longitude));
|
|
}
|
|
formData.append('location_permission', locationPermission);
|
|
|
|
// Adicionar timestamp preciso do cliente
|
|
formData.append('client_timestamp', new Date().toISOString());
|
|
|
|
// Simulação de progresso
|
|
const progressInterval = setInterval(() => {
|
|
setUploadProgress(prev => {
|
|
if (prev >= 95) {
|
|
clearInterval(progressInterval);
|
|
return prev;
|
|
}
|
|
return prev + 5;
|
|
});
|
|
}, 300);
|
|
|
|
// Upload sem autenticação (página pública)
|
|
let response: Response;
|
|
try {
|
|
response = await fetch('/api/provas/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
} catch (networkError) {
|
|
clearInterval(progressInterval);
|
|
setUploadProgress(0);
|
|
throw new Error('Erro de conexão. Verifique sua internet e tente novamente.');
|
|
}
|
|
|
|
clearInterval(progressInterval);
|
|
setUploadProgress(100);
|
|
|
|
// Verificar se a resposta foi bem-sucedida
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
let errorMessage;
|
|
|
|
try {
|
|
const errorJson = JSON.parse(errorText);
|
|
errorMessage = errorJson.error || errorJson.details || 'Erro ao enviar arquivo';
|
|
} catch {
|
|
errorMessage = errorText || 'Erro ao enviar arquivo';
|
|
}
|
|
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
// Ler o corpo da resposta
|
|
let result: any;
|
|
try {
|
|
result = await response.json();
|
|
} catch {
|
|
throw new Error('Resposta inesperada do servidor.');
|
|
}
|
|
|
|
if (result && result.id) {
|
|
toast.success('Arquivo enviado com sucesso!');
|
|
// Navegar para a página de status
|
|
navigate(`/public/provas/status/${result.id}`);
|
|
} else {
|
|
throw new Error('ID do documento não encontrado na resposta');
|
|
}
|
|
|
|
} catch (error: any) {
|
|
console.error('Erro detalhado no upload:', error);
|
|
setError(error.message || 'Erro ao enviar arquivo. Por favor, tente novamente.');
|
|
toast.error('Falha no upload: ' + (error.message || 'Erro desconhecido'));
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
|
|
<div className="max-w-3xl mx-auto w-full">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Validação Digital de Documentos</h1>
|
|
<p className="mt-2 text-lg text-gray-600">
|
|
Valide e proteja a autenticidade de seus documentos e imagens com timestamping seguro
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white shadow overflow-hidden rounded-lg">
|
|
<div className="px-4 py-5 sm:px-6 bg-blue-700 text-white">
|
|
<h2 className="text-xl font-semibold">Upload de Documento para Validação</h2>
|
|
<p className="mt-1 text-sm text-blue-100">
|
|
Formatos aceitos: JPG, PNG, GIF, PDF (máx. 10MB)
|
|
</p>
|
|
</div>
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<div
|
|
{...getRootProps()}
|
|
className={`border-2 border-dashed rounded-lg p-10 text-center cursor-pointer transition-colors ${
|
|
isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-400'
|
|
}`}
|
|
>
|
|
<input {...getInputProps()} />
|
|
|
|
{filePreview ? (
|
|
<div className="space-y-4">
|
|
<div className="mx-auto max-w-sm">
|
|
<img
|
|
src={filePreview}
|
|
alt="Preview"
|
|
className="max-h-60 mx-auto object-contain rounded-lg shadow-sm"
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-gray-600">
|
|
{file?.name} ({(file?.size || 0) / 1024 < 1024
|
|
? `${Math.round((file?.size || 0) / 1024)} KB`
|
|
: `${Math.round((file?.size || 0) / 1024 / 1024 * 10) / 10} MB`})
|
|
</p>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setFile(null);
|
|
setFilePreview(null);
|
|
}}
|
|
className="text-sm text-red-600 hover:text-red-800"
|
|
>
|
|
Remover arquivo
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
|
<path d="M24 8v16m0 0v16m0-16h16m-16 0H8" strokeWidth="2" strokeLinecap="round" />
|
|
</svg>
|
|
<p className="text-lg font-medium text-gray-900">
|
|
{isDragActive
|
|
? "Solte o arquivo aqui..."
|
|
: "Arraste e solte um arquivo aqui, ou clique para selecionar"}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Os metadados originais e informações de contexto serão preservados para melhor validação
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{locationPermission === 'granted' && (
|
|
<div className="mt-4 text-sm text-green-600">
|
|
✓ Localização obtida: Esta informação ajudará na validação do documento
|
|
</div>
|
|
)}
|
|
|
|
{locationPermission === 'denied' && (
|
|
<div className="mt-4 text-sm text-yellow-600">
|
|
⚠️ Localização não permitida: A validação ainda funcionará, mas sem dados de geolocalização
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="mt-4 text-sm text-red-600 p-3 bg-red-50 rounded-md">
|
|
Erro: {error}
|
|
</div>
|
|
)}
|
|
|
|
{uploading && (
|
|
<div className="mt-6">
|
|
<div className="relative pt-1">
|
|
<div className="flex mb-2 items-center justify-between">
|
|
<div>
|
|
<span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
|
|
Enviando arquivo
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-semibold inline-block text-blue-600">
|
|
{uploadProgress}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
|
|
<div
|
|
style={{ width: `${uploadProgress}%` }}
|
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 transition-all duration-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 flex justify-end">
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!file || uploading}
|
|
className={`px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white
|
|
${!file || uploading
|
|
? 'bg-gray-300 cursor-not-allowed'
|
|
: 'bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
|
|
}`}
|
|
>
|
|
{uploading ? 'Enviando...' : 'Enviar para Validação'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="px-4 py-4 sm:px-6 bg-gray-50 border-t border-gray-200">
|
|
<div className="text-xs text-gray-500">
|
|
<strong>Nota sobre privacidade:</strong> Este serviço coleta metadados como informações do dispositivo,
|
|
localização e timestamp para garantir a validação adequada do documento. Todos os dados são criptografados
|
|
e armazenados com segurança.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|