Added onClick methods to all validation checks, top improve user experience

duncan-mccracken · duncan-mccracken · commit 0165cdce8b09 · 2017-06-29T14:18:05.000+10:00
diff --git a/webadmin/var/www/webadmin/AFP.php b/webadmin/var/www/webadmin/AFP.php
@@ -55,6 +55,35 @@
 	<?php echo "<div class=\"alert alert-success\">" . $accountsuccess . "</div>" ?></span>
 <?php } ?>
 
+<script type="text/javascript">
+function showErr(id, valid)
+{
+	if (valid || document.getElementById(id).value == "")
+	{
+		document.getElementById(id).style.borderColor = "";
+		document.getElementById(id).style.backgroundColor = "";
+	}
+	else
+	{
+		document.getElementById(id).style.borderColor = "#a94442";
+		document.getElementById(id).style.backgroundColor = "#f2dede";
+	}
+}
+
+function enableButton(id, enable)
+{
+	document.getElementById(id).disabled = !enable;
+}
+
+function validateafpPW()
+{
+	var validPassword = (document.getElementById("afppass1").value != "");
+	var validConfirm = (document.getElementById("afppass1").value == document.getElementById("afppass2").value);
+	showErr("afppass2", validConfirm);
+	enableButton("afppass", validPassword && validConfirm);
+}
+</script>
+
 <div class="row">
 	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
 
@@ -90,13 +119,13 @@
 			-->
 
 			<label class="control-label">New Password</label>
-			<input type="password" placeholder="Required" name="afppass1" id="afppass1" class="form-control input-sm" value="" onKeyUp="validateafpPW();" onChange="validateafpPW();" />
+			<input type="password" placeholder="Required" name="afppass1" id="afppass1" class="form-control input-sm" value="" onClick="validateafpPW();" onKeyUp="validateafpPW();" onChange="validateafpPW();" />
 
 			<label class="control-label">Confirm New Password</label>
-			<input type="password" placeholder="Required" name="afppass2" id="afppass2" class="form-control input-sm" value="" onKeyUp="validateafpPW();" onChange="validateafpPW();" />
+			<input type="password" placeholder="Required" name="afppass2" id="afppass2" class="form-control input-sm" value="" onClick="validateafpPW();" onKeyUp="validateafpPW();" onChange="validateafpPW();" />
 			<br>
 
-			<input type="submit" name="afppass" id="afppass" value="Save" class="btn btn-primary" />
+			<input type="submit" name="afppass" id="afppass" value="Save" class="btn btn-primary" disabled="disabled" />
 			<br>
 			<br>
 
diff --git a/webadmin/var/www/webadmin/SMB.php b/webadmin/var/www/webadmin/SMB.php
@@ -50,6 +50,35 @@
 	<?php echo "<div class=\"alert alert-success\">" . $accountsuccess . "</div>" ?></span>
 <?php } ?>
 
+<script type="text/javascript">
+function showErr(id, valid)
+{
+	if (valid || document.getElementById(id).value == "")
+	{
+		document.getElementById(id).style.borderColor = "";
+		document.getElementById(id).style.backgroundColor = "";
+	}
+	else
+	{
+		document.getElementById(id).style.borderColor = "#a94442";
+		document.getElementById(id).style.backgroundColor = "#f2dede";
+	}
+}
+
+function enableButton(id, enable)
+{
+	document.getElementById(id).disabled = !enable;
+}
+
+function validatePW()
+{
+	var validPassword = (document.getElementById("smbpass1").value != "");
+	var validConfirm = (document.getElementById("smbpass1").value == document.getElementById("smbpass2").value);
+	showErr("smbpass2", validConfirm);
+	enableButton("smbpass", validPassword && validConfirm);
+}
+</script>
+
 <div class="row">
 	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
 
@@ -85,10 +114,10 @@
 			-->
 
 			<label class="control-label">New Password</label>
-			<input type="password" name="smbpass1" id="smbpass1" class="form-control input-sm" value="" placeholder="Required" onKeyUp="validatePW();" onChange="validatePW();" />
+			<input type="password" placeholder="Required" name="smbpass1" id="smbpass1" class="form-control input-sm" value="" onClick="validatePW();" onKeyUp="validatePW();" onChange="validatePW();" />
 
 			<label class="control-label">Confirm New Password</label>
-			<input type="password" name="smbpass2" id="smbpass2" class="form-control input-sm" value="" placeholder="Required" onKeyUp="validatePW();" onChange="validatePW();" />
+			<input type="password" placeholder="Required" name="smbpass2" id="smbpass2" class="form-control input-sm" value="" onClick="validatePW();" onKeyUp="validatePW();" onChange="validatePW();" />
 			<br>
 
 			<input type="submit" name="smbpass" id="smbpass" class="btn btn-primary" value="Save" />
diff --git a/webadmin/var/www/webadmin/SUS.php b/webadmin/var/www/webadmin/SUS.php
@@ -207,7 +207,7 @@ function validateProxy()
 			<span class="label label-default">New Branch</span>
 
 			<div class="input-group">
-				<input type="text" name="branchname" id="branchname" class="form-control input-sm" value="" onKeyUp="validateBranch();" onChange="validateBranch();"/>
+				<input type="text" name="branchname" id="branchname" class="form-control input-sm" value="" onClick="validateBranch();" onKeyUp="validateBranch();" onChange="validateBranch();"/>
 				<span class="input-group-btn">
 					<input type="submit" name="addbranch" id="addbranch" class="btn btn-primary btn-sm" value="Add Branch" disabled="disabled"/>
 				</span>
