V1.0.0-beta.17 Update 2

views/upload.ejs

@@ -7,7 +7,6 @@
     <link rel="icon" href="/public/assets/homelab_logo.png" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
     <style>
         body {
             background-image: url('<%= user.wallpaper %>');
@@ -67,6 +66,57 @@
             --ring: 212.7 26.8% 83.9%;
         }
 
+        /* Ajout des styles pour la notification qui s'intègrent au design existant */
+        .notification-container {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            z-index: 1100;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .notification {
+            display: flex;
+            align-items: center;
+            background: hsl(var(--card));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            padding: 1rem;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            transform: translateX(150%);
+            opacity: 0;
+            transition: all 0.3s ease;
+            max-width: 350px;
+        }
+
+        .notification.show {
+            transform: translateX(0);
+            opacity: 1;
+        }
+
+        .notification-icon {
+            margin-right: 0.75rem;
+            font-size: 1.25rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .notification.success .notification-icon {
+            color: #10B981;
+        }
+
+        .notification.error .notification-icon {
+            color: #EF4444;
+        }
+
+        /* Design original pour toutes les autres classes */
         body {
             font-family: 'Inter', sans-serif;
             background-color: hsl(var(--background));
@@ -147,22 +197,82 @@
             margin-right: 8px;
         }
 
+        /* Modal styles gardant le même design */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal.show {
+            opacity: 1;
+        }
+
+        .modal-content {
+            background: hsl(var(--card));
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            padding: 2rem;
+            width: 90%;
+            max-width: 600px;
+            margin: 2rem auto;
+            transform: translateY(-20px);
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+
+        .modal.show .modal-content {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        /* Styles des étapes avec le design original */
+        .step {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            border: 1px solid hsl(var(--border));
+            border-radius: var(--radius);
+            opacity: 0.7;
+            transition: all 0.3s ease;
+            background-color: hsl(var(--card));
+        }
+
+        .step.active {
+            opacity: 1;
+            border-color: hsl(var(--primary));
+        }
+
         .progress-bar {
-            height: 2px;
+            height: 4px;
             background-color: hsl(var(--border));
             border-radius: var(--radius);
             overflow: hidden;
             position: relative;
         }
 
-        .progress-bar div {
+        .progress-bar-fill {
             height: 100%;
             background-color: hsl(var(--primary));
-            width: 0%;
+            width: 0;
+            transition: width 0.3s ease;
+        }
+
+        .step.completed .progress-bar-fill {
+            background-color: #10B981;
         }
-        
     </style>
 </head>
+
 <body class="animate dark">
     <button id="themeSwitcher" class="btn btn-secondary p-2">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
@@ -170,6 +280,9 @@
         </svg>
     </button>
 
+    <!-- Notification Container -->
+    <div class="notification-container"></div>
+
     <div id="app" class="min-h-screen flex items-center justify-center">
         <div class="container mt-8">
             <h1 class="text-3xl font-semibold mb-6 text-center animate">Upload de Fichiers</h1>
@@ -178,7 +291,9 @@
                 <form id="uploadForm">
                     <div class="form-group">
                         <label for="file" class="block mb-2">Sélectionnez un fichier :</label>
-                        <input type="file" name="file" id="fileInput" accept=".zip, .pdf, .txt, .jpg, .jpeg, .png, .gif, .iso, .mp4" class="form-control">
+                        <input type="file" name="file" id="fileInput" 
+                            accept=".zip, .pdf, .txt, .jpg, .jpeg, .png, .gif, .iso, .mp4" 
+                            class="form-control">
                     </div>
 
                     <div class="form-group">
@@ -191,25 +306,14 @@
                         <input type="password" name="password" id="password" class="form-control">
                     </div>
 
-                    <div class="form-group mb-4">
-                        <label class="block mb-2">Progression :</label>
-                        <div class="progress-bar relative">
-                            <div id="progressBar"></div>
-                            <div id="progressText" class="absolute inset-0 flex items-center justify-center text-white font-semibold">0%</div>
-                        </div>
-                    </div>
-
-                    <div class="form-group mb-4">
-                        <p id="estimatedTime" class="text-sm text-gray-400">Temps estimé : 0 min 0 sec</p>
-                    </div>
-
                     <button type="submit" id="uploadButton" class="btn btn-primary w-full py-2 mt-4">
                         <i class="fas fa-upload icon-spacing"></i>
                         Téléverser
                     </button>
                 </form>
                 <div class="text-center">
-                    <button onclick="window.location.href='/dpanel/dashboard';" class="btn btn-secondary w-full py-2 mt-4">
+                    <button onclick="window.location.href='/dpanel/dashboard';" 
+                            class="btn btn-secondary w-full py-2 mt-4">
                         <i class="fas fa-arrow-left icon-spacing"></i>
                         Retour au Dashboard
                     </button>
@@ -218,100 +322,355 @@
         </div>
     </div>
 
-    <script>
-        const uploadForm = document.getElementById('uploadForm');
-        const fileInput = document.getElementById('fileInput');
-        const progressBar = document.getElementById('progressBar');
-        const progressText = document.getElementById('progressText');
-        const estimatedTime = document.getElementById('estimatedTime');
+    <!-- Upload Progress Modal -->
+    <div id="uploadModal" class="modal">
+        <div class="modal-content">
+            <h2 class="text-2xl font-semibold mb-6">Progression détaillée</h2>
+            
+            <!-- Upload step -->
+            <div class="step" id="uploadStep">
+                <div class="step-icon">
+                    <i class="fas fa-upload"></i>
+                </div>
+                <div class="progress-details">
+                    <div class="flex justify-between mb-1">
+                        <span class="font-medium">Téléchargement</span>
+                        <span class="upload-percentage">0%</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-bar-fill"></div>
+                    </div>
+                    <div class="eta">En attente...</div>
+                </div>
+            </div>
 
-        uploadForm.addEventListener('submit', async function(e) {
-            e.preventDefault();
-            const file = fileInput.files[0];
-            if (!file) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Aucun fichier sélectionné',
-                    showConfirmButton: false,
-                    timer: 1800,
-                    toast: true,
-                });
-                return;
-            }
+            <!-- Chunks step -->
+            <div class="step" id="chunksStep">
+                <div class="step-icon">
+                    <i class="fas fa-puzzle-piece"></i>
+                </div>
+                <div class="progress-details">
+                    <div class="flex justify-between mb-1">
+                        <span class="font-medium">Création des chunks</span>
+                        <span class="chunks-percentage">En attente</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-bar-fill"></div>
+                    </div>
+                    <div class="eta">En attente...</div>
+                </div>
+            </div>
+
+            <!-- Compilation step -->
+            <div class="step" id="compilationStep">
+                <div class="step-icon">
+                    <i class="fas fa-cogs"></i>
+                </div>
+                <div class="progress-details">
+                    <div class="flex justify-between mb-1">
+                        <span class="font-medium">Compilation finale</span>
+                        <span class="compilation-percentage">En attente</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-bar-fill"></div>
+                    </div>
+                    <div class="eta">En attente...</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+// Constants and global variables
+const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
+const modal = document.getElementById('uploadModal');
+const uploadForm = document.getElementById('uploadForm');
+const fileInput = document.getElementById('fileInput');
+
+// Theme management
+const themeSwitcher = document.getElementById('themeSwitcher');
+const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+    
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
+    } else {
+        document.documentElement.classList.add('light');
+        document.documentElement.classList.remove('dark');
+    }
+}
+
+// Initialize theme
+const savedTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light');
+setTheme(savedTheme);
+
+themeSwitcher.addEventListener('click', () => {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+});
+
+// Utility functions for file handling
+async function generateSecurityCode() {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    let code = '';
+    for (let i = 0; i < 6; i++) {
+        code += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return code;
+}
+
+async function formatSecureFileName(originalFileName) {
+    // Format: YYYYMMDD_SECURITY_originalname.ext
+    const now = new Date();
+    const date = now.toISOString().slice(0,10).replace(/-/g, '');
+    const securityCode = await generateSecurityCode();
+    
+    const lastDot = originalFileName.lastIndexOf('.');
+    const fileName = lastDot !== -1 ? originalFileName.substring(0, lastDot) : originalFileName;
+    const fileExt = lastDot !== -1 ? originalFileName.substring(lastDot) : '';
+    
+    return `${date}_${securityCode}_${fileName}${fileExt}`;
+}
+
+// Notification system
+function showNotification(type, title, message = '') {
+    const container = document.querySelector('.notification-container');
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    
+    notification.innerHTML = `
+        <div class="notification-icon">
+            <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-times-circle'}"></i>
+        </div>
+        <div class="notification-content">
+            <div class="notification-title">${title}</div>
+            ${message ? `<div class="notification-message">${message}</div>` : ''}
+        </div>
+    `;
+    
+    // Auto-remove previous notifications if more than 3
+    const notifications = container.querySelectorAll('.notification');
+    if (notifications.length >= 3) {
+        notifications[0].remove();
+    }
+
+    container.appendChild(notification);
+    requestAnimationFrame(() => {
+        notification.classList.add('show');
+    });
+
+    setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }, 3000);
+}
+
+// Progress handling
+function updateProgress(step, progress, eta = '') {
+    const progressBar = step.querySelector('.progress-bar-fill');
+    const percentage = step.querySelector('[class$="-percentage"]');
+    const etaElement = step.querySelector('.eta');
+    
+    progressBar.style.width = `${progress}%`;
+    percentage.textContent = `${Math.round(progress)}%`;
+    if (eta) etaElement.textContent = eta;
+}
+
+function calculateETA(loaded, total, startTime) {
+    const elapsed = (Date.now() - startTime) / 1000;
+    const rate = loaded / elapsed;
+    const remaining = (total - loaded) / rate;
+    const minutes = Math.floor(remaining / 60);
+    const seconds = Math.round(remaining % 60);
+    return `Temps restant estimé: ${minutes}min ${seconds}s`;
+}
+
+// Modal management
+function showModal() {
+    modal.style.display = 'block';
+    setTimeout(() => {
+        modal.classList.add('show');
+        modal.querySelector('.modal-content').style.opacity = '1';
+    }, 10);
+}
+
+function hideModal() {
+    modal.classList.remove('show');
+    setTimeout(() => {
+        modal.style.display = 'none';
+        resetSteps();
+    }, 300);
+}
+
+function resetSteps() {
+    document.querySelectorAll('.step').forEach(step => {
+        step.classList.remove('active', 'completed');
+        const progressBar = step.querySelector('.progress-bar-fill');
+        const percentage = step.querySelector('[class$="-percentage"]');
+        const eta = step.querySelector('.eta');
+        
+        progressBar.style.width = '0%';
+        if (percentage) percentage.textContent = 'En attente';
+        if (eta) eta.textContent = 'En attente...';
+    });
+}
+
+// Main upload function
+async function uploadFile(file) {
+    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+    let uploadedChunks = 0;
+    let uploadedBytes = 0;
+    const startTime = Date.now();
+    
+    // Générer le nom de fichier sécurisé
+    const secureFileName = await formatSecureFileName(file.name);
+
+    showModal();
+    
+    const uploadStep = document.getElementById('uploadStep');
+    const chunksStep = document.getElementById('chunksStep');
+    const compilationStep = document.getElementById('compilationStep');
+
+    try {
+        uploadStep.classList.add('active');
+
+        for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+            const start = chunkIndex * CHUNK_SIZE;
+            const end = Math.min(start + CHUNK_SIZE, file.size);
+            const chunk = file.slice(start, end);
 
             const formData = new FormData();
-            formData.append('file', file);
-            formData.append('expiryDate', document.getElementById('expiryDate').value);
-            formData.append('password', document.getElementById('password').value);
+            formData.append('file', chunk);
+            formData.append('chunkIndex', chunkIndex);
+            formData.append('totalChunks', totalChunks);
+            formData.append('filename', secureFileName);
+            formData.append('originalFilename', file.name);
 
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', '/api/dpanel/upload', true);
-
-            xhr.upload.addEventListener('progress', function(e) {
-                if (e.lengthComputable) {
-                    const percentComplete = Math.round((e.loaded / e.total) * 100);
-                    const remainingBytes = e.total - e.loaded;
-                    const bytesPerSecond = e.loaded / (Date.now() - startTime);
-                    const remainingSeconds = Math.ceil(remainingBytes / bytesPerSecond);
-                    const minutes = Math.floor(remainingSeconds / 60);
-                    const seconds = remainingSeconds % 60;
-
-                    progressBar.style.width = `${percentComplete}%`;
-                    progressText.textContent = `${percentComplete}%`;
-                    estimatedTime.textContent = `Temps estimé : ${minutes} min ${seconds} sec`;
-                }
-            });
-
-            xhr.onload = function() {
-                if (xhr.status === 200) {
-                    Swal.fire({
-                        icon: 'success',
-                        title: 'Fichier téléchargé avec succès !',
-                        showConfirmButton: false,
-                        timer: 1800,
-                        toast: true,
-                    });
-                } else {
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'Échec du téléchargement',
-                        showConfirmButton: false,
-                        timer: 1800,
-                        toast: true,
-                    });
-                }
-            };
-
-            xhr.send(formData);
-            const startTime = Date.now();
-        });
-
-        const body = document.body;
-        const themeSwitcher = document.getElementById('themeSwitcher');
-
-        function setTheme(theme) {
-            if (theme === 'dark') {
-                body.classList.add('dark');
-            } else {
-                body.classList.remove('dark');
+            // Ajoute la date d'expiration et le mot de passe seulement s'ils sont renseignés
+            const expiryDate = document.getElementById('expiryDate').value;
+            const password = document.getElementById('password').value;
+            
+            if (expiryDate) {
+                formData.append('expiryDate', expiryDate);
+            }
+            if (password) {
+                formData.append('password', password);
+            }
+
+            uploadedBytes += chunk.size;
+            const uploadProgress = (uploadedBytes / file.size) * 100;
+            
+            updateProgress(uploadStep, uploadProgress, 
+                calculateETA(uploadedBytes, file.size, startTime));
+
+            try {
+                const response = await fetch('/api/dpanel/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.statusText}`);
+                }
+
+                uploadedChunks++;
+
+                // Mise à jour de la progression des chunks
+                const chunksProgress = (uploadedChunks / totalChunks) * 100;
+                updateProgress(chunksStep, chunksProgress, 
+                    `Traitement des chunks: ${uploadedChunks}/${totalChunks}`);
+            } catch (error) {
+                console.error('Chunk upload failed:', error);
+                throw new Error(`Échec de l'upload du chunk ${chunkIndex + 1}/${totalChunks}`);
             }
-            localStorage.setItem('theme', theme);
         }
 
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            setTheme(savedTheme);
-        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            setTheme('dark');
-        }
+        // Upload terminé, passer à la compilation
+        uploadStep.classList.remove('active');
+        uploadStep.classList.add('completed');
+        chunksStep.classList.add('completed');
+        compilationStep.classList.add('active');
 
