From 3e570a118edbe407c2261bbd64215e0d3893f993 Mon Sep 17 00:00:00 2001
From: laf <neil@lathwood.co.uk>
Date: Mon, 16 Jun 2014 23:06:04 +0100
Subject: [PATCH] Tidied device setting pages

---
 html/pages/device/edit/alerts.inc.php |  53 +++----
 html/pages/device/edit/apps.inc.php   |  18 +--
 html/pages/device/edit/device.inc.php |  96 +++++++------
 html/pages/device/edit/ipmi.inc.php   |  63 +++------
 html/pages/device/edit/ports.inc.php  |  42 +++---
 html/pages/device/edit/snmp.inc.php   | 195 +++++++++++++-------------
 6 files changed, 223 insertions(+), 244 deletions(-)

diff --git a/html/pages/device/edit/alerts.inc.php b/html/pages/device/edit/alerts.inc.php
index 2e9679c11..be7bc7707 100644
--- a/html/pages/device/edit/alerts.inc.php
+++ b/html/pages/device/edit/alerts.inc.php
@@ -35,33 +35,26 @@ $disable_notify = get_dev_attrib($device,'disable_notify');
 
 <h3>Alert settings</h3>
 
-<table cellpadding="0" cellspacing="0">
-  <tr>
-    <td>
-      <form id="edit" name="edit" method="post" action="">
-        <input type="hidden" name="editing" value="yes">
-        <table width="500" border="0">
-          <tr>
-            <td width="50"><div style="padding-right: 5px; text-align: right"><input onclick="edit.sysContact.disabled=!edit.override_sysContact.checked" type="checkbox" name="override_sysContact"<?php if ($override_sysContact_bool) { echo(' checked="1"'); } ?> /></div></td>
-            <td width="150">Override sysContact:</td>
-            <td><input name="sysContact" size="32"<?php if (!$override_sysContact_bool) { echo(' disabled="1"'); } ?> value="<?php echo($override_sysContact_string); ?>" /></td>
-          </tr>
-          <tr>
-            <td width="50"><div style="padding-right: 5px; text-align: right"><input type="checkbox" name="disable_notify"<?php if ($disable_notify) { echo(' checked="1"'); } ?> /></div></td>
-            <td colspan="2">Disable all alerting for this host</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>
-              <br />
-              <input type="submit" name="Submit" value="Save" />
-            </td>
-          </tr>
-        </table>
-        <br />
-      </form>
-    </td>
-    <td width="50"></td>
-    <td></td>
-  </tr>
-</table>
+<form id="edit" name="edit" method="post" action="" role="form" class="form-horizontal">
+  <input type="hidden" name="editing" value="yes">
+  <div class="form-group">
+    <label for="override_sysContact" class="col-sm-3 control-label">Override sysContact:</label>
+    <div class="col-sm-6">
+      <input onclick="edit.sysContact.disabled=!edit.override_sysContact.checked" type="checkbox" id="override_sysContact" name="override_sysContact"<?php if ($override_sysContact_bool) { echo(' checked="1"'); } ?> />
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-3">
+    </div>
+    <div class="col-sm-6">
+      <input id="sysContact" class="form-control" name="sysContact" size="32"<?php if (!$override_sysContact_bool) { echo(' disabled="1"'); } ?> value="<?php echo($override_sysContact_string); ?>" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="disable_notify" class="col-sm-3 control-label">Disable all alerting for this host: </label>
+    <div class="col-sm-6">
+      <input id="disable_notify" type="checkbox" name="disable_notify"<?php if ($disable_notify) { echo(' checked="1"'); } ?> />
+    </div>
+  </div>
+  <button class="btn btn-default btn-sm" type="submit" name="Submit">Save</button>
+</form>
diff --git a/html/pages/device/edit/apps.inc.php b/html/pages/device/edit/apps.inc.php
index 7807b2b48..d8450a15c 100644
--- a/html/pages/device/edit/apps.inc.php
+++ b/html/pages/device/edit/apps.inc.php
@@ -69,13 +69,14 @@ if (count($apps_enabled))
   }
 }
 
