AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor and enhance EnvelopeReceiverPage UI/UX

Browse Source 
- Replaced `SignatureService` with `DocReceiverElementService` in DI.
- Refactored `envelope-action-bar` for better readability and added badges for `2FA`, `Access Code`, and `Signature Count`.
- Improved error handling and loading states with clearer messages.
- Enhanced PDF viewer toolbar with better navigation, zoom, and signature controls.
- Added resizable thumbnail sidebar with persistent width settings.
- Refactored signature popup to support draw, text, and image tabs with validation.
- Improved JavaScript interop for PDF rendering and signature handling.
- Introduced DevExpress PDF Viewer as an alternative implementation.
- Consolidated state management and improved code readability.
This commit is contained in:
tekh
2026-06-25 13:10:32 +02:00
parent 7456babe0d
commit 6aa97adf84
2 changed files with 490 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeReceiverPage.razor
View File

@@ -12,7 +12,7 @@
@inject IOptions<ApiOptions> AppOptions @inject IOptions<ApiOptions> AppOptions
@inject IOptions<PdfViewerOptions> PdfViewerOptions @inject IOptions<PdfViewerOptions> PdfViewerOptions
@inject IJSRuntime JSRuntime @inject IJSRuntime JSRuntime
@inject SignatureService SignatureService @inject DocReceiverElementService SignatureService
@inject SignatureCacheService SignatureCacheService @inject SignatureCacheService SignatureCacheService
@inject EnvelopeGenerator.Server.Client.Services.AuthService AuthService @inject EnvelopeGenerator.Server.Client.Services.AuthService AuthService
@inject EnvelopeGenerator.Server.Client.Services.EnvelopeReceiverService EnvelopeReceiverService @inject EnvelopeGenerator.Server.Client.Services.EnvelopeReceiverService EnvelopeReceiverService
@@ -34,34 +34,43 @@
<div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
@* Left: Title + Sender *@ @* Left: Title + Sender *@
<div style="flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem;"> <div style="flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem;">
@if (_envelopeReceiver is not null) { @if (_envelopeReceiver is not null)
{
<div style="font-size: 0.9rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> <div style="font-size: 0.9rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
@(_envelopeReceiver.Envelope?.Title ?? "Dokument") @(_envelopeReceiver.Envelope?.Title ?? "Dokument")
</div> </div>
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email))
{
<span style="font-size: 0.7rem; color: #6b7280; white-space: nowrap;"> <span style="font-size: 0.7rem; color: #6b7280; white-space: nowrap;">
Von Von
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName))
{
<span style="font-weight: 500; color: #374151;">@_envelopeReceiver.Envelope.User.FullName</span> <span style="font-weight: 500; color: #374151;">@_envelopeReceiver.Envelope.User.FullName</span>
} }
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email))
{
<span>&lt;@_envelopeReceiver.Envelope.User.Email&gt;</span> <span>&lt;@_envelopeReceiver.Envelope.User.Email&gt;</span>
} }
@if (_envelopeReceiver.Envelope?.AddedWhen != null) { @if (_envelopeReceiver.Envelope?.AddedWhen != null)
{
<span>&nbsp;·&nbsp;@_envelopeReceiver.Envelope.AddedWhen.ToString("dd.MM.yyyy")</span> <span>&nbsp;·&nbsp;@_envelopeReceiver.Envelope.AddedWhen.ToString("dd.MM.yyyy")</span>
} }
</span> </span>
} }
} else { }
else
{
<div style="font-size: 0.9rem; font-weight: 600; color: #1f2937;">Dokumentenansicht</div> <div style="font-size: 0.9rem; font-weight: 600; color: #1f2937;">Dokumentenansicht</div>
} }
</div> </div>
@* Right: Badges + Logout *@ @* Right: Badges + Logout *@
<div class="d-flex align-items-center" style="gap: 0.75rem; flex: 0 0 auto;"> <div class="d-flex align-items-center" style="gap: 0.75rem; flex: 0 0 auto;">
@if (_envelopeReceiver is not null) { @if (_envelopeReceiver is not null)
{
<div class="d-flex flex-wrap align-items-center" style="gap: 0.3rem; font-size: 0.7rem;"> <div class="d-flex flex-wrap align-items-center" style="gap: 0.3rem; font-size: 0.7rem;">
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name))
{
<span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #f3f4f6; border-radius: 0.25rem; color: #374151; white-space: nowrap;"> <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #f3f4f6; border-radius: 0.25rem; color: #374151; white-space: nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Z" /> <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Z" />
@@ -69,7 +78,8 @@
@_envelopeReceiver.Name @_envelopeReceiver.Name
</span> </span>
} }
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName))
{
<span style="display: inline-flex; align-items-center; padding: 0.15rem 0.5rem; background: #f3f4f6; border-radius: 0.25rem; color: #6b7280; white-space: nowrap;"> <span style="display: inline-flex; align-items-center; padding: 0.15rem 0.5rem; background: #f3f4f6; border-radius: 0.25rem; color: #6b7280; white-space: nowrap;">
Von @_envelopeReceiver.Envelope.User.FullName Von @_envelopeReceiver.Envelope.User.FullName
</span> </span>
@@ -77,7 +87,8 @@
@{ @{
int sigCount = _signatures.Count; int sigCount = _signatures.Count;
} }
@if (sigCount > 0) { @if (sigCount > 0)
{
<span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #ede9fe; border-radius: 0.25rem; color: #6d28d9; font-weight: 500; white-space: nowrap;"> <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #ede9fe; border-radius: 0.25rem; color: #6d28d9; font-weight: 500; white-space: nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" /> <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
@@ -85,7 +96,8 @@
@sigCount @sigCount
</span> </span>
} }
@if (_envelopeReceiver.Envelope?.UseAccessCode == true) { @if (_envelopeReceiver.Envelope?.UseAccessCode ?? false)
{
<span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; color: #92400e; font-weight: 500; white-space: nowrap;"> <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; color: #92400e; font-weight: 500; white-space: nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" /> <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
@@ -93,7 +105,8 @@
Code Code
</span> </span>
} }
@if (_envelopeReceiver.Envelope?.TFAEnabled == true) { @if (_envelopeReceiver.Envelope?.TFAEnabled ?? false)
{
<span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #dbeafe; border-radius: 0.25rem; color: #1e40af; font-weight: 500; white-space: nowrap;"> <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #dbeafe; border-radius: 0.25rem; color: #1e40af; font-weight: 500; white-space: nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" /> <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
@@ -107,11 +120,15 @@
} }
@* Logout button *@ @* Logout button *@
@if (!string.IsNullOrWhiteSpace(EnvelopeKey)) { @if (!string.IsNullOrWhiteSpace(EnvelopeKey))
{
<button class="pdf-toolbar__btn" @onclick="LogoutAsync" disabled="@_isLoggingOut" title="Abmelden" style="flex-shrink: 0;"> <button class="pdf-toolbar__btn" @onclick="LogoutAsync" disabled="@_isLoggingOut" title="Abmelden" style="flex-shrink: 0;">
@if (_isLoggingOut) { @if (_isLoggingOut)
{
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 14px; height: 14px;"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 14px; height: 14px;"></span>
} else { }
else
{
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" /> <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z" />
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" /> <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
@@ -123,15 +140,18 @@
</div> </div>
@* Row 2: Messages (visible text) *@ @* Row 2: Messages (visible text) *@
@if (_envelopeReceiver is not null && (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message) || !string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage))) { @if (_envelopeReceiver is not null && (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message) || !string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)))
{
<div style="display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.7rem; padding-top: 0.15rem; border-top: 1px solid #e5e7eb;"> <div style="display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.7rem; padding-top: 0.15rem; border-top: 1px solid #e5e7eb;">
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message))
{
<div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #f9fafb; border-radius: 0.25rem; border-left: 2px solid #9ca3af; display: flex; align-items: flex-start; gap: 0.25rem;"> <div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #f9fafb; border-radius: 0.25rem; border-left: 2px solid #9ca3af; display: flex; align-items: flex-start; gap: 0.25rem;">
<span style="font-weight: 500; color: #374151; flex-shrink: 0;">📧</span> <span style="font-weight: 500; color: #374151; flex-shrink: 0;">📧</span>
<span style="color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.Envelope.Message</span> <span style="color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.Envelope.Message</span>
</div> </div>
} }
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)) { @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage))
{
<div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; border-left: 2px solid #f59e0b; display: flex; align-items: flex-start; gap: 0.25rem;"> <div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; border-left: 2px solid #f59e0b; display: flex; align-items: flex-start; gap: 0.25rem;">
<span style="font-weight: 500; color: #92400e; flex-shrink: 0;">🔒</span> <span style="font-weight: 500; color: #92400e; flex-shrink: 0;">🔒</span>
<span style="color: #92400e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.PrivateMessage</span> <span style="color: #92400e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.PrivateMessage</span>
@@ -143,7 +163,8 @@
</div> </div>
<div class="envelope-content"> <div class="envelope-content">
@if (_isLoading) { @if (_isLoading)
{
<div class="d-flex justify-content-center align-items-center h-100"> <div class="d-flex justify-content-center align-items-center h-100">
<div class="text-center"> <div class="text-center">
<div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status"> <div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
@@ -152,7 +173,9 @@
<p class="text-white fw-semibold">Dokument wird geladen...</p> <p class="text-white fw-semibold">Dokument wird geladen...</p>
</div> </div>
</div> </div>
} else if (_errorMessage is not null) { }
else if (_errorMessage is not null)
{
<div class="error-container"> <div class="error-container">
<div class="alert alert-danger shadow-lg"> <div class="alert alert-danger shadow-lg">
<div class="d-flex align-items-start"> <div class="d-flex align-items-start">
@@ -167,9 +190,12 @@
</div> </div>
</div> </div>
</div> </div>
} else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) { }
else if (!string.IsNullOrWhiteSpace(_pdfDataUrl))
{
<div class="pdf-viewer-container"> <div class="pdf-viewer-container">
@if (_pdfLoaded) { @if (_pdfLoaded)
{
<div class="pdf-toolbar"> <div class="pdf-toolbar">
<div class="pdf-toolbar__section"> <div class="pdf-toolbar__section">
<button class="pdf-toolbar__btn pdf-toolbar__btn--toggle" @onclick="ToggleThumbnails" title="@(_showThumbnails ? "Seitenleiste ausblenden" : "Seitenleiste einblenden")"> <button class="pdf-toolbar__btn pdf-toolbar__btn--toggle" @onclick="ToggleThumbnails" title="@(_showThumbnails ? "Seitenleiste ausblenden" : "Seitenleiste einblenden")">
@@ -219,7 +245,8 @@
<div class="pdf-toolbar__divider"></div> <div class="pdf-toolbar__divider"></div>
@if (_totalSignatures > 0) { @if (_totalSignatures > 0)
{
<div class="pdf-toolbar__section"> <div class="pdf-toolbar__section">
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change @(_capturedSignature is not null ? "pdf-toolbar__btn--signature-change-active" : "")" <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change @(_capturedSignature is not null ? "pdf-toolbar__btn--signature-change-active" : "")"
disabled="@(_signedSignatures > 0)" disabled="@(_signedSignatures > 0)"
@@ -249,7 +276,8 @@
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" /> <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
</svg> </svg>
<span class="pdf-toolbar__signature-counter-text"> <span class="pdf-toolbar__signature-counter-text">
@if (_currentSignatureIndex > 0) { @if (_currentSignatureIndex > 0)
{
<span style="color: #4F46E5; font-weight: 600;">#@_currentSignatureIndex</span> <span style="color: #4F46E5; font-weight: 600;">#@_currentSignatureIndex</span>
<span style="opacity: 0.4; margin: 0 0.35rem;">|</span> <span style="opacity: 0.4; margin: 0 0.35rem;">|</span>
} }
@@ -257,9 +285,12 @@
<span style="opacity: 0.6;">&nbsp;/&nbsp;</span> <span style="opacity: 0.6;">&nbsp;/&nbsp;</span>
<span>@_totalSignatures</span> <span>@_totalSignatures</span>
</span> </span>
@if (_unsignedSignatures > 0) { @if (_unsignedSignatures > 0)
{
<span class="pdf-toolbar__signature-badge">@_unsignedSignatures offen</span> <span class="pdf-toolbar__signature-badge">@_unsignedSignatures offen</span>
} else { }
else
{
<span class="pdf-toolbar__signature-badge pdf-toolbar__signature-badge--complete">✓ Komplett</span> <span class="pdf-toolbar__signature-badge pdf-toolbar__signature-badge--complete">✓ Komplett</span>
} }
</div> </div>
@@ -277,7 +308,8 @@
<div class="pdf-toolbar__divider"></div> <div class="pdf-toolbar__divider"></div>
@* Reset button - only show when signatures are signed *@ @* Reset button - only show when signatures are signed *@
@if (_signedSignatures > 0) { @if (_signedSignatures > 0)
{
<div class="pdf-toolbar__section"> <div class="pdf-toolbar__section">
<button class="pdf-toolbar__btn pdf-toolbar__btn--reset" <button class="pdf-toolbar__btn pdf-toolbar__btn--reset"
@onclick="RestartSigning" @onclick="RestartSigning"
@@ -293,11 +325,13 @@
</div> </div>
} }
<div class="pdf-frame"> <div class="pdf-frame">
@if (_pdfLoaded && _showThumbnails) { @if (_pdfLoaded && _showThumbnails)
{
<!-- PDF Thumbnail Sidebar --> <!-- PDF Thumbnail Sidebar -->
<div class="pdf-thumbnails" style="width: @(_thumbnailWidth)px"> <div class="pdf-thumbnails" style="width: @(_thumbnailWidth)px">
<div class="pdf-thumbnails__content"> <div class="pdf-thumbnails__content">
@for (int i = 1; i <= _totalPages; i++) { @for (int i = 1; i <= _totalPages; i++)
{
var pageNum = i; var pageNum = i;
<div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)"> <div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)">
<div class="pdf-thumbnail__preview"> <div class="pdf-thumbnail__preview">
@@ -323,7 +357,9 @@
</div> </div>
</div> </div>
</div> </div>
} else { }
else
{
<div class="error-container"> <div class="error-container">
<div class="alert alert-warning shadow-lg"> <div class="alert alert-warning shadow-lg">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
@@ -375,13 +411,16 @@ Shown="OnPopupShownAsync">
</li> </li>
</ul> </ul>
@if(_activeSignatureTab == SignatureTabDraw) { @if (_activeSignatureTab == SignatureTabDraw)
{
<p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Bitte unterschreiben Sie im folgenden Feld.</p> <p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Bitte unterschreiben Sie im folgenden Feld.</p>
<canvas id="envelope-signature-pad" <canvas id="envelope-signature-pad"
width="560" width="560"
height="180" 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> 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) { }
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> <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="row g-3 mb-3">
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">
@@ -396,7 +435,8 @@ Shown="OnPopupShownAsync">
value="@_typedSignatureFont" value="@_typedSignatureFont"
@onchange="OnTypedSignatureFontChanged" @onchange="OnTypedSignatureFontChanged"
style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;"> style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;">
@foreach(var font in TypedSignatureFonts) { @foreach (var font in TypedSignatureFonts)
{
<option value="@font.Value" style="font-family: @font.Value">@font.Text</option> <option value="@font.Value" style="font-family: @font.Value">@font.Text</option>
} }
</select> </select>
@@ -406,7 +446,9 @@ Shown="OnPopupShownAsync">
width="560" width="560"
height="180" 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> 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 { }
else
{
<p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Laden Sie ein Bild Ihrer Unterschrift hoch.</p> <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" <input id="envelope-signature-image-input"
class="form-control mb-3" class="form-control mb-3"
@@ -454,7 +496,8 @@ Shown="OnPopupShownAsync">
</div> </div>
</div> </div>
@if(!string.IsNullOrWhiteSpace(_popupValidationMessage)) { @if (!string.IsNullOrWhiteSpace(_popupValidationMessage))
{
<div style="background: #fee; border-left: 4px solid #dc3545; padding: 0.75rem 1rem; margin-top: 1rem; border-radius: 4px;"> <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> <span style="color: #dc3545; font-size: 0.875rem; font-weight: 500;">@_popupValidationMessage</span>
</div> </div>
@@ -541,7 +584,8 @@ int _resizeStartWidth = 0;
const int MinThumbnailWidth = 150; const int MinThumbnailWidth = 150;
const int MaxThumbnailWidth = 400; const int MaxThumbnailWidth = 400;
async Task LogoutAsync() { async Task LogoutAsync()
{
if (string.IsNullOrWhiteSpace(EnvelopeKey) || _isLoggingOut) return; if (string.IsNullOrWhiteSpace(EnvelopeKey) || _isLoggingOut) return;
_isLoggingOut = true; _isLoggingOut = true;
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
@@ -549,8 +593,10 @@ const int MaxThumbnailWidth = 400;
Navigation.NavigateTo($"/envelope/login/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: true); Navigation.NavigateTo($"/envelope/login/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: true);
} }
protected override async Task OnInitializedAsync() { protected override async Task OnInitializedAsync()
if (string.IsNullOrWhiteSpace(EnvelopeKey)) { {
if (string.IsNullOrWhiteSpace(EnvelopeKey))
{
_errorMessage = "Envelope-Schlüssel fehlt."; _errorMessage = "Envelope-Schlüssel fehlt.";
_isLoading = false; _isLoading = false;
return; return;
@@ -558,18 +604,23 @@ const int MaxThumbnailWidth = 400;
// Check authentication // Check authentication
var hasAccess = await AuthService.CheckEnvelopeAccessAsync(EnvelopeKey); var hasAccess = await AuthService.CheckEnvelopeAccessAsync(EnvelopeKey);
if (!hasAccess) { if (!hasAccess)
{
Navigation.NavigateTo($"/envelope/login/{Uri.EscapeDataString(EnvelopeKey)}"); Navigation.NavigateTo($"/envelope/login/{Uri.EscapeDataString(EnvelopeKey)}");
return; return;
} }
try { try
{
var pdfBytes = await DocumentService.GetDocumentAsync(EnvelopeKey); var pdfBytes = await DocumentService.GetDocumentAsync(EnvelopeKey);
if (pdfBytes is { Length: > 0 }) { if (pdfBytes is { Length: > 0 })
{
var base64 = Convert.ToBase64String(pdfBytes); var base64 = Convert.ToBase64String(pdfBytes);
_pdfDataUrl = $"data:application/pdf;base64,{base64}"; _pdfDataUrl = $"data:application/pdf;base64,{base64}";
} else { }
else
{
_errorMessage = "Dokument konnte nicht geladen werden: Keine Daten empfangen."; _errorMessage = "Dokument konnte nicht geladen werden: Keine Daten empfangen.";
} }
@@ -613,10 +664,14 @@ const int MaxThumbnailWidth = 400;
_popupValidationMessage = null; _popupValidationMessage = null;
} }
} catch (HttpRequestException ex) { }
catch (HttpRequestException ex)
{
_errorMessage = $"Dokument konnte nicht geladen werden: {ex.Message}"; _errorMessage = $"Dokument konnte nicht geladen werden: {ex.Message}";
logger.LogError(ex, "Failed to load document for envelope {EnvelopeKey}", EnvelopeKey); logger.LogError(ex, "Failed to load document for envelope {EnvelopeKey}", EnvelopeKey);
} catch (Exception ex) { }
catch (Exception ex)
{
_errorMessage = $"Fehler: {ex.Message}"; _errorMessage = $"Fehler: {ex.Message}";
logger.LogError(ex, "Unexpected error during initialization for envelope {EnvelopeKey}", EnvelopeKey); logger.LogError(ex, "Unexpected error during initialization for envelope {EnvelopeKey}", EnvelopeKey);
} }
@@ -625,24 +680,32 @@ const int MaxThumbnailWidth = 400;
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
protected override async Task OnAfterRenderAsync(bool firstRender) { protected override async Task OnAfterRenderAsync(bool firstRender)
if (firstRender) { {
if (firstRender)
{
// Load saved thumbnail width from localStorage // Load saved thumbnail width from localStorage
try { try
{
var savedWidth = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "envelopeViewer_thumbnailWidth"); var savedWidth = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "envelopeViewer_thumbnailWidth");
if (!string.IsNullOrEmpty(savedWidth) && int.TryParse(savedWidth, out var width)) { if (!string.IsNullOrEmpty(savedWidth) && int.TryParse(savedWidth, out var width))
{
_thumbnailWidth = Math.Clamp(width, MinThumbnailWidth, MaxThumbnailWidth); _thumbnailWidth = Math.Clamp(width, MinThumbnailWidth, MaxThumbnailWidth);
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
} catch { }
catch
{
// Ignore localStorage errors // Ignore localStorage errors
} }
} }
if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl)) { if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl))
{
await Task.Delay(500); await Task.Delay(500);
try { try
{
_dotNetRef = DotNetObjectReference.Create(this); _dotNetRef = DotNetObjectReference.Create(this);
// Send quality options to JavaScript // Send quality options to JavaScript
@@ -662,7 +725,8 @@ const int MaxThumbnailWidth = 400;
var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef); var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef);
if (success) { if (success)
{
_pdfLoaded = true; _pdfLoaded = true;
_totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages"); _totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages");
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage"); _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
@@ -680,7 +744,9 @@ const int MaxThumbnailWidth = 400;
// Render signature buttons // Render signature buttons
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
} catch (Exception ex) { }
catch (Exception ex)
{
_errorMessage = $"PDF.js Fehler: {ex.Message}"; _errorMessage = $"PDF.js Fehler: {ex.Message}";
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
@@ -698,21 +764,26 @@ const int MaxThumbnailWidth = 400;
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
async Task NextPage() { async Task NextPage()
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.nextPage")) { {
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.nextPage"))
{
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage"); _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
} }
async Task PreviousPage() { async Task PreviousPage()
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.previousPage")) { {
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.previousPage"))
{
_currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage"); _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
} }
async Task ZoomIn() { async Task ZoomIn()
{
if (_currentZoom >= 300) return; if (_currentZoom >= 300) return;
await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn"); await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn");
var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale"); var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
@@ -722,7 +793,8 @@ const int MaxThumbnailWidth = 400;
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
async Task ZoomOut() { async Task ZoomOut()
{
if (_currentZoom <= 50) return; if (_currentZoom <= 50) return;
await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut"); await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut");
var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale"); var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
@@ -732,14 +804,17 @@ const int MaxThumbnailWidth = 400;
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
async Task SetZoom(int percentage) { async Task SetZoom(int percentage)
{
var scale = percentage / 100.0; var scale = percentage / 100.0;
await JSRuntime.InvokeVoidAsync("pdfViewer.setScale", scale); await JSRuntime.InvokeVoidAsync("pdfViewer.setScale", scale);
_currentZoom = percentage; _currentZoom = percentage;
} }
async Task OnZoomSliderChanged(ChangeEventArgs e) { async Task OnZoomSliderChanged(ChangeEventArgs e)
if (int.TryParse(e.Value?.ToString(), out var zoom)) { {
if (int.TryParse(e.Value?.ToString(), out var zoom))
{
await SetZoom(zoom); await SetZoom(zoom);
// Update signature overlay positions after zoom // Update signature overlay positions after zoom
@@ -747,52 +822,66 @@ const int MaxThumbnailWidth = 400;
} }
} }
async Task OnPageInputChanged(ChangeEventArgs e) { async Task OnPageInputChanged(ChangeEventArgs e)
if (int.TryParse(e.Value?.ToString(), out var pageNum) && pageNum >= 1 && pageNum <= _totalPages) { {
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) { if (int.TryParse(e.Value?.ToString(), out var pageNum) && pageNum >= 1 && pageNum <= _totalPages)
{
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum))
{
_currentPage = pageNum; _currentPage = pageNum;
} }
} }
} }
async Task FitToWidth() { async Task FitToWidth()
{
await JSRuntime.InvokeVoidAsync("pdfViewer.fitToWidth"); await JSRuntime.InvokeVoidAsync("pdfViewer.fitToWidth");
var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale"); var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
_currentZoom = (int)(scale * 100); _currentZoom = (int)(scale * 100);
} }
async Task ToggleThumbnails() { async Task ToggleThumbnails()
{
_showThumbnails = !_showThumbnails; _showThumbnails = !_showThumbnails;
// Re-render thumbnails when showing them // Re-render thumbnails when showing them
if (_showThumbnails && _pdfLoaded) { if (_showThumbnails && _pdfLoaded)
{
await InvokeAsync(StateHasChanged); // Force UI update first await InvokeAsync(StateHasChanged); // Force UI update first
await Task.Delay(150); // Wait for DOM to render canvas elements await Task.Delay(150); // Wait for DOM to render canvas elements
await RenderThumbnailsAsync(); await RenderThumbnailsAsync();
} }
} }
async Task GoToPageFromThumbnail(int pageNum) { async Task GoToPageFromThumbnail(int pageNum)
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) { {
if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum))
{
_currentPage = pageNum; _currentPage = pageNum;
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
} }
async Task RenderSignatureButtonsAsync() { async Task RenderSignatureButtonsAsync()
{
if (_signatures.Count == 0 || !_pdfLoaded) return; if (_signatures.Count == 0 || !_pdfLoaded) return;
try { try
{
await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", _signatures, _currentPage, _dotNetRef); await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", _signatures, _currentPage, _dotNetRef);
await UpdateSignatureCounterAsync(); await UpdateSignatureCounterAsync();
} catch (Exception ex) { }
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine($"Signature button rendering error: {ex.Message}"); System.Diagnostics.Debug.WriteLine($"Signature button rendering error: {ex.Message}");
} }
} }
[JSInvokable] [JSInvokable]
public async Task OnSignatureButtonClick(int signatureId) { public async Task OnSignatureButtonClick(int signatureId)
if (_capturedSignature == null) { {
if (_capturedSignature == null)
{
// No signature captured yet - should not happen as popup is shown on page load // No signature captured yet - should not happen as popup is shown on page load
return; return;
} }
@@ -810,38 +899,47 @@ const int MaxThumbnailWidth = 400;
} }
[JSInvokable] [JSInvokable]
public async Task OnSignatureNavChanged() { public async Task OnSignatureNavChanged()
{
await UpdateSignatureCounterAsync(); await UpdateSignatureCounterAsync();
} }
[JSInvokable] [JSInvokable]
public async Task OnPageChangedBySignatureNav(int newPage) { public async Task OnPageChangedBySignatureNav(int newPage)
{
_currentPage = newPage; _currentPage = newPage;
await RenderSignatureButtonsAsync(); await RenderSignatureButtonsAsync();
} }
async Task UpdateSignatureCounterAsync() { async Task UpdateSignatureCounterAsync()
try { {
try
{
var state = await JSRuntime.InvokeAsync<SignatureNavState>("pdfViewer.getSignatureNavState"); var state = await JSRuntime.InvokeAsync<SignatureNavState>("pdfViewer.getSignatureNavState");
_totalSignatures = state.Total; _totalSignatures = state.Total;
_signedSignatures = state.Signed; _signedSignatures = state.Signed;
_unsignedSignatures = state.Unsigned; _unsignedSignatures = state.Unsigned;
_currentSignatureIndex = state.CurrentIndex; // Current signature _currentSignatureIndex = state.CurrentIndex; // Current signature
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} catch { }
catch
{
// Ignore errors during counter update // Ignore errors during counter update
} }
} }
async Task GoToPreviousSignature() { async Task GoToPreviousSignature()
{
await JSRuntime.InvokeVoidAsync("pdfViewer.goToPreviousSignature", _dotNetRef); await JSRuntime.InvokeVoidAsync("pdfViewer.goToPreviousSignature", _dotNetRef);
} }
async Task GoToNextSignature() { async Task GoToNextSignature()
{
await JSRuntime.InvokeVoidAsync("pdfViewer.goToNextSignature", _dotNetRef); await JSRuntime.InvokeVoidAsync("pdfViewer.goToNextSignature", _dotNetRef);
} }
void RestartSigning() { void RestartSigning()
{
// Force page reload to reset all signatures and state // Force page reload to reset all signatures and state
Navigation.NavigateTo(Navigation.Uri, forceLoad: true); Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
} }
@@ -870,7 +968,8 @@ const int MaxThumbnailWidth = 400;
} }
// Signature popup methods // Signature popup methods
void OpenSignaturePopup() { void OpenSignaturePopup()
{
// Open popup with current signature (edit mode) // Open popup with current signature (edit mode)
_activeSignatureTab = SignatureTabDraw; _activeSignatureTab = SignatureTabDraw;
_signaturePopupVisible = true; _signaturePopupVisible = true;
@@ -885,7 +984,8 @@ const int MaxThumbnailWidth = 400;
} }
} }
async Task OnPopupShownAsync() { async Task OnPopupShownAsync()
{
await InitializeActiveSignatureTabAsync(); await InitializeActiveSignatureTabAsync();
// If there's an existing signature and we're on draw tab, load it to canvas // If there's an existing signature and we're on draw tab, load it to canvas
@@ -896,7 +996,8 @@ const int MaxThumbnailWidth = 400;
} }
} }
async Task SetSignatureTabAsync(string tab) { async Task SetSignatureTabAsync(string tab)
{
_activeSignatureTab = tab; _activeSignatureTab = tab;
_popupValidationMessage = null; _popupValidationMessage = null;
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
@@ -904,55 +1005,74 @@ const int MaxThumbnailWidth = 400;
await InitializeActiveSignatureTabAsync(); await InitializeActiveSignatureTabAsync();
} }
async Task InitializeActiveSignatureTabAsync() { async Task InitializeActiveSignatureTabAsync()
if(_activeSignatureTab == SignatureTabDraw) { {
if (_activeSignatureTab == SignatureTabDraw)
{
await JSRuntime.InvokeVoidAsync("receiverSignature.initialize", DrawCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.initialize", DrawCanvasId);
} else if(_activeSignatureTab == SignatureTabText) { }
else if (_activeSignatureTab == SignatureTabText)
{
await JSRuntime.InvokeVoidAsync("receiverSignature.initializeTyped", TypedCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.initializeTyped", TypedCanvasId);
await RenderTypedSignatureAsync(); await RenderTypedSignatureAsync();
} else { }
else
{
await JSRuntime.InvokeVoidAsync("receiverSignature.initializeImage", ImageInputId, ImageCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.initializeImage", ImageInputId, ImageCanvasId);
} }
} }
async Task RenewSignatureAsync() { async Task RenewSignatureAsync()
{
_popupValidationMessage = null; _popupValidationMessage = null;
if(_activeSignatureTab == SignatureTabDraw) { if (_activeSignatureTab == SignatureTabDraw)
{
await JSRuntime.InvokeVoidAsync("receiverSignature.clear", DrawCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.clear", DrawCanvasId);
} else if(_activeSignatureTab == SignatureTabText) { }
else if (_activeSignatureTab == SignatureTabText)
{
_typedSignatureText = string.Empty; _typedSignatureText = string.Empty;
await JSRuntime.InvokeVoidAsync("receiverSignature.clearTyped", TypedCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.clearTyped", TypedCanvasId);
} else { }
else
{
await JSRuntime.InvokeVoidAsync("receiverSignature.clearImage", ImageInputId, ImageCanvasId); await JSRuntime.InvokeVoidAsync("receiverSignature.clearImage", ImageInputId, ImageCanvasId);
} }
} }
async Task OnTypedSignatureChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) { async Task OnTypedSignatureChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
_typedSignatureText = args.Value?.ToString() ?? string.Empty; _typedSignatureText = args.Value?.ToString() ?? string.Empty;
await RenderTypedSignatureAsync(); await RenderTypedSignatureAsync();
} }
async Task OnTypedSignatureFontChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) { async Task OnTypedSignatureFontChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
_typedSignatureFont = args.Value?.ToString() ?? _typedSignatureFont; _typedSignatureFont = args.Value?.ToString() ?? _typedSignatureFont;
await RenderTypedSignatureAsync(); await RenderTypedSignatureAsync();
} }
async Task RenderTypedSignatureAsync() { async Task RenderTypedSignatureAsync()
{
await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, _typedSignatureText, _typedSignatureFont); await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, _typedSignatureText, _typedSignatureFont);
} }
async Task SaveSignatureAsync() { async Task SaveSignatureAsync()
if (string.IsNullOrWhiteSpace(_signerFullName)) { {
if (string.IsNullOrWhiteSpace(_signerFullName))
{
_popupValidationMessage = "Bitte geben Sie Vor- und Nachname ein."; _popupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
return; return;
} }
if (string.IsNullOrWhiteSpace(_signaturePlace)) { if (string.IsNullOrWhiteSpace(_signaturePlace))
{
_popupValidationMessage = "Bitte geben Sie den Ort ein."; _popupValidationMessage = "Bitte geben Sie den Ort ein.";
return; return;
} }
var signatureDataUrl = await GetActiveSignatureDataUrlAsync(); var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
if (string.IsNullOrWhiteSpace(signatureDataUrl)) { if (string.IsNullOrWhiteSpace(signatureDataUrl))
{
_popupValidationMessage = "Die Unterschrift ist erforderlich."; _popupValidationMessage = "Die Unterschrift ist erforderlich.";
return; return;
} }
@@ -987,11 +1107,13 @@ const int MaxThumbnailWidth = 400;
Console.WriteLine($"Signature saved: {_signerFullName}, {_signaturePlace}"); Console.WriteLine($"Signature saved: {_signerFullName}, {_signaturePlace}");
} }
async Task<string?> GetActiveSignatureDataUrlAsync() { async Task<string?> GetActiveSignatureDataUrlAsync()
{
if (_activeSignatureTab == SignatureTabDraw) if (_activeSignatureTab == SignatureTabDraw)
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getDataUrl", DrawCanvasId); return await JSRuntime.InvokeAsync<string?>("receiverSignature.getDataUrl", DrawCanvasId);
if(_activeSignatureTab == SignatureTabText) { if (_activeSignatureTab == SignatureTabText)
{
await RenderTypedSignatureAsync(); await RenderTypedSignatureAsync();
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getTypedDataUrl", TypedCanvasId); return await JSRuntime.InvokeAsync<string?>("receiverSignature.getTypedDataUrl", TypedCanvasId);
} }
@@ -999,27 +1121,34 @@ const int MaxThumbnailWidth = 400;
return await JSRuntime.InvokeAsync<string?>("receiverSignature.getImageDataUrl", ImageCanvasId); return await JSRuntime.InvokeAsync<string?>("receiverSignature.getImageDataUrl", ImageCanvasId);
} }
async Task RenderThumbnailsAsync() { async Task RenderThumbnailsAsync()
try { {
try
{
var delay = PdfViewerOptions.Value.ThumbnailRenderDelay; var delay = PdfViewerOptions.Value.ThumbnailRenderDelay;
// Sequential rendering to avoid overwhelming the browser // Sequential rendering to avoid overwhelming the browser
for (int i = 1; i <= _totalPages; i++) { for (int i = 1; i <= _totalPages; i++)
{
await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}"); await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}");
// Configurable delay between renders // Configurable delay between renders
if (i < _totalPages) { if (i < _totalPages)
{
await Task.Delay(delay); await Task.Delay(delay);
} }
} }
} catch (Exception ex) { }
catch (Exception ex)
{
// Thumbnail rendering is not critical // Thumbnail rendering is not critical
System.Diagnostics.Debug.WriteLine($"Thumbnail rendering error: {ex.Message}"); System.Diagnostics.Debug.WriteLine($"Thumbnail rendering error: {ex.Message}");
} }
} }
// Resizable splitter methods // Resizable splitter methods
void OnSplitterMouseDown(MouseEventArgs e) { void OnSplitterMouseDown(MouseEventArgs e)
{
_isResizing = true; _isResizing = true;
_resizeStartX = (int)e.ClientX; _resizeStartX = (int)e.ClientX;
_resizeStartWidth = _thumbnailWidth; _resizeStartWidth = _thumbnailWidth;
@@ -1030,7 +1159,8 @@ const int MaxThumbnailWidth = 400;
} }
[JSInvokable] [JSInvokable]
public async Task OnSplitterMouseMove(int clientX) { public async Task OnSplitterMouseMove(int clientX)
{
if (!_isResizing) return; if (!_isResizing) return;
var delta = clientX - _resizeStartX; var delta = clientX - _resizeStartX;
@@ -1043,7 +1173,8 @@ const int MaxThumbnailWidth = 400;
} }
[JSInvokable] [JSInvokable]
public async Task OnSplitterMouseUp() { public async Task OnSplitterMouseUp()
{
if (!_isResizing) return; if (!_isResizing) return;
_isResizing = false; _isResizing = false;
@@ -1057,11 +1188,16 @@ const int MaxThumbnailWidth = 400;
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
public async ValueTask DisposeAsync() { public async ValueTask DisposeAsync()
if (_pdfLoaded) { {
try { if (_pdfLoaded)
{
try
{
await JSRuntime.InvokeVoidAsync("pdfViewer.dispose"); await JSRuntime.InvokeVoidAsync("pdfViewer.dispose");
} catch { }
catch
{
// Ignore errors during disposal // Ignore errors during disposal
} }
} }

1
EnvelopeGenerator.Server/EnvelopeGenerator.Server/Components/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
View File

@@ -1,6 +1,7 @@
@page "/envelope/DxPdfViewer" @page "/envelope/DxPdfViewer"
@rendermode InteractiveServer @rendermode InteractiveServer
@using System.IO @using System.IO
@using DevExpress.Blazor
@using System.Reflection @using System.Reflection
@using DevExpress.Blazor.PdfViewer @using DevExpress.Blazor.PdfViewer