From 40ca0a8a3a9db9f0e296c3fd517f9a169f7f4cb3 Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Wed, 29 Jun 2016 20:21:47 +0200
Subject: [PATCH] cleanup js, style fixes in vpn_openvpn_server.php for
 https://github.com/opnsense/core/issues/1005

---
 src/www/vpn_openvpn_server.php | 604 +++++++++++++--------------------
 1 file changed, 227 insertions(+), 377 deletions(-)
diff --git a/src/www/vpn_openvpn_server.php b/src/www/vpn_openvpn_server.php
index ea00b09a7..a923b9c48 100644
--- a/src/www/vpn_openvpn_server.php
+++ b/src/www/vpn_openvpn_server.php
@@ -423,7 +423,6 @@ legacy_html_escape_form_data($pconfig);
 <body>
 <?php include("fbegin.inc"); ?>
 <script type="text/javascript">
-//<![CDATA[
 $( document ).ready(function() {
   // watch scroll position and set to last known on page load
   watchScrollPosition();
@@ -458,262 +457,121 @@ $( document ).ready(function() {
       });
   });
 
-  // init form (old stuff)
-  if (document.iform != undefined) {
-    mode_change();
-    autokey_change();
-    tlsauth_change();
-    gwredir_change();
-    dns_domain_change();
-    dns_server_change();
-    wins_server_change();
-    client_mgmt_port_change();
-    ntp_server_change();
-    netbios_change();
-    tuntap_change();
+  // input form events
+  if ($("#iform").length) {
+      $("#mode,#gwredir").change(function(){
+          $(".opt_mode").hide();
+          $(".opt_mode_"+$("#mode").val()).show();
+          if ($("#gwredir").is(":checked")) {
+              $(".opt_gwredir").hide();
+          }
+          $("#dev_mode").change();
+      });
+      $("#mode").change();
+
+      $("#dev_mode,#serverbridge_dhcp").change(function(){
+          $(".dev_mode").hide();
+          $(".dev_mode_"+$("#dev_mode").val()).show();
+          if ($("#mode").val().indexOf('p2p_tls') == 0) {
+              $("#serverbridge_dhcp").prop('disabled', true);
+          } else {
+              $("#serverbridge_dhcp").prop('disabled', false);
+          }
+
+          if ($("#mode").val().indexOf('p2p_tls') == 0 || $("#serverbridge_dhcp").is(':checked') == false) {
+              $("#serverbridge_interface").prop('disabled', true);
+              $("#serverbridge_dhcp_start").prop('disabled', true);
+              $("#serverbridge_dhcp_end").prop('disabled', true);
+          } else {
+              $("#serverbridge_interface").prop('disabled', false);
+              $("#serverbridge_dhcp_start").prop('disabled', false);
+              $("#serverbridge_dhcp_end").prop('disabled', false);
+          }
+      });
+      $("#dev_mode").change();
+
+      $("#autokey_enable").change(function(){
+          if ($("#autokey_enable").is(':checked')) {
+              $("#autokey_opts").hide();
+          } else {
+              $("#autokey_opts").show();
+          }
+      });
+      $("#autokey_enable").change();
+
+      $("#tlsauth_enable,#autotls_enable").change(function(){
+          if ($("#autotls_enable").is(':checked') || !$("#tlsauth_enable").is(':checked')) {
+              $("#tls").parent().hide();
+          } else {
+              $("#tls").parent().show();
+          }
+          if ($("#tlsauth_enable").is(':checked')) {
+              $("#autotls_enable").parent().show();
+          } else {
+              $("#autotls_enable").parent().hide();
+          }
+      });
+      $("#tlsauth_enable").change();
+
+      $("#dns_domain_enable").change(function(){
+          if ($("#dns_domain_enable").is(':checked')) {
+              $("#dns_domain_data").show();
+          } else {
+              $("#dns_domain_data").hide();
+          }
+      });
+      $("#dns_domain_enable").change();
+
+      $("#dns_server_enable").change(function(){
+          if ($("#dns_server_enable").is(':checked')) {
+              $("#dns_server_data").show();
+          } else {
+              $("#dns_server_data").hide();
+          }
+      });
+      $("#dns_server_enable").change();
+
+      $("#wins_server_enable").change(function(){
+          if ($("#wins_server_enable").is(':checked')) {
+              $("#wins_server_data").show();
+          } else {
+              $("#wins_server_data").hide();
+          }
+      });
+      $("#wins_server_enable").change();
+
+      $("#netbios_enable").change(function(){
+          if ($("#netbios_enable").is(':checked')) {
+              $("#wins_opts").show();
+              $("#netbios_data").show();
+          } else {
+              $("#wins_opts").hide();
+              $("#netbios_data").hide();
+          }
+      });
+      $("#netbios_enable").change();
+
+      $("#ntp_server_enable").change(function(){
+          if ($("#ntp_server_enable").is(':checked')) {
+              $("#ntp_server_data").show();
+          } else {
+              $("#ntp_server_data").hide();
+          }
+      });
+      $("#ntp_server_enable").change();
+
+      $("#client_mgmt_port_enable").change(function(){
+          if ($("#client_mgmt_port_enable").is(':checked')) {
+              $("#client_mgmt_port_data").show();
+          } else {
+              $("#client_mgmt_port_data").hide();
+          }
+      });
+      $("#client_mgmt_port_enable").change();
+
   }
 
 });
