Add signature creation popup with multiple input methods
Introduced a `DxPopup` for signature creation in `EnvelopeViewer.razor`, supporting three input methods: drawing, text, and image upload. - Added `receiver-signature.js` for signature handling via JavaScript interop. - Implemented tab-based UI for switching between signature methods. - Added validation for required fields (e.g., full name, place). - Enhanced text signature customization with font selection and dynamic rendering. - Introduced state management for signature input and popup visibility. - Added methods for initializing, clearing, and saving signatures. - Styled the popup for a user-friendly experience and added error messages. - Configured the popup to open automatically on page load or button click. This feature improves the user experience by providing a flexible and intuitive way to create signatures.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
@using Microsoft.Extensions.Options
|
||||
@using EnvelopeGenerator.ReceiverUI.Options
|
||||
@using Microsoft.JSInterop
|
||||
@using DevExpress.Blazor
|
||||
@inject DocumentService DocumentService
|
||||
@inject NavigationManager Navigation
|
||||
@inject IOptions<ApiOptions> AppOptions
|
||||
@@ -18,6 +19,7 @@
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf_viewer.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script src="js/pdf-viewer.js"></script>
|
||||
<script src="js/receiver-signature.js"></script>
|
||||
|
||||
<div class="envelope-viewer-layout">
|
||||
<div class="envelope-action-bar">
|
||||
@@ -177,7 +179,169 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DxPopup @bind-Visible="_signaturePopupVisible"
|
||||
HeaderText="Unterschrift erstellen"
|
||||
Width="620px"
|
||||
MaxWidth="95vw"
|
||||
ShowFooter="true"
|
||||
CloseOnOutsideClick="false"
|
||||
ShowCloseButton="false"
|
||||
CloseOnEscape="false"
|
||||
Shown="OnPopupShownAsync">
|
||||
<BodyContentTemplate>
|
||||
<ul class="nav nav-tabs mb-3" style="border-bottom: 2px solid #e9ecef;">
|
||||
<li class="nav-item">
|
||||
<button type="button"
|
||||
class="nav-link @(_activeSignatureTab == SignatureTabDraw ? "active" : "")"
|
||||
style="@(_activeSignatureTab == SignatureTabDraw ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
|
||||
@onclick="() => SetSignatureTabAsync(SignatureTabDraw)">
|
||||
Zeichnen
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button type="button"
|
||||
class="nav-link @(_activeSignatureTab == SignatureTabText ? "active" : "")"
|
||||
style="@(_activeSignatureTab == SignatureTabText ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
|
||||
@onclick="() => SetSignatureTabAsync(SignatureTabText)">
|
||||
Text
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button type="button"
|
||||
class="nav-link @(_activeSignatureTab == SignatureTabImage ? "active" : "")"
|
||||
style="@(_activeSignatureTab == SignatureTabImage ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
|
||||
@onclick="() => SetSignatureTabAsync(SignatureTabImage)">
|
||||
Bild
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@if(_activeSignatureTab == SignatureTabDraw) {
|
||||
<p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Bitte unterschreiben Sie im folgenden Feld.</p>
|
||||
<canvas id="envelope-signature-pad"
|
||||
width="560"
|
||||
height="180"
|
||||
style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
|
||||
} else if(_activeSignatureTab == SignatureTabText) {
|
||||
<p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Geben Sie Ihre Unterschrift als Text ein und wählen Sie eine Schriftart.</p>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12 col-md-7">
|
||||
<input class="form-control"
|
||||
placeholder="Ihre Unterschrift"
|
||||
value="@_typedSignatureText"
|
||||
@oninput="OnTypedSignatureChanged"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
|
||||
</div>
|
||||
<div class="col-12 col-md-5">
|
||||
<select class="form-select"
|
||||
value="@_typedSignatureFont"
|
||||
@onchange="OnTypedSignatureFontChanged"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;">
|
||||
@foreach(var font in TypedSignatureFonts) {
|
||||
<option value="@font.Value" style="font-family: @font.Value">@font.Text</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="envelope-typed-signature-pad"
|
||||
width="560"
|
||||
height="180"
|
||||
style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
|
||||
} else {
|
||||
<p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Laden Sie ein Bild Ihrer Unterschrift hoch.</p>
|
||||
<input id="envelope-signature-image-input"
|
||||
class="form-control mb-3"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
|
||||
<canvas id="envelope-image-signature-pad"
|
||||
width="560"
|
||||
height="180"
|
||||
style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
|
||||
}
|
||||
|
||||
<div style="border-top: 2px solid #e9ecef; margin-top: 1.5rem; padding-top: 1.5rem;">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label" for="envelope-signer-name" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
|
||||
Vor- und Nachname <span style="color: #dc3545;">*</span>
|
||||
</label>
|
||||
<input id="envelope-signer-name"
|
||||
class="form-control"
|
||||
value="@_signerFullName"
|
||||
@oninput="args => _signerFullName = args.Value?.ToString() ?? string.Empty"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label" for="envelope-signer-position" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
|
||||
Position <span style="color: #6c757d; font-weight: 400;">(optional)</span>
|
||||
</label>
|
||||
<input id="envelope-signer-position"
|
||||
class="form-control"
|
||||
value="@_signerPosition"
|
||||
@oninput="args => _signerPosition = args.Value?.ToString() ?? string.Empty"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label" for="envelope-signature-place" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
|
||||
Ort <span style="color: #dc3545;">*</span>
|
||||
</label>
|
||||
<input id="envelope-signature-place"
|
||||
class="form-control"
|
||||
value="@_signaturePlace"
|
||||
@oninput="args => _signaturePlace = args.Value?.ToString() ?? string.Empty"
|
||||
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!string.IsNullOrWhiteSpace(_popupValidationMessage)) {
|
||||
<div style="background: #fee; border-left: 4px solid #dc3545; padding: 0.75rem 1rem; margin-top: 1rem; border-radius: 4px;">
|
||||
<span style="color: #dc3545; font-size: 0.875rem; font-weight: 500;">@_popupValidationMessage</span>
|
||||
</div>
|
||||
}
|
||||
</BodyContentTemplate>
|
||||
<FooterContentTemplate>
|
||||
<div class="d-flex gap-2 justify-content-between w-100" style="padding: 0.5rem 0;">
|
||||
<button class="btn btn-outline-secondary"
|
||||
@onclick="RenewSignatureAsync"
|
||||
style="border-radius: 6px; padding: 0.625rem 1.25rem; font-weight: 500;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
|
||||
</svg>
|
||||
Erneuern
|
||||
</button>
|
||||
<button class="btn btn-primary"
|
||||
@onclick="SaveSignatureAsync"
|
||||
style="background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); border: none; border-radius: 6px; padding: 0.625rem 2rem; font-weight: 600; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</FooterContentTemplate>
|
||||
</DxPopup>
|
||||
|
||||
@code {
|
||||
// Signature tab constants
|
||||
const string SignatureTabDraw = "draw";
|
||||
const string SignatureTabText = "text";
|
||||
const string SignatureTabImage = "image";
|
||||
const string DrawCanvasId = "envelope-signature-pad";
|
||||
const string TypedCanvasId = "envelope-typed-signature-pad";
|
||||
const string ImageInputId = "envelope-signature-image-input";
|
||||
const string ImageCanvasId = "envelope-image-signature-pad";
|
||||
|
||||
readonly (string Text, string Value)[] TypedSignatureFonts = {
|
||||
("Brush Script", "'Brush Script MT', cursive"),
|
||||
("Segoe Script", "'Segoe Script', cursive"),
|
||||
("Lucida Handwriting", "'Lucida Handwriting', cursive"),
|
||||
("Comic Sans", "'Comic Sans MS', cursive"),
|
||||
("Cursive", "cursive")
|
||||
};
|
||||
|
||||
[Parameter] public string? EnvelopeKey { get; set; }
|
||||
|
||||
bool _isLoading = true;
|
||||
@@ -191,6 +355,18 @@ bool _showThumbnails = true;
|
||||
DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
|
||||
IReadOnlyList<SignatureDto> _signatures = [];
|
||||
|
||||
// Signature state
|
||||
record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
|
||||
SignatureCapture? _capturedSignature;
|
||||
bool _signaturePopupVisible = false;
|
||||
string? _popupValidationMessage;
|
||||
string _activeSignatureTab = SignatureTabDraw;
|
||||
string _typedSignatureText = string.Empty;
|
||||
string _typedSignatureFont = "'Brush Script MT', cursive";
|
||||
string _signerFullName = string.Empty;
|
||||
string _signerPosition = string.Empty;
|
||||
string _signaturePlace = string.Empty;
|
||||
|
||||
// Resizable splitter state
|
||||
int _thumbnailWidth = 260;
|
||||
bool _isResizing = false;
|
||||
@@ -221,6 +397,11 @@ const int MaxThumbnailWidth = 400;
|
||||
|
||||
await JSRuntime.InvokeVoidAsync("console.log", "Loaded signatures:", _signatures);
|
||||
|
||||
// Open signature popup on page load
|
||||
_activeSignatureTab = SignatureTabDraw;
|
||||
_signaturePopupVisible = true;
|
||||
_popupValidationMessage = null;
|
||||
|
||||
} catch (Exception ex) {
|
||||
_errorMessage = $"Fehler: {ex.Message}";
|
||||
}
|
||||
@@ -386,7 +567,100 @@ const int MaxThumbnailWidth = 400;
|
||||
|
||||
[JSInvokable]
|
||||
public void OnSignatureButtonClick(int signatureId) {
|
||||
Console.WriteLine($"Signature #{signatureId} signed");
|
||||
Console.WriteLine($"Signature #{signatureId} clicked");
|
||||
OpenSignaturePopup();
|
||||
}
|
||||
|
||||
// Signature popup methods
|
||||
void OpenSignaturePopup() {
|
||||
_activeSignatureTab = SignatureTabDraw;
|
||||
_signaturePopupVisible = true;
|
||||
_popupValidationMessage = null;
|
||||
}
|
||||
|
||||
async Task OnPopupShownAsync() {
|
||||
await InitializeActiveSignatureTabAsync();
|
||||
}
|
||||
|
||||
async Task SetSignatureTabAsync(string tab) {
|
||||
_activeSignatureTab = tab;
|
||||
_popupValidationMessage = null;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
await Task.Delay(50);
|
||||
await InitializeActiveSignatureTabAsync();
|
||||
}
|
||||
|
||||
async Task InitializeActiveSignatureTabAsync() {
|
||||
if(_activeSignatureTab == SignatureTabDraw) {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.initialize", DrawCanvasId);
|
||||
} else if(_activeSignatureTab == SignatureTabText) {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.initializeTyped", TypedCanvasId);
|
||||
await RenderTypedSignatureAsync();
|
||||
} else {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.initializeImage", ImageInputId, ImageCanvasId);
|
||||
}
|
||||
}
|
||||
|
||||
async Task RenewSignatureAsync() {
|
||||
_popupValidationMessage = null;
|
||||
|
||||
if(_activeSignatureTab == SignatureTabDraw) {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.clear", DrawCanvasId);
|
||||
} else if(_activeSignatureTab == SignatureTabText) {
|
||||
_typedSignatureText = string.Empty;
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.clearTyped", TypedCanvasId);
|
||||
} else {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.clearImage", ImageInputId, ImageCanvasId);
|
||||
}
|
||||
}
|
||||
|
||||
async Task OnTypedSignatureChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
|
||||
_typedSignatureText = args.Value?.ToString() ?? string.Empty;
|
||||
await RenderTypedSignatureAsync();
|
||||
}
|
||||
|
||||
async Task OnTypedSignatureFontChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
|
||||
_typedSignatureFont = args.Value?.ToString() ?? _typedSignatureFont;
|
||||
await RenderTypedSignatureAsync();
|
||||
}
|
||||
|
||||
async Task RenderTypedSignatureAsync() {
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, _typedSignatureText, _typedSignatureFont);
|
||||
}
|
||||
|
||||
async Task SaveSignatureAsync() {
|
||||
if (string.IsNullOrWhiteSpace(_signerFullName)) {
|
||||
_popupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
|
||||
return;
|
||||
}
|
||||
if (string.IsNullOrWhiteSpace(_signaturePlace)) {
|
||||
_popupValidationMessage = "Bitte geben Sie den Ort ein.";
|
||||
return;
|
||||
}
|
||||
var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
|
||||
if (string.IsNullOrWhiteSpace(signatureDataUrl)) {
|
||||
_popupValidationMessage = "Die Unterschrift ist erforderlich.";
|
||||
return;
|
||||
}
|
||||
|
||||
_popupValidationMessage = null;
|
||||
_capturedSignature = new(signatureDataUrl, _signerFullName.Trim(), _signerPosition.Trim(), _signaturePlace.Trim());
|
||||
_signaturePopupVisible = false;
|
||||
|
||||
await InvokeAsync(StateHasChanged);
|
||||
Console.WriteLine($"Signature saved: {_signerFullName}, {_signaturePlace}");
|
||||
}
|
||||
|
||||
async Task<string?> GetActiveSignatureDataUrlAsync() {
|
||||
if(_activeSignatureTab == SignatureTabDraw)
|
||||
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getDataUrl", DrawCanvasId);
|
||||
|
||||
if(_activeSignatureTab == SignatureTabText) {
|
||||
await RenderTypedSignatureAsync();
|
||||
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getTypedDataUrl", TypedCanvasId);
|
||||
}
|
||||
|
||||
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getImageDataUrl", ImageCanvasId);
|
||||
}
|
||||
|
||||
async Task RenderThumbnailsAsync() {
|
||||
|
||||
Reference in New Issue
Block a user