Bug/v2/signature fixes (#5104)

Co-authored-by: Dario Ghunney Ware <[email protected]>
Co-authored-by: James Brunton <[email protected]>

frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx

@@ -2,14 +2,16 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionIcon, Alert, Badge, Box, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
 import { LocalIcon } from '@app/components/shared/LocalIcon';
-import { MAX_SAVED_SIGNATURES, SavedSignature, SavedSignatureType } from '@app/hooks/tools/sign/useSavedSignatures';
+import { SavedSignature, SavedSignatureType } from '@app/hooks/tools/sign/useSavedSignatures';
 import type { StorageType } from '@app/services/signatureStorageService';
 
 interface SavedSignaturesSectionProps {
   signatures: SavedSignature[];
   disabled?: boolean;
   isAtCapacity: boolean;
+  maxLimit: number;
   storageType?: StorageType | null;
+  isAdmin?: boolean;
   onUseSignature: (signature: SavedSignature) => void;
   onDeleteSignature: (signature: SavedSignature) => void;
   onRenameSignature: (id: string, label: string) => void;
@@ -26,7 +28,9 @@ export const SavedSignaturesSection = ({
   signatures,
   disabled = false,
   isAtCapacity,
+  maxLimit,
   storageType: _storageType,
+  isAdmin = false,
   onUseSignature,
   onDeleteSignature,
   onRenameSignature,
@@ -155,7 +159,7 @@ export const SavedSignaturesSection = ({
           {translate(
             'saved.emptyDescription',
             'Draw, upload, or type a signature above, then use "Save to library" to keep up to {{max}} favourites ready to use.',
-            { max: MAX_SAVED_SIGNATURES }
+            { max: maxLimit }
           )}
         </Text>
       </Stack>
@@ -216,7 +220,7 @@ export const SavedSignaturesSection = ({
         <Alert color="yellow" title={translate('saved.limitTitle', 'Limit reached')}>
           <Text size="sm">
             {translate('saved.limitDescription', 'Remove a saved signature before adding new ones (max {{max}}).', {
-              max: MAX_SAVED_SIGNATURES,
+              max: maxLimit,
             })}
           </Text>
         </Alert>
@@ -365,17 +369,19 @@ export const SavedSignaturesSection = ({
                       >
                         <LocalIcon icon="material-symbols:check-circle-outline-rounded" width={18} height={18} />
                       </ActionIcon>
-                      <Tooltip label={translate('saved.delete', 'Remove')}>
-                        <ActionIcon
-                          variant="subtle"
-                          color="red"
-                          aria-label={translate('saved.delete', 'Remove')}
-                          onClick={() => onDeleteSignature(activeSharedSignature)}
-                          disabled={disabled}
-                        >
-                          <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
-                        </ActionIcon>
-                      </Tooltip>
+                      {isAdmin && (
+                        <Tooltip label={translate('saved.delete', 'Remove')}>
+                          <ActionIcon
+                            variant="subtle"
+                            color="red"
+                            aria-label={translate('saved.delete', 'Remove')}
+                            onClick={() => onDeleteSignature(activeSharedSignature)}
+                            disabled={disabled}
+                          >
+                            <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
+                          </ActionIcon>
+                        </Tooltip>
+                      )}
                     </Group>
                   </Group>
                   {renderPreview(activeSharedSignature)}

frontend/src/core/components/tools/sign/SignSettings.tsx

@@ -14,7 +14,7 @@ import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
 import { TextInputWithFont } from "@app/components/annotation/shared/TextInputWithFont";
 import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
 import { LocalIcon } from "@app/components/shared/LocalIcon";
-import { useSavedSignatures, SavedSignature, SavedSignaturePayload, SavedSignatureType, MAX_SAVED_SIGNATURES, AddSignatureResult } from '@app/hooks/tools/sign/useSavedSignatures';
+import { useSavedSignatures, SavedSignature, SavedSignaturePayload, SavedSignatureType, AddSignatureResult } from '@app/hooks/tools/sign/useSavedSignatures';
 import { SavedSignaturesSection } from '@app/components/tools/sign/SavedSignaturesSection';
 import { buildSignaturePreview } from '@app/utils/signaturePreview';
 
@@ -96,11 +96,13 @@ const SignSettings = ({
   const {
     savedSignatures,
     isAtCapacity: isSavedSignatureLimitReached,
+    maxLimit,
     addSignature,
     removeSignature,
     updateSignatureLabel,
     byTypeCounts,
     storageType,
+    isAdmin,
   } = useSavedSignatures();
   const [signatureSource, setSignatureSource] = useState<SignatureSource>(() => {
     const paramSource = parameters.signatureType as SignatureSource;
@@ -246,16 +248,19 @@ const SignSettings = ({
     (signature: SavedSignature) => {
       setPlacementManuallyPaused(false);
 
+      // Use the data URL directly (already converted to base64 when loaded)
+      const dataUrlToUse = signature.dataUrl;
+
       if (signature.type === 'canvas') {
         if (parameters.signatureType !== 'canvas') {
           onParameterChange('signatureType', 'canvas');
         }
-        setCanvasSignatureData(signature.dataUrl);
+        setCanvasSignatureData(dataUrlToUse);
       } else if (signature.type === 'image') {
         if (parameters.signatureType !== 'image') {
           onParameterChange('signatureType', 'image');
         }
-        setImageSignatureData(signature.dataUrl);
+        setImageSignatureData(dataUrlToUse);
       } else if (signature.type === 'text') {
         if (parameters.signatureType !== 'text') {
           onParameterChange('signatureType', 'text');
@@ -269,7 +274,7 @@ const SignSettings = ({
       const savedKey =
         signature.type === 'text'
           ? buildTextSignatureKey(signature.signerName, signature.fontSize, signature.fontFamily, signature.textColor)
-          : signature.dataUrl;
+          : dataUrlToUse;
       setLastSavedKeyForType(signature.type, savedKey);
 
       const activate = () => onActivateSignaturePlacement?.();
@@ -326,8 +331,8 @@ const SignSettings = ({
     } else if (isSaved) {
       tooltipMessage = translate('saved.noChanges', 'Current signature is already saved.');
     } else if (isSavedSignatureLimitReached) {
-      tooltipMessage = translate('saved.limitDescription', 'Remove a saved signature before adding new ones (max {{max}}).', {
-        max: MAX_SAVED_SIGNATURES,
+      tooltipMessage = translate('saved.limitDescription', 'You have reached the maximum limit of {{max}} saved signatures. Remove a saved signature before adding new ones.', {
+        max: maxLimit,
       });
     }
 
@@ -791,7 +796,9 @@ const SignSettings = ({
           signatures={savedSignatures}
           disabled={disabled}
           isAtCapacity={isSavedSignatureLimitReached}
+          maxLimit={maxLimit}
           storageType={storageType}
+          isAdmin={isAdmin}
           onUseSignature={handleUseSavedSignature}
           onDeleteSignature={handleDeleteSavedSignature}
           onRenameSignature={handleRenameSavedSignature}