slide_sign_ok

public/style/signature.css

@@ -1224,7 +1224,6 @@ body {
     width: 90%;
     max-width: 600px;
     max-height: 90vh;
-    overflow-y: auto;
 }
 
 .modal-header {
@@ -1525,7 +1524,7 @@ input[type="file"] {
     border-radius: 8px;
     max-width: 800px;
     width: 90%;
-    max-height: 90vh;
+    max-height: 95vh;
     overflow-y: auto;
     position: relative;
 }
@@ -1617,4 +1616,46 @@ input[type="file"] {
 
 .sign-confirm-btn:hover {
     background-color: #45a049;
+}
+
+.signature-slider-container {
+    margin: 20px 20%;
+    padding: 10px;
+}
+
+.slider-track {
+    position: relative;
+    background: #e0e0e0;
+    height: 40px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.slider-handle {
+    position: absolute;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    background: #4CAF50;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    z-index: 1;
+}
+
+.slider-arrow {
+    color: white;
+    font-size: 20px;
+}
+
+.slider-text {
+    width: 100%;
+    text-align: center;
+    color: #666;
+    user-select: none;
 }

src/pages/signature/signature.ts

@@ -1593,9 +1593,14 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
 
                             <div class="confirmation-section">
                                 <p class="warning-text">En signant ce document, vous confirmez avoir pris connaissance de son contenu.</p>
-                                <button class="sign-confirm-btn" onclick="confirmSignature(${documentId}, ${processId}, ${isCommonDocument})">
+                                <div class="signature-slider-container">
-                                    Signer le document
+                                    <div class="slider-track">
-                                </button>
+                                        <div class="slider-handle" id="signatureSlider" draggable="true">
+                                            <span class="slider-arrow">➜</span>
+                                        </div>
+                                        <span class="slider-text">Glisser pour signer</span>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -1604,6 +1609,64 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
 
         document.body.insertAdjacentHTML('beforeend', modalHtml);
 
+        // Ajouter la logique du slider après création de la modal
+        const slider = document.getElementById('signatureSlider');
+        const sliderTrack = slider?.parentElement;
+        let isDragging = false;
+        let startX: number;
+        let sliderLeft: number;
+
+        if (slider && sliderTrack) {
+            slider.addEventListener('mousedown', initDrag);
+            document.addEventListener('mousemove', drag);
+            document.addEventListener('mouseup', stopDrag);
+            
+            // Touch events pour mobile
+            slider.addEventListener('touchstart', initDrag);
+            document.addEventListener('touchmove', drag);
+            document.addEventListener('touchend', stopDrag);
+        }
+
+        function initDrag(e: MouseEvent | TouchEvent) {
+            isDragging = true;
+            startX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            sliderLeft = slider?.offsetLeft || 0;
+        }
+
+        function drag(e: MouseEvent | TouchEvent) {
+            if (!isDragging || !slider || !sliderTrack) return;
+            
+            e.preventDefault();
+            const rect = sliderTrack.getBoundingClientRect();
+            const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            
+            // Calculer la position relative à la track
+            let newLeft = x - rect.left - (slider.offsetWidth / 2);
+            
+            // Limiter le déplacement
+            const maxLeft = sliderTrack.offsetWidth - slider.offsetWidth;
+            newLeft = Math.max(0, Math.min(newLeft, maxLeft));
+            
+            // Mettre à jour la position
+            slider.style.left = `${newLeft}px`;
+            
+            // Si le slider atteint 90% du chemin, déclencher la signature
+            if (newLeft > maxLeft * 0.9) {
+                stopDrag(e);
+                confirmSignature(documentId, processId, isCommonDocument);
+            }
+        }
+
+        function stopDrag(e: MouseEvent | TouchEvent) {
+            if (!isDragging || !slider) return;
+            isDragging = false;
+            
+            // Réinitialiser la position si pas assez glissé
+            if (slider.offsetLeft < (sliderTrack?.offsetWidth || 0) * 0.9) {
+                slider.style.left = '0px';
+            }
+        }
+
     } catch (error) {
         console.error('Erreur lors de l\'affichage de la modal:', error);
         showAlert(error instanceof Error ? error.message : 'Erreur lors de l\'affichage de la modal');