@topconsultnpm/sdkui-react 6.22.0-dev1.9 → 6.22.0-dev2.2

package/lib/components/features/search/TMSignatureInfoContent.js

@@ -1,43 +1,174 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { SDK_Globals } from "@topconsultnpm/sdk-ts";
-import { IconCopy, getExceptionMessage, SDKUI_Localizator } from "../../../helper";
+import { SDK_Globals, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats } from "@topconsultnpm/sdk-ts";
+import { IconCopy, IconDownload, IconWarning, IconCheck, getExceptionMessage, SDKUI_Localizator, IconCircleInfo, IconRefresh } from "../../../helper";
+import { getGrafometricSignatures, putGrafometricSignatures, removeGrafometricSignatures } from "../../../helper/grafometricSignaturesCache";
+import TMTooltip from "../../base/TMTooltip";
 import TMSpinner from "../../base/TMSpinner";
+import TMModal from "../../base/TMModal";
+import { DeviceType, useDeviceType } from "../../base/TMDeviceProvider";
+import { LoadIndicator } from "devextreme-react";
+import { TMColors } from "../../../utils/theme";
+import ShowAlert from "../../base/TMAlert";
 const TMSignatureInfoContent = (props) => {
-    const { inputDcmt } = props;
+    const { inputDcmt, graphometricManager, onClose } = props;
+    /** Abilita la cache delle firme grafometriche */
+    const useGrafometricCache = false;
+    /** Abilita la visualizzazione della sezione firme grafometriche */
+    const showGrafometricSection = false;
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
     const [selectedHash, setSelectedHash] = useState('sha256');
     const [signerInfo, setSignerInfo] = useState(undefined);
     const [error, setError] = useState(undefined);
     const [copiedHash, setCopiedHash] = useState(false);
+    // Stati per firma grafometrica (firme con dati biometrici estratti dal PDF)
+    const [grafometricSignatures, setGrafometricSignatures] = useState([]);
+    const [grafometricError, setGrafometricError] = useState(undefined);
+    const [isDataReady, setIsDataReady] = useState(false);
+    // Stati per gestire il caricamento on-demand delle firme grafometriche
+    const [isGrafometricRequested, setIsGrafometricRequested] = useState(false);
+    const [isGrafometricLoading, setIsGrafometricLoading] = useState(false);
+    // Caricamento iniziale: recupera solo signerInfo
+    // Le firme grafometriche vengono caricate on-demand tramite pulsante (o dalla cache se disponibili)
     useEffect(() => {
         const fetchSignerInfo = async () => {
+            const ue = SDK_Globals.tmSession?.NewUpdateEngineByID();
+            if (!ue) {
+                setError("Sessione non disponibile");
+                return undefined;
+            }
+            ue.TID = inputDcmt.TID;
+            ue.DID = inputDcmt.DID;
+            const signerInfoDescriptor = await ue.GetSignersAsync();
+            if (!signerInfoDescriptor) {
+                setError("Informazioni di firma non disponibili");
+                return undefined;
+            }
+            return signerInfoDescriptor;
+        };
+        const loadSignerInfo = async () => {
             TMSpinner.show();
+            setIsDataReady(false);
+            setError(undefined);
+            // Reset stati grafometrici quando cambia il documento
+            setGrafometricError(undefined);
+            setGrafometricSignatures([]);
+            setIsGrafometricRequested(false);
             try {
-                const ue = SDK_Globals.tmSession?.NewUpdateEngineByID();
-                if (!ue) {
-                    setError("Sessione non disponibile");
-                    TMSpinner.hide();
-                    return;
-                }
-                ue.TID = inputDcmt.TID;
-                ue.DID = inputDcmt.DID;
-                const signerInfoDescriptor = await ue.GetSignersAsync();
-                if (!signerInfoDescriptor) {
-                    setError("Informazioni di firma non disponibili");
-                    TMSpinner.hide();
-                    return;
-                }
+                const signerInfoDescriptor = await fetchSignerInfo();
                 setSignerInfo(signerInfoDescriptor);
-                setError(undefined);
-                TMSpinner.hide();
+                // Controlla se ci sono firme grafometriche in cache per questo documento
+                if (useGrafometricCache && graphometricManager && inputDcmt.FILEEXT?.toLowerCase() === "pdf") {
+                    const cachedSignatures = getGrafometricSignatures(inputDcmt.TID, inputDcmt.DID);
+                    if (cachedSignatures !== undefined) {
+                        setGrafometricSignatures(cachedSignatures);
+                        setIsGrafometricRequested(true);
+                    }
+                }
             }
             catch (err) {
                 setError(getExceptionMessage(err));
+            }
+            finally {
+                setIsDataReady(true);
                 TMSpinner.hide();
             }
         };
-        fetchSignerInfo();
-    }, [inputDcmt]);
+        loadSignerInfo();
+    }, [inputDcmt, graphometricManager]);
+    // Funzione per estrarre le firme grafometriche (chiamata on-demand)
+    const extractGraphometricSignaturesFromPdf = async (forceRefresh = false) => {
+        // Verifica che graphometricManager sia definito e che il file sia un PDF
+        if (!graphometricManager) {
+            return;
+        }
+        // Controlla se i dati sono già in cache (a meno che non sia richiesto un refresh forzato)
+        if (useGrafometricCache) {
+            if (!forceRefresh) {
+                const cachedSignatures = getGrafometricSignatures(inputDcmt.TID, inputDcmt.DID);
+                if (cachedSignatures !== undefined) {
+                    setGrafometricSignatures(cachedSignatures);
+                    setIsGrafometricRequested(true);
+                    return;
+                }
+            }
+            else {
+                // Rimuovi dalla cache se è richiesto un refresh forzato
+                removeGrafometricSignatures(inputDcmt.TID, inputDcmt.DID);
+            }
+        }
+        setIsGrafometricLoading(true);
+        setGrafometricError(undefined);
+        setGrafometricSignatures([]);
+        try {
+            if (inputDcmt.FILEEXT?.toLowerCase() !== "pdf") {
+                return;
+            }
+            // Configura opzioni per il download del file
+            const rfo = new RetrieveFileOptions();
+            rfo.retrieveReason = DcmtOpers.ShowFile;
+            rfo.generalRetrieveFormat = GeneralRetrieveFormats.OriginalUnsigned;
+            // Scarica il PDF dal server
+            const file = await SDK_Globals.tmSession?.NewSearchEngine().RetrieveFileAsync(inputDcmt.TID, inputDcmt.DID, rfo);
+            if (!file) {
+                console.warn('Impossibile scaricare il file PDF per l\'estrazione delle firme grafometriche');
+                setGrafometricError("Non è stato possibile verificare la presenza di firme grafometriche. Riprovare più tardi.");
+                return;
+            }
+            if (file.type !== "application/pdf") {
+                return;
+            }
+            const graphometricAttachments = await graphometricManager.extractGraphometricAttachments(file);
+            // Processa tutti gli attachment grafometrici con graphometricManager
+            const extractedSignatures = [];
+            // Filtra gli attachment con dataBase64 valido
+            const validAttachments = graphometricAttachments.filter(att => att.dataBase64 !== undefined);
+            // Estrai tutti i dataUrl degli attachment
+            const dataUrls = validAttachments.map(att => att.dataBase64).filter((data) => data !== undefined);
+            // Usa graphometricManager per estrarre i dati biometrici da tutte le immagini
+            const results = await graphometricManager.extractBiometricData(dataUrls);
+            // Processa i risultati (verifica che sia un array)
+            const errors = [];
+            if (Array.isArray(results)) {
+                results.forEach((result, index) => {
+                    if (result.success && result.data) {
+                        const originalAttachment = validAttachments[index];
+                        extractedSignatures.push({
+                            biometricData: result.data,
+                            originalDataBase64: originalAttachment?.dataBase64,
+                            originalFileName: originalAttachment?.fileName
+                        });
+                    }
+                    else if (!result.success && result.error) {
+                        errors.push(result.error);
+                    }
+                });
+            }
+            // Se ci sono errori e nessuna firma estratta, mostra gli errori
+            if (errors.length > 0 && extractedSignatures.length === 0) {
+                setGrafometricError(errors.join('; '));
+                return;
+            }
+            // Salva in cache (se abilitata)
+            if (useGrafometricCache) {
+                putGrafometricSignatures(inputDcmt.TID, inputDcmt.DID, extractedSignatures);
+            }
+            setGrafometricSignatures(extractedSignatures);
+        }
+        catch (err) {
+            console.error('Errore estrazione firme grafometriche dal PDF:', err);
+            setGrafometricError("Non è stato possibile verificare la presenza di firme grafometriche. Riprovare più tardi.");
+        }
+        finally {
+            setIsGrafometricLoading(false);
+            setIsGrafometricRequested(true);
+        }
+    };
+    // Funzione per forzare il refresh delle firme grafometriche
+    const refreshGrafometricSignatures = () => {
+        extractGraphometricSignaturesFromPdf(true);
+    };
     const hashButtonStyle = (isActive) => ({
         padding: '8px 16px',
         margin: '0 2px',
@@ -81,64 +212,227 @@ const TMSignatureInfoContent = (props) => {
         }
     };
     if (error) {
-        return (_jsx("div", { style: {
-                padding: '20px',
-                textAlign: 'center',
-                color: '#d32f2f',
-                background: '#ffebee',
-                borderRadius: '8px'
-            }, children: error }));
+        return (_jsx(TMModal, { title: SDKUI_Localizator.SignatureInformation, expandable: true, onClose: onClose, width: isMobile ? '95%' : '700px', height: isMobile ? '90%' : 'auto', children: _jsx("div", { style: { padding: '20px', minHeight: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: {
+                        padding: '20px',
+                        textAlign: 'center',
+                        color: '#d32f2f',
+                        background: '#ffebee',
+                        borderRadius: '8px',
+                        width: '100%'
+                    }, children: error }) }) }));
     }