-echo("<div style='float: left; width: 100%'>
-<form id='appedit' name='appedit' method='post' action=''>
+echo("<div class='row'>
+<div class='col-md-4'>
+<form id='appedit' name='appedit' method='post' action='' role='form' class='form-horizontal'>
   <input type=hidden name=device value='".$device['device_id']."'>
-  <table cellpadding=3 cellspacing=0 width=100%>
+  <table class='table table-condensed table-striped table-responsive'>
     <tr align=center>
-      <th width=100>Enable</th>
-      <th align=left>Application</th>
+      <th>Enable</th>
+      <th>Application</th>
     </tr>
 ");
 
@@ -86,19 +87,20 @@ foreach ($applications as $app)
   if (is_integer($row/2)) { $row_colour = $list_colour_a; } else { $row_colour = $list_colour_b; }
 
   echo("    <tr bgcolor=$row_colour>");
-  echo("      <td align=center>");
+  echo("      <td>");
   echo("        <input type=checkbox" . (in_array($app,$app_enabled) ? ' checked="1"' : '') . " name='app_". $app ."'>");
   echo("      </td>");
-  echo("      <td align=left>". ucfirst($app) . "</td>");
+  echo("      <td>". ucfirst($app) . "</td>");
   echo("    </tr>
 ");
 
   $row++;
 }
 
-echo('<tr><td></td><td><input type="submit" value="Save"></td></tr>');
+echo('<tr><td></td><td><button type="submit" class="btn btn-default" value="Save">Save</button></td></tr>');
 echo('</table>');
 echo('</form>');
 echo('</div>');
+echo('</div>');
 
 ?>
diff --git a/html/pages/device/edit/device.inc.php b/html/pages/device/edit/device.inc.php
index 8af554de0..3899e62f1 100644
--- a/html/pages/device/edit/device.inc.php
+++ b/html/pages/device/edit/device.inc.php
@@ -55,29 +55,24 @@ if ($updated && $update_message)
 }
 
 ?>
-<table cellpadding="0" cellspacing="0">
-  <tr>
-    <td>
-      <h5>
-        <form id="delete_host" name="delete_host" method="post" action="delhost/">
-          <img src="images/16/server_delete.png" align="absmiddle">
-          <input type="hidden" name="id" value="<?php echo($device['device_id']); ?>">
-          <input type="submit" class="submit" name="Submit" value="Delete device">
-        </form>
-      </h5>
-      <form id="edit" name="edit" method="post" action="">
-        <input type=hidden name="editing" value="yes">
-        <table width="500" border="0">
-          <tr>
-            <td colspan="2" align="right">Description:</td>
-            <td colspan="3"><input name="descr" size="32" value="<?php echo($device['purpose']); ?>"></input></td>
-          </tr>
-         <tr>
-            <td colspan="2" align="right">
-              Type:
-            </td>
-            <td>
-              <select name="type">
+
+<form id="delete_host" name="delete_host" method="post" action="delhost/" role="form">
+  <input type="hidden" name="id" value="<?php echo($device['device_id']); ?>">
+  <button type="submit" class="btn btn-danger" name="Submit">Delete device</button>
+</form>
+<br />
+<form id="edit" name="edit" method="post" action="" role="form" class="form-horizontal">
+<input type=hidden name="editing" value="yes">
+  <div class="form-group">
+    <label for="descr" class="col-sm-2 control-label">Description:</label>
+    <div class="col-sm-6">
+      <input id="descr" name="descr" value="<?php echo($device['purpose']); ?>" class="form-control">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="type" class="col-sm-2 control-label">Type:</label>
+    <div class="col-sm-6">
+      <select id="type" name="type" class="form-control">
 <?php
 $unknown = 1;
 
@@ -96,30 +91,39 @@ foreach ($config['device_types'] as $type)
     echo('          <option value="other">Other</option>');
   }
 ?>
