Work in progress: WG server config panels

app/js/custom.js

@@ -307,7 +307,6 @@ $('#ovpn-confirm-activate').on('shown.bs.modal', function (e) {
 });
 
 $('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
-//    e.stopPropagation();
     if (this.id == 'ovpn-userpw') {
         $('#PanelCerts').hide();
         $('#PanelUserPW').show();
@@ -317,6 +316,16 @@ $('#ovpn-userpw,#ovpn-certs').on('click', function (e) {
     }
 });
 
+$('#wg-upload,#wg-manual').on('click', function (e) {
+    if (this.id == 'wg-upload') {
+        $('#PanelManual').hide();
+        $('#PanelUpload').show();
+    } else if (this.id == 'wg-manual') {
+        $('#PanelUpload').hide();
+        $('#PanelManual').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();

templates/wg/general.php

@@ -9,15 +9,30 @@
           <label class="custom-control-label" for="server_enabled"><?php echo _("Enable server") ?></label>
         </div>
         <p id="wg-description">
-          <small><?php echo _("Enable this option to encrypt traffic by creating a tunnel between RaspAP and configured peers.") ?></small>
+          <small><?php echo _("Enable this option to secure network traffic by creating an encrypted tunnel between RaspAP and configured peers.") ?></small>
-          <small><?php echo _("This option adds <code>wg0.conf</code> to the WireGuard configuration.") ?></small>
         </p>
         </div>
-
+        <h5><?php echo _("Configuration Method"); ?></h5>
-        <div class="row">
+        <div class="col-sm-12 mt-2 mb-2 form-check">
-          <div class="col-xs-3 col-sm-6">
+          <input class="form-check-input" id="wg-manual" name="sel1" value="manual" data-toggle="" data-parent="#serversettings" data-target="#wgManual" type="radio" checked>
-            <label for="code"><?php echo _("Local public key"); ?></label>
+          <label class="form-check-label"><?php echo _("Manual settings"); ?></label>
         </div>
+        <div class="col-sm-12 mt-2 mb-2 form-check">
+          <input class="form-check-input" id="wg-upload" name="sel1" value="upload" data-toggle="" data-parent="#serversettings" data-target="#wgUpload" type="radio">
+          <label class="form-check-label"><?php echo _("Upload <code>wg0.conf</code> file"); ?></label>
+        </div>
+
+        <div class="col-sm-12 ml-2">
+          <div class="panel-group" id="serversettings">
+            <div class="panel panel-default panel-collapse" id="PanelManual">
+              <div class="panel-heading">
+                <h5 class="panel-title"><?php echo _("Create a local WireGuard config"); ?></h5>
+                <p id="wg-description">
+                  <small><?php echo _("This option generates a new <code>wg0.conf</code> WireGuard configuration on this device.") ?></small>
+                </p>
+              </div>
+              <div class="panel-body">
+                <label for="code"><?php echo _("Local public key"); ?></label>
                 <div class="input-group col-md-12 mb-3">
                   <input type="text" class="form-control" name="wg-server" id="wg-srvpubkey" value="<?php echo htmlspecialchars($wg_srvpubkey, ENT_QUOTES); ?>" />
                   <div class="input-group-append">
@@ -27,29 +42,44 @@
                 </div>
               </div>
 
-        <div class="row">
               <div class="form-group col-xs-3 col-sm-3">
                 <label for="code"><?php echo _("Local Port"); ?></label>
                 <input type="text" class="form-control" name="wg_srvport" value="<?php echo htmlspecialchars($wg_srvport, ENT_QUOTES); ?>" />
               </div>
-        </div>
 
-        <div class="row">
               <div class="form-group col-md-6">
                 <label for="code"><?php echo _("IP Address"); ?></label>
                 <input type="text" class="form-control" name="wg_srvipaddress" value="<?php echo htmlspecialchars($wg_srvipaddress, ENT_QUOTES); ?>" />
               </div>
-        </div>
 
-        <div class="row">
               <div class="form-group col-md-6">
                 <label for="code"><?php echo _("DNS"); ?></label>
                 <input type="text" class="form-control" name="wg_srvdns" value="<?php echo htmlspecialchars($wg_srvdns, ENT_QUOTES); ?>" />
               </div>
+            </div><!-- /.panel-body -->
+          </div><!-- /.panel -->
+
+          <div class="panel panel-default panel-collapse" id="PanelUpload">
+            <div class="panel-heading">
+              <h5 class="panel-title"><?php echo _("Upload a WireGuard config"); ?></h5>
+              <p id="wg-description">
+                <small><?php echo _("This option uploads an existing WireGuard <code>.conf</code> file to this device.") ?></small>
+              </p>
+            </div>
+            <div class="panel-body">
+              <div class="form-group">
+                <h5 class="panel-title"><?php echo _("Configuration File"); ?></h4>
+                <div class="custom-file">
+                 <input type="file" class="custom-file-input" name="wgFile" id="wgFile">
+                 <label class="custom-file-label" for="customFile"><?php echo _("Select WireGuard configuration file (.conf)"); ?></label>
+               </div>
+             </div>
+           </div><!-- /.panel-body -->
+          </div><!-- /.panel -->
+        </div><!-- /.panel-group -->
+      </div><!-- /.col -->
     </div>
 
-    </div>
-  </div><!-- /.row -->
 </div><!-- /.tab-pane | settings tab -->