Enhance signature management functionality

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.

COPILOT_CONTEXT_EN.md

@@ -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
+
+---
+
+
 
 
 

EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor

@@ -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) {

EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css

@@ -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;

EnvelopeGenerator.ReceiverUI/wwwroot/js/receiver-signature.js

@@ -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
     };
 })();
+