-              </select>
-            </td>
-          </tr>
-          <tr>
-            <td width="40"><div style="padding-right: 5px; text-align: right"><input onclick="edit.sysLocation.disabled=!edit.override_sysLocation.checked" type="checkbox" name="override_sysLocation"<?php if ($override_sysLocation_bool) { echo(' checked="1"'); } ?> /></div></td>
-            <td align="right">Override sysLocation:</td>
-            <td colspan="3"><input name="sysLocation" size="32"<?php if (!$override_sysLocation_bool) { echo(' disabled="1"'); } ?> value="<?php echo($override_sysLocation_string); ?>" /></td>
-          </tr>
-          <tr>
-            <td colspan="2"><div align="right">Disable</div></td>
-            <td><input name="disabled" type="checkbox" id="disabled" value="1" <?php if ($device["disabled"]) { echo("checked=checked"); } ?> /></td>
-            <td><div align="right">Ignore</div></td>
-            <td><input name="ignore" type="checkbox" id="disable" value="1" <?php if ($device['ignore']) { echo("checked=checked"); } ?> />&nbsp;</td>
-          </tr>
-        </table>
-        <input type="submit" name="Submit" value="Save" />
-        <label><br />
-        </label>
-      </form>
-    </td>
-  </tr>
-</table>
+     </select>
+   </div>
+ </div>
+ <div class="form-group">
+    <label for="sysLocation" class="col-sm-2 control-label">Override sysLocation:</label>
+    <div class="col-sm-6">
+     <div class="checkbox">
+       <input onclick="edit.sysLocation.disabled=!edit.override_sysLocation.checked" type="checkbox" name="override_sysLocation"<?php if ($override_sysLocation_bool) { echo(' checked="1"'); } ?> />
+     </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-2">
+    </div>
+    <div class="col-sm-6">
+      <input id="sysLocation" name="sysLocation" class="form-control" <?php if (!$override_sysLocation_bool) { echo(' disabled="1"'); } ?> value="<?php echo($override_sysLocation_string); ?>" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="disabled" class="col-sm-2 control-label">Disable:</label>
+    <div class="col-sm-6">
+      <input name="disabled" type="checkbox" id="disabled" value="1" <?php if ($device["disabled"]) { echo("checked=checked"); } ?> />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="ignore" class="col-sm-2 control-label">Ignore</label>
+    <div class="col-sm-6">
+      <input name="ignore" type="checkbox" id="ignore" value="1" <?php if ($device['ignore']) { echo("checked=checked"); } ?> />
+    </div>
+  </div>
+  <button type="submit" name="Submit"  class="btn btn-default">Save</button>
+</form>
 <br />
-
 <?php
 
 print_optionbar_start();
diff --git a/html/pages/device/edit/ipmi.inc.php b/html/pages/device/edit/ipmi.inc.php
index 0e8011728..f3971ca41 100644
--- a/html/pages/device/edit/ipmi.inc.php
+++ b/html/pages/device/edit/ipmi.inc.php
@@ -32,43 +32,26 @@ if ($updated && $update_message)
 
 <h3>IPMI settings</h3>
 
