added some cool new features

css/index.css

@@ -17,3 +17,54 @@ body {
 .signed {
   margin-top: 20px;
 }
+
+/*
+https://bootsnipp.com/snippets/jvP6z
+*/
+.mini-led-green, .mini-led-green-blink {
+    background-color: #80FF00;
+    box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
+}
+.mini-led-red, .mini-led-red-blink {
+    background-color: #F00;
+    box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
+}
+.mini-led-gray,
+.mini-led-gray-blink,
+.mini-led-red,
+.mini-led-red-blink,
+.mini-led-orange,
+.mini-led-orange-blink,
+.mini-led-green,
+.mini-led-green-blink,
+.mini-led-yellow,
+.mini-led-yellow-blink,
+.mini-led-blue,
+.mini-led-blue-blink {
+    margin: 0 auto;
+    margin-top: 5px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+#config-cards textarea {
+   font-family: Courier;
+}
+
+#message-stage {
+   position: fixed;
+   bottom: 0;
+}
+#message-stage i.stauts-icon {
+   margin-right: 10px;
+}
+
+#save-config-btn.get-attention a {
+   background-color: #f0ad4e; /* orange */
+   color: white;
+}
+#save-config-btn.saved-success a {
+   background-color: #5cb85c; /* green */
+   color: white;
+}

include/grids.php

@@ -45,9 +45,27 @@
       // Creation of the LIMIT for build different pages
       $page = "LIMIT $offset, $limit";
 
+      // ... filtering by the bootstrap table plugin
+      $filter = isset($_GET['filter']) ? json_decode($_GET['filter'],true) : []; // this is passed by the bootstrap table filter plugin (if a filter was chosen by the user): these are the concrete set filters with their value
+      $where = !empty($filter)?'WHERE TRUE':'';
+      $allowed_query_filters = ['user_id', 'log_trusted_ip','log_trusted_port','log_remote_ip','log_remote_port']; // these are valid filters that could be used (defined here for sql security reason)
+      $query_filters_existing = [];
+      foreach($filter as $unsanitized_filter_key => $unsanitized_filter_val) {
+         if(in_array($unsanitized_filter_key, $allowed_query_filters)) { // if this condition does not match: ignore it, because this parameter should not be passed
+            // if $unsanitized_filter_key is in array $allowed_query_filters its a valid key and can not be harmful, so it can be considered sanitized
+            $where .= " AND $unsanitized_filter_key = ?";
+            $query_filters_existing[] = $unsanitized_filter_key;
+         }
+      }
+
       // Select the logs
-      $req_string = "SELECT *, (SELECT COUNT(*) FROM log) AS nb FROM log ORDER BY log_id DESC $page";
+      $req_string = "SELECT *, (SELECT COUNT(*) FROM log $where) AS nb FROM log $where ORDER BY log_id DESC $page";
       $req = $bdd->prepare($req_string);
+
+      // dynamically bind the params
+      foreach(array_merge($query_filters_existing,$query_filters_existing) as $i => $query_filter) // array_merge -> duplicated the array contents; this is needed because our where clause is bound two times (in subquery + the outer query)
+         $req->bindValue($i+1, $filter[$query_filter]);
+
       $req->execute();
 
       $list = array();
@@ -75,7 +93,6 @@
                                   "log_received" => $received,
                                   "log_send" => $sent));
 
-
         } while ($data = $req->fetch());
       }
       else {
@@ -203,4 +220,36 @@
     $req->execute(array($_POST['del_admin_id']));
   }
 