-    if (!signerInfo) {
-        return null;
+    // Mostra il contenuto solo quando entrambi i caricamenti (signerInfo e firme grafometriche) sono completati
+    if (!isDataReady || !signerInfo) {
+        return (_jsx(TMModal, { title: SDKUI_Localizator.SignatureInformation, expandable: true, onClose: onClose, width: isMobile ? '95%' : '700px', height: isMobile ? '90%' : 'auto', children: _jsxs("div", { style: {
+                    padding: '20px',
+                    minHeight: '200px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '16px'
+                }, children: [_jsx(LoadIndicator, {}), _jsxs("span", { style: { color: '#666', fontSize: '14px' }, children: [SDKUI_Localizator.Loading, "..."] })] }) }));
     }
-    return (_jsxs("div", { style: { lineHeight: "1.5em", overflowY: "auto", maxHeight: "500px", paddingRight: "8px", boxSizing: "border-box", userSelect: 'text' }, children: [signerInfo.signers && signerInfo.signers.length > 0 ? (_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers.length, ")"] }), signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
-                            border: "1px solid #d0d0d0",
-                            borderRadius: "8px",
-                            padding: "16px",
-                            marginBottom: "12px",
-                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
-                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
-                            userSelect: 'text',
-                        }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
-                                    display: 'grid',
-                                    gap: '10px',
-                                    fontSize: '13px'
-                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
-                    border: "1px solid #d0d0d0",
-                    borderRadius: "8px",
-                    padding: "16px",
-                    marginBottom: "12px",
-                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
-                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
-                    userSelect: 'text',
-                    textAlign: 'center',
-                    color: '#666'
-                }, children: SDKUI_Localizator.NoSignatureFound })), signerInfo.shA256 && (_jsxs("div", { style: {
-                    marginBottom: '12px',
-                    padding: '16px',
-                    background: '#f5f5f5',
-                    borderRadius: '8px',
-                    border: '1px solid #e0e0e0'
-                }, children: [_jsxs("div", { style: { marginBottom: '12px', display: 'flex', gap: '4px', flexWrap: 'wrap' }, children: [signerInfo.shA256 && (_jsx("button", { onClick: () => setSelectedHash('sha256'), style: hashButtonStyle(selectedHash === 'sha256'), children: "SHA-256" })), signerInfo.shA1 && (_jsx("button", { onClick: () => setSelectedHash('sha1'), style: hashButtonStyle(selectedHash === 'sha1'), children: "SHA-1" })), signerInfo.shA256Base64 && (_jsx("button", { onClick: () => setSelectedHash('sha256base64'), style: hashButtonStyle(selectedHash === 'sha256base64'), children: "Base64" }))] }), _jsxs("div", { style: {
-                            background: '#fff',
-                            padding: '12px',
-                            borderRadius: '6px',
-                            wordBreak: 'break-all',
-                            fontSize: '12px',
-                            border: '1px solid #d0d0d0',
-                            userSelect: 'text',
-                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }, children: [_jsxs("strong", { style: { color: '#0078d4', fontSize: '14px' }, children: [getHashLabel(), ":"] }), _jsxs("button", { onClick: copyToClipboard, style: {
-                                            background: copiedHash ? '#d4edda' : 'transparent',
-                                            border: 'none',
-                                            cursor: 'pointer',
-                                            padding: '4px 8px',
-                                            borderRadius: '4px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '4px',
-                                            transition: 'all 0.2s ease',
-                                            color: copiedHash ? '#155724' : '#666'
-                                        }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] }))] }));
+    return (_jsx(TMModal, { title: SDKUI_Localizator.SignatureInformation, expandable: true, onClose: onClose, width: isMobile ? '95%' : '700px', height: isMobile ? '90%' : 'auto', children: _jsx("div", { style: { padding: '16px', minHeight: '200px', overflow: 'auto' }, children: _jsxs("div", { style: { lineHeight: "1.5em", boxSizing: "border-box", userSelect: 'text' }, children: [_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers?.length ?? 0, ")"] }), signerInfo.signers && signerInfo.signers.length > 0 ? (signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "16px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                    userSelect: 'text',
+                                }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
+                                            display: 'grid',
+                                            gap: '10px',
+                                            fontSize: '13px'
+                                        }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))) : (_jsx("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "16px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                    userSelect: 'text',
+                                    textAlign: 'center',
+                                    color: '#666'
+                                }, children: SDKUI_Localizator.NoSignatureFound }))] }), showGrafometricSection && graphometricManager && inputDcmt.FILEEXT?.toLowerCase() === "pdf" && (_jsxs("div", { style: { marginTop: '16px' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }, children: [_jsxs("h4", { style: { margin: 0, color: '#0078d4', fontSize: '16px' }, children: ["Firme Grafometriche ", isGrafometricRequested && !isGrafometricLoading && !grafometricError && `(${grafometricSignatures.length})`] }), isGrafometricRequested && !isGrafometricLoading && (_jsx(TMTooltip, { content: "Aggiorna", children: _jsx("button", { onClick: refreshGrafometricSignatures, style: {
+                                                background: 'transparent',
+                                                border: 'none',
+                                                cursor: 'pointer',
+                                                padding: '4px',
+                                                borderRadius: '4px',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                color: '#0078d4',
+                                                transition: 'all 0.2s ease'
+                                            }, onMouseEnter: (e) => {
+                                                e.currentTarget.style.background = '#e6f2ff';
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.background = 'transparent';
+                                            }, children: _jsx(IconRefresh, { width: 18, height: 18 }) }) }))] }), !isGrafometricRequested && !isGrafometricLoading && (_jsx("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "20px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    gap: '12px'
+                                }, children: _jsx("button", { onClick: () => extractGraphometricSignaturesFromPdf(), style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px',
+                                        padding: '10px 20px',
+                                        border: '2px solid #0078d4',
+                                        borderRadius: '8px',
+                                        background: 'linear-gradient(135deg, #0078d4 0%, #005a9e 100%)',
+                                        color: '#fff',
+                                        cursor: 'pointer',
+                                        fontSize: '14px',
+                                        fontWeight: '600',
+                                        transition: 'all 0.2s ease',
+                                        boxShadow: '0 2px 6px rgba(0,120,212,0.3)',
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.background = 'linear-gradient(135deg, #005a9e 0%, #004578 100%)';
+                                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,120,212,0.4)';
+                                        e.currentTarget.style.transform = 'translateY(-1px)';
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.background = 'linear-gradient(135deg, #0078d4 0%, #005a9e 100%)';
+                                        e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,120,212,0.3)';
+                                        e.currentTarget.style.transform = 'translateY(0)';
+                                    }, children: "Scarica firme grafometriche" }) })), isGrafometricLoading && (_jsxs("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "24px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    gap: '12px'
+                                }, children: [_jsx(LoadIndicator, {}), _jsx("span", { style: { color: '#666', fontSize: '13px' }, children: "Analisi delle firme grafometriche in corso..." })] })), grafometricError && isGrafometricRequested && (_jsx("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "16px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                }, children: _jsxs("div", { style: {
+                                        color: '#d32f2f',
+                                        fontSize: '13px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px'
+                                    }, children: [_jsx(IconWarning, { width: 16, height: 16 }), grafometricError] }) })), isGrafometricRequested && !isGrafometricLoading && !grafometricError && grafometricSignatures.length === 0 && (_jsx("div", { style: {
+                                    border: "1px solid #d0d0d0",
+                                    borderRadius: "8px",
+                                    padding: "16px",
+                                    marginBottom: "12px",
+                                    background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                    boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                    textAlign: 'center',
+                                    color: '#666'
+                                }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }, children: [_jsx(IconCircleInfo, { width: 16, height: 16, style: { color: TMColors.iconLight } }), "Nessuna firma grafometrica trovata nel documento."] }) })), isGrafometricRequested && !isGrafometricLoading && grafometricSignatures.length > 0 && (_jsx(_Fragment, { children: grafometricSignatures.map((signature, idx) => {
+                                    const data = signature.biometricData;
+                                    const isIntegrityOk = data.integrityStatus === 'OK';
+                                    const integrityColor = isIntegrityOk ? '#28a745' : (data.integrityStatus === 'FAIL' ? '#dc3545' : '#ffc107');
+                                    const isDataStatusOk = data.dataStatus === 'GOOD';
+                                    const dataStatusColor = isDataStatusOk ? '#28a745' : (data.dataStatus === 'ERROR' ? '#dc3545' : '#ffc107');
+                                    const downloadBiometricData = () => {
+                                        if (!graphometricManager || !signature.originalDataBase64) {
+                                            ShowAlert({
+                                                mode: 'warning',
+                                                message: "I dati biometrici non sono disponibili per questa firma.",
+                                                duration: 3000,
+                                                title: SDKUI_Localizator.Warning,
+                                            });
+                                            return;
+                                        }
+                                        graphometricManager.downloadDecryptedPngWithBiometricData({
+                                            fileName: signature.originalFileName,
+                                            dataBase64: signature.originalDataBase64
+                                        });
+                                    };
+                                    return (_jsxs("div", { style: {
+                                            border: "1px solid #d0d0d0",
+                                            borderRadius: "8px",
+                                            padding: "16px",
+                                            marginBottom: "12px",
+                                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                                            userSelect: 'text',
+                                        }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }, children: [_jsxs("h3", { style: { margin: 0, color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma #", idx + 1] }), _jsx("div", { style: { display: 'flex', gap: '8px' }, children: signature.originalDataBase64 && (_jsxs("button", { onClick: downloadBiometricData, style: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: '6px',
+                                                                padding: '6px 12px',
+                                                                border: '1px solid #28a745',
+                                                                borderRadius: '6px',
+                                                                background: '#fff',
+                                                                color: '#28a745',
+                                                                cursor: 'pointer',
+                                                                fontSize: '12px',
+                                                                fontWeight: '500',
+                                                                transition: 'all 0.2s ease',
+                                                            }, onMouseEnter: (e) => {
+                                                                e.currentTarget.style.background = '#28a745';
+                                                                e.currentTarget.style.color = '#fff';
+                                                            }, onMouseLeave: (e) => {
+                                                                e.currentTarget.style.background = '#fff';
+                                                                e.currentTarget.style.color = '#28a745';
+                                                            }, children: [_jsx(IconDownload, { width: 14, height: 14 }), "Download"] })) })] }), _jsx("div", { style: {
+                                                    background: '#fafafa',
+                                                    borderRadius: '6px',
+                                                    padding: '16px',
+                                                    marginBottom: '16px',
+                                                    textAlign: 'center',
+                                                    border: '1px solid #e8e8e8'
+                                                }, children: _jsx("img", { src: `${data.signatureImage}`, draggable: false, alt: `Firma di ${data.signatureName || 'Firmatario'}`, style: {
+                                                        maxWidth: '100%',
+                                                        maxHeight: '100px',
+                                                        objectFit: 'contain'
+                                                    } }) }), _jsxs("div", { style: {
+                                                    display: 'grid',
+                                                    gap: '8px',
+                                                    fontSize: '13px'
+                                                }, children: [data.signatureName && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Firmatario:" }), _jsx("span", { style: { color: '#333' }, children: data.signatureName })] })), data.reasonForSigning && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Motivo firma:" }), _jsx("span", { style: { color: '#333' }, children: data.reasonForSigning })] })), data.dateTimeFormatted && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Data e ora:" }), _jsx("span", { style: { color: '#333' }, children: data.dateTimeFormatted })] })), data.digitizerType && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Dispositivo:" }), _jsx("span", { style: { color: '#333' }, children: data.digitizerType })] })), data.digitizerDriver && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Driver:" }), _jsx("span", { style: { color: '#333', wordBreak: 'break-all' }, children: data.digitizerDriver })] })), data.operatingSystem && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Sistema operativo:" }), _jsx("span", { style: { color: '#333', wordBreak: 'break-all' }, children: data.operatingSystem })] })), data.networkInterfaceCard && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Scheda di rete:" }), _jsx("span", { style: { color: '#333', wordBreak: 'break-all' }, children: data.networkInterfaceCard })] })), (() => {
+                                                        const extraData = data.extraData ?? {};
+                                                        return Object.keys(extraData).length > 0 && (_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsx("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0 }, children: "Extra Data:" }), _jsx("div", { style: { color: '#333', wordBreak: 'break-all' }, children: Object.entries(extraData).map(([key, value]) => (_jsxs("div", { children: [key, ": ", value] }, key))) })] }));
+                                                    })(), _jsxs("div", { style: { borderBottom: '1px solid #eee', paddingBottom: '8px' }, children: [_jsxs("div", { style: { display: 'flex' }, children: [_jsxs("strong", { style: { color: '#555', minWidth: '160px', flexShrink: 0, display: 'flex', alignItems: 'center', gap: '4px' }, children: ["Integrit\u00E0 firma:", _jsx(TMTooltip, { content: "Verifica se la firma biometrica \u00E8 stata alterata", children: _jsx(IconCircleInfo, { width: 14, height: 14, style: { color: TMColors.iconLight } }) })] }), _jsx("span", { style: {
+                                                                            color: integrityColor,
+                                                                            fontWeight: '600',
+                                                                            display: 'flex',
+                                                                            alignItems: 'center',
+                                                                            gap: '6px'
+                                                                        }, children: isIntegrityOk ? _jsxs(_Fragment, { children: [_jsx(IconCheck, { width: 14, height: 14 }), " Verificata"] }) : _jsxs(_Fragment, { children: [_jsx(IconWarning, { width: 14, height: 14 }), " ", data.integrityStatus] }) })] }), data.integrityWarning && (_jsx("div", { style: { marginLeft: '160px', marginTop: '4px', fontSize: '12px', color: '#856404', fontStyle: 'italic' }, children: data.integrityWarning }))] })] })] }, idx));
+                                }) }))] })), signerInfo.shA256 && (_jsxs("div", { style: {
+                            marginBottom: '12px',
+                            padding: '16px',
+                            background: '#f5f5f5',
+                            borderRadius: '8px',
+                            border: '1px solid #e0e0e0'
+                        }, children: [_jsxs("div", { style: { marginBottom: '12px', display: 'flex', gap: '4px', flexWrap: 'wrap' }, children: [signerInfo.shA256 && (_jsx("button", { onClick: () => setSelectedHash('sha256'), style: hashButtonStyle(selectedHash === 'sha256'), children: "SHA-256" })), signerInfo.shA1 && (_jsx("button", { onClick: () => setSelectedHash('sha1'), style: hashButtonStyle(selectedHash === 'sha1'), children: "SHA-1" })), signerInfo.shA256Base64 && (_jsx("button", { onClick: () => setSelectedHash('sha256base64'), style: hashButtonStyle(selectedHash === 'sha256base64'), children: "Base64" }))] }), _jsxs("div", { style: {
+                                    background: '#fff',
+                                    padding: '12px',
+                                    borderRadius: '6px',
+                                    wordBreak: 'break-all',
+                                    fontSize: '12px',
+                                    border: '1px solid #d0d0d0',
+                                    userSelect: 'text',
+                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }, children: [_jsxs("strong", { style: { color: '#0078d4', fontSize: '14px' }, children: [getHashLabel(), ":"] }), _jsxs("button", { onClick: copyToClipboard, style: {
+                                                    background: copiedHash ? '#d4edda' : 'transparent',
+                                                    border: 'none',
+                                                    cursor: 'pointer',
+                                                    padding: '4px 8px',
+                                                    borderRadius: '4px',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '4px',
+                                                    transition: 'all 0.2s ease',
+                                                    color: copiedHash ? '#155724' : '#666'
+                                                }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] }))] }) }) }));
 };
 export default TMSignatureInfoContent;