-<table cellpadding="0" cellspacing="0">
-  <tr>
-    <td>
-      <form id="edit" name="edit" method="post" action="">
-        <input type="hidden" name="editing" value="yes">
-        <table width="500" border="0">
-          <tr>
-            <td width="150"><div align="right">IPMI/BMC Hostname</div></td>
-            <td colspan="3"><input name="ipmi_hostname" size="32" value="<?php echo(get_dev_attrib($device,'ipmi_hostname')); ?>" /></td>
-          </tr>
-          <tr>
-            <td><div align="right">IPMI/BMC Username</div></td>
-            <td colspan="3"><input name="ipmi_username" size="32" value="<?php echo(get_dev_attrib($device,'ipmi_username')); ?>" /></td>
-            </td>
-          </tr>
-          <tr>
-            <td><div align="right">IPMI/BMC Password</div></td>
-            <td colspan="3"><input name="ipmi_password" type="password" size="32" value="<?php echo(get_dev_attrib($device,'ipmi_password')); ?>" /></td>
-            </td>
-          </tr>
-          <tr>
-            <td></td>
-            <td colspan="3">
-              <br />
-              <input type="submit" name="Submit" value="Save" />
-            </td>
-          </tr>
-          <tr>
-            <td colspan="4">
-              To disable IPMI polling, please clear the setting fields and click <b>Save</b>.
-            </td>
-          </tr>
-        </table>
-        <br />
-      </form>
-    </td>
-    <td width="50"></td>
-    <td></td>
-  </tr>
-</table>
+<form id="edit" name="edit" method="post" action="" role="form" class="form-horizontal">
+<input type="hidden" name="editing" value="yes">
+  <div class="form-group">
+    <label for="ipmi_hostname" class="col-sm-2 control-label">IPMI/BMC Hostname</label>
+    <div class="col-sm-6">
+      <input id="ipmi_hostname" name="ipmi_hostname" class="form-control" value="<?php echo(get_dev_attrib($device,'ipmi_hostname')); ?>" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="ipmi_username" class="col-sm-2 control-label">IPMI/BMC Username</label>
+    <div class="col-sm-6">
+      <input id="ipmi_username" name="ipmi_username" class="form-control" value="<?php echo(get_dev_attrib($device,'ipmi_username')); ?>" />
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="impi_password" class="col-sm-2 control-label">IPMI/BMC Password</label>
+    <div class="col-sm-6">
+      <input id="ipmi_password" name="ipmi_password" type="password" class="form-control" value="<?php echo(get_dev_attrib($device,'ipmi_password')); ?>" />
+    </div>
+  </div>
+  <button class="btn btn-default btn-sm" type="submit" name="Submit">Save</button>
+</form>
+<p>To disable IPMI polling, please clear the setting fields and click <b>Save</b>.</p>
diff --git a/html/pages/device/edit/ports.inc.php b/html/pages/device/edit/ports.inc.php
index ddd87052c..11f68cacd 100644
--- a/html/pages/device/edit/ports.inc.php
+++ b/html/pages/device/edit/ports.inc.php
@@ -18,53 +18,52 @@ if ($updated && $update_message)
 }
 
 echo("<div style='float: left; width: 100%'>
-<form id='ignoreport' name='ignoreport' method='post' action=''>
+<form id='ignoreport' name='ignoreport' method='post' action='' role='form' class='form-inline'>
   <input type=hidden name='ignoreport' value='yes'>
   <input type=hidden name=device value='".$device['device_id']."'>");
 
-echo("<table cellpadding=3 cellspacing=0 width=100%>
+echo("<table cellpadding=3 cellspacing=0 class='table table-condensed table-responsive'>
   <tr align=center>
-                 <th width=100>Index</th>
-                 <th width=100>Name</th>
-                 <th width=50>Admin</th>
-                 <th width=150>Oper</th>
-                 <th width=150>Disable</th>
-                 <th width=150>Ignore</th>
+                 <th>Index</th>
+                 <th>Name</th>
+                 <th>Admin</th>
+                 <th>Oper</th>
+                 <th>Disable</th>
+                 <th>Ignore</th>
                  <th>Description</th>
 </tr>
 <tr align=center>
-    <td><input type='submit' value='Save' title='Save current port disable/ignore settings'/><input type='submit' value='Reset' id='form-reset' title='Reset form to previously-saved settings'/></td>
+    <td><button type='submit' value='Save' class='btn btn-success btn-sm' title='Save current port disable/ignore settings'/>Save</button><button type='submit' value='Reset' class='btn btn-danger btn-sm' id='form-reset' title='Reset form to previously-saved settings'/>Reset</button></td>
     <td></td>
     <td></td>
-    <td><input type='submit' value='Alerted' id='alerted-toggle' title='Toggle alerting on all currently-alerted ports'/><input type='submit' value='Down' id='down-select' title='Disable alerting on all currently-down ports'/></td>
-    <td><input type='submit' value='Toggle' id='disable-toggle' title='Toggle polling for all ports'/><input type='submit' value='Select' id='disable-select' title='Disable polling on all ports'/></td>
-    <td><input type='submit' value='Toggle' id='ignore-toggle' title='Toggle alerting for all ports'/><input type='submit' value='Select' id='ignore-select' title='Disable alerting on all ports'/></td>
+    <td><button type='submit' value='Alerted' class='btn btn-default btn-sm' id='alerted-toggle' title='Toggle alerting on all currently-alerted ports'/>Alerted</button><button type='submit' value='Down' class='btn btn-default btn-sm' id='down-select' title='Disable alerting on all currently-down ports'/>Down</button></td>
+    <td><button type='submit' value='Toggle' class='btn btn-default btn-sm' id='disable-toggle' title='Toggle polling for all ports'/>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='disable-select' title='Disable polling on all ports'/>Select</button></td>
+    <td><button type='submit' value='Toggle' class='btn btn-default btn-sm' id='ignore-toggle' title='Toggle alerting for all ports'/>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='ignore-select' title='Disable alerting on all ports'/>Select</button></td>
     <td></td>
 </tr>
 ");
 ?>
 
 <script>
-$(document).ready(function() {
     $('#disable-toggle').click(function(event) {
         // invert selection on all disable buttons
         event.preventDefault();
-        $('[name^="disabled_"]').check('toggle');
+        $('input[name^="disabled_"]').trigger('click'); 
     });
     $('#ignore-toggle').click(function(event) {
         // invert selection on all ignore buttons
         event.preventDefault();
-        $('[name^="ignore_"]').check('toggle');
+        $('input[name^="ignore_"]').trigger('click');
     });
     $('#disable-select').click(function(event) {
         // select all disable buttons
         event.preventDefault();
-        $('[name^="disabled_"]').check();
+        $('.disable-check').prop('checked',true);
     });
     $('#ignore-select').click(function(event) {
         // select all ignore buttons
         event.preventDefault();
-        $('[name^="ignore_"]').check();
+        $('.ignore-check').prop('checked',true);
     });
     $('#down-select').click(function(event) {
         // select ignore buttons for all ports which are down
@@ -76,7 +75,7 @@ $(document).ready(function() {
                 // get the interface number from the object name
                 var port_id = name.split('_')[1];
                 // find its corresponding checkbox and toggle it
-                $('[name="ignore_' + port_id + '"]').check();
+                $('input[name="ignore_' + port_id + '"]').trigger('click');
             }
         });
     });
@@ -89,7 +88,7 @@ $(document).ready(function() {
                 // get the interface number from the object name
                 var port_id = name.split('_')[1];
                 // find its corresponding checkbox and toggle it
-                $('[name="ignore_' + port_id + '"]').check('toggle');
+                $('input[name="ignore_' + port_id + '"]').trigger('click');
             }
         });
     });
@@ -98,7 +97,6 @@ $(document).ready(function() {
         event.preventDefault();
         $('#ignoreport')[0].reset();
     });
-});
 </script>
 
 <?php