+  // ---------------- UPDATE CONFIG ----------------
+  else if(isset($_POST['update_config'])){
+
+      $pathinfo = pathinfo($_POST['config_file']);
+
+      $config_full_uri = $_POST['config_file']; // the complete path to the file, including the file (name) its self and the fully qualified path
+      $config_full_path = $pathinfo['dirname']; // path to file (without filename its self)
+      $config_name = basename($_POST['config_file']); // config file name only (without path)
+      $config_parent_dir = basename($config_full_path); // name of the dir that contains the config file (without path)
+
+      /*
+       * create backup for history
+       */
+      if (!file_exists($dir="../$config_full_path/history"))
+         mkdir($dir, 0777, true);
+      $ts = time();
+      copy("../$config_full_uri", "../$config_full_path/history/${ts}_${config_name}");
+
+      /*
+       *  write config
+       */
+      $conf_success = file_put_contents('../'.$_POST['config_file'], $_POST['config_content']);
+
+      echo json_encode([
+        'debug' => [
+            'config_file' => $_POST['config_file'],
+            'config_content' => $_POST['config_content']
+        ],
+        'config_success' => $conf_success !== false,
+      ]);
+  }
+
 ?>

include/html/grids.php

@@ -1,9 +1,40 @@
+<?php
+function getHistory($cfg_file, $accordion_id, $open_first_history_tab = false) {
+   ob_start(); ?>
+   <h3>History</h3>
+   <div class="panel-group" id="accordion<?= $accordion_id ?>">
+      <?php foreach (array_reverse(glob('client-conf/'.basename(pathinfo($cfg_file, PATHINFO_DIRNAME)).'/history/*')) as $i => $file): ?>
+         <div class="panel panel-default">
+            <div class="panel-heading">
+               <h4 class="panel-title">
+                  <a data-toggle="collapse" data-parent="#accordion<?= $accordion_id ?>" href="#collapse<?= $accordion_id ?>-<?= $i ?>">
+                     <?php
+                     $history_file_name = basename($file);
+                     $chunks = explode('_', $history_file_name);
+                     printf('[%s] %s', date('r', $chunks[0]), $chunks[1]);
+                     ?>
+                  </a>
+               </h4>
+            </div>
+            <div id="collapse<?= $accordion_id ?>-<?= $i ?>" class="panel-collapse collapse <?= $i===0 && $open_first_history_tab?'in':'' ?>">
+               <div class="panel-body"><pre><?= file_get_contents($file) ?></pre></div>
+            </div>
+         </div>
+      <?php endforeach; ?>
+   </div><?php
+   $history = ob_get_contents();
+   ob_end_clean();
+   return $history;
+}
+?>
 <ul class="nav nav-tabs">
-   <li class="active"><a data-toggle="tab" href="#menu0">OpenVPN Users</a></li>
+   <li class="active"><a data-toggle="tab" href="#menu0"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> OpenVPN Users</a></li>
-   <li><a data-toggle="tab" href="#menu1">OpenVPN logs</a></li>
+   <li><a data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> OpenVPN logs</a></li>
-   <li><a data-toggle="tab" href="#menu2">Web Admins</a></li>
+   <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-king" aria-hidden="true"></span> Web Admins</a></li>
+   <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Configs</a></li>
 </ul>
 <div class="tab-content">
+
    <div id="menu0" class="tab-pane fade in active">
       <!-- Users grid -->
       <div class="block-grid row" id="user-grid">
@@ -38,13 +69,14 @@
          </div>
       </div>
    </div>
+
    <div id="menu1" class="tab-pane fade">
       <!-- Logs grid -->
       <div class="block-grid row" id="log-grid">
          <h4>
             OpenVPN logs
          </h4>
-         <table id="table-logs" class="table"></table>
+         <table id="table-logs" class="table" data-filter-control="true"></table>
       </div>
    </div>
 
@@ -82,15 +114,70 @@
          </div>
       </div>
    </div>
