Laravel Sign Pad

repository·main·Indexed 19 days ago

https://github.com/creagia/laravel-sign-pad

A Laravel package for implementing E-Signatures with a signature pad component for Eloquent models. It supports generating certified PDF documents using TCPDF, providing tools for signature placement via SignatureDocumentTemplate and digital certification with OpenSSL certificates. Compatible with PHP 8.2 - 8.5 and Laravel 11 - 13.

Tokens
5.7K
Snippets
16
Records
20
Agent score
68%

What's inside laravel-sign-pad

  1. Implement a signature document template

    main

    When implementing ShouldGenerateSignatureDocument, use getSignatureDocumentTemplate() to return a SignatureDocumentTemplate.

    Key configuration options:

    • outputPdfPrefix: (optional) Prefix for the generated PDF filename.
    • template: An instance of BladeDocumentTemplate or PdfDocumentTemplate.
    • signaturePositions: An array of SignaturePosition objects defining where the signature appears on specific pages.

    Note: A $model object is automatically injected into Blade templates, allowing access to model properties.

    public function getSignatureDocumentTemplate(): SignatureDocumentTemplate
    {
        return new SignatureDocumentTemplate(
            outputPdfPrefix: 'document',
            signaturePositions: [
                 new SignaturePosition(
                     signaturePage: 1,
                     signatureX: 20,
                     signatureY: 25,
                 ),
            ]
        );
    }
  2. Certify generated PDFs

    main

    To enable PDF certification using TCPDF, follow these steps:

    1. Generate an SSL certificate using OpenSSL:
      cd storage/app
      openssl req -x509 -nodes -days 365000 -newkey rsa:1024 -keyout certificate.crt -out certificate.crt
    2. Update config/sign-pad.php:
      • Set certify_documents to true.
      • Set certificate_file to the path of your .crt file.
      • Configure certificate_info with specific certificate details.
      • Adjust cert_type (default is 2) based on TCPDF documentation.
  3. Prepare an Eloquent model for signing

    main

    To enable signing on a model, add the RequiresSignature trait and implement the CanBeSigned contract.

    If you want to generate PDF documents containing the signature, you must also implement the ShouldGenerateSignatureDocument contract and define the getSignatureDocumentTemplate() method using a SignatureDocumentTemplate object.

    <?php
    
    namespace App\Models;
    
    use Creagia\LaravelSignPad\Concerns\RequiresSignature;
    use Creagia\LaravelSignPad\Contracts\CanBeSigned;
    use Creagia\LaravelSignPad\Contracts\ShouldGenerateSignatureDocument;
    use Creagia\LaravelSignPad\Templates\BladeDocumentTemplate;
    use Creagia\LaravelSignPad\SignatureDocumentTemplate;
    use Creagia\LaravelSignPad\SignaturePosition;
    use Illuminate\Database\Eloquent\Model;
    
    class MyModel extends Model implements CanBeSigned, ShouldGenerateSignatureDocument
    {
        use RequiresSignature;
        
        public function getSignatureDocumentTemplate(): SignatureDocumentTemplate
        {
            return new SignatureDocumentTemplate(
                outputPdfPrefix: 'document',
                signaturePositions: [
                     new SignaturePosition(
                         signaturePage: 1,
                         signatureX: 20,
                         signatureY: 25,
                     ),
                     new SignaturePosition(
                         signaturePage: 2,
                         signatureX: 25,
                         signatureY: 50,
                     ),
                ]
            );
        }
    }
  4. Install Laravel Sign Pad

    main

    To install the package, use Composer to require the dependency, then run the installation command to publish configuration and migration files. Finally, publish the JavaScript assets to the public/vendor/sign-pad/ directory.

    Requirements:

    • PHP 8.2 - 8.5
    • Laravel 11 - 13
    composer require creagia/laravel-sign-pad
    
    # Install config and migrations
    php artisan sign-pad:install
    
    # Publish JS assets
    php artisan vendor:publish --tag=sign-pad-assets
  5. Migrate from v1.x to v2.x

    main

    When upgrading from version 1.x to 2.x, you must perform the following steps to ensure compatibility with new asset structures, configuration keys, and template logic:

    1. Refresh Javascript Assets: Delete existing assets in public/vendor/sign-pad and re-publish them using the artisan command.
    2. Update Configuration: The configuration key store_path has been renamed to signatures_path. You must also add the disk_name and documents_path keys.
    3. Update Signature Templates: The SignatureDocumentTemplate constructor no longer accepts individual coordinate parameters. Instead, it requires a signaturePositions array containing SignaturePosition objects. This allows for multiple signature locations on a single document.
    ### 1. Refresh Assets
    ```bash
    rm -rf public/vendor/sign-pad
    php artisan vendor:publish --tag=sign-pad-assets

    2. Update Config

    // config/sign-pad.php
    'disk_name' => env('SIGNATURES_DISK', 'local'),
    'signatures_path' => 'signatures',
    'documents_path' => 'signed_documents',

    3. Update Template Logic

    use Creagia\LaravelSignPad\Templates\PdfDocumentTemplate;
    use Creagia\LaravelSignPad\SignatureDocumentTemplate;
    use Creagia\LaravelSignPad\SignaturePosition;
    
    public function getSignatureDocumentTemplate(): SignatureDocumentTemplate
    {
        return new SignatureDocumentTemplate(
            outputPdfPrefix: 'document', // optional
            template: new PdfDocumentTemplate(storage_path('pdf/template.pdf')),
            signaturePositions: [
                 new SignaturePosition(
                     signaturePage: 1,
                     signatureX: 20,
                     signatureY: 25,
                 ),
                 new SignaturePosition(
                     signaturePage: 2,
                     signatureX: 25,
                     signatureY: 50,
                 ),
            ]               
        );
    }
  6. Install Laravel Sign Pad via CLI

    main

    Run the sign-pad:install command to automate the initial setup of the package. This command performs the following actions:

    1. Publishes the configuration file using the sign-pad-config tag.
    2. Publishes the database migrations using the sign-pad-migrations tag.
    3. Prompts to run migrations: You will be asked if you want to execute php artisan migrate immediately.

    Note: The command also includes an optional prompt to open the project's GitHub repository in your browser.

    php artisan sign-pad:install
  7. Display the signature pad in a view

    main

    To allow a user to sign, create a form that posts to the URL provided by $myModel->getSignatureRoute(). Include the <x-creagia-signature-pad /> component and the published JavaScript asset.

    @if (!$myModel->hasBeenSigned())
        <form action="{{ $myModel->getSignatureRoute() }}" method="POST">
            @csrf
            <div style="text-align: center">
                <x-creagia-signature-pad />
            </div>
        </form>
        <script src="{{ asset('vendor/sign-pad/sign-pad.min.js') }}"></script>
    @endif
  8. Retrieve and delete signatures

    main

    Once a model has been signed, you can access the signature via the $model->signature Eloquent relation.

    Available methods on the signature relation:

    • getSignatureImagePath(): Returns the signature image path.
    • getSignatureImageAbsolutePath(): Returns the signature image absolute path.
    • getSignedDocumentPath(): Returns the generated PDF document path.
    • getSignedDocumentAbsolutePath(): Returns the generated PDF document absolute path.

    To delete a signature: Call the deleteSignature() method directly on the model.

    // Retrieve paths
    echo $myModel->signature->getSignatureImagePath();
    echo $myModel->signature->getSignedDocumentPath();
    
    // Delete signature
    $myModel->deleteSignature();
  9. Customize the signature pad component

    main

    The <x-creagia-signature-pad /> component accepts several attributes to customize its appearance and behavior:

    • border-color: Hex color for the canvas border.
    • pad-classes: CSS classes for the signature area.
    • button-classes: CSS classes for the 'Submit' and 'Clear' buttons.
    • clear-name: String for the 'Clear' button label.
    • submit-name: String for the 'Submit' button label.
    • disabled-without-signature: Boolean; if true, the submit button is disabled until a signature is drawn.
    <x-creagia-signature-pad
        border-color="#eaeaea"
        pad-classes="rounded-xl border-2"
        button-classes="bg-gray-100 px-4 py-2 rounded-xl mt-4"
        clear-name="Clear"
        submit-name="Submit"
        :disabled-without-signature="true"
    />
  10. Configure signature scaling and certification settings

    main

    The AppendSignatureDocumentAction relies on specific configuration keys to determine how signatures are rendered and whether the document should be prepared for certification. Ensure these keys are present in your config/sign-pad.php file:

    KeyTypeDescription
    sign-pad.widthnumericUsed to calculate the width of the signature image on the PDF.
    sign-pad.heightnumericUsed to calculate the height of the signature image on the PDF.
    sign-pad.certify_documentsbooleanIf true, defines the active signature appearance area in the PDF.

    If these values are missing or of the wrong type, an InvalidConfiguration exception will be thrown.

  11. Use the Signature model to access file paths

    main

    The Signature model represents a recorded signature and provides methods to retrieve the paths for both the signature image and the signed document. These paths are resolved using the sign-pad.disk_name, sign-pad.signatures_path, and sign-pad.documents_path configuration settings.

    Signature Image Paths

    • getSignatureImagePath(): Returns the relative path to the signature image file.
    • getSignatureImageAbsolutePath(): Returns the absolute system path to the signature image file.

    Signed Document Paths

    If a document has been signed (i.e., document_filename is not null), you can retrieve:

    • getSignedDocumentPath(): Returns the relative path to the signed document.
    • getSignedDocumentAbsolutePath(): Returns the absolute system path to the signed document.
    // Assuming $signature is an instance of Creagia\LaravelSignPad\Signature
    
    // Get relative paths
    $imagePath = $signature->getSignatureImagePath();
    $docPath = $signature->getSignedDocumentPath();
    
    // Get absolute system paths
    $imageAbsPath = $signature->getSignatureImageAbsolutePath();
    $docAbsPath = $signature->getSignedDocumentAbsolutePath();
  12. Understand the Signature model relationship

    main

    The Signature model uses a polymorphic relationship to associate a signature with any other Eloquent model in your application. You can access the parent model using the model() method.

    // Retrieve the model that this signature belongs to
    $parentModel = $signature->model;