-        themeSwitcher.addEventListener('click', function() {
-            if (body.classList.contains('dark')) {
-                setTheme('light');
-            } else {
-                setTheme('dark');
+        // Simulation de la compilation (peut être remplacé par un vrai appel API)
+        let compilationProgress = 0;
+        const compilationInterval = setInterval(() => {
+            compilationProgress += 5;
+            updateProgress(compilationStep, compilationProgress, 
+                'Assemblage du fichier final...');
+
+            if (compilationProgress >= 100) {
+                clearInterval(compilationInterval);
+                compilationStep.classList.remove('active');
+                compilationStep.classList.add('completed');
+
+                setTimeout(() => {
+                    showNotification('success', 'Fichier téléchargé avec succès !', 
+                        `Nom sécurisé : ${secureFileName}`);
+                    hideModal();
+                    uploadForm.reset();
+                }, 1000);
             }
-        });
+        }, 100);
+
+    } catch (error) {
+        console.error('Upload failed:', error);
+        hideModal();
+        showNotification('error', 'Échec du téléchargement', error.message);
+    }
+}
+
+// Event Listeners
+uploadForm.addEventListener('submit', async function(e) {
+    e.preventDefault();
+    
+    const file = fileInput.files[0];
+    if (!file) {
+        showNotification('error', 'Aucun fichier sélectionné');
+        return;
+    }
+
+    // Vérification du mot de passe uniquement s'il est renseigné
+    const password = document.getElementById('password').value;
+    if (password && password.length < 6) {
+        showNotification('error', 'Le mot de passe doit contenir au moins 6 caractères');
+        return;
+    }
+
+    await uploadFile(file);
+});
+
+// File Input Change Handler
+fileInput.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (file) {
+        // Vérification de la taille du fichier (1GB = 1024 * 1024 * 1024 bytes)
+        const MAX_FILE_SIZE = 1024 * 1024 * 1024; // 1GB en bytes
+        
+        if (file.size > MAX_FILE_SIZE) {
+            showNotification('error', 'Fichier trop volumineux', 
+                'Le support des fichiers de plus de 1GB est actuellement en développement. Veuillez réessayer plus tard.');
+            fileInput.value = ''; // Reset l'input file
+            return;
+        }
+        
+        // Afficher le nom du fichier sélectionné si la taille est acceptable
+        const fileName = file.name;
+        showNotification('success', 'Fichier sélectionné', fileName);
+    }
+});
+
+// Prevent form submission on enter key
+uploadForm.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        e.preventDefault();
+    }
+});
     </script>
 </body>
-</html>
+</html>