support for encoding/decoding url values and testing json objects as url query values

Author: horvski

test_unit.js

@@ -70,7 +70,7 @@ const ExampleValues = {
 let t_InitForm = {
 	"name": "Initialize Form",
 	"func": test_Init,
-	"golden": `https://localhost:8082/?first_name=Bob&last_name=Smith&email_address=bob%40something.com&phone_number=1234567890&subscribe_latest_news=true&country_select=1`
+	"golden": `https://localhost:8082/?first_name=Bob&last_name=Smith&email_address=bob%40something.com&phone_number=1234567890&subscribe_latest_news=true&country_select=1&json_payload=%7B%22e%22%3A%22ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789%21%23%24%25%26%28%29*%2B%2C.%2F%3A%3B%3C%3D%3E%3F%40%5B%5D%5E_%60%7B%7C%7D%7E%22%7D`
 };
 
 /**@type {Test} */
@@ -201,6 +201,11 @@ function test_Init() {
 	url.searchParams.set('phone_number', 1234567890);
 	url.searchParams.set('subscribe_latest_news', true);
 	url.searchParams.set('country_select', "1");
+	// Tests JSON objects/escaping as URL values.
+	url.searchParams.set('json_payload', JSON.stringify({
+		"e": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,./:;<=>?@[]^_`{|}~"
+	}));
+
 	// Push new state that updates query params without reloading the page.
 	window.history.pushState({}, '', url);
 	initedFormOptions = URLForm.Init(FormOptions);
@@ -264,8 +269,8 @@ function test_GetFormElements() {
 // Tests retrieval of key:value pairs from the URL.
 function test_GetURLKeyValue() {
 	let pairs = URLForm.GetURLKeyValue(initedFormOptions);
-	let golden = `{"first_name":"Bob","last_name":"Smith","email_address":"bob@something.com","phone_number":"1234567890","subscribe_latest_news":"true","country_select":"1"}`
-	return JSON.stringify(pairs) === golden;
+	let golden = {"first_name":"Bob","last_name":"Smith","email_address":"bob@something.com","phone_number":"1234567890","subscribe_latest_news":"true","country_select":"1","json_payload":"{\"e\":\"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,./:;<=>?@[]^_`{|}~\"}"}
+	return JSON.stringify(pairs) === JSON.stringify(golden);
 }
 
 // Tests Serialize().

urlform.js

@@ -386,7 +386,8 @@ function getFragmentString() {
 	if (fParts.length == 1) { // only "#"
 		return "";
 	}
-	return fParts[1];
+	// Always decode URL, even if not URL encoded.
+	return decodeURIComponent(fParts[1]);
 }
 
 
@@ -571,7 +572,7 @@ function sanitizeFormOptions(formOptions) {
 
 /**
  * Generates a share URL from the current URL and form, populates the GUI with
- * share links, and returns the URL. 
+ * share links, and returns the URL encoded URL.
  *
  * Fragment query parameters take precedence over query parameters.
  *
@@ -644,7 +645,7 @@ function setShareURL(href, formOptions) {
 
 
 /**
- * Generates a fragment string from Fragment.
+ * Generates a URL encoded fragment string from Fragment.
  * 
  * @param   {Fragment}      fragment
  * @param   {FormOptions}   formOptions
@@ -685,7 +686,7 @@ function quagPartsToURLHash(fragment, formOptions) {
 
 	// After.
 	fqs += fragment.after;
-	return fqs;
+	return encodeURIComponent(fqs);
 }
 
 
@@ -773,7 +774,7 @@ function GetQuagParts(formOptions) {
 
 	let qp = {
 		query: {
-			string: window.location.search.substring(1), // substring removes "?"
+			string: decodeURIComponent(window.location.search.substring(1)), // substring removes "?"
 			pairs: getPairs(window.location.search.substring(1)),
 			extras: {},
 		},