package/lib/components/forms/Login/TMLoginForm.d.ts

@@ -38,6 +38,7 @@ export interface ITMLoginDefaultValues {
     username?: string;
     behalfUsername?: string;
     domain?: string;
+    cultureID?: CultureIDs;
 }
 interface ITMLoginFormProps {
     isConnector?: boolean;
@@ -48,6 +49,7 @@ interface ITMLoginFormProps {
     onChangeLanguage?: (e: CultureIDs) => void;
     cultureID?: CultureIDs;
     defaultLoginValues?: ITMLoginDefaultValues;
+    onEndpointChange?: (endpoint: TMEndpointsType | undefined) => void;
 }
 declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
 export default TMLoginForm;

package/lib/components/forms/Login/TMLoginForm.js

@@ -107,6 +107,8 @@ const TMLoginForm = (props) => {
     const usernameOnBehalfOfRef = useRef(null);
     const passwordOnBehalfOfRRef = useRef(null);
     const defaultLoginAppliedRef = useRef(false);
+    const onEndpointChangeRef = useRef(props.onEndpointChange);
+    onEndpointChangeRef.current = props.onEndpointChange;
     const [loginStep, setLoginStep] = useState(1);
     const [tmServer, setTmServer] = useState();
     const [tmSession, setTmSession] = useState();
@@ -225,6 +227,8 @@ const TMLoginForm = (props) => {
             setAuthDomain(props.defaultLoginValues.domain);
         if (props.defaultLoginValues.behalfUsername)
             setUsernameOnBehalf(props.defaultLoginValues.behalfUsername);
+        if (props.defaultLoginValues.cultureID)
+            props.onChangeLanguage?.(props.defaultLoginValues.cultureID);
     }, [props.defaultLoginValues, props.endpoints]);
     useEffect(() => {
         if (!hasSingleOption)
@@ -260,6 +264,9 @@ const TMLoginForm = (props) => {
     useEffect(() => {
         setTmServer(new TopMediaServer(endpoint?.URL));
     }, [endpoint]);
+    useEffect(() => {
+        onEndpointChangeRef.current?.(endpoint);
+    }, [endpoint]);
     useEffect(() => {
         if (!tmServer)
             return;
@@ -336,6 +343,12 @@ const TMLoginForm = (props) => {
     const disablePasswordOperations = useMemo(() => {
         return (username.length === 0 || !dcmtArchive || !endpoint);
     }, [username, dcmtArchive, endpoint]);
+    const loginKey = useMemo(() => {
+        const archivePart = dcmtArchive
+            ? (dcmtArchive.description?.replace(/ /g, '_') || dcmtArchive.id || '')
+            : (manualArchiveID ?? '');
+        return `${archivePart}:${username}`;
+    }, [dcmtArchive, manualArchiveID, username]);
     const showLoginBtn = useMemo(() => {
         if (loginStep === 1)
             return false;
@@ -714,7 +727,8 @@ const TMLoginForm = (props) => {
                                                         marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
                                                         width: '100%',
                                                         minHeight: '15px'
-                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain, autoComplete: "off" }), authMode !== AuthenticationModes.MSAzure &&
+                                                                    _jsxs("form", { onSubmit: (e) => e.preventDefault(), style: { width: '100%' }, children: [_jsx("input", { name: "login_key", autoComplete: "username", readOnly: true, tabIndex: -1, value: loginKey, style: { position: 'absolute', width: 1, height: 1, opacity: 0, overflow: 'hidden', border: 0, padding: 0 } }, loginKey), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps), usernameAutoComplete: "off", passwordAutoComplete: "current-password" })] }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                                     _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                             _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
                                         _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
@@ -723,7 +737,7 @@ const TMLoginForm = (props) => {
                                                     ] }), _jsx(StyledRapidAccessWrapper, { "$isMobile": isMobile, children: _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) }) })] }), _jsxs(StyledButtonContainer, { "$windowHeight": windowHeight, children: [showContinueBtn && _jsx(TMButton, { fontSize: "1.2rem", onClick: nextStepHandler, showTooltip: false, caption: LOGINLocalizator.Continue, disabled: disableContinueBtn }), showLoginBtn && _jsx(TMButton, { fontSize: "1.2rem", showTooltip: false, onClick: loginHandler, caption: saveLoginEnable ? SDKUI_Localizator.SaveAndLogin : SDKUI_Localizator.Login, disabled: disableLoginBtn })] })] }), showPasswordOperations && _jsx(StyledForgetPassword, { "$isMobile": isMobile, children: _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "text", caption: SDKUI_Localizator.ForgetPassword, showTooltip: false, onClick: () => setShowForgetPassword(true) }) }), showBackBtn && _jsx(StyledBackButton, { children: _jsx(TMButton, { onClick: previousStepHandler, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), showCultureIDs && _jsx(Menu, { onClose: () => setShowCultureIDs(false), x: 'calc(100% - 250px)', y: 50, visible: showCultureIDs, children: _jsxs(StyledMenuItemContainer, { children: [_jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.It_IT), title: cultureIDsDataSource[0].display, src: it, alt: "it", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.En_US), title: cultureIDsDataSource[3].display, src: en, alt: "en", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Fr_FR), title: cultureIDsDataSource[1].display, src: fr, alt: "fr", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Es_ES), title: cultureIDsDataSource[4].display, src: es, alt: "es", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Pt_PT), title: cultureIDsDataSource[2].display, src: pt, alt: "pt", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.De_DE), title: cultureIDsDataSource[5].display, src: de, alt: "de", width: BANNER_DIMENSION, height: BANNER_DIMENSION })] }) }), showChangePassword && _jsx(ChangePassword, { tmSession: changePswTmSession, onClose: () => setShowChangePassword(false) }), showForgetPassword && _jsx(RecoverPasswordFlow, { isMobile: isMobile, tmSession: changePswTmSession, onClose: () => setShowForgetPassword(false), windowHeight: windowHeight }), showRapidAccess && _jsx(RapidAccessLogin, { isMobile: isMobile, onClose: () => setShowRapidAccess(false), onSelect: handleRapidAccessSelection })] })] })] }));
 };
 export default TMLoginForm;
