lucasw89/bentopdf
1
0 Fork 0
mirror of https://github.com/alam00000/bentopdf.git synced 2026-11-13 09:54:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: add missing localization to sign PDF tool

Browse Source
This commit is contained in:
Sebastian Espei authored and GitHub committed 2026-04-17 11:21:05 +00:00
1 parent 9bc846249e
commit 84f13cdb93
4 files changed
+365 -64
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/digital-sign-pdf.html
+201 -37
View File
@@ -189,7 +189,12 @@
<div id="file-display-area" class="mt-4 space-y-2"></div>
<div id="certificate-section" class="hidden mt-6 space-y-4">
<h2 class="text-lg font-semibold text-white">Certificate</h2>
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.certificateSection"
>
Certificate
</h2>
<div
id="cert-drop-zone"
@@ -197,7 +202,10 @@
>
<div class="flex flex-col items-center justify-center py-4">
<i data-lucide="key" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-sm text-gray-400">
<p
class="text-sm text-gray-400"
data-i18n="tools:digitalSignPdf.uploadCertPem"
>
Upload certificate (.pfx, .p12, .pem)
</p>
</div>
@@ -215,6 +223,7 @@
<label
for="cert-password"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.certPassword"
>Certificate Password</label
>
<input
@@ -222,24 +231,40 @@
id="cert-password"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="Enter certificate password"
data-i18n-placeholder="tools:digitalSignPdf.certPasswordPlaceholder"
/>
</div>
<div id="cert-info" class="hidden bg-gray-700 rounded-lg p-4">
<h3 class="text-sm font-semibold text-white mb-2">
<h3
class="text-sm font-semibold text-white mb-2"
data-i18n="tools:digitalSignPdf.certInfo"
>
Certificate Information
</h3>
<div class="text-sm text-gray-300 space-y-1">
<p>
<span class="text-gray-400">Subject:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certSubject"
>Subject:</span
>
<span id="cert-subject">-</span>
</p>
<p>
<span class="text-gray-400">Issuer:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certIssuer"
>Issuer:</span
>
<span id="cert-issuer">-</span>
</p>
<p>
<span class="text-gray-400">Valid:</span>
<span
class="text-gray-400"
data-i18n="tools:digitalSignPdf.certValidity"
>Valid:</span
>
<span id="cert-validity">-</span>
</p>
</div>
@@ -247,7 +272,10 @@
</div>
<div id="signature-options" class="hidden mt-6 space-y-4">
<h2 class="text-lg font-semibold text-white">
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.signatureDetails"
>
Signature Details (Optional)
</h2>
@@ -255,6 +283,7 @@
<label
for="sign-reason"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.reason"
>Reason</label
>
<input
@@ -262,6 +291,7 @@
id="sign-reason"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., I approve this document"
data-i18n-placeholder="tools:digitalSignPdf.reasonPlaceholder"
/>
</div>
@@ -269,6 +299,7 @@
<label
for="sign-location"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.location"
>Location</label
>
<input
@@ -276,6 +307,7 @@
id="sign-location"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., New York, USA"
data-i18n-placeholder="tools:digitalSignPdf.locationPlaceholder"
/>
</div>
@@ -283,6 +315,7 @@
<label
for="sign-contact"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.contactInfo"
>Contact Info</label
>
<input
@@ -290,13 +323,19 @@
id="sign-contact"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., email@example.com"
data-i18n-placeholder="tools:digitalSignPdf.contactPlaceholder"
/>
</div>
</div>
<div id="visible-signature-section" class="hidden mt-6 space-y-4">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-white">Visible Signature</h2>
<h2
class="text-lg font-semibold text-white"
data-i18n="tools:digitalSignPdf.visibleSignature"
>
Visible Signature
</h2>
<label class="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
@@ -308,7 +347,10 @@
></div>
</label>
</div>
<p class="text-xs text-gray-500">
<p
class="text-xs text-gray-500"
data-i18n="tools:digitalSignPdf.visibleSignatureDescription"
>
When enabled, a visible signature box appears on the PDF. You can
upload an image/logo or add text. If neither is provided, the
signer's name from the certificate will be shown automatically.
@@ -316,7 +358,9 @@
<div id="visible-sig-options" class="hidden space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2"
<label
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.signatureImage"
>Signature Image/Logo (Optional)</label
>
<div
@@ -325,7 +369,10 @@
>
<div class="flex flex-col items-center justify-center py-2">
<i data-lucide="image" class="w-6 h-6 mb-1 text-gray-400"></i>
<p class="text-xs text-gray-400">
<p
class="text-xs text-gray-400"
data-i18n="tools:digitalSignPdf.uploadSignatureImage"
>
Upload image (PNG, JPG, WebP)
</p>
</div>
@@ -348,6 +395,7 @@
<button
id="remove-sig-image"
class="text-red-400 hover:text-red-300 text-sm"
data-i18n="tools:digitalSignPdf.remove"
>
Remove
</button>
@@ -359,22 +407,38 @@
<label
for="sig-page"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.page"
>Page</label
>
<select
id="sig-page"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
>
<option value="0">First page</option>
<option value="last">Last page</option>
<option value="all">All pages</option>
<option value="custom">Custom page #</option>
<option value="0" data-i18n="tools:digitalSignPdf.firstPage">
First page
</option>
<option
value="last"
data-i18n="tools:digitalSignPdf.lastPage"
>
Last page
</option>
<option value="all" data-i18n="tools:digitalSignPdf.allPages">
All pages
</option>
<option
value="custom"
data-i18n="tools:digitalSignPdf.customPage"
>
Custom page #
</option>
</select>
</div>
<div id="custom-page-wrapper" class="hidden">
<label
for="sig-custom-page"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.pageNumber"
>Page #</label
>
<input
@@ -392,6 +456,7 @@
<label
for="sig-x"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.xPosition"
>X Position (left)</label
>
<input
@@ -406,6 +471,7 @@
<label
for="sig-y"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.yPosition"
>Y Position (top)</label
>
<input
@@ -423,6 +489,7 @@
<label
for="sig-width"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.width"
>Width</label
>
<input
@@ -437,6 +504,7 @@
<label
for="sig-height"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.height"
>Height</label
>
<input
@@ -456,7 +524,9 @@
id="enable-sig-text"
class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500"
/>
<span class="text-sm font-medium text-gray-300"
<span
class="text-sm font-medium text-gray-300"
data-i18n="tools:digitalSignPdf.addTextOverlay"
>Add text overlay</span
>
</label>
@@ -467,6 +537,7 @@
<label
for="sig-text"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.text"
>Text</label
>
<input
@@ -474,6 +545,7 @@
id="sig-text"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="e.g., Digitally signed by John Doe"
data-i18n-placeholder="tools:digitalSignPdf.textPlaceholder"
/>
</div>
<div class="grid grid-cols-2 gap-4">
@@ -481,6 +553,7 @@
<label
for="sig-text-color"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.textColor"
>Text Color</label
>
<input type="color" id="sig-text-color" value="#000000" />
@@ -489,6 +562,7 @@
<label
for="sig-text-size"
class="block text-sm font-medium text-gray-300 mb-2"
data-i18n="tools:digitalSignPdf.fontSize"
>Font Size</label
>
<input
@@ -509,6 +583,7 @@
id="process-btn"
class="btn-gradient w-full mt-6"
style="display: none"
data-i18n="tools:digitalSignPdf.applySignature"
>
Apply Digital Signature
</button>
@@ -523,7 +598,11 @@
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
<p
id="loader-text"
class="text-white text-lg font-medium"
data-i18n="loader.processing"
>
Processing...
</p>
</div>
@@ -547,6 +626,7 @@
<button
id="alert-ok"
class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
data-i18n="common.ok"
>
OK
</button>
@@ -568,8 +648,16 @@
1
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">Upload PDF</h3>
<p class="text-gray-400">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="tools:digitalSignPdf.howToStep1Title"
>
Upload PDF
</h3>
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep1Text"
>
Select the PDF document you want to sign
</p>
</div>
@@ -582,9 +670,14 @@
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Upload Certificate
<span data-i18n="tools:digitalSignPdf.howToStep2Title">
Upload Certificate
</span>
</h3>
<p class="text-gray-400">
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep2Text"
>
Provide your .pfx or .p12 certificate file and password
</p>
</div>
@@ -597,9 +690,14 @@
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-1">
Sign & Download
<span data-i18n="tools:digitalSignPdf.howToStep3Title">
Sign & Download
</span>
</h3>
<p class="text-gray-400">
<p
class="text-gray-400"
data-i18n="tools:digitalSignPdf.howToStep3Text"
>
Apply the digital signature and download your signed PDF
</p>
</div>
@@ -619,36 +717,86 @@
href="encrypt-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Encrypt PDF</h3>
<p class="text-gray-400 text-sm">Password protect your PDF</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:encryptPdf.name"
>
Encrypt PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedEncryptDesc"
>
Password protect your PDF
</p>
</a>
<a
href="decrypt-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Decrypt PDF</h3>
<p class="text-gray-400 text-sm">Remove PDF password</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:decryptPdf.name"
>
Decrypt PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedDecryptDesc"
>
Remove PDF password
</p>
</a>
<a
href="flatten-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Flatten PDF</h3>
<p class="text-gray-400 text-sm">Make annotations permanent</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:flattenPdf.name"
>
Flatten PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedFlattenDesc"
>
Make annotations permanent
</p>
</a>
<a
href="sanitize-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Sanitize PDF</h3>
<p class="text-gray-400 text-sm">Remove hidden data</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:sanitizePdf.name"
>
Sanitize PDF
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedSanitizeDesc"
>
Remove hidden data
</p>
</a>
<a
href="change-permissions.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Change Permissions</h3>
<p class="text-gray-400 text-sm">Set PDF permissions</p>
<h3
class="text-white font-semibold mb-1"
data-i18n="tools:changePermissions.name"
>
Change Permissions
</h3>
<p
class="text-gray-400 text-sm"
data-i18n="tools:digitalSignPdf.relatedPermissionsDesc"
>
Set PDF permissions
</p>
</a>
</div>
</section>
@@ -664,11 +812,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqWhatIsQuestion"
>
What is a digital signature?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqWhatIsAnswer"
>
A digital signature is a cryptographic mechanism that verifies the
authenticity and integrity of a document. Unlike a drawn signature,
it uses public key cryptography (X.509 certificates) to prove the
@@ -678,11 +830,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqFormatsQuestion"
>
What certificate formats are supported?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqFormatsAnswer"
>
We support PKCS#12 format certificates (.pfx, .p12) which contain
both your certificate and private key in a single encrypted file.
These are commonly issued by certificate authorities.
@@ -691,11 +847,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqPrivateKeyQuestion"
>
Is my private key safe?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqPrivateKeyAnswer"
>
Yes! All processing happens entirely in your browser. Your
certificate, private key, and PDF files never leave your device or
get uploaded to any server.
@@ -704,11 +864,15 @@
<details class="bg-gray-800 p-5 rounded-lg border border-gray-700">
<summary
class="cursor-pointer font-semibold text-white flex items-center justify-between"
data-i18n="tools:digitalSignPdf.faqValidReadersQuestion"
>
Will the signature be valid in PDF readers?
<i data-lucide="chevron-down" class="w-5 h-5"></i>
</summary>
<p class="mt-3 text-gray-400">
<p
class="mt-3 text-gray-400"
data-i18n="tools:digitalSignPdf.faqValidReadersAnswer"
>
Yes, the tool creates standard PKCS#7 detached signatures that are
recognized by all major PDF viewers. For full validation, use a
certificate from a trusted Certificate Authority.