-
-function mode_change() {
-  index = document.iform.mode.selectedIndex;
-  value = document.iform.mode.options[index].value;
-  switch(value) {
-    case "p2p_tls":
-    case "server_tls":
-    case "server_user":
-      document.getElementById("tls").style.display="";
-      document.getElementById("tls_ca").style.display="";
-      document.getElementById("tls_crl").style.display="";
-      document.getElementById("tls_cert").style.display="";
-      document.getElementById("tls_dh").style.display="";
-      document.getElementById("cert_depth").style.display="";
-      document.getElementById("strictusercn").style.display="none";
-      document.getElementById("psk").style.display="none";
-      break;
-    case "server_tls_user":
-      document.getElementById("tls").style.display="";
-      document.getElementById("tls_ca").style.display="";
-      document.getElementById("tls_crl").style.display="";
-      document.getElementById("tls_cert").style.display="";
-      document.getElementById("tls_dh").style.display="";
-      document.getElementById("cert_depth").style.display="";
-      document.getElementById("strictusercn").style.display="";
-      document.getElementById("psk").style.display="none";
-      break;
-    case "p2p_shared_key":
-      document.getElementById("tls").style.display="none";
-      document.getElementById("tls_ca").style.display="none";
-      document.getElementById("tls_crl").style.display="none";
-      document.getElementById("tls_cert").style.display="none";
-      document.getElementById("tls_dh").style.display="none";
-      document.getElementById("cert_depth").style.display="none";
-      document.getElementById("strictusercn").style.display="none";
-      document.getElementById("psk").style.display="";
-      break;
-  }
-  switch(value) {
-    case "p2p_shared_key":
-      document.getElementById("remote_optsv4").style.display="";
-      document.getElementById("remote_optsv6").style.display="";
-      document.getElementById("gwredir_opts").style.display="none";
-      document.getElementById("local_optsv4").style.display="none";
-      document.getElementById("local_optsv6").style.display="none";
-      document.getElementById("authmodetr").style.display="none";
-      document.getElementById("inter_client_communication").style.display="none";
-      break;
-    case "p2p_tls":
-      document.getElementById("remote_optsv4").style.display="";
-      document.getElementById("remote_optsv6").style.display="";
-      document.getElementById("gwredir_opts").style.display="";
-      document.getElementById("local_optsv4").style.display="";
-      document.getElementById("local_optsv6").style.display="";
-      document.getElementById("authmodetr").style.display="none";
-      document.getElementById("inter_client_communication").style.display="none";
-      break;
-    case "server_user":
-                case "server_tls_user":
-      document.getElementById("authmodetr").style.display="";
-      document.getElementById("remote_optsv4").style.display="none";
-      document.getElementById("remote_optsv6").style.display="none";
-      document.getElementById("gwredir_opts").style.display="";
-      document.getElementById("local_optsv4").style.display="";
-      document.getElementById("local_optsv6").style.display="";
-      document.getElementById("inter_client_communication").style.display="";
-      break;
-    case "server_tls":
-      document.getElementById("authmodetr").style.display="none";
-    default:
-      document.getElementById("remote_optsv4").style.display="none";
-      document.getElementById("remote_optsv6").style.display="none";
-      document.getElementById("gwredir_opts").style.display="";
-      document.getElementById("local_optsv4").style.display="";
-      document.getElementById("local_optsv6").style.display="";
-      document.getElementById("inter_client_communication").style.display="";
-      break;
-  }
-  gwredir_change();
-}
-
-function autokey_change() {
-
-  if ((document.iform.autokey_enable != null) && (document.iform.autokey_enable.checked))
-    document.getElementById("autokey_opts").style.display="none";
-  else
-    document.getElementById("autokey_opts").style.display="";
-}
-
-function tlsauth_change() {
-
-<?php if (empty($pconfig['tls'])) :
-?>
-  if (document.iform.tlsauth_enable.checked)
-    document.getElementById("tlsauth_opts").style.display="";
-  else
-    document.getElementById("tlsauth_opts").style.display="none";
-<?php
-endif; ?>
-
-  autotls_change();
-}
-
-function autotls_change() {
-
-<?php if (empty($pconfig['tls'])) :
-?>
-  autocheck = document.iform.autotls_enable.checked;
-<?php
-else :
-?>
-  autocheck = false;
-<?php
-endif; ?>
-
-  if (document.iform.tlsauth_enable.checked && !autocheck)
-    document.getElementById("autotls_opts").style.display="";
-  else
-    document.getElementById("autotls_opts").style.display="none";
-}
-
-function gwredir_change() {
-
-  if (document.iform.gwredir.checked) {
-    document.getElementById("local_optsv4").style.display="none";
-    document.getElementById("local_optsv6").style.display="none";
-  } else {
-    document.getElementById("local_optsv4").style.display="";
-    document.getElementById("local_optsv6").style.display="";
-  }
-}
-
-function dns_domain_change() {
-
-  if (document.iform.dns_domain_enable.checked)
-    document.getElementById("dns_domain_data").style.display="";
-  else
-    document.getElementById("dns_domain_data").style.display="none";
-}
-
-function dns_server_change() {
-
-  if (document.iform.dns_server_enable.checked)
-    document.getElementById("dns_server_data").style.display="";
-  else
-    document.getElementById("dns_server_data").style.display="none";
-}
-
-function wins_server_change() {
-
-  if (document.iform.wins_server_enable.checked)
-    document.getElementById("wins_server_data").style.display="";
-  else
-    document.getElementById("wins_server_data").style.display="none";
-}
-
-function client_mgmt_port_change() {
-
-  if (document.iform.client_mgmt_port_enable.checked)
-    document.getElementById("client_mgmt_port_data").style.display="";
-  else
-    document.getElementById("client_mgmt_port_data").style.display="none";
-}
-
-function ntp_server_change() {
-
-  if (document.iform.ntp_server_enable.checked)
-    document.getElementById("ntp_server_data").style.display="";
-  else
-    document.getElementById("ntp_server_data").style.display="none";
-}
-
-function netbios_change() {
-
-  if (document.iform.netbios_enable.checked) {
-    document.getElementById("netbios_data").style.display="";
-    document.getElementById("wins_opts").style.display="";
-  } else {
-    document.getElementById("netbios_data").style.display="none";
-    document.getElementById("wins_opts").style.display="none";
-  }
-}
-
-function tuntap_change() {
-
-  mindex = document.iform.mode.selectedIndex;
-  mvalue = document.iform.mode.options[mindex].value;
-
-  switch(mvalue) {
-    case "p2p_tls":
-    case "p2p_shared_key":
-      p2p = true;
-      break;
-    default:
-      p2p = false;
-      break;
-  }
-
-  index = document.iform.dev_mode.selectedIndex;
-  value = document.iform.dev_mode.options[index].value;
-  switch(value) {
-    case "tun":
-      document.getElementById("chkboxNoTunIPv6").style.display="";
-      document.getElementById("ipv4_tunnel_network").className="vncellreq";
-      document.getElementById("serverbridge_dhcp").style.display="none";
-      document.getElementById("serverbridge_interface").style.display="none";
-      document.getElementById("serverbridge_dhcp_start").style.display="none";
-      document.getElementById("serverbridge_dhcp_end").style.display="none";
-      document.getElementById("topology_subnet_opt").style.display="";
-      break;
-    case "tap":
-      document.getElementById("chkboxNoTunIPv6").style.display="none";
-      document.getElementById("ipv4_tunnel_network").className="vncell";
-      if (!p2p) {
-        document.getElementById("serverbridge_dhcp").style.display="";
-        document.getElementById("serverbridge_interface").style.display="";
-        document.getElementById("serverbridge_dhcp_start").style.display="";
-        document.getElementById("serverbridge_dhcp_end").style.display="";
-        document.getElementById("topology_subnet_opt").style.display="none";
-        document.iform.serverbridge_dhcp.disabled = false;
-        if (document.iform.serverbridge_dhcp.checked) {
-          document.iform.serverbridge_interface.disabled = false;
-          document.iform.serverbridge_dhcp_start.disabled = false;
-          document.iform.serverbridge_dhcp_end.disabled = false;
-        } else {
-          document.iform.serverbridge_interface.disabled = true;
-          document.iform.serverbridge_dhcp_start.disabled = true;
-          document.iform.serverbridge_dhcp_end.disabled = true;
-        }
-      } else {
-        document.getElementById("topology_subnet_opt").style.display="none";
-        document.iform.serverbridge_dhcp.disabled = true;
-        document.iform.serverbridge_interface.disabled = true;
-        document.iform.serverbridge_dhcp_start.disabled = true;
-        document.iform.serverbridge_dhcp_end.disabled = true;
-      }
-      break;
-  }
-}
-//]]>
 </script>
 
   <section class="page-content-main">