-const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef }, ref) => {
+const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef, usernameAutoComplete = 'off', passwordAutoComplete = 'off' }, ref) => {
     const passwordRef = useRef(null);
     useImperativeHandle(ref, () => {
         return usernameRef.current;
@@ -749,7 +763,7 @@ const CeredentialContainer = forwardRef(({ isMobile = false, authMode = Authenti
             secondaryRef.current = passwordRef.current;
         }
     }, [secondaryRef]);
-    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password })] }));
+    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName, autoComplete: usernameAutoComplete }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password, autoComplete: passwordAutoComplete })] }));
 });
 const RapidAccessContainer = ({ isSaveEnable, name, nameValidationItems, onEnableSaveChange, onNameChange }) => {
     return (_jsxs(StyledRapidLoginSave, { children: [_jsx(TMCheckBox, { label: LOGINLocalizator.CreateNewQuickAccess, onValueChanged: () => onEnableSaveChange(), value: isSaveEnable, labelColor: "#313131" }), isSaveEnable && _jsx(TextBox, { validationItems: nameValidationItems, disabled: !isSaveEnable, type: "text", value: name, onValueChanged: (value) => onNameChange(value), placeHolder: "Es: Admin risorse umane" })] }));

package/lib/components/forms/Login/TextBox.d.ts

@@ -19,6 +19,9 @@ interface TextBoxProps {
     readOnly?: boolean;
     cursor?: 'default' | 'pointer' | 'text';
     showSuccess?: boolean;
+    name?: string;
+    id?: string;
+    autoComplete?: string;
     onClick?: () => void;
     onValueChanged?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;