@@ -125,12 +123,12 @@ foreach (dbFetchRows("SELECT * FROM `ports` WHERE `device_id` = ? ORDER BY `ifIn
   echo("<td align=right><span name='operstatus_".$port['port_id']."'".$outofsync.">". $port['ifOperStatus']."</span></td>");
 
   echo("<td align=center>");
-  echo("<input type=checkbox name='disabled_".$port['port_id']."'".($port['disabled'] ? 'checked' : '').">");
+  echo("<input type=checkbox class='disable-check' name='disabled_".$port['port_id']."'".($port['disabled'] ? 'checked' : '').">");
   echo("<input type=hidden name='olddis_".$port['port_id']."' value=".($port['disabled'] ? 1 : 0).">");
   echo("</td>");
 
   echo("<td align=center>");
-  echo("<input type=checkbox name='ignore_".$port['port_id']."'".($port['ignore'] ? 'checked' : '').">");
+  echo("<input type=checkbox class='ignore-check' name='ignore_".$port['port_id']."'".($port['ignore'] ? 'checked' : '').">");
   echo("<input type=hidden name='oldign_".$port['port_id']."' value=".($port['ignore'] ? 1 : 0).">");
   echo("</td>");
   echo("<td align=left>".$port['ifAlias'] . "</td>");
diff --git a/html/pages/device/edit/snmp.inc.php b/html/pages/device/edit/snmp.inc.php
index efe910577..9281706d1 100644
--- a/html/pages/device/edit/snmp.inc.php
+++ b/html/pages/device/edit/snmp.inc.php
@@ -6,6 +6,7 @@ if ($_POST['editing'])
   {
     $community = mres($_POST['community']);
     $snmpver = mres($_POST['snmpver']);
+    $transport = mres($_POST['transport']);
     $port = mres($_POST['port']);
     $timeout = mres($_POST['timeout']);
     $retries = mres($_POST['retries']);
@@ -22,7 +23,8 @@ if ($_POST['editing'])
     $update = array(
       'community' => $community,
       'snmpver' => $snmpver,
-      'port' => $port
+      'port' => $port,
+      'transport' => $transport
     );
 
     if ($_POST['timeout']) { $update['timeout'] = $timeout; }
@@ -58,85 +60,84 @@ if ($updated && $update_message)
   print_error($update_message);
 }
 
-echo("<br /><table cellpadding=0 cellspacing=0><tr><td>
-
-<form id='edit' name='edit' method='post' action=''>
+echo("
+<form id='edit' name='edit' method='post' action='' role='form' class='form-horizontal'>
   <input type=hidden name='editing' value='yes'>
-  <table width='500' border='0'>
-    <tr>
-      <td><div align=right>SNMP Version</div></td>
-      <td>
-        <select name='snmpver'>
-          <option value='v1'>v1</option>
-          <option value='v2c' " . ($device['snmpver'] == 'v2c' ? 'selected' : '') . ">v2c</option>
-          <option value='v3' " . ($device['snmpver'] == 'v3' ? 'selected' : '') . ">v3</option>
-        </select>
-      </td>
-    </tr>
-  <div id='snmpv12'>
-  <!-- To be able to hide it -->
-    <tr>
-      <td colspan='2'><strong>SNMPv1/v2c Configuration</strong></td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>SNMP Community</div></td>
-      <td><input name='community' size='32' value='" . $device['community'] . "' />
-      </td>
-    </tr>
+  <div class='form-group'>
+    <label for='snmpver' class='col-sm-2 control-label'>SNMP Version</label>
+    <div class='col-sm-6'>
+      <select id='snmpver' name='snmpver' class='form-control'>
+        <option value='v1'>v1</option>
+        <option value='v2c' " . ($device['snmpver'] == 'v2c' ? 'selected' : '') . ">v2c</option>
+        <option value='v3' " . ($device['snmpver'] == 'v3' ? 'selected' : '') . ">v3</option>
+      </select>
+    </div>
   </div>
-  <div id='snmpv3'>
-  <!-- To be able to hide it -->
-    <tr>
-      <td colspan='2'><strong>SNMPv3 Configuration</strong></td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Auth Level</div></td>
-      <td>
-        <select name='authlevel'>
+  <div class='form-group'>
+    <label class='col-sm-3 control-label text-left'><h4><strong>SNMPv1/v2c Configuration</strong></h4></label>
+  </div>
+  <div class='form-group'>
+    <label for='community' class='col-sm-2 control-label'>SNMP Community</label>
+    <div class='col-sm-6'>
+      <input id='community' class='form-control' name='community' value='" . $device['community'] . "' />
+    </div>
+  </div>
+  <div class='form-group'>
+    <label class='col-sm-3 control-label'><h4><strong>SNMPv3 Configuration</strong></h4></label>
+  </div>
+  <div class='form-group'>
+    <label for='authlevel' class='col-sm-2 control-label'>Auth Level</label>
+    <div class='col-sm-6'>
+      <select id='authlevel' name='authlevel' class='form-control'>
           <option value='NoAuthNoPriv'>NoAuthNoPriv</option>
           <option value='AuthNoPriv' " . ($device['authlevel'] == "authNoPriv" ? 'selected' : '') . ">AuthNoPriv</option>
           <option value='AuthPriv' " . ($device['authlevel'] == "authPriv" ? 'selected' : '') . ">AuthPriv</option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Auth User Name</div></td>
-      <td><input type='text' name='authname' size='32' value='" . $device['authname']  . "'></td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Auth Password</div></td>
-      <td><input type='text' name='authpass' size='32' value='" . $device['authpass']  . "'></td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Auth Algorithm</strong></td>
-      <td>
-        <select name='authalgo'>
-          <option value='MD5'>MD5</option>
-          <option value='SHA' " . ($device['authalgo'] === "SHA" ? 'selected' : '') . ">SHA</option>
-        </select>
-      </td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Crypto Password</div></td>
-      <td><input type='text' name='cryptopass' size='32' value='" . $device['cryptopass']  . "'></td>
-    </tr>
-    <tr>
-      <td width='150'><div align='right'>Crypto Algorithm</div></td>
-      <td>
-        <select name='cryptoalgo'>
-          <option value='AES'>AES</option>
-          <option value='DES' " . ($device['cryptoalgo'] === "DES" ? 'selected' : '') . ">DES</option>
-        </select>
-      </td>
-    </tr>
+      </select>
+    </div>
   </div>
-    <tr>
-      <td colspan='2'><strong>SNMP Connectivity</strong></td>
-    </tr>
-    <tr>
-      <td><div align='right'>SNMP Transport</div></td>
-      <td>
-        <select name='transport'>");
+  <div class='form-group'>
+    <label for='authname' class='col-sm-2 control-label'>Auth User Name</label>
+    <div class='col-sm-6'>
+      <input type='text' id='authname' name='authname' class='form-control' value='" . $device['authname']  . "'>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='authpass' class='col-sm-2 control-label'>Auth Password</label>
+    <div class='col-sm-6'>
+      <input type='text' id='authpass' name='authpass' class='form-control' value='" . $device['authpass']  . "'>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='authalgo' class='col-sm-2 control-label'>Auth Algorithm</label>
+    <div class='col-sm-6'>
+      <select id='authalgo' name='authalgo' class='form-control'>
+        <option value='MD5'>MD5</option>
+        <option value='SHA' " . ($device['authalgo'] === "SHA" ? 'selected' : '') . ">SHA</option>
+      </select>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='cryptopass' class='col-sm-2 control-label'>Crypto Password</label>
+    <div class='col-sm-6'>
+      <input type='text' id='cryptopass' name='cryptopass' class='form-control' value='" . $device['cryptopass']  . "'>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='cryptoalgo' class='col-sm-2 control-label'>Crypto Algorithm</label>
+    <div class='col-sm-6'>
+      <select id='cryptoalgo' name='cryptoalgo' class='form-control'>
+        <option value='AES'>AES</option>
+        <option value='DES' " . ($device['cryptoalgo'] === "DES" ? 'selected' : '') . ">DES</option>
+      </select>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label class='col-sm-3 control-label'><h4><strong>SNMP Connectivity</strong></h4></label>
+  </div>
+  <div class='form-group'>
+    <label for='transport' class='col-sm-2 control-label'>SNMP Transport</label>
+    <div class='col-sm-6'>
+      <select id='transport' name='transport' class='form-control'>");
 
 foreach ($config['snmp']['transports'] as $transport)
 {
@@ -146,33 +147,31 @@ foreach ($config['snmp']['transports'] as $transport)
 }
 
 echo("  </select>
-      </td>
-    </tr>
-    <tr>
-      <td><div align='right'>SNMP Port</div></td>
-      <td><input name='port' size='32' value='" . $device['port'] . "' />
-      </td>
-    </tr>
-    <tr>
-      <td><div align='right'>SNMP Timeout</div></td>
-      <td><input name='timeout' size='32' value='" . ($device['timeout'] ? $device['timeout'] : '') . "' />&nbsp;
-      <em>(milli)seconds</em>
-      </td>
-    </tr>
-    <tr>
-      <td><div align='right'>SNMP Retries</div></td>
-      <td colspan='3'><input name='retries' size='32' value='" . ($device['timeout'] ? $device['retries'] : '') . "' />
-      </td>
-    </tr>");
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='port' class='col-sm-2 control-label'>SNMP Port</label>
+    <div class='col-sm-6'>
+      <input id='port' name='port' class='form-control' value='" . $device['port'] . "' />
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='timeout' class='col-sm-2 control-label'>SNMP Timeout</label>
+    <div class='col-sm-6'>
+      <input id='timeout' name='timeout' class='form-control' value='" . ($device['timeout'] ? $device['timeout'] : '') . "' /> <em>(milli)seconds</em>
+    </div>
+  </div>
+  <div class='form-group'>
+    <label for='retries' class='col-sm-2 control-label'>SNMP Retries</label>
+    <div class='col-sm-6'>
+      <input id='retries' name='retries' class='form-control' value='" . ($device['timeout'] ? $device['retries'] : '') . "' />
+    </div>
+  </div>");
 
 echo('
-  </table>
-  <input type="submit" name="Submit" value="Save" />
-  <label><br />
-  </label>
+  <button type="submit" name="Submit" class="btn btn-default">Save</button>
 </form>
 
-</td>
-<td width="50"></td><td></td></tr></table>');
+');
 
 ?>