+
+   <div id="menu3" class="tab-pane fade">
+      <!-- configs -->
+      <div class="block-grid row" id="config-cards">
+         <ul class="nav nav-tabs nav-tabs-justified">
+            <li class="active"><a data-toggle="tab" href="#menu-1-0"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Linux</a></li>
+            <li><a data-toggle="tab" href="#menu-1-1"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Windows</a></li>
+            <li><a data-toggle="tab" href="#menu-1-2"><span class="glyphicon glyphicon-apple" aria-hidden="true"></span> OSX</a></li>
+
+            <li id="save-config-btn" class="pull-right hidden"><a class="progress-bar-striped" href="javascript:;"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></a></li>
+         </ul>
+         <div class="tab-content">
+            <div id="menu-1-0" class="tab-pane fade in active">
+
+               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/gnu-linux/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
+               <?= getHistory($cfg_file, @++$accId) ?>
+
+            </div>
+            <div id="menu-1-1" class="tab-pane fade">
+
+               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/windows/client.ovpn' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
+               <?= getHistory($cfg_file, ++$accId) ?>
+
+            </div>
+            <div id="menu-1-2" class="tab-pane fade">
+
+               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/osx-viscosity/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
+               <?= getHistory($cfg_file, ++$accId) ?>
+
+            </div>
+         </div>
+
+      </div>
+   </div>
+
 </div>
 
 <script src="vendor/jquery/dist/jquery.min.js"></script>
 <script src="vendor/bootstrap/js/modal.js"></script>
 <script src="vendor/bootstrap/js/tooltip.js"></script>
 <script src="vendor/bootstrap/js/tab.js"></script>
+<script src="vendor/bootstrap/js/collapse.js"></script>
 <script src="vendor/bootstrap/js/popover.js"></script>
 <script src="vendor/bootstrap-table/dist/bootstrap-table.min.js"></script>
 <script src="vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
 <script src="vendor/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
+<script src="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
 <script src="vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
 <script src="js/grids.js"></script>
+
+<script>
+$(document).ready(function(){
+   /*
+   https://stackoverflow.com/a/19015027/3214501
+   -> keep the currently active tab beyond page reloading
+   */
+   $('.nav.nav-tabs a').click(function(e) {
+     e.preventDefault();
+     $(this).tab('show');
+   });
+   $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
+     var id = $(e.target).attr("href").substr(1);
+     window.location.hash = id;
+   });
+   $('.nav.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
+});
+</script>

index.php

@@ -30,7 +30,7 @@
       }
       $rootPath = realpath("./client-conf/$conf_dir");
 
-      // Initialize archive object
+      // Initialize archive object ;;;; why doing this every time the user logs in, when the cert is static?
       $archive_base_name = "openvpn-$conf_dir";
       $archive_name = "$archive_base_name.zip";
       $archive_path = "./client-conf/$archive_name";
@@ -99,6 +99,7 @@
     <link rel="stylesheet" href="vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" type="text/css" />
     <link rel="stylesheet" href="vendor/bootstrap-table/dist/bootstrap-table.min.css" type="text/css" />
     <link rel="stylesheet" href="vendor/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" type="text/css" />
+    <link rel="stylesheet" href="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.css" type="text/css" />
     <link rel="stylesheet" href="css/index.css" type="text/css" />
 
     <link rel="icon" type="image/png" href="css/icon.png">
@@ -193,7 +194,7 @@
             <p class="navbar-text signed">Signed in as <?php echo $_SESSION['admin_id']; ?>
             </div>
             <div class="col-md-6">
-              <a class="navbar-text navbar-right" href="index.php?logout" title="Logout"><button class="btn btn-danger">Logout</button></a>
+              <a class="navbar-text navbar-right" href="index.php?logout" title="Logout"><button class="btn btn-danger">Logout <span class="glyphicon glyphicon-off" aria-hidden="true"></span></button></a>
               <a class="navbar-text navbar-right" href="index.php" title="Configuration"><button class="btn btn-default">Configurations</button></a>
             </p>
           </div>
@@ -204,5 +205,8 @@
       require(dirname(__FILE__) . '/include/html/grids.php');
     }
   ?>
+     <div id="message-stage">
+        <!-- used to display application messages (failures / status-notes) to the user -->
+     </div>
   </body>
 </html>

js/grids.js

