From 9d38e6a8066da03ff46992ddf7ab12c3dfcb6972 Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Thu, 24 Oct 2019 23:35:59 +0100
Subject: [PATCH] Update OpenVPN + Tor to bootstrap4. Todo: templatize

---
 includes/functions.php | 90 +++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/includes/functions.php b/includes/functions.php
index 87ce8cdd..fff8cb87 100755
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -303,32 +303,32 @@ function DisplayOpenVPNConfig()
     ?>
     <div class="row">
     <div class="col-lg-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading"><i class="fa fa-lock fa-fw"></i> Configure OpenVPN </div>
-        <!-- /.panel-heading -->
-        <div class="panel-body">
+      <div class="card">
+      <div class="card-header"><i class="fas fa-key fa-fw mr-2"></i>Configure OpenVPN</div>
+        <div class="card-body">
             <!-- Nav tabs -->
             <ul class="nav nav-tabs">
-                <li class="active"><a href="#openvpnclient" data-toggle="tab">Client settings</a></li>
-                <li><a href="#openvpnserver" data-toggle="tab">Server settings</a></li>
+                <li class="nav-item"><a class="nav-link active" href="#openvpnclient" data-toggle="tab">Client settings</a></li>
+                <li class="nav-item"><a class="nav-link" href="#openvpnserver" data-toggle="tab">Server settings</a></li>
             </ul>
             <!-- Tab panes -->
             <div class="tab-content">
                 <p><?php echo $status; ?></p>
-                <div class="tab-pane fade in active" id="openvpnclient">
-
+                <div class="tab-pane active" id="openvpnclient">
                     <h4>Client settings</h4>
                     <form role="form" action="?page=save_hostapd_conf" method="POST">
                     <?php echo CSRFTokenFieldTag() ?>
 
                     <div class="row">
-                        <div class="form-group col-md-4">
-                            <label>Select OpenVPN configuration file (.ovpn)</label>
-                            <input type="file" name="openvpn-config">
+                        <div class="form-group col-md-6">
+                          <div class="custom-file">
+                            <input type="file" class="custom-file-input" id="customFile">
+                            <label class="custom-file-label" for="customFile">Select OpenVPN configuration file (.ovpn)</label>
+                          </div>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">Client Log</label>
                             <input type="text" class="form-control" id="disabledInput" name="log-append" type="text" placeholder="<?php echo htmlspecialchars($arrClientConfig['log-append'], ENT_QUOTES); ?>" disabled="disabled" />
                         </div>
@@ -337,43 +337,43 @@ function DisplayOpenVPNConfig()
                 <div class="tab-pane fade" id="openvpnserver">
                     <h4>Server settings</h4>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Port</label> 
                         <input type="text" class="form-control" name="openvpn_port" value="<?php echo htmlspecialchars($arrServerConfig['port'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Protocol</label>
                         <input type="text" class="form-control" name="openvpn_proto" value="<?php echo htmlspecialchars($arrServerConfig['proto'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Root CA certificate</label>
                         <input type="text" class="form-control" name="openvpn_rootca" placeholder="<?php echo htmlspecialchars($arrServerConfig['ca'], ENT_QUOTES); ?>" disabled="disabled" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Server certificate</label>
                         <input type="text" class="form-control" name="openvpn_cert" placeholder="<?php echo htmlspecialchars($arrServerConfig['cert'], ENT_QUOTES); ?>" disabled="disabled" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Diffie Hellman parameters</label>
                         <input type="text" class="form-control" name="openvpn_dh" placeholder="<?php echo htmlspecialchars($arrServerConfig['dh'], ENT_QUOTES); ?>" disabled="disabled" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">KeepAlive</label>
                         <input type="text" class="form-control" name="openvpn_keepalive" value="<?php echo htmlspecialchars($arrServerConfig['keepalive'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                         <label for="code">Server log</label>
                         <input type="text" class="form-control" name="openvpn_status" placeholder="<?php echo htmlspecialchars($arrServerConfig['status'], ENT_QUOTES); ?>" disabled="disabled" />
                         </div>
@@ -388,12 +388,13 @@ function DisplayOpenVPNConfig()
                 }
                 ?>
                 </form>
-        </div><!-- /.panel-body -->
-    </div><!-- /.panel-primary -->
-    <div class="panel-footer"> Information provided by openvpn</div>
+            </div>
+        </div><!-- /.card-body -->
+    <div class="card-footer"> Information provided by openvpn</div>
+  </div><!-- /.card -->
 </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
