Update launch_progress.html

templates/main/launch_progress.html

@@ -11,8 +11,8 @@
 ) }}
 
 <div class="container-fluid">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
+    <div class="row">
+        <div class="col-12">
             <div class="card">
                 <div class="card-body">
                     <div class="text-center mb-4">
@@ -30,7 +30,7 @@
                              style="width: 0%">0%</div>
                     </div>
 
-                    <div id="stepsContainer">
+                    <div id="stepsContainer" class="launch-steps-container">
                         <!-- Your custom steps will be added here -->
                     </div>
 
@@ -50,6 +50,31 @@
 </div>
 
 <style>
+.launch-steps-container {
+    max-height: calc(100vh - 600px);
+    min-height: 300px;
+    overflow-y: auto;
+    padding-right: 1rem;
+}
+
+.launch-steps-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.launch-steps-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.launch-steps-container::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.launch-steps-container::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
 .step-item {
     display: flex;
     align-items: flex-start;
@@ -168,19 +193,7 @@ function initializeSteps() {
     `;
     stepsContainer.appendChild(nginxStep);
 
-    // Add Proxy Host creation step
-    const proxyStep = document.createElement('div');
-    proxyStep.className = 'step-item';
-    proxyStep.innerHTML = `
-        <div class="step-icon"><i class="fas fa-server"></i></div>
-        <div class="step-content">
-            <h5>Creating Proxy Host</h5>
-            <p class="step-status">Setting up NGINX proxy host configuration...</p>
-        </div>
-    `;
-    stepsContainer.appendChild(proxyStep);
-
-    // Add SSL Certificate generation step
+    // Add SSL Certificate generation step (now step 3)
     const sslStep = document.createElement('div');
     sslStep.className = 'step-item';
     sslStep.innerHTML = `
@@ -191,6 +204,18 @@ function initializeSteps() {
         </div>
     `;
     stepsContainer.appendChild(sslStep);
+
+    // Add Proxy Host creation step (now step 4)
+    const proxyStep = document.createElement('div');
+    proxyStep.className = 'step-item';
+    proxyStep.innerHTML = `
+        <div class="step-icon"><i class="fas fa-server"></i></div>
+        <div class="step-content">
+            <h5>Creating Proxy Host</h5>
+            <p class="step-status">Setting up NGINX proxy host configuration...</p>
+        </div>
+    `;
+    stepsContainer.appendChild(proxyStep);
 }
 
 async function startLaunch(data) {
@@ -269,22 +294,22 @@ async function startLaunch(data) {
         nginxStep.classList.add('completed');
         nginxStep.querySelector('.step-status').textContent = 'Successfully connected to NGINX Proxy Manager';
 
-        // Step 3: Create Proxy Host
-        await updateStep(3, 'Creating Proxy Host', 'Setting up NGINX proxy host configuration...');
-        const proxyResult = await createProxyHost(data.webAddresses, data.port);
-        
-        if (!proxyResult.success) {
-            throw new Error(proxyResult.error || 'Failed to create proxy host');
-        }
-
-        // Step 4: Generate SSL Certificate
-        await updateStep(4, 'Generating SSL Certificate', 'Setting up secure HTTPS connection...');
-        const sslResult = await generateSSLCertificate(data.webAddresses, proxyResult.data.id);
+        // Step 3: Generate SSL Certificate (moved up)
+        await updateStep(3, 'Generating SSL Certificate', 'Setting up secure HTTPS connection...');
+        const sslResult = await generateSSLCertificate(data.webAddresses);
         
         if (!sslResult.success) {
             throw new Error(sslResult.error || 'Failed to generate SSL certificate');
         }
 
+        // Step 4: Create Proxy Host (moved down)
+        await updateStep(4, 'Creating Proxy Host', 'Setting up NGINX proxy host configuration...');
+        const proxyResult = await createProxyHost(data.webAddresses, data.port, sslResult.data.certificate.id);
+        
+        if (!proxyResult.success) {
+            throw new Error(proxyResult.error || 'Failed to create proxy host');
+        }
+
     } catch (error) {
         showError(error.message);
     }
@@ -394,7 +419,7 @@ function updateStatus(step, message, type = 'info', details = '') {
     }
 }
 
-async function createProxyHost(domains, port) {
+async function createProxyHost(domains, port, sslCertificateId) {
     try {
         // Get NGINX settings from the template
         const nginxSettings = {
@@ -599,7 +624,7 @@ async function createProxyHost(domains, port) {
         `;
 
         // Update the proxy step to show success and add the results
-        const proxyStep = document.querySelectorAll('.step-item')[2];
+        const proxyStep = document.querySelectorAll('.step-item')[3];
         proxyStep.classList.remove('active');
         proxyStep.classList.add('completed');
         const statusText = proxyStep.querySelector('.step-status');
@@ -621,7 +646,7 @@ async function createProxyHost(domains, port) {
     }
 }
 
-async function generateSSLCertificate(domains, proxyHostId) {
+async function generateSSLCertificate(domains) {
     try {
         // Get NGINX settings from the template
         const nginxSettings = {
@@ -717,7 +742,7 @@ async function generateSSLCertificate(domains, proxyHostId) {
         }
 
         // Update the SSL step to show success
-        const sslStep = document.querySelectorAll('.step-item')[3];
+        const sslStep = document.querySelectorAll('.step-item')[2];
         sslStep.classList.remove('active');
         sslStep.classList.add('completed');
         const sslStatusText = sslStep.querySelector('.step-status');
@@ -776,6 +801,21 @@ async function generateSSLCertificate(domains, proxyHostId) {
     }
 }
 
+function scrollToStep(stepElement) {
+    const container = document.querySelector('.launch-steps-container');
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = stepElement.getBoundingClientRect();
+    
+    // Calculate the scroll position to center the element in the container
+    const scrollTop = elementRect.top - containerRect.top - (containerRect.height / 2) + (elementRect.height / 2);
+    
+    // Smooth scroll to the element
+    container.scrollTo({
+        top: container.scrollTop + scrollTop,
+        behavior: 'smooth'
+    });
+}
+
 function updateStep(stepNumber, title, description) {
     return new Promise((resolve) => {
         // Update the current step in the header
@@ -800,6 +840,8 @@ function updateStep(stepNumber, title, description) {
             } else if (step === stepNumber) {
                 item.classList.add('active');
                 item.querySelector('.step-status').textContent = description;
+                // Scroll to the active step
+                scrollToStep(item);
             }
         });