@@ -726,15 +584,15 @@ function tuntap_change() {
         if (isset($savemsg)) {
             print_info_box($savemsg);
         }?>
-        <section class="col-xs-12">
-          <div class="tab-content content-box col-xs-12">
 <?php
           if ($act=="new" || $act=="edit") :?>
-              <form method="post" name="iform" id="iform">
+          <form method="post" name="iform" id="iform">
+            <section class="col-xs-12">
+              <div class="tab-content content-box col-xs-12">
                 <div class="table-responsive">
                   <table class="table table-striped opnsense_standard_table_form">
                     <tr>
-                      <td width="22%"><?=gettext("General information"); ?></td>
+                      <td width="22%"><strong><?=gettext("General information"); ?></strong></td>
                       <td width="78%" align="right">
                         <small><?=gettext("full help"); ?> </small>
                         <i class="fa fa-toggle-off text-danger"  style="cursor: pointer;" id="show_all_help_page" type="button"></i>
@@ -757,7 +615,7 @@ function tuntap_change() {
                     <tr>
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Server Mode");?></td>
                         <td>
-                        <select name='mode' id='mode' class="form-control" onchange='mode_change(); tuntap_change()'>
+                        <select name='mode' id="mode" class="form-control">
 <?php
                       $openvpn_server_modes = array(
                         'p2p_tls' => gettext("Peer to Peer ( SSL/TLS )"),
@@ -776,7 +634,7 @@ function tuntap_change() {
                         </select>
                       </td>
                     </tr>
-                    <tr id="authmodetr" style="display:none">
+                    <tr class="opt_mode opt_mode_server_user opt_mode_server_tls_user" style="display:none">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Backend for authentication");?></td>
                       <td>
                         <select name='authmode[]' id='authmode' class="form-control" multiple="multiple" size="5">
@@ -817,7 +675,7 @@ function tuntap_change() {
                     <tr>
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Device Mode"); ?></td>
                       <td>
-                        <select name="dev_mode" class="form-control" onchange='tuntap_change()'>
+                        <select name="dev_mode" id="dev_mode" class="form-control">
 <?php
                         foreach (array("tun", "tap") as $device) :
                                $selected = "";
@@ -891,54 +749,39 @@ function tuntap_change() {
                         </div>
                       </td>
                     </tr>
+                  </table>
+                </div>
+              </div>
+            </section>
+            <section class="col-xs-12">
+              <div class="tab-content content-box col-xs-12">
+                <div class="table-responsive">
+                  <table class="table table-striped opnsense_standard_table_form">
                     <tr>
-                      <td colspan="2" height="12"></td>
+                      <td colspan="2"><strong><?=gettext("Cryptographic Settings"); ?></strong></td>
                     </tr>
-                    <tr>
-                      <td colspan="2"><?=gettext("Cryptographic Settings"); ?></td>
-                    </tr>
-                    <tr id="tls">
-                      <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("TLS Authentication"); ?></td>
-                      <td>
-                        <table border="0" cellpadding="2" cellspacing="0" summary="tls authentication">
-                          <tr>
-                            <td>
-                              <input name="tlsauth_enable" id="tlsauth_enable" type="checkbox" value="yes" <?=!empty($pconfig['tlsauth_enable']) ? "checked=\"checked\"" : "" ;?> onclick="tlsauth_change()" />
-                            </td>
-                            <td>
-                              <span>
-                                <?=gettext("Enable authentication of TLS packets"); ?>.
-                              </span>
-                            </td>
-                          </tr>
-                        </table>
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
+                      <td width="22%"><i class="fa fa-info-circle text-muted"></i> <?=gettext("TLS Authentication"); ?></td>
+                      <td width="78%">
+                        <div>
+                          <input name="tlsauth_enable" id="tlsauth_enable" type="checkbox" value="yes" <?=!empty($pconfig['tlsauth_enable']) ? "checked=\"checked\"" : "" ;?>/>
+                          <?=gettext("Enable authentication of TLS packets"); ?>.
+                        </div>
                         <?php if (!$pconfig['tls']) :
 ?>
-                        <table border="0" cellpadding="2" cellspacing="0" id="tlsauth_opts" summary="tls authentication options">
-                          <tr>
-                            <td>
-                              <input name="autotls_enable" id="autotls_enable" type="checkbox" value="yes" <?=!empty($pconfig['autotls_enable']) ? "checked=\"checked\"" : "" ;?> onclick="autotls_change()" />
-                            </td>
-                            <td>
-                              <span>
-                                <?=gettext("Automatically generate a shared TLS authentication key"); ?>.
-                              </span>
-                            </td>
-                          </tr>
-                        </table>
+                        <div>
+                          <input name="autotls_enable" id="autotls_enable" type="checkbox" value="yes" <?=!empty($pconfig['autotls_enable']) ? "checked=\"checked\"" : "" ;?>  />
+                          <?=gettext("Automatically generate a shared TLS authentication key"); ?>.
+                         </div>
                         <?php
 endif; ?>
-                        <table border="0" cellpadding="2" cellspacing="0" id="autotls_opts" summary="tls authentication key">
-                          <tr>
-                            <td>
-                              <textarea name="tls" cols="65" rows="7" class="formpre"><?=$pconfig['tls'];?></textarea>
-                                <?=gettext("Paste your shared key here"); ?>.
-                            </td>
-                          </tr>
-                        </table>
+                        <div>
+                          <textarea id="tls" name="tls" cols="65" rows="7" class="formpre"><?=$pconfig['tls'];?></textarea>
+                          <?=gettext("Paste your shared key here"); ?>.
+                        </div>
                       </td>
                     </tr>
-                    <tr id="tls_ca">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Peer Certificate Authority"); ?></td>
                         <td>
 <?php
@@ -965,7 +808,7 @@ endif; ?>
                         endif; ?>
                       </td>
                     </tr>
-                    <tr id="tls_crl">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Peer Certificate Revocation List"); ?></td>
                       <td>
 <?php
@@ -999,7 +842,7 @@ endif; ?>
                         endif; ?>
                       </td>
                     </tr>
-                    <tr id="tls_cert">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Server Certificate"); ?></td>
                       <td>
 <?php
@@ -1041,7 +884,7 @@ endif; ?>
                       endif; ?>
                       </td>
                     </tr>
-                    <tr id="tls_dh">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("DH Parameters Length"); ?></td>
                       <td>
                         <select name="dh_length" class="form-control">
@@ -1061,33 +904,21 @@ endif; ?>
                         </span>
                       </td>
                     </tr>
-                    <tr id="psk">
+                    <tr class="opt_mode opt_mode_p2p_shared_key">
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Shared Key"); ?></td>
                       <td>
 <?php
                         if (empty($pconfig['shared_key'])) :?>
-                        <table border="0" cellpadding="2" cellspacing="0" summary="shared key">
-                          <tr>
-                            <td>
-                              <input name="autokey_enable" type="checkbox" value="yes"  <?=!empty($pconfig['autokey_enable']) ? "checked=\"checked\"" : "" ;?>  onclick="autokey_change()" />
-                            </td>
-                            <td>
-                              <span>
-                                <?=gettext("Automatically generate a shared key"); ?>.
-                              </span>
-                            </td>
-                          </tr>
-                        </table>
+                        <div>
+                          <input name="autokey_enable" id="autokey_enable" type="checkbox" value="yes"  <?=!empty($pconfig['autokey_enable']) ? "checked=\"checked\"" : "" ;?>  />
+                          <?=gettext("Automatically generate a shared key"); ?>.
+                        </div>
 <?php
                         endif; ?>
-                        <table border="0" cellpadding="2" cellspacing="0" id="autokey_opts" summary="shared key">
-                          <tr>
-                            <td>
-                              <textarea name="shared_key" cols="65" rows="7" class="formpre"><?=$pconfig['shared_key'];?></textarea>
-                                <?=gettext("Paste your shared key here"); ?>.
-                            </td>
-                          </tr>
-                        </table>
+                        <div id="autokey_opts">
+                          <textarea name="shared_key" cols="65" rows="7"><?=$pconfig['shared_key'];?></textarea>
+                          <?=gettext("Paste your shared key here"); ?>.
+                        </div>
                       </td>
                     </tr>
                     <tr>
@@ -1153,10 +984,10 @@ endif; ?>
                         </select>
                       </td>
                     </tr>
-                    <tr id="cert_depth">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td width="22%" ><a id="help_for_cert_depth" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Certificate Depth"); ?></td>
                       <td>
-                        <table border="0" cellpadding="2" cellspacing="0" summary="certificate depth">
+                        <table>
                         <tr><td>
                         <select name="cert_depth" class="form-control">
                           <option value=""><?=gettext('Do Not Check') ?></option>
@@ -1191,7 +1022,7 @@ endif; ?>
                         </table>
                       </td>
                     </tr>
-                    <tr id="strictusercn">
+                    <tr class="opt_mode opt_mode_server_tls_user">
                       <td width="22%" ><a id="help_for_strictusercn" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Strict User/CN Matching"); ?></td>
                       <td>
                         <input name="strictusercn" type="checkbox" value="yes" <?=!empty($pconfig['strictusercn']) ? "checked=\"checked\"" : "" ;?> />
@@ -1202,15 +1033,20 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
+                </table>
+              </div>
+            </div>
+          </section>
+          <section class="col-xs-12">
+            <div class="tab-content content-box col-xs-12">
+              <div class="table-responsive">
+                <table class="table table-striped opnsense_standard_table_form">
                     <tr>
-                      <td colspan="2" height="12"></td>
+                      <td colspan="2"><strong><?=gettext("Tunnel Settings"); ?></strong></td>
                     </tr>
                     <tr>
-                      <td colspan="2"><?=gettext("Tunnel Settings"); ?></td>
-                    </tr>
-                    <tr>
-                      <td id="ipv4_tunnel_network"><a id="help_for_tunnel_network" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("IPv4 Tunnel Network"); ?></td>
-                      <td>
+                      <td width="22%" id="ipv4_tunnel_network"><a id="help_for_tunnel_network" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("IPv4 Tunnel Network"); ?></td>
+                      <td witdh="78%">
                         <input name="tunnel_network" type="text" class="form-control unknown" size="20" value="<?=$pconfig['tunnel_network'];?>" />
                         <div class="hidden" for="help_for_tunnel_network">
                             <?=gettext("This is the IPv4 virtual network used for private " .
@@ -1238,10 +1074,10 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="serverbridge_dhcp">
+                    <tr class="dev_mode dev_mode_tap">
                       <td width="22%" ><a id="help_for_serverbridge_dhcp" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Bridge DHCP"); ?></td>
                       <td>
-                              <input name="serverbridge_dhcp" type="checkbox" value="yes" <?=!empty($pconfig['serverbridge_dhcp']) ? "checked=\"checked\"" : "" ;?> onchange="tuntap_change()" />
+                              <input id="serverbridge_dhcp" name="serverbridge_dhcp" type="checkbox" value="yes" <?=!empty($pconfig['serverbridge_dhcp']) ? "checked=\"checked\"" : "" ;?>/>
                               <div class="hidden" for="help_for_serverbridge_dhcp">
                                 <span>
                                     <?=gettext("Allow clients on the bridge to obtain DHCP."); ?><br />
@@ -1249,10 +1085,10 @@ endif; ?>
                               </div>
                       </td>
                     </tr>
-                    <tr id="serverbridge_interface">
+                    <tr class="dev_mode dev_mode_tap">
                       <td width="22%" ><a id="help_for_serverbridge_interface" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Bridge Interface"); ?></td>
                       <td>
-                        <select name="serverbridge_interface" class="form-control">
+                        <select id="serverbridge_interface" name="serverbridge_interface" class="form-control">
 <?php
                         $serverbridge_interface['none'] = "none";
                         $serverbridge_interface = array_merge($serverbridge_interface, get_configured_interface_with_descr());
@@ -1286,10 +1122,10 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="serverbridge_dhcp_start">
+                    <tr class="dev_mode dev_mode_tap">
                       <td width="22%" ><a id="help_for_serverbridge_dhcp_start" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Server Bridge DHCP Start"); ?></td>
                       <td>
-                        <input name="serverbridge_dhcp_start" type="text" class="form-control unknown" size="20" value="<?=$pconfig['serverbridge_dhcp_start'];?>" />
+                        <input  id="serverbridge_dhcp_start" name="serverbridge_dhcp_start" type="text" class="form-control unknown" size="20" value="<?=$pconfig['serverbridge_dhcp_start'];?>" />
                         <div class="hidden" for="help_for_serverbridge_dhcp_start">
                             <?=gettext("When using tap mode as a multi-point server, " .
                                                   "you may optionally supply a DHCP range to use on the " .
@@ -1300,17 +1136,16 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="serverbridge_dhcp_end">
+                    <tr class="dev_mode dev_mode_tap">
                       <td width="22%" ><i class="fa fa-info-circle text-muted"></i> <?=gettext("Server Bridge DHCP End"); ?></td>
                       <td>
-                        <input name="serverbridge_dhcp_end" type="text" class="form-control unknown" size="20" value="<?=$pconfig['serverbridge_dhcp_end'];?>" />
-                        <br />
+                        <input id="serverbridge_dhcp_end" name="serverbridge_dhcp_end" type="text" class="form-control unknown" size="20" value="<?=$pconfig['serverbridge_dhcp_end'];?>" />
                       </td>
                     </tr>
-                    <tr id="gwredir_opts">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td width="22%" ><a id="help_for_gwredir" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Redirect Gateway"); ?></td>
                       <td>
-                        <input name="gwredir" type="checkbox" value="yes" <?=!empty($pconfig['gwredir']) ? "checked=\"checked\"" : "" ;?> onclick="gwredir_change()" />
+                        <input name="gwredir" id="gwredir" type="checkbox" value="yes" <?=!empty($pconfig['gwredir']) ? "checked=\"checked\"" : "" ;?> />
                         <div class="hidden" for="help_for_gwredir">
                             <span>
                                 <?=gettext("Force all client generated traffic through the tunnel"); ?>.
@@ -1318,7 +1153,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="local_optsv4">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user opt_gwredir">
                       <td width="22%" ><a id="help_local_network" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("IPv4 Local Network/s"); ?></td>
                       <td>
                         <input name="local_network" type="text" class="form-control unknown" size="40" value="<?=$pconfig['local_network'];?>" />
@@ -1332,7 +1167,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="local_optsv6">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user opt_gwredir">
                       <td width="22%" ><a id="help_for_local_networkv6" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a><?=gettext("IPv6 Local Network/s"); ?></td>
                       <td>
                         <input name="local_networkv6" type="text" class="form-control unknown" size="40" value="<?=$pconfig['local_networkv6'];?>" />
@@ -1346,7 +1181,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="remote_optsv4">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_p2p_shared_key">
                       <td width="22%" ><a id="help_for_remote_network" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("IPv4 Remote Network/s"); ?></td>
                       <td>
                         <input name="remote_network" type="text" class="form-control unknown" size="40" value="<?=$pconfig['remote_network'];?>" />
@@ -1361,7 +1196,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="remote_optsv6">
+                    <tr class="opt_mode opt_mode_p2p_tls opt_mode_p2p_shared_key">
                       <td width="22%" ><a id="help_for_remote_networkv6" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("IPv6 Remote Network/s"); ?></td>
                       <td>
                         <input name="remote_networkv6" type="text" class="form-control unknown" size="40" value="<?=$pconfig['remote_networkv6'];?>" />
@@ -1377,7 +1212,7 @@ endif; ?>
                       </td>
                     </tr>
                     <tr>
-                      <td width="22%" ><a id="help_for_maxclients" href="#" class="showhelp"><a id="help_for_maxclients" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Concurrent connections");?></td>
+                      <td width="22%" ><a id="help_for_maxclients" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Concurrent connections");?></td>
                       <td>
                         <input name="maxclients" type="text" class="form-control unknown" size="5" value="<?=$pconfig['maxclients'];?>" />
                         <div class="hidden" for="help_for_maxclients">
@@ -1416,7 +1251,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="inter_client_communication">
+                    <tr class="opt_mode opt_mode_server_tls opt_mode_server_user opt_mode_server_tls_user">
                       <td width="22%" ><a id="help_for_client2client" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Inter-client communication"); ?></td>
                       <td>
                           <input name="client2client" type="checkbox" value="yes"  <?=!empty($pconfig['client2client']) ? "checked=\"checked\"" : "" ;?> />
@@ -1438,7 +1273,7 @@ endif; ?>
                             </div>
                       </td>
                     </tr>
-                    <tr id="chkboxNoTunIPv6">
+                    <tr class="dev_mode dev_mode_tun">
                       <td width="22%" ><a id="help_for_no_tun_ipv6" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Disable IPv6"); ?></td>
                       <td>
                         <input name="no_tun_ipv6" type="checkbox" value="yes" <?=!empty($pconfig['no_tun_ipv6']) ? "checked=\"checked\"" : "" ;?> />
@@ -1449,15 +1284,20 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
+                  </table>
+                </div>
+              </div>
+            </section>
+            <section class="col-xs-12">
+              <div class="tab-content content-box col-xs-12">
+                <div class="table-responsive">
+                  <table class="table table-striped opnsense_standard_table_form">
                     <tr>
-                      <td colspan="2" height="12"></td>
-                    </tr>
-                    <tr>
-                      <td colspan="2"><?=gettext("Client Settings"); ?></td>
+                      <td colspan="2"><strong><?=gettext("Client Settings"); ?></strong></td>
                     </tr>
                     <tr>
                       <td width="22%" ><a id="help_for_dynamic_ip" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Dynamic IP"); ?></td>
-                      <td>
+                      <td width="78%">
                         <input name="dynamic_ip" type="checkbox" id="dynamic_ip" value="yes" <?=!empty($pconfig['dynamic_ip']) ? "checked=\"checked\"" : "" ;?> />
                         <div class="hidden" for="help_for_dynamic_ip">
                           <span>
@@ -1477,7 +1317,7 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
-                    <tr id="topology_subnet_opt">
+                    <tr class="dev_mode dev_mode_tun" id="topology_subnet_opt">
                       <td width="22%" ><a id="help_for_topology_subnet" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Topology"); ?></td>
                       <td>
                         <input name="topology_subnet" type="checkbox" id="topology_subnet" value="yes"  <?=!empty($pconfig['topology_subnet']) ? "checked=\"checked\"" : "" ;?> />
@@ -1493,8 +1333,8 @@ endif; ?>
                     <tr>
                       <td width="22%" ><a id="help_for_dns_domain" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("DNS Default Domain"); ?></td>
                       <td>
-                        <input name="dns_domain_enable" type="checkbox" id="dns_domain_enable" value="yes" <?=!empty($pconfig['dns_domain']) ? "checked=\"checked\"" : "" ;?>  onclick="dns_domain_change()" />
-                        <div id="dns_domain_data" summary="dns domain data">
+                        <input name="dns_domain_enable" type="checkbox" id="dns_domain_enable" value="yes" <?=!empty($pconfig['dns_domain']) ? "checked=\"checked\"" : "" ;?> />
+                        <div id="dns_domain_data">
                               <input name="dns_domain" type="text" class="form-control unknown" id="dns_domain" size="30" value="<?=htmlspecialchars($pconfig['dns_domain']);?>" />
                         </div>
                         <div class="hidden" for="help_for_dns_domain">
@@ -1507,8 +1347,8 @@ endif; ?>
                     <tr>
                       <td width="22%" ><a id="help_for_dns_server" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("DNS Servers"); ?></td>
                       <td>
-                        <input name="dns_server_enable" type="checkbox" id="dns_server_enable" value="yes" <?=!empty($pconfig['dns_server1']) || !empty($pconfig['dns_server2']) || !empty($pconfig['dns_server3']) || !empty($pconfig['dns_server4']) ? "checked=\"checked\"" : "" ;?> onclick="dns_server_change()" />
-                        <div id="dns_server_data" summary="dns servers">
+                        <input name="dns_server_enable" type="checkbox" id="dns_server_enable" value="yes" <?=!empty($pconfig['dns_server1']) || !empty($pconfig['dns_server2']) || !empty($pconfig['dns_server3']) || !empty($pconfig['dns_server4']) ? "checked=\"checked\"" : "" ;?> />
+                        <div id="dns_server_data">
                               <span>
                                 <?=gettext("Server #1:"); ?>&nbsp;
                               </span>
@@ -1547,8 +1387,8 @@ endif; ?>
                     <tr>
                       <td width="22%" ><a id="help_for_ntp_server_enable" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("NTP Servers"); ?></td>
                       <td>
-                        <input name="ntp_server_enable" type="checkbox" id="ntp_server_enable" value="yes" <?=!empty($pconfig['ntp_server1']) || !empty($pconfig['ntp_server2']) ? "checked=\"checked\"" : "" ;?>  onclick="ntp_server_change()" />
-                        <div id="ntp_server_data" summary="ntp servers">
+                        <input name="ntp_server_enable" type="checkbox" id="ntp_server_enable" value="yes" <?=!empty($pconfig['ntp_server1']) || !empty($pconfig['ntp_server2']) ? "checked=\"checked\"" : "" ;?>  />
+                        <div id="ntp_server_data">
                           <span>
                             <?=gettext("Server #1:"); ?>&nbsp;
                           </span>
@@ -1568,14 +1408,14 @@ endif; ?>
                     <tr>
                       <td width="22%" ><a id="help_for_netbios_enable" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("NetBIOS Options"); ?></td>
                       <td>
-                        <input name="netbios_enable" type="checkbox" id="netbios_enable" value="yes" <?=!empty($pconfig['netbios_enable']) ? "checked=\"checked\"" : "" ;?> onclick="netbios_change()" />
+                        <input name="netbios_enable" type="checkbox" id="netbios_enable" value="yes" <?=!empty($pconfig['netbios_enable']) ? "checked=\"checked\"" : "" ;?>  />
                         <div class="hidden" for="help_for_netbios_enable">
                           <span>
                             <?=gettext("Enable NetBIOS over TCP/IP"); ?><br />
                             <?=gettext("If this option is not set, all NetBIOS-over-TCP/IP options (including WINS) will be disabled"); ?>.
                           </span>
                         </div>
-                        <div id="netbios_data" summary="netboios options">
+                        <div id="netbios_data">
                           <span>
                             <?=gettext("Node Type"); ?>:&nbsp;
                           </span>
@@ -1614,13 +1454,13 @@ endif; ?>
                     <tr id="wins_opts">
                       <td width="22%" ><a id="help_for_wins_server" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("WINS Servers"); ?></td>
                       <td>
-                        <input name="wins_server_enable" type="checkbox" id="wins_server_enable" value="yes" <?=!empty($pconfig['wins_server1']) || !empty($pconfig['wins_server2']) ? "checked=\"checked\"" : "" ;?>  onclick="wins_server_change()" />
+                        <input name="wins_server_enable" type="checkbox" id="wins_server_enable" value="yes" <?=!empty($pconfig['wins_server1']) || !empty($pconfig['wins_server2']) ? "checked=\"checked\"" : "" ;?> />
                         <div class="hidden" for="help_for_wins_server">
                           <span>
                             <?=gettext("Provide a WINS server list to clients"); ?><br />
                           </span>
                         </div>
-                        <div id="wins_server_data" summary="wins servers">
+                        <div id="wins_server_data">
                           <span>
                             <?=gettext("Server #1:"); ?>&nbsp;
                           </span>
@@ -1635,8 +1475,8 @@ endif; ?>
                     <tr>
                       <td width="22%" ><a id="help_for_client_mgmt_port" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Client Management Port"); ?></td>
                       <td>
-                        <input name="client_mgmt_port_enable" type="checkbox" id="client_mgmt_port_enable" value="yes" <?=!empty($pconfig['client_mgmt_port']) ? "checked=\"checked\"" : "" ;?> onclick="client_mgmt_port_change()" />
-                        <div id="client_mgmt_port_data" summary="client management port">
+                        <input name="client_mgmt_port_enable" type="checkbox" id="client_mgmt_port_enable" value="yes" <?=!empty($pconfig['client_mgmt_port']) ? "checked=\"checked\"" : "" ;?> />
+                        <div id="client_mgmt_port_data">
                               <input name="client_mgmt_port" type="text" class="form-control unknown" id="client_mgmt_port" size="30" value="<?=htmlspecialchars($pconfig['client_mgmt_port']);?>" />
                         </div>
                         <div class="hidden" for="help_for_client_mgmt_port">
@@ -1646,11 +1486,16 @@ endif; ?>
                         </div>
                       </td>
                     </tr>
+                  </table>
+                </div>
+              </div>
+            </section>
+            <section class="col-xs-12">
+              <div class="tab-content content-box col-xs-12">
+                <div class="table-responsive">
+                  <table class="table table-striped opnsense_standard_table_form">
                     <tr>
-                      <td colspan="2" height="12"></td>
-                    </tr>
-                    <tr>
-                      <td colspan="2"><?=gettext("Advanced configuration"); ?></td>
+                      <td colspan="2"><strong><?=gettext("Advanced configuration"); ?></strong></td>
                     </tr>
                     <tr>
                       <td width="22%" ><a id="help_for_custom_options" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Advanced"); ?></td>
@@ -1702,9 +1547,14 @@ endif; ?>
                     </tr>
                   </table>
                 </div>
-              </form>
+               </div>
+             </section>
+           </form>
+
 <?php
               else :?>
+          <section class="col-xs-12">
+            <div class="tab-content content-box col-xs-12">
               <table class="table table-striped">
                 <thead>
                 <tr>
@@ -1753,10 +1603,10 @@ endif; ?>
                   </td></tr>
                 </tfoot>
               </table>
+            </div>
+          </section>
 <?php
               endif; ?>
-          </div>
-        </section>
       </div>
     </div>
   </section>

		@@ -757,7 +615,7 @@ function tuntap_change() {
	- gettext("Peer to Peer ( SSL/TLS )"), @@ -776,7 +634,7 @@ function tuntap_change() {

	-


	+
	- onchange="tuntap_change()" /> + /> @@ -1249,10 +1085,10 @@ endif; ?>
	-
	- +
	- - +
	- onclick="gwredir_change()" /> + /> . @@ -1318,7 +1153,7 @@ endif; ?>
	@@ -1332,7 +1167,7 @@ endif; ?>
	@@ -1346,7 +1181,7 @@ endif; ?>
	@@ -1361,7 +1196,7 @@ endif; ?>
	@@ -1377,7 +1212,7 @@ endif; ?>
		@@ -1416,7 +1251,7 @@ endif; ?>
	/> @@ -1438,7 +1273,7 @@ endif; ?>
	/> @@ -1449,15 +1284,20 @@ endif; ?>


	+	/> @@ -1477,7 +1317,7 @@ endif; ?>
	/> @@ -1493,8 +1333,8 @@ endif; ?>
	- onclick="dns_domain_change()" /> - + /> + @@ -1507,8 +1347,8 @@ endif; ?>
	- onclick="dns_server_change()" /> - + /> + @@ -1547,8 +1387,8 @@ endif; ?>
	- onclick="ntp_server_change()" /> - + /> + @@ -1568,14 +1408,14 @@ endif; ?>
	- onclick="netbios_change()" /> + /> . - + : @@ -1614,13 +1454,13 @@ endif; ?>
	- onclick="wins_server_change()" /> + /> - + @@ -1635,8 +1475,8 @@ endif; ?>
	- onclick="client_mgmt_port_change()" /> - + /> + @@ -1646,11 +1486,16 @@ endif; ?>