-    <?php
+<?php
 }
 
 /**
@@ -425,15 +426,13 @@ function DisplayTorProxyConfig()
     ?>
     <div class="row">
     <div class="col-lg-12">
-        <div class="panel panel-primary">
-            <div class="panel-heading"><i class="fa fa-eye-slash fa-fw"></i> Configure TOR proxy</div>
-        <!-- /.panel-heading -->
-        <div class="panel-body">
+      <div class="card"> 
+        <div class="card-header"><i class="fa fa-eye-slash fa-fw"></i> Configure TOR proxy</div>
+        <div class="card-body">
             <!-- Nav tabs -->
             <ul class="nav nav-tabs">
-                <li class="active"><a href="#basic" data-toggle="tab">Basic</a>
-                </li>
-                <li><a href="#relay" data-toggle="tab">Relay</a>
+                <li class="nav-item"><a class="nav-link active" href="#basic" data-toggle="tab">Basic</a></li>
+                <li class="nav-item"><a class="nav-link" href="#relay" data-toggle="tab">Relay</a>
                 </li>
             </ul>
 
@@ -441,42 +440,42 @@ function DisplayTorProxyConfig()
             <div class="tab-content">
                 <p><?php echo $status; ?></p>
 
-                <div class="tab-pane fade in active" id="basic">
+                <div class="tab-pane active" id="basic">
                     <h4>Basic settings</h4>
                     <form role="form" action="?page=save_hostapd_conf" method="POST">
                     <?php echo CSRFTokenFieldTag() ?>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">VirtualAddrNetwork</label>
                             <input type="text" class="form-control" name="virtualaddrnetwork" value="<?php echo htmlspecialchars($arrConfig['VirtualAddrNetwork'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">AutomapHostsSuffixes</label>
                             <input type="text" class="form-control" name="automaphostssuffixes" value="<?php echo htmlspecialchars($arrConfig['AutomapHostsSuffixes'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">AutomapHostsOnResolve</label>
                             <input type="text" class="form-control" name="automaphostsonresolve" value="<?php echo htmlspecialchars($arrConfig['AutomapHostsOnResolve'], ENT_QUOTES); ?>" />
                         </div>
                     </div>  
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">TransListenAddress</label>
                             <input type="text" class="form-control" name="translistenaddress" value="<?php echo htmlspecialchars($arrConfig['TransListenAddress'], ENT_QUOTES); ?>" />
                         </div>
                     </div>  
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">DNSPort</label>
                             <input type="text" class="form-control" name="dnsport" value="<?php echo htmlspecialchars($arrConfig['DNSPort'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">DNSListenAddress</label>
                             <input type="text" class="form-control" name="dnslistenaddress" value="<?php echo htmlspecialchars($arrConfig['DNSListenAddress'], ENT_QUOTES); ?>" />
                         </div>
@@ -485,37 +484,37 @@ function DisplayTorProxyConfig()
                 <div class="tab-pane fade" id="relay">
                     <h4>Relay settings</h4>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">ORPort</label>
                             <input type="text" class="form-control" name="orport" value="<?php echo htmlspecialchars($arrConfig['ORPort'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">ORListenAddress</label>
                             <input type="text" class="form-control" name="orlistenaddress" value="<?php echo htmlspecialchars($arrConfig['ORListenAddress'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">Nickname</label>
                             <input type="text" class="form-control" name="nickname" value="<?php echo htmlspecialchars($arrConfig['Nickname'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">Address</label>
                             <input type="text" class="form-control" name="address" value="<?php echo htmlspecialchars($arrConfig['Address'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">RelayBandwidthRate</label>
                             <input type="text" class="form-control" name="relaybandwidthrate" value="<?php echo htmlspecialchars($arrConfig['RelayBandwidthRate'], ENT_QUOTES); ?>" />
                         </div>
                     </div>
                     <div class="row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="code">RelayBandwidthBurst</label>
                             <input type="text" class="form-control" name="relaybandwidthburst" value="<?php echo htmlspecialchars($arrConfig['RelayBandwidthBurst'], ENT_QUOTES); ?>" />
                         </div>
@@ -532,9 +531,8 @@ function DisplayTorProxyConfig()
                 ?>
                 </form>
             </div><!-- /.tab-content -->
-        </div><!-- /.panel-body -->
-        <div class="panel-footer"> Information provided by tor</div>
-    </div><!-- /.panel-primary -->
+        </div><!-- /.card-body -->
+        <div class="card-footer"> Information provided by tor</div>
 </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
     <?php