JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Digital Signature</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        iframe {
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>PDF Digital Signature</h1>
    <div>
        <label for="fileInput">Select PDF File:</label>
        <input type="file" id="fileInput" accept="application/pdf">
    </div>
    <div>
        <label for="certInput">Select Certificate File (.p12/.pfx):</label>
        <input type="file" id="certInput" accept=".p12,.pfx">
    </div>
    <div>
        <label for="certPassword">Enter Certificate Password:</label>
        <input type="password" id="certPassword" placeholder="Enter certificate password">
    </div>
    <button id="signButton">Sign PDF</button>
    <div>
        <h3>Original PDF:</h3>
        <iframe id="pdfViewer" width="100%" height="500px"></iframe>
    </div>
    <div>
        <h3>Signed PDF:</h3>
        <iframe id="signedPdfViewer" width="100%" height="500px"></iframe>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
    <script>
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
        document.getElementById('certInput').addEventListener('change', handleCertSelect, false);
        document.getElementById('certPassword').addEventListener('input', handlePasswordInput, false);
        document.getElementById('signButton').addEventListener('click', signSelectedPdf, false);

        let selectedFile = null;
        let selectedCert = null;
        let certPassword = '';

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file.type === 'application/pdf') {
                selectedFile = file;
               ...