Added error checking to configuration.html

html/configuration.html

@@ -20,7 +20,7 @@ <h3>
     </div>
     <div id="settings" data-role="content">
 		<div data-role="fieldcontain"><label for="keyname">Name</label>
-			<input name="keyname" id="keyname" placeholder="" value="" data-mini="true" type="text">
+			<input name="keyname" id="keyname" placeholder="" value="" maxlength=6 data-mini="true" type="text">
 		</div>
 		<div data-role="fieldcontain"><label for="keysecret">Secret</label>
 			<input name="keysecret" id="keysecret" placeholder="" value="" data-mini="true" type="text">
@@ -47,30 +47,129 @@ <h3>
 	</div>
 </div>
     <script>
-      function saveOptions() {
-        var options = {
-          'label': $("#keyname").val(),
-		  'secret': $("#keysecret").val().replace(/\s/g, ''),
-		  'theme': parseInt($("input[name=theme]:checked").val(), 10),
-        }
-        return options;
-      }
+		// Base32 decoder from https://github.com/agnoster/base32-js/blob/master/lib/base32.js by Isaac Wolkerstorfer
+		var alphabet = '0123456789abcdefghjkmnpqrtuvwxyz'
+		var alias = { o:0, i:1, l:1, s:5 }
+
+		var lookup = function() {
+			var table = {}
+			// Invert 'alphabet'
+			for (var i = 0; i < alphabet.length; i++) {
+				table[alphabet[i]] = i
+			}
+			// Splice in 'alias'
+			for (var key in alias) {
+				if (!alias.hasOwnProperty(key)) continue
+				table[key] = table['' + alias[key]]
+			}
+			lookup = function() { return table }
+			return table
+		}
+
+		function Decoder() {
+			var skip = 0 // how many bits we have from the previous character
+			var byte = 0 // current byte we're producing
+
+			this.output = ''
+
+			// Consume a character from the stream, store
+			// the output in this.output. As before, better
+			// to use update().
+			this.readChar = function(char) {
+				if (typeof char != 'string'){
+					if (typeof char == 'number') {
+						char = String.fromCharCode(char)
+					}
+				}
+				char = char.toLowerCase()
+				var val = lookup()[char]
+				if (typeof val == 'undefined') {
+					// character does not exist in our lookup table
+					return // skip silently. An alternative would be:
+					// throw Error('Could not find character "' + char + '" in lookup table.')
+				}
+				val <<= 3 // move to the high bits
+				byte |= val >>> skip
+				skip += 5
+				if (skip >= 8) {
+					// we have enough to preduce output
+					this.output += String.fromCharCode(byte)
+					skip -= 8
+					if (skip > 0) byte = (val << (5 - skip)) & 255
+					else byte = 0
+				}
+
+			}
+
+			this.finish = function(check) {
+				var output = this.output + (skip < 0 ? alphabet[bits >> 3] : '') + (check ? '$' : '')
+				this.output = ''
+				return output
+			}
+		}
+
+		Decoder.prototype.update = function(input, flush) {
+			for (var i = 0; i < input.length; i++) {
+				this.readChar(input[i])
+			}
+			var output = this.output
+			this.output = ''
+			if (flush) {
+			  output += this.finish()
+			}
+			return output
+		}
+
+		// Base32-encoded string goes in, decoded data comes out.
+		function decode(input) {
+			var decoder = new Decoder()
+			var output = decoder.update(input, true)
+			return output
+		}
+
+		function base32length(secret) {
+			return decode(secret).length;
+		}
+
+		function saveOptions() {
+
+			var options = {};
+
+			options.theme = parseInt($("input[name=theme]:checked").val(), 10);
+
+			if ($("#keysecret").val()) {
+				options.label =  $("#keyname").val().substring(0,6);
+				options.secret = $("#keysecret").val().replace(/\s/g, '');
+			}
+
+			return options;
+		}
 
-      $().ready(function() {
-        $("#cancel").click(function() {
-          console.log("Cancel");
-          document.location = "pebblejs://close";
-        });
+		$().ready(function() {
+			$("#cancel").click(function() {
+			  console.log("Cancel");
+			  document.location = "pebblejs://close";
+			});
 
-        $("#save").click(function() {
-          console.log("Submit");
+			$("#save").click(function() {
+				console.log("Submit");
 
-          var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
-          console.log("Warping to: " + location);
-          console.log(location);
-          document.location = location;
-        });
-      });
+				var options = saveOptions();
+
+				if (options.secret && base32length(options.secret) < 10) {
+					alert("Secret key value is too short");
+				}
+				else if (options.secret && options.label.length === 0) {
+					alert("Please enter a label");
+				}
+				else {
+					var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(options));
+					console.log("Warping to: " + location);
+					console.log(location);
+					document.location = location;
+				}
+			});
+		});
     </script>
   </body>
 </html>