feat: add PDF manipulation tools including Protect, Rotate, Split, Unlock, and Watermark functionalities
- Implemented ProtectPdf component for adding password protection to PDFs. - Implemented RotatePdf component for rotating PDF pages by specified angles. - Implemented SplitPdf component for splitting PDFs into individual pages or specified ranges. - Implemented UnlockPdf component for removing password protection from PDFs. - Implemented WatermarkPdf component for adding custom text watermarks to PDFs. - Updated i18n files to include translations for new tools. - Enhanced HomePage to include links to new PDF tools. - Updated Nginx configuration to improve security with CSP and Permissions-Policy headers. - Updated sitemap generation script to include new tools.
This commit is contained in:
Your Name
171
frontend/src/components/tools/AddPageNumbers.tsx
Normal file
171
frontend/src/components/tools/AddPageNumbers.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ListOrdered } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type Position = 'bottom-center' | 'bottom-right' | 'bottom-left' | 'top-center' | 'top-right' | 'top-left';
|
||||
|
||||
export default function AddPageNumbers() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [position, setPosition] = useState<Position>('bottom-center');
|
||||
const [startNumber, setStartNumber] = useState(1);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/page-numbers',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { position, start_number: startNumber.toString() },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const positions: { value: Position; label: string }[] = [
|
||||
{ value: 'bottom-center', label: t('tools.pageNumbers.bottomCenter') },
|
||||
{ value: 'bottom-right', label: t('tools.pageNumbers.bottomRight') },
|
||||
{ value: 'bottom-left', label: t('tools.pageNumbers.bottomLeft') },
|
||||
{ value: 'top-center', label: t('tools.pageNumbers.topCenter') },
|
||||
{ value: 'top-right', label: t('tools.pageNumbers.topRight') },
|
||||
{ value: 'top-left', label: t('tools.pageNumbers.topLeft') },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.pageNumbers.title'),
|
||||
description: t('tools.pageNumbers.description'),
|
||||
url: `${window.location.origin}/tools/page-numbers`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.pageNumbers.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.pageNumbers.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/page-numbers`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-sky-100">
|
||||
<ListOrdered className="h-8 w-8 text-sky-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.pageNumbers.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.pageNumbers.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Position Selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700">
|
||||
{t('tools.pageNumbers.position')}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{positions.map((p) => (
|
||||
<button
|
||||
key={p.value}
|
||||
onClick={() => setPosition(p.value)}
|
||||
className={`rounded-lg p-2 text-center text-xs ring-1 transition-all ${
|
||||
position === p.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Start Number */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.pageNumbers.startNumber')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={startNumber}
|
||||
onChange={(e) => setStartNumber(Math.max(1, Number(e.target.value)))}
|
||||
className="input-field w-32"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.pageNumbers.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
208
frontend/src/components/tools/ImagesToPdf.tsx
Normal file
208
frontend/src/components/tools/ImagesToPdf.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { FileImage } from 'lucide-react';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function ImagesToPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [taskId, setTaskId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const acceptedTypes = ['image/png', 'image/jpeg', 'image/webp', 'image/bmp'];
|
||||
|
||||
const handleFilesSelect = (newFiles: FileList | File[]) => {
|
||||
const fileArray = Array.from(newFiles).filter((f) =>
|
||||
acceptedTypes.includes(f.type)
|
||||
);
|
||||
if (fileArray.length === 0) {
|
||||
setError(t('tools.imagesToPdf.invalidFiles'));
|
||||
return;
|
||||
}
|
||||
setFiles((prev) => [...prev, ...fileArray]);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (files.length < 1) {
|
||||
setError(t('tools.imagesToPdf.minFiles'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
files.forEach((f) => formData.append('files', f));
|
||||
|
||||
const response = await fetch('/api/pdf-tools/images-to-pdf', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Upload failed.');
|
||||
}
|
||||
|
||||
setTaskId(data.task_id);
|
||||
setPhase('processing');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Upload failed.');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFiles([]);
|
||||
setPhase('upload');
|
||||
setTaskId(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.imagesToPdf.title'),
|
||||
description: t('tools.imagesToPdf.description'),
|
||||
url: `${window.location.origin}/tools/images-to-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.imagesToPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.imagesToPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/images-to-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-pink-100">
|
||||
<FileImage className="h-8 w-8 text-pink-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.imagesToPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.imagesToPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
{/* Drop zone */}
|
||||
<div
|
||||
className="upload-zone cursor-pointer"
|
||||
onClick={() => document.getElementById('images-file-input')?.click()}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer.files) handleFilesSelect(e.dataTransfer.files);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="images-file-input"
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.webp,.bmp"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
if (e.target.files) handleFilesSelect(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<FileImage className="mb-4 h-12 w-12 text-slate-400" />
|
||||
<p className="mb-2 text-base font-medium text-slate-700">
|
||||
{t('common.dragDrop')}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">PNG, JPG, WebP, BMP</p>
|
||||
<p className="mt-1 text-xs text-slate-400">
|
||||
{t('common.maxSize', { size: 10 })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* File list */}
|
||||
{files.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{files.map((f, idx) => (
|
||||
<div
|
||||
key={`${f.name}-${idx}`}
|
||||
className="flex items-center justify-between rounded-lg bg-primary-50 p-3 ring-1 ring-primary-200"
|
||||
>
|
||||
<span className="truncate text-sm font-medium text-slate-900">
|
||||
{idx + 1}. {f.name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeFile(idx)}
|
||||
className="ml-2 text-xs text-red-500 hover:text-red-700"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-sm text-slate-500">
|
||||
{files.length} {t('tools.imagesToPdf.imagesSelected')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{files.length >= 1 && (
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={isUploading}
|
||||
className="btn-primary w-full"
|
||||
>
|
||||
{isUploading ? t('common.processing') : t('tools.imagesToPdf.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
210
frontend/src/components/tools/MergePdf.tsx
Normal file
210
frontend/src/components/tools/MergePdf.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Layers } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { uploadFile, type TaskResponse } from '@/services/api';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function MergePdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [taskId, setTaskId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleFilesSelect = (newFiles: FileList | File[]) => {
|
||||
const fileArray = Array.from(newFiles).filter(
|
||||
(f) => f.type === 'application/pdf'
|
||||
);
|
||||
if (fileArray.length === 0) {
|
||||
setError(t('tools.mergePdf.invalidFiles'));
|
||||
return;
|
||||
}
|
||||
setFiles((prev) => [...prev, ...fileArray]);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
setFiles((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (files.length < 2) {
|
||||
setError(t('tools.mergePdf.minFiles'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
files.forEach((f) => formData.append('files', f));
|
||||
|
||||
const response = await fetch('/api/pdf-tools/merge', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Upload failed.');
|
||||
}
|
||||
|
||||
setTaskId(data.task_id);
|
||||
setPhase('processing');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Upload failed.');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setFiles([]);
|
||||
setPhase('upload');
|
||||
setTaskId(null);
|
||||
setError(null);
|
||||
setUploadProgress(0);
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.mergePdf.title'),
|
||||
description: t('tools.mergePdf.description'),
|
||||
url: `${window.location.origin}/tools/merge-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.mergePdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.mergePdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/merge-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-100">
|
||||
<Layers className="h-8 w-8 text-violet-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.mergePdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.mergePdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
{/* Drop zone for adding files */}
|
||||
<div
|
||||
className="upload-zone cursor-pointer"
|
||||
onClick={() => document.getElementById('merge-file-input')?.click()}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
if (e.dataTransfer.files) handleFilesSelect(e.dataTransfer.files);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="merge-file-input"
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
if (e.target.files) handleFilesSelect(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<Layers className="mb-4 h-12 w-12 text-slate-400" />
|
||||
<p className="mb-2 text-base font-medium text-slate-700">
|
||||
{t('common.dragDrop')}
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">PDF (.pdf)</p>
|
||||
<p className="mt-1 text-xs text-slate-400">
|
||||
{t('common.maxSize', { size: 20 })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* File list */}
|
||||
{files.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{files.map((f, idx) => (
|
||||
<div
|
||||
key={`${f.name}-${idx}`}
|
||||
className="flex items-center justify-between rounded-lg bg-primary-50 p-3 ring-1 ring-primary-200"
|
||||
>
|
||||
<span className="truncate text-sm font-medium text-slate-900">
|
||||
{idx + 1}. {f.name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeFile(idx)}
|
||||
className="ml-2 text-xs text-red-500 hover:text-red-700"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-sm text-slate-500">
|
||||
{files.length} {t('tools.mergePdf.filesSelected')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{files.length >= 2 && (
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={isUploading}
|
||||
className="btn-primary w-full"
|
||||
>
|
||||
{isUploading ? t('common.processing') : t('tools.mergePdf.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
183
frontend/src/components/tools/PdfToImages.tsx
Normal file
183
frontend/src/components/tools/PdfToImages.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ImageIcon } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type OutputFormat = 'png' | 'jpg';
|
||||
|
||||
export default function PdfToImages() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [format, setFormat] = useState<OutputFormat>('png');
|
||||
const [dpi, setDpi] = useState(200);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/pdf-to-images',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { format, dpi: dpi.toString() },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const formats: { value: OutputFormat; label: string }[] = [
|
||||
{ value: 'png', label: 'PNG' },
|
||||
{ value: 'jpg', label: 'JPG' },
|
||||
];
|
||||
|
||||
const dpiOptions = [
|
||||
{ value: 72, label: '72 DPI', desc: t('tools.pdfToImages.lowQuality') },
|
||||
{ value: 150, label: '150 DPI', desc: t('tools.pdfToImages.mediumQuality') },
|
||||
{ value: 200, label: '200 DPI', desc: t('tools.pdfToImages.highQuality') },
|
||||
{ value: 300, label: '300 DPI', desc: t('tools.pdfToImages.bestQuality') },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.pdfToImages.title'),
|
||||
description: t('tools.pdfToImages.description'),
|
||||
url: `${window.location.origin}/tools/pdf-to-images`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.pdfToImages.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.pdfToImages.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/pdf-to-images`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-teal-100">
|
||||
<ImageIcon className="h-8 w-8 text-teal-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.pdfToImages.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.pdfToImages.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Format Selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700">
|
||||
{t('tools.pdfToImages.outputFormat')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{formats.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
onClick={() => setFormat(f.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
format === f.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DPI Selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700">
|
||||
{t('tools.pdfToImages.quality')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{dpiOptions.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setDpi(opt.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
dpi === opt.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium">{opt.label}</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{opt.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.pdfToImages.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
168
frontend/src/components/tools/ProtectPdf.tsx
Normal file
168
frontend/src/components/tools/ProtectPdf.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Lock } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function ProtectPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
const passwordsMatch = password === confirmPassword && password.length > 0;
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/protect',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { password },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!passwordsMatch) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPassword('');
|
||||
setConfirmPassword('');
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.protectPdf.title'),
|
||||
description: t('tools.protectPdf.description'),
|
||||
url: `${window.location.origin}/tools/protect-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.protectPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.protectPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/protect-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100">
|
||||
<Lock className="h-8 w-8 text-red-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.protectPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.protectPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.protectPdf.password')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field w-full"
|
||||
placeholder={t('tools.protectPdf.passwordPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.protectPdf.confirmPassword')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="input-field w-full"
|
||||
placeholder={t('tools.protectPdf.confirmPlaceholder')}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{confirmPassword && !passwordsMatch && (
|
||||
<p className="mt-1 text-xs text-red-500">
|
||||
{t('tools.protectPdf.mismatch')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={!passwordsMatch}
|
||||
className="btn-primary w-full disabled:opacity-50"
|
||||
>
|
||||
{t('tools.protectPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
155
frontend/src/components/tools/RotatePdf.tsx
Normal file
155
frontend/src/components/tools/RotatePdf.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { RotateCw } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type Rotation = 90 | 180 | 270;
|
||||
|
||||
export default function RotatePdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [rotation, setRotation] = useState<Rotation>(90);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/rotate',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { rotation: rotation.toString(), pages: 'all' },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const rotations: { value: Rotation; label: string }[] = [
|
||||
{ value: 90, label: '90°' },
|
||||
{ value: 180, label: '180°' },
|
||||
{ value: 270, label: '270°' },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.rotatePdf.title'),
|
||||
description: t('tools.rotatePdf.description'),
|
||||
url: `${window.location.origin}/tools/rotate-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.rotatePdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.rotatePdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/rotate-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-cyan-100">
|
||||
<RotateCw className="h-8 w-8 text-cyan-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.rotatePdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.rotatePdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700">
|
||||
{t('tools.rotatePdf.rotationAngle')}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{rotations.map((r) => (
|
||||
<button
|
||||
key={r.value}
|
||||
onClick={() => setRotation(r.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
rotation === r.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<RotateCw className={`mx-auto h-5 w-5 mb-1 ${
|
||||
rotation === r.value ? 'text-primary-600' : 'text-slate-400'
|
||||
}`} />
|
||||
{r.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.rotatePdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
174
frontend/src/components/tools/SplitPdf.tsx
Normal file
174
frontend/src/components/tools/SplitPdf.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Scissors } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type SplitMode = 'all' | 'range';
|
||||
|
||||
export default function SplitPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [mode, setMode] = useState<SplitMode>('all');
|
||||
const [pages, setPages] = useState('');
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/split',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { mode, ...(mode === 'range' ? { pages } : {}) },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (mode === 'range' && !pages.trim()) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
setMode('all');
|
||||
setPages('');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.splitPdf.title'),
|
||||
description: t('tools.splitPdf.description'),
|
||||
url: `${window.location.origin}/tools/split-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.splitPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.splitPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/split-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-100">
|
||||
<Scissors className="h-8 w-8 text-amber-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.splitPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.splitPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Mode Selector */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => setMode('all')}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
mode === 'all'
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium">{t('tools.splitPdf.allPages')}</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{t('tools.splitPdf.allPagesDesc')}</p>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode('range')}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
mode === 'range'
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium">{t('tools.splitPdf.selectPages')}</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{t('tools.splitPdf.selectPagesDesc')}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Page Range Input */}
|
||||
{mode === 'range' && (
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.splitPdf.pageRange')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={pages}
|
||||
onChange={(e) => setPages(e.target.value)}
|
||||
placeholder="1, 3, 5-8"
|
||||
className="input-field"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-slate-400">
|
||||
{t('tools.splitPdf.pageRangeHint')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.splitPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
144
frontend/src/components/tools/UnlockPdf.tsx
Normal file
144
frontend/src/components/tools/UnlockPdf.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Unlock } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function UnlockPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/unlock',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { password },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!password) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPassword('');
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.unlockPdf.title'),
|
||||
description: t('tools.unlockPdf.description'),
|
||||
url: `${window.location.origin}/tools/unlock-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.unlockPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.unlockPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/unlock-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-green-100">
|
||||
<Unlock className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.unlockPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.unlockPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.unlockPdf.password')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field w-full"
|
||||
placeholder={t('tools.unlockPdf.passwordPlaceholder')}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={!password}
|
||||
className="btn-primary w-full disabled:opacity-50"
|
||||
>
|
||||
{t('tools.unlockPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
162
frontend/src/components/tools/WatermarkPdf.tsx
Normal file
162
frontend/src/components/tools/WatermarkPdf.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Droplets } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function WatermarkPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [text, setText] = useState('CONFIDENTIAL');
|
||||
const [opacity, setOpacity] = useState(30);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/watermark',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { text, opacity: (opacity / 100).toString() },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.watermarkPdf.title'),
|
||||
description: t('tools.watermarkPdf.description'),
|
||||
url: `${window.location.origin}/tools/watermark-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.watermarkPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.watermarkPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/watermark-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-cyan-100">
|
||||
<Droplets className="h-8 w-8 text-cyan-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.watermarkPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.watermarkPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Watermark Text */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.watermarkPdf.text')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
maxLength={50}
|
||||
className="input-field w-full"
|
||||
placeholder={t('tools.watermarkPdf.textPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Opacity Slider */}
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.watermarkPdf.opacity')}: {opacity}%
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="100"
|
||||
value={opacity}
|
||||
onChange={(e) => setOpacity(Number(e.target.value))}
|
||||
className="w-full accent-cyan-600"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-slate-400">
|
||||
<span>{t('tools.watermarkPdf.light')}</span>
|
||||
<span>{t('tools.watermarkPdf.heavy')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={!text.trim()}
|
||||
className="btn-primary w-full disabled:opacity-50"
|
||||
>
|
||||
{t('tools.watermarkPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user