diff --git a/webadmin/var/www/webadmin/dateTime.php b/webadmin/var/www/webadmin/dateTime.php
@@ -68,11 +68,15 @@ function validateTimeserver()
 
 			<span class="label label-default">Current Time Zone</span>
 			<span class="description">Current time zone on the NetBoot/SUS/LDAP Proxy server</span>
-			<span><?php echo getSystemTimeZoneMenu();?></span>
+			<span>
+				<select class="form-control input-sm" id="timezone" name="timezone" onClick="validateTimeserver();" onChange="validateTimeserver();">
+					<?php echo getSystemTimeZoneMenu();?>
+				</select>
+			</span>
 
 			<span class="label label-default">Network Time Server</span>
 			<span class="description">Server to use to synchronize the date/time (e.g. "pool.ntp.org")</span>
-			<input type="text" name="timeserver" id="timeserver" class="form-control input-sm" value="<?php echo getCurrentTimeServer();?>" onKeyUp="validateTimeserver();" onChange="validateTimeserver();" />
+			<input type="text" name="timeserver" id="timeserver" class="form-control input-sm" value="<?php echo getCurrentTimeServer();?>" onClick="validateTimeserver();" onKeyUp="validateTimeserver();" onChange="validateTimeserver();" />
 
 			<br>
 
diff --git a/webadmin/var/www/webadmin/inc/functions.php b/webadmin/var/www/webadmin/inc/functions.php
@@ -36,7 +36,6 @@ function getSystemTimeZones($path="/usr/share/zoneinfo/right")
 function getSystemTimeZoneMenu()
 {
 	$currentTZ = getCurrentTimeZone();
-	echo "<select class=\"form-control input-sm\" id=\"timezone\" name=\"timezone\">\n";
     $timezone_identifiers = DateTimeZone::listIdentifiers();
     foreach($timezone_identifiers as $value){
         if (preg_match('/^(America|Australia|Antartica|Arctic|Asia|Atlantic|Europe|Indian|Pacific)\//', $value))
@@ -56,7 +55,6 @@ function getSystemTimeZoneMenu()
         }
     }
     echo "</optgroup>\n";
-    echo "</select>\n";
 }
 
 function suExec($cmd)
diff --git a/webadmin/var/www/webadmin/networkSettings.php b/webadmin/var/www/webadmin/networkSettings.php
@@ -141,7 +141,7 @@ function validateNetwork()
 			<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
 
 				<label class="control-label">Hostname</label>
-				<input type="text" name="hostname" id="hostname" class="form-control input-sm" value="<?php echo getCurrentHostname(); ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="hostname" id="hostname" class="form-control input-sm" value="<?php echo getCurrentHostname(); ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 
 				<label class="control-label">Type</label>
 				<!-- <select onchange="disableStaticOptions(this.value);" name="selectedNetType">
@@ -160,25 +160,25 @@ function validateNetwork()
 				</div>
 
 				<label class="control-label">IP Address</label>
-				<input type="text" name="ip" id="ip"  class="form-control input-sm" value="<?php echo getCurrentIP(); ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="ip" id="ip"  class="form-control input-sm" value="<?php echo getCurrentIP(); ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 
 				<label class="control-label">Netmask</label>
-				<input type="text" name="netmask" id="netmask" class="form-control input-sm" value="<?php echo getCurrentNetmask(); ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="netmask" id="netmask" class="form-control input-sm" value="<?php echo getCurrentNetmask(); ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 
 			</div>
 
 			<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
 
 				<label class="control-label">Gateway</label>
-				<input type="text" name="gateway" id="gateway" class="form-control input-sm" value="<?php echo getCurrentGateway(); ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="gateway" id="gateway" class="form-control input-sm" value="<?php echo getCurrentGateway(); ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 
 
 				<label class="control-label">DNS Server 1</label>
-				<input type="text" name="dns1" id="dns1" class="form-control input-sm" value="<?php if (isset($dns[0])) { echo $dns[0]; } ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="dns1" id="dns1" class="form-control input-sm" value="<?php if (isset($dns[0])) { echo $dns[0]; } ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 
 
 				<label class="control-label">DNS Server 2</label>
-				<input type="text" name="dns2" id="dns2" class="form-control input-sm" value="<?php if (isset($dns[1])) { echo $dns[1]; } ?>" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
+				<input type="text" name="dns2" id="dns2" class="form-control input-sm" value="<?php if (isset($dns[1])) { echo $dns[1]; } ?>" onClick="validateNetwork();" onKeyUp="validateNetwork();" onChange="validateNetwork();" />
 				<br>
 
 				<input type="submit" class="btn btn-sm <?php if (getSSHstatus()) { echo 'btn-success" value="Disable'; } else { echo'btn-danger" value="Enable'; } ?> SSH" name="SSH"/>

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,6 @@ function getSystemTimeZones($path="/usr/share/zoneinfo/right")`
`36`	`36`	`function getSystemTimeZoneMenu()`
`37`	`37`	`{`
`38`	`38`	`$currentTZ = getCurrentTimeZone();`
`39`		`- echo "<select class=\"form-control input-sm\" id=\"timezone\" name=\"timezone\">\n";`
`40`	`39`	`$timezone_identifiers = DateTimeZone::listIdentifiers();`
`41`	`40`	`foreach($timezone_identifiers as $value){`
`42`	`41`	`if (preg_match('/^(America\|Australia\|Antartica\|Arctic\|Asia\|Atlantic\|Europe\|Indian\|Pacific)\//', $value))`
`@@ -56,7 +55,6 @@ function getSystemTimeZoneMenu()`
`56`	`55`	`}`
`57`	`56`	`}`
`58`	`57`	`echo "</optgroup>\n";`
`59`		`- echo "</select>\n";`
`60`	`58`	`}`
`61`	`59`
`62`	`60`	`function suExec($cmd)`