Merge pull request #2103 from RaspAP/feat/reconnect-dialog

Feature: Reconnect Dialog

Author: Jixabon

app/js/ajax/system.js

@@ -12,9 +12,57 @@ export function initSystem_ajax() {
                 'csrf_token': csrfToken
             }, function(data) {
                 var response = JSON.parse(data);
+
+                if (action === 'reboot') {
+                    const reconnectModalEl = $('#system-reconnect');
+                    const modal = new bootstrap.Modal(reconnectModalEl);
+                    modal.show();
+                    handleReconnect(reconnectModalEl);
+                }
             });
     });
 
+    function handleReconnect(modal) {
+        const secondsEl = $(modal).find('#system-reconnect-seconds');
+        
+        let countdownInterval;
+        const attemptSeconds = 20;
+
+        const attemptReconnect = async () => {
+            console.log('attempting reconnect');
+            $(secondsEl).text('...');
+
+            const startCountdown = (e) => {
+                console.log('still rebooting - start countdown', e);
+                clearInterval(countdownInterval);
+                let countdownInt = attemptSeconds;
+                countdownInterval = setInterval(() => {
+                    console.log('decrement countdownInt');
+                    if (countdownInt === 0) attemptReconnect();
+                    $(secondsEl).text(countdownInt);
+                    if (countdownInt > 0) countdownInt--;
+                }, 1000);
+            }
+
+            try {
+                // fetch to url and get status
+                const checkUrl = window.location.origin;
+                const response = await fetch(checkUrl);
+
+                if (response.status === 200) {
+                    console.log('reconnected - reload the page');
+                    window.location.reload();
+                } else {
+                    startCountdown();
+                }
+            } catch (e) {
+                startCountdown(e);
+            }
+        };
+
+        attemptReconnect();
+    }
+
     $('#js-system-reset-confirm').on('click', function (e) {
         var progressText = $('#js-system-reset-confirm').attr('data-message');
         var successHtml = $('#system-reset-message').attr('data-message');

templates/system.php

@@ -78,6 +78,23 @@
   </div>
 </div>
 
+<!-- modal reconnecting-->
+<div class="modal fade" id="system-reconnect" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+      <div class="modal-title" id="ModalLabel"><i class="fas fa-sync me-2"></i><?php echo _("Reconnecting"); ?></div>
+      </div>
+      <div class="modal-body">
+        <div class="col-md-12 mb-3 mt-1" id="system-reconnect-message">
+          <p><?php echo _("The system is currently rebooting."); ?></p>
+          <p><?= _('Attempting to reconnect in'); ?>&nbsp;<span id="system-reconnect-seconds"></span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- modal confirm-shutdown-->
 <div class="modal fade" id="system-confirm-shutdown" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">