Add certificate option to openvpn GUI

add JS code to display options and selected ovpn file

app/js/custom.js

@@ -281,6 +281,22 @@ $('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
     $('.btn-activate', this).data('recordId', data.recordId);
 });
 
+$('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
+//    e.stopPropagation();
+    if (this.id == 'ovpn-userpw') {
+        $('#PanelCerts').hide();
+        $('#PanelUserPW').show();
+    } else if (this.id == 'ovpn-certs') {
+        $('#PanelUserPW').hide();
+        $('#PanelCerts').show();
+    }
+});
+
+// Add the following code if you want the name of the file appear on select
+$(".custom-file-input").on("change", function() {
+  var fileName = $(this).val().split("\\").pop();
+  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
+});
 
 /*
 Sets the wirelss channel select options based on hw_mode and country_code.

includes/openvpn.php

@@ -53,7 +53,7 @@ function DisplayOpenVPNConfig()
         $authUser = current($auth);
         $authPassword = next($auth);
     }
-    $clients = preg_grep('~\login.(conf)$~', scandir(pathinfo(RASPI_OPENVPN_CLIENT_LOGIN, PATHINFO_DIRNAME)));
+    $clients = preg_grep('/client.(conf)$/', scandir(pathinfo(RASPI_OPENVPN_CLIENT_CONFIG, PATHINFO_DIRNAME)));
 
     $logEnable = 0;
     if (!empty($_POST) && !isset($_POST['log-openvpn'])) {

templates/openvpn/configs.php

@@ -8,11 +8,11 @@
         </p>
         <div class="openvpn-configs js-openvpn-configs-container">
           <?php foreach ($clients as $client) :
-                if ($client == "login.conf") {
-                    $label = file_get_meta(RASPI_OPENVPN_CLIENT_LOGIN,'#\sfilename\s(.*)');
+                if ($client == "client.conf") {
+                    $label = file_get_meta(RASPI_OPENVPN_CLIENT_CONFIG,'#\sfilename\s(.*)');
                     $btn_class = "active";
                 } else {
-                    $label = trim(pathinfo($client, PATHINFO_FILENAME), "_login");
+                    $label = preg_replace('/_client$/','',pathinfo($client, PATHINFO_FILENAME));
                     $client = $label;
                     $btn_class = "disabled";
                 }?>

templates/openvpn/general.php

@@ -1,35 +1,66 @@
 <div class="tab-pane active" id="openvpnclient">
   <h4 class="mt-3"><?php echo _("Client settings"); ?></h4>
   <div class="row">
-    <div class="col">
-      <div class="row">
-        <div class="col-lg-12 mt-2 mb-2">
-          <div class="info-item"><?php echo _("IPv4 Address"); ?></div>
-          <div class="info-item"><?php echo htmlspecialchars($public_ip, ENT_QUOTES); ?><a class="text-gray-500" href="https://ipapi.co/<?php echo($public_ip); ?>" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt ml-2"></i></a></div>
-        </div>
+    <div class="col-lg-8">
+      <div class="row mb-2">
+         <div class="col-lg-12 mt-2 mb-2">
+            <div class="info-item"><?php echo _("IPv4 Address"); ?></div>
+            <div class="info-item"><?php echo htmlspecialchars($public_ip, ENT_QUOTES); ?><a class="text-gray-500" href="https://ipapi.co/<?php echo($public_ip); ?>" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link-alt ml-2"></i></a></div>
+         </div>
       </div>
-      <div class="row">
-       <div class="form-group col-lg-12">
-        <label for="code"><?php echo _("Username"); ?></label>
-          <input type="text" class="form-control" name="authUser" value="<?php echo htmlspecialchars($authUser, ENT_QUOTES); ?>" />
-        </div>
+      <form> 
+      <h5><?php echo _("Authentification Method"); ?></h5>
+      <div class="col-sm-12 mt-2 mb-2 form-check">
+          <input class="form-check-input" id="ovpn-userpw" name="sel1" value="userpw" data-toggle="" data-parent="#clientsettings" data-target="#UserPW" type="radio" checked>
+          <label class="form-check-label">User name and password</label>
       </div>
-      <div class="row">
-        <div class="form-group col-lg-12">
-          <label for="code"><?php echo _("Password"); ?></label>
-          <input type="password" class="form-control" name="authPassword" value="<?php echo htmlspecialchars($authPassword, ENT_QUOTES); ?>" />
-        </div>
+      <div class="col-sm-12 mt-2 mb-2 form-check">
+          <input class="form-check-input" id="ovpn-certs" name="sel1" value="certs" data-toggle="" data-parent="#clientsettings" data-target="#Certs" type="radio">
+          <label class="form-check-label">Certificates</label>
       </div>
-      <div class="row">
-        <div class="form-group col-lg-12">
-          <div class="custom-file">
-            <input type="file" class="custom-file-input" name="customFile" id="customFile">
-            <label class="custom-file-label" for="customFile"><?php echo _("Select OpenVPN configuration file (.ovpn)"); ?></label>
-          </div>
-        </div>
-      </div>
-    </div><!-- col-->
-    <div class="col-sm">
+      <div class="col-sm-12 ml-2">
+         <div class="panel-group" id="clientsettings">
+           <div class="panel panel-default panel-collapse" id="PanelUserPW" >
+             <div class="panel-heading">
+               <h5 class="panel-title">Enter username and password</h5>
+             </div>
+             <div class="panel-body">
+                <div class="form-group col-lg-12">
+                  <label for="code"><?php echo _("Username"); ?></label>
+                  <input type="text" class="form-control" name="authUser" value="<?php echo htmlspecialchars($authUser, ENT_QUOTES); ?>" />
+                </div>
+                <div class="form-group col-lg-12">
+                  <label for="code"><?php echo _("Password"); ?></label>
+                  <input type="password" class="form-control" name="authPassword" value="<?php echo htmlspecialchars($authPassword, ENT_QUOTES); ?>" />
+                </div>
+             </div>
+           </div> <!-- panel -->
+           <div class="panel panel-default panel-collapse collapse in" id="PanelCerts" >
+              <div class="panel-body">
+                    <h5 class="panel-title">Certificates in the configuration file</h5>
+                    <p> RaspAP does not support the import of the required cerficates. Please paste them into the configuration file
+                      <ul>
+                        <li>Signing certification authority (CA) certificate (e.g. <code>ca.crt</code>): enclosed in <code>&lt;ca> ... &lt;/ca></code> tags </li>
+                        <li>Client certificate (public key) (e.g. <code>client.crt</code>): enclosed in <code>&lt;cert> ... &lt;/cert></code> tags </li>
+                        <li>Private key of the client certificate (e.g. <code>client.key</code>): enclosed in <code>&lt;key> ... &lt;/key></code> tags </li>
+                      </ul>
+                    </p>
+              </div>
+           </div> <!-- panel -->
+         </div> <!-- panel-group -->
+      </div> <!-- col -->
+      <div class="col-sm-12 ">
+         <div class="form-group">
+            <h5 class="panel-title">Configuration File</h4>
+            <div class="custom-file">
+             <input type="file" class="custom-file-input" name="customFile" id="customFile">
+             <label class="custom-file-label" for="customFile"><?php echo _("Select OpenVPN configuration file (.ovpn)"); ?></label>
+           </div>
+         </div>
+      </div> <!-- col -->
+      </form> 
+    </div><!-- col-8 -->
+    <div class="col-sm-auto">
         <a href="https://go.nordvpn.net/aff_c?offer_id=15&aff_id=36402&url_id=902"><img src="app/img/no-trace-200x200.png" class="float-left mb-3 mt-3"></a>
     </div>
   </div><!-- /.row -->