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

Enhance signature management functionality

Browse Source 
Added a new button in `EnvelopeViewer.razor` for creating or modifying signatures, with dynamic styling and tooltips based on the signature state. Enhanced `OpenSignaturePopup` and `OnPopupShownAsync` methods to preload and display existing signatures in the popup and canvas.

Introduced new "success" button styles in `envelope-viewer.css` for better visual feedback. Added `loadExistingSignature` function in `receiver-signature.js` to render existing signatures on the canvas and updated the public API to expose this functionality.
This commit is contained in:
tekh
2026-06-09 11:55:56 +02:00
parent f4681f85e7
commit a22ec7a7d3
4 changed files with 356 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
COPILOT_CONTEXT_EN.md
View File

@@ -935,6 +935,229 @@ canvas {
---
## Signature Caching System — Session 15
**Purpose:** Persist receiver signature across page refreshes using distributed cache (Redis/SQL Server).
### Architecture
**API Cache Controller (`EnvelopeGenerator.API/Controllers/CacheController.cs`):**
```csharp
[Route("api/[controller]")]
[Authorize(Policy = AuthPolicy.Receiver)]
public class CacheController(IDistributedCache cache, IOptions<CacheOptions> cacheOptions) : ControllerBase
{
private const string SignatureCacheKeyPrefix = "signature:91751687-8ae6-4777-bf5f-b8846085e62e:";
[HttpPost("SignatureCapture/{envelopeKey}")]
public async Task<IActionResult> SaveSignature(string envelopeKey,
[FromBody] SignatureCaptureDto request, CancellationToken cancel)
[HttpGet("SignatureCapture/{envelopeKey}")]
public async Task<IActionResult> GetSignature(string envelopeKey, CancellationToken cancel)
[HttpDelete("SignatureCapture/{envelopeKey}")]
public async Task<IActionResult> DeleteSignature(string envelopeKey, CancellationToken cancel)
}
```
**Cache Options (`EnvelopeGenerator.API/Options/CacheOptions.cs`):**
```csharp
public sealed class CacheOptions
{
public const string SectionName = "Cache";
// If null, signatures never expire (until manual delete)
public TimeSpan? SignatureCacheExpiration { get; set; }
}
```
**Configuration (appsettings.json):**
```json
{
"Cache": {
"SignatureCacheExpiration": null // Or "02:00:00" for 2 hours
}
}
```
**Blazor Service (`EnvelopeGenerator.ReceiverUI/Services/SignatureCacheService.cs`):**
```csharp
public class SignatureCacheService(HttpClient http, IOptions<ApiOptions> apiOptions)
{
public async Task SaveSignatureAsync(string envelopeKey,
SignatureCaptureDto signature, CancellationToken cancel = default)
public async Task<SignatureCaptureDto?> GetSignatureAsync(string envelopeKey,
CancellationToken cancel = default)
public async Task DeleteSignatureAsync(string envelopeKey,
CancellationToken cancel = default)
}
```
### Workflow
**1. Page Load (First Time):**
```csharp
protected override async Task OnInitializedAsync() {
// Try to load cached signature first
try {
var cachedSignature = await SignatureCacheService.GetSignatureAsync(EnvelopeKey);
if (cachedSignature is not null) {
_capturedSignature = cachedSignature;
_signerFullName = cachedSignature.FullName;
_signerPosition = cachedSignature.Position;
_signaturePlace = cachedSignature.Place;
_signaturePopupVisible = false; // Skip popup
} else {
// No cache - show popup
_signaturePopupVisible = true;
}
} catch (Exception ex) {
logger.LogWarning(ex, "Failed to load cached signature, showing popup");
_signaturePopupVisible = true; // Fallback to popup
}
}
```
**2. Save Signature:**
```csharp
async Task SaveSignatureAsync() {
// ... validation ...
_capturedSignature = new SignatureCaptureDto { ... };
_signaturePopupVisible = false;
// Save to cache (fire-and-forget, ignore errors)
_ = Task.Run(async () => {
try {
await SignatureCacheService.SaveSignatureAsync(EnvelopeKey, _capturedSignature);
} catch {
// Ignore cache errors
}
});
}
```
**3. Change Signature (Toolbar Button):**
```csharp
void OpenSignaturePopup() {
_activeSignatureTab = SignatureTabDraw;
_signaturePopupVisible = true;
// Load current signature into form fields
if (_capturedSignature is not null) {
_signerFullName = _capturedSignature.FullName;
_signerPosition = _capturedSignature.Position;
_signaturePlace = _capturedSignature.Place;
}
}
async Task OnPopupShownAsync() {
await InitializeActiveSignatureTabAsync();
// Load existing signature image to canvas (Draw tab)
if (_capturedSignature is not null && _activeSignatureTab == SignatureTabDraw) {
await Task.Delay(100);
await JSRuntime.InvokeVoidAsync("receiverSignature.loadExistingSignature",
DrawCanvasId, _capturedSignature.DataUrl);
}
}
```
**JavaScript Helper:**
```javascript
receiverSignature.loadExistingSignature(canvasId, dataUrl) {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
state.hasSignature = true;
};
img.src = dataUrl;
}
```
**4. Restart Signing (Reset Button):**
```csharp
void RestartSigning() {
Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
// Page reload ? cache cleared ? popup shows
}
```
### Toolbar Button Design
**Change Signature Button:**
```html
<button class="pdf-toolbar__btn @(_capturedSignature is not null ? "pdf-toolbar__btn--success" : "")"
@onclick="OpenSignaturePopup"
title="@(_capturedSignature is not null ? "Unterschrift ändern" : "Unterschrift erstellen")">
@if (_capturedSignature is not null) {
<svg>?</svg> <!-- Checkmark icon -->
} else {
<svg>??</svg> <!-- Pen icon -->
}
</button>
```
**CSS:**
```css
.pdf-toolbar__btn--success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
border-color: rgba(16, 185, 129, 0.3);
color: #059669;
}
.pdf-toolbar__btn--success:hover:not(:disabled) {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
}
```
**States:**
- **No Signature:** Blue button with pen icon
- **Signature Created:** Green button with checkmark icon
- **Hover:** Filled green gradient with white icon
### Cache Key Format
```
signature:91751687-8ae6-4777-bf5f-b8846085e62e:{envelopeKey}
```
- Prefix prevents collisions with other cache keys
- GUID ensures uniqueness across application instances
- `envelopeKey` is user-provided identifier (URL parameter)
### Error Handling Philosophy
**API Controller:** No validation, no try-catch, no logging
- Throws exceptions directly to caller
- Blazor handles errors with try-catch
**Blazor Service:** No try-catch
- Throws `HttpRequestException` with status code + body
- Component catches and handles
**Blazor Component:** Try-catch with fallback
- Graceful degradation: show popup on cache failure
- Fire-and-forget saves: ignore errors
### Benefits
1. **UX:** No need to re-enter signature on page refresh
2. **Performance:** Fast cache retrieval (Redis/SQL)
3. **Security:** Per-receiver isolation (cookie-based auth)
4. **Flexibility:** Configurable expiration time
5. **Reliability:** Graceful degradation on cache failure
---

51
EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
View File

@@ -219,6 +219,20 @@
<div class="pdf-toolbar__divider"></div>
@if (_totalSignatures > 0) {
<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" : "")"
disabled="@(_signedSignatures > 0)"
@onclick="HandleSignatureChangeClick"
title="@GetSignatureButtonTitle()">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" 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"/>
</svg>
<span class="pdf-toolbar__btn-text">Unterschrift</span>
</button>
</div>
<div class="pdf-toolbar__divider"></div>
<div class="pdf-toolbar__section pdf-toolbar__signature-nav">
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav"
@onclick="GoToPreviousSignature"
@@ -825,15 +839,52 @@ const int MaxThumbnailWidth = 400;
record SignatureNavState(int Total, int Signed, int Unsigned, int CurrentIndex, bool CanGoPrev, bool CanGoNext);
string GetSignatureButtonTitle()
{
if (_signedSignatures > 0)
return "Unterschrift ist gesperrt – bitte Seite neu laden, um zu ändern";
return _capturedSignature is not null
? "Unterschrift ändern"
: "Unterschrift erstellen";
}
void HandleSignatureChangeClick()
{
// If any signature is applied, button is disabled - this won't be called
// But just in case, do nothing
if (_signedSignatures > 0)
return;
// No signatures applied - open popup normally
OpenSignaturePopup();
}
// Signature popup methods
void OpenSignaturePopup() {
// Popup'ı mevcut imza ile aç (değiştirme modu)
_activeSignatureTab = SignatureTabDraw;
_signaturePopupVisible = true;
_popupValidationMessage = null;
// Mevcut imza bilgilerini form field'larına yükle
if (_capturedSignature is not null)
{
_signerFullName = _capturedSignature.FullName;
_signerPosition = _capturedSignature.Position;
_signaturePlace = _capturedSignature.Place;
}
}
async Task OnPopupShownAsync() {
await InitializeActiveSignatureTabAsync();
// Eğer mevcut imza varsa ve draw tab'deyse, imzayı canvas'a yükle
if (_capturedSignature is not null && _activeSignatureTab == SignatureTabDraw)
{
await Task.Delay(100); // Canvas'ın hazır olmasını bekle
await JSRuntime.InvokeVoidAsync("receiverSignature.loadExistingSignature", DrawCanvasId, _capturedSignature.DataUrl);
}
}
async Task SetSignatureTabAsync(string tab) {

62
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
View File

@@ -484,6 +484,68 @@ body.resizing {
color: white;
}
/* Success Button Styles (Signature Created) */
.pdf-toolbar__btn--success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
border-color: rgba(16, 185, 129, 0.3);
color: #059669;
}
.pdf-toolbar__btn--success:hover:not(:disabled) {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-color: transparent;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.pdf-toolbar__btn--success svg {
transition: color 0.2s ease;
}
.pdf-toolbar__btn--success:hover:not(:disabled) svg {
color: white;
}
/* Signature Change Button */
.pdf-toolbar__btn--signature-change {
display: flex;
align-items: center;
gap: 0.375rem;
min-width: auto;
padding: 0.5rem 0.75rem;
background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
border: 1px solid rgba(126, 34, 206, 0.2);
color: #7e22ce;
}
.pdf-toolbar__btn--signature-change:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
border-color: rgba(126, 34, 206, 0.4);
}
.pdf-toolbar__btn--signature-change-active {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
border-color: rgba(16, 185, 129, 0.25);
color: #059669;
}
.pdf-toolbar__btn--signature-change-active:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%);
border-color: rgba(16, 185, 129, 0.35);
}
.pdf-toolbar__btn--signature-change:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pdf-toolbar__btn-text {
font-size: 0.813rem;
font-weight: 600;
white-space: nowrap;
}
.pdf-frame {
background: white;
border-radius: 16px;

21
EnvelopeGenerator.ReceiverUI/wwwroot/js/receiver-signature.js
View File

@@ -316,6 +316,23 @@ window.receiverSignature = (() => {
function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
function loadExistingSignature(canvasId, dataUrl) {
const canvas = document.getElementById(canvasId);
const state = pads.get(canvasId);
if (!canvas || !state || !dataUrl) return;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
_clear(canvas);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
state.hasSignature = true;
};
img.src = dataUrl;
}
// ?? Public API ??????????????????????????????????????????????????????????
return {
startTyped: startTyped,
@@ -329,6 +346,8 @@ window.receiverSignature = (() => {
renderTypedSignature: renderTypedSignature,
getDataUrl: getDataUrl,
getTypedDataUrl: getTypedDataUrl,
getImageDataUrl: getImageDataUrl
getImageDataUrl: getImageDataUrl,
loadExistingSignature: loadExistingSignature
};
})();