@@ -1,6 +1,18 @@
 $(function () {
   "use strict";
 
+  // ------------------------- GENERIC STUFF ------------------------------
+  window.printStatus = function(msg, alert_type='warning', bootstrap_icon='') {
+     $('#message-stage').empty()
+         .append(
+            $(document.createElement('div'))
+            .addClass('alert alert-'+alert_type)
+            .html(bootstrap_icon?'<i class="stauts-icon glyphicon glyphicon-'+bootstrap_icon+'"></i>':'')
+            .append(msg)
+            .hide().fadeIn().delay(2000).fadeOut()
+         );
+  }
+
   // ------------------------- GLOBAL definitions -------------------------
   var gridsUrl = 'include/grids.php';
 
@@ -21,6 +33,10 @@ $(function () {
       return '<input type="checkbox" '+(parseInt(value)===1?'checked':'')+' />';
    }
 
+   function LEDIndicatorFormatter(value, row, index) {
+      return '<div class="'+(parseInt(value)===1?'mini-led-green':'mini-led-red')+'"></div>';
+   }
+
   // ------------------------- USERS definitions -------------------------
   var $userTable = $('#table-users');
   var $modalUserAdd = $('#modal-user-add');
@@ -86,6 +102,27 @@ $(function () {
     }
   }
 
+  function updateConfig(config_file, config_content) {
+    $.ajax({
+      url: gridsUrl,
+      data: {
+        update_config : true,
+        config_file: config_file,
+        config_content: config_content
+      },
+      success : function(res){
+         printStatus(
+            res.config_success?'Config Successfully updated!':'An error occured while trying to save the updated config.',
+            res.config_success?'success':'danger',
+            res.config_success?'ok':'warning-sign'
+         );
+      },
+      dataType : 'json',
+      method: 'POST',
+      error: onAjaxError
+    });
+  }
+
   // ES 2015 so be prudent
   if (typeof Object.assign == 'function') {
     var userDateEditable = Object.assign({ type: 'date', placement: 'bottom' }, userEditable);
@@ -164,7 +201,11 @@ $(function () {
       { title: "Pass", field: "user_pass", editable: userEditable },
       { title: "Mail", field: "user_mail", editable: userEditable },
       { title: "Phone", field: "user_phone", editable: userEditable },
-      { title: "Online", field: "user_online" },
+      {
+         title: "Online",
+         field: "user_online",
+         formatter : LEDIndicatorFormatter
+      },
       {
          title: "Enabled",
          field: "user_enable",
@@ -253,18 +294,27 @@ $(function () {
     },
     columns: [
       { title: "Log ID", field: "log_id" },
-      { title: "User ID", field: "user_id" },
+      { title: "User ID", field: "user_id", filterControl : 'select' },
-      { title: "Trusted IP", field: "log_trusted_ip" },
+      { title: "Trusted IP", field: "log_trusted_ip", filterControl : 'select' },
-      { title: "Trusted Port", field: "log_trusted_port" },
+      { title: "Trusted Port", field: "log_trusted_port", filterControl : 'select' },
-      { title: "Remote IP", field: "log_remote_ip" },
+      { title: "Remote IP", field: "log_remote_ip", filterControl : 'select' },
-      { title: "Remote Port", field: "log_remote_port" },
+      { title: "Remote Port", field: "log_remote_port", filterControl : 'select' },
       { title: "Start Time", field: "log_start_time" },
       { title: "End Time", field: "log_end_time" },
       { title: "Receveid", field: "log_received" },
       { title: "Sent", field: "log_send" }
     ]
   });
-});
+
+  // watch the config textareas for changes an persist them if a change was made
+  $('textarea').keyup(function(){
+     $('#save-config-btn').removeClass('saved-success hidden').addClass('get-attention');
+  }).change(function(){
+      updateConfig($(this).data('config-file'), $(this).val());
+      $('#save-config-btn').removeClass('get-attention').addClass('saved-success');
+  });
+
+}); // doc ready end
 
 // -------------------- HACKS --------------------