Add password match feedback, put script in file.

HarryCutts · Oct 24, 2012 · 1797c33 · 1797c33
1 parent 51776db
commit 1797c33
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -3,71 +3,7 @@
 		<title>Encryption page</title>
 		<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
 		<script type="text/javascript" src="sjcl.js"></script>
-		<script type="text/javascript">
-			//<!--
-			var pwField, dataField, outputDisplay, encryptRB, decryptRB;
-
-			function encrypt() {
-				var pw = pwField.value;
-				var pwConf = pwConfField.value;
-				if (pw != pwConf) {
-					window.alert("The password and confirm password fields do not match. Try retyping the password.");
-					return;
-				}
-				var data = dataField.value;
-				var result = sjcl.encrypt(pw, data);
-				outputDisplay.value = result;
-			}
-
-			function decrypt() {
-				var pw = pwField.value;
-				var data = dataField.value
-				var result;
-				try {
-					result = sjcl.decrypt(pw, data);
-					outputDisplay.value = result;
-				} catch (e) {
-					if (e instanceof sjcl.exception.corrupt) {
-						window.alert("Incorrect password.");
-					} else if (e instanceof sjcl.exception.invalid) {
-						window.alert("The input data is not valid. It should start and end with curly braces ('{' and '}').");
-					}
-				}
-			}
-
-			// UI //
-
-			function showPWConfirm() {
-				pwConfLabel.style.display = 'inline';
-				pwConfField.style.display = 'inline';
-			}
-
-			function hidePWConfirm() {
-				pwConfLabel.style.display = 'none';
-				pwConfField.style.display = 'none';
-			}
-
-			// Event Handlers //
-
-			function encryptRB_onclick() {
-				decryptRB.checked = false;
-				showPWConfirm();
-			}
-
-			function decryptRB_onclick() {
-				encryptRB.checked = false;
-				hidePWConfirm();
-			}
-
-			function button_onclick() {
-				if (encryptRB.checked) {
-					encrypt();
-				} else {
-					decrypt();
-				}
-			}
-			//-->
-		</script>
+		<script type="text/javascript" src="script.js"></script>
 	</head>
 	<body>
 		<div id="container">
@@ -89,12 +25,12 @@
 					<tr>
 						<td class="passwordCell" colspan="2">
 							<label>Password:</label>
-							<input class="pwField" id="pwField" type="password" name="password"/>
+							<input id="pwField" type="password" name="pw" onkeyup="checkPWMatch()"/>
 							<label id="pwConfLabel">Confirm:<label>
-							<input class="pwField" id="pwConfField" type="password" name="passwordConf"/>
+							<input id="pwConfField" type="password" name="pwConf" onkeyup="checkPWMatch()"/>
 						</td>
 						<td>
-							<button class="spanning" onclick="button_onclick()">Do it</button>
+							<button class="spanning" id="button" onclick="button_onclick()">Do it</button>
 						</td>
 					</tr>
 					<tr>
@@ -113,6 +49,7 @@
 			dataField     = document.getElementById("dataField");
 			encryptRB     = document.getElementById("encryptRB");
 			decryptRB     = document.getElementById("decryptRB");
+			button        = document.getElementById("button");
 			outputDisplay = document.getElementById("outputDisplay");
 			//-->
 		</script>

diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+var pwField, dataField, outputDisplay, encryptRB, decryptRB, button;
+
+function encrypt() {
+	var pw = pwField.value;
+	var pwConf = pwConfField.value;
+	if (pw != pwConf) {
+		window.alert("The password and confirm password fields do not match. Try retyping the password.");
+		return;
+	}
+	var data = dataField.value;
+	var result = sjcl.encrypt(pw, data);
+	output(result);
+}
+
+function decrypt() {
+	var pw = pwField.value;
+	var data = dataField.value
+	var result;
+	try {
+		result = sjcl.decrypt(pw, data);
+		output(result);
+	} catch (e) {
+		if (e instanceof sjcl.exception.corrupt) {
+			window.alert("Incorrect password.");
+		} else if (e instanceof sjcl.exception.invalid) {
+			window.alert("The input data is not valid. It should start and end with curly braces ('{' and '}').");
+		}
+	}
+}
+
+// UI //
+
+function output(text) {
+	outputDisplay.value = text;
+}
+
+function showPWConfirm() {
+	pwConfLabel.style.display = 'inline';
+	pwConfField.style.display = 'inline';
+}
+
+function hidePWConfirm() {
+	pwConfLabel.style.display = 'none';
+	pwConfField.style.display = 'none';
+}
+
+function checkPWMatch() {
+	var newClassName;
+	if (pwField.value == "" || pwConfField.value == "") {
+		newClassName = "";
+	} else if (pwField.value == pwConfField.value) {
+		newClassName = "valid";
+	} else {
+		newClassName = "invalid";
+	}
+	pwField.className = newClassName;
+	pwConfField.className = newClassName;
+}
+
+// Event Handlers //
+
+function encryptRB_onclick() {
+	decryptRB.checked = false;
+	showPWConfirm();
+}
+
+function decryptRB_onclick() {
+	encryptRB.checked = false;
+	hidePWConfirm();
+}
+
+function button_onclick() {
+	if (encryptRB.checked) {
+		encrypt();
+	} else {
+		decrypt();
+	}
+}
diff --git a/stylesheet.css b/stylesheet.css
@@ -32,10 +32,18 @@ textarea {
 	background-color:white;
 }
 
-input.pwField {
+input[type=password] {
 	width:150px;
 }
 
+input.valid {
+	background-color:lightgreen;
+}
+
+input.invalid {
+	background-color:#FF8080;
+}
+
 td.passwordCell {
 	width:70%;
 }