Merge pull request #1918 from RaspAP/feat/bootstrap-alert-setting

Feature: User-definable alert timeout option

app/js/ui/main.js

@@ -582,8 +582,13 @@ $(document)
     .ready(loadWifiStations());
 
 // To auto-close Bootstrap alerts; time is in milliseconds
-window.setTimeout(function() {
+const alertTimeout = parseInt(getCookie('alert_timeout'), 10);
+
+if (!isNaN(alertTimeout) && alertTimeout > 0) {
+  window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
-        $(this).remove();
+      $(this).remove();
     });
-}, 5000);
+  }, alertTimeout);
+}
+

includes/system.php

@@ -12,6 +12,23 @@ function DisplaySystem(&$extraFooterScripts)
     $dashboard = new \RaspAP\UI\Dashboard;
     $pluginInstaller = \RaspAP\Plugins\PluginInstaller::getInstance();
 
+    // set defaults
+    $optAutoclose = true;
+    $alertTimeout = 5000;
+    $good_input = true;
+    $config_port = false;
+
+    // set alert_timeout from cookie if valid
+    if (isset($_COOKIE['alert_timeout']) && is_numeric($_COOKIE['alert_timeout'])) {
+        $cookieTimeout = (int) $_COOKIE['alert_timeout'];
+
+        if ($cookieTimeout > 0) {
+            $alertTimeout = $cookieTimeout;
+        } else {
+            // A value of 0 means auto-close is disabled
+            $optAutoclose = false;
+        }
+    }
     if (isset($_POST['SaveLanguage'])) {
         if (isset($_POST['locale'])) {
             $_SESSION['locale'] = $_POST['locale'];
@@ -21,7 +38,6 @@ function DisplaySystem(&$extraFooterScripts)
 
     if (!RASPI_MONITOR_ENABLED) {
         if (isset($_POST['SaveServerSettings'])) {
-            $good_input = true;
             // Validate server port
             if (isset($_POST['serverPort'])) {
                 if (strlen($_POST['serverPort']) > 4 || !is_numeric($_POST['serverPort'])) {
@@ -32,13 +48,13 @@ function DisplaySystem(&$extraFooterScripts)
                }
             }
             // Validate server bind address
-            $serverBind = escapeshellarg('');
-            if ($_POST['serverBind'] && $_POST['serverBind'] !== null ) {
-                if (!filter_var($_POST['serverBind'], FILTER_VALIDATE_IP)) {
+            if (isset($_POST['serverBind']) && $_POST['serverBind'] !== '') {
+                $inputBind = trim($_POST['serverBind']);
+                if (!filter_var($inputBind, FILTER_VALIDATE_IP)) {
                     $status->addMessage('Invalid value for bind address', 'danger');
                     $good_input = false;
                 } else {
-                    $serverBind = escapeshellarg($_POST['serverBind']);
+                    $serverBind = escapeshellarg($inputBind);
                 }
             }
             // Validate log limit
@@ -58,6 +74,21 @@ function DisplaySystem(&$extraFooterScripts)
                     $status->addMessage($line, 'info');
                 }
             }
+        } elseif (isset($_POST['savethemeSettings'])) {
+            // Validate alert timout
+            if (isset($_POST['autoClose'])) {
+                $alertTimeout = trim($_POST['alertTimeout'] ?? '');
+                if (strlen($alertTimeout) > 7 || !is_numeric($alertTimeout)) {
+                    $status->addMessage('Invalid value for alert close timeout', 'danger');
+                    $good_input = false;
+                } else {
+                    setcookie('alert_timeout', (int) $alertTimeout);
+                    $status->addMessage(sprintf(_('Changing alert close timeout to %s ms'), $alertTimeout), 'info');
+                }
+            } else {
+                setcookie('alert_timeout', '', time() - 3600, '/');
+                $optAutoclose = false;
+            }
         }
     }
 
@@ -155,7 +186,9 @@ function DisplaySystem(&$extraFooterScripts)
         "themes",
         "selectedTheme",
         "logLimit",
-        "pluginsTable"
+        "pluginsTable",
+        "optAutoclose",
+        "alertTimeout"
     ));
 }
 

locale/en_US/LC_MESSAGES/messages.po

@@ -58,9 +58,6 @@ msgstr "TOR proxy"
 msgid "Authentication"
 msgstr "Authentication"
 
-msgid "Change Theme"
-msgstr "Change Theme"
-
 msgid "System"
 msgstr "System"
 
@@ -1256,6 +1253,15 @@ msgstr "Details"
 msgid "Installed"
 msgstr "Installed"
 
+msgid "Alert messages"
+msgstr "Alert messages"
+
+msgid "Automatically close alerts after a specified timeout"
+msgstr "Automatically close alerts after a specified timeout"
+
+msgid "Alert close timeout (milliseconds)"
+msgstr "Alert close timeout (milliseconds)"
+
 #: includes/data_usage.php
 msgid "Data usage"
 msgstr "Data usage"

templates/system/theme.php

@@ -1,19 +1,38 @@
 <!-- theme tab -->
 <div role="tabpanel" class="tab-pane" id="theme">
-  <h4 class="mt-3"><?php echo _("Change theme") ;?></h4>
-    <div class="row">
-    <div class="mb-3 col-xs-3 col-sm-3">
-      <label for="code"><?php echo _("Select a theme"); ?></label>
-      <?php SelectorOptions("theme", $themes, $selectedTheme, "theme-select") ?>
-    </div>
-    <div class="col-xs-3 col-sm-3">
-      <label for="code"><?php echo _("Color"); ?></label>
-      <input class="form-control color-input" value="#2b8080" aria-label="color" />
-    </div>
-    </div>
+  <h4 class="mt-3"><?php echo _("Theme settings") ;?></h4>
     <form action="system_info" method="POST">
     <?php echo \RaspAP\Tokens\CSRF::hiddenField(); ?>
-    <button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
+    <div class="row">
+      <div class="mb-3 col-xs-3 col-sm-3">
+        <label for="code"><?php echo _("Select a theme"); ?></label>
+        <?php SelectorOptions("theme", $themes, $selectedTheme, "theme-select") ?>
+      </div>
+      <div class="col-xs-3 col-sm-3">
+        <label for="code"><?php echo _("Color"); ?></label>
+        <input class="form-control color-input" value="#2b8080" aria-label="color" />
+      </div>
+    </div>
+      <div class="row">
+        <div class="col-md-6 mb-2">
+        <h5 class="mt-1"><?php echo _("Alert messages"); ?></h5>          
+          <div class="form-check form-switch">
+            <?php $checked = $optAutoclose == 1 ? 'checked="checked"' : '' ?>
+            <input class="form-check-input" id="chxautoclose" name="autoClose" type="checkbox" value="1" <?php echo $checked ?> />
+            <label class="form-check-label" for="chxautoclose"><?php echo _("Automatically close alerts after a specified timeout"); ?></label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="mb-3 col-md-6">
+          <label for="code"><?php echo _("Alert close timeout (milliseconds)") ;?></label>
+          <input type="text" class="form-control" name="alertTimeout" value="<?php echo htmlspecialchars($alertTimeout, ENT_QUOTES); ?>" />
+        </div>
+      </div>
+      <?php if (!RASPI_MONITOR_ENABLED) : ?>
+      <input type="submit" class="btn btn-outline btn-primary" name="savethemeSettings" value="<?php echo _("Save settings"); ?>" />
+      <?php endif; ?>
+      <button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
     </form>
 </div>