Validate input and show errors

Author: deansheather

extension/src/common.scss

@@ -22,6 +22,15 @@ h1, h2, h3 {
 	font-weight: bold;
 }
 
+.error {
+	color: $text-color-status-error;
+}
+.small {
+	margin-top: 6px;
+	margin-bottom: 6px;
+	font-size: 0.8em;
+}
+
 input[type=text] {
 	padding: 6px 9px;
 	border: solid $text-color-darker 1px;

extension/src/config.html

@@ -23,7 +23,7 @@
 	</header>
 
 	<section id="sail-status" class="status-container content">
-		<div class="status content">
+		<div class="status">
 			<h3 id="sail-available-status">Fetching Sail URL...</h3>
 		</div>
 	</section>
@@ -63,11 +63,24 @@ <h2>Approved Hosts</h2>
 				-->
 			</tbody>
 		</table>
+		<p id="approved-hosts-remove-error" class="error small" style="display: none;">
+			Failed to remove host from the approved hosts list.
+			Check the browser console for more details.
+		</p>
 
 		<div style="margin-top: 40px;">
 			<h3 style="margin-bottom: 8px;">Add an approved host:</h3>
 			<input id="approved-hosts-add-input" type="text" pattern="^(\.?[^\.]+)+$">
 			<button id="approved-hosts-add">Add</button>
+			<p id="approved-hosts-bad-input" class="error small" style="display: none;">
+				Invalid host. A valid host looks like
+				<code>.github.com</code> or
+				<code>sail.dev</code>.
+			</p>
+			<p id="approved-hosts-error" class="error small" style="display: none;">
+				Failed to add host to the approved hosts list.
+				Check the browser console for more details.
+			</p>
 
 			<p>
 				If you prepend your host with a period, Sail

extension/src/config.ts

@@ -9,8 +9,11 @@ import "./config.scss";
 const sailStatus = document.getElementById("sail-status");
 const sailAvailableStatus = document.getElementById("sail-available-status");
 const approvedHostsEntries = document.getElementById("approved-hosts-entries");
+const approvedHostsRemoveError = document.getElementById("approved-hosts-remove-error");
 const approvedHostsAdd = document.getElementById("approved-hosts-add");
 const approvedHostsAddInput = document.getElementById("approved-hosts-add-input") as HTMLInputElement;
+const approvedHostsBadInput = document.getElementById("approved-hosts-bad-input");
+const approvedHostsError = document.getElementById("approved-hosts-error");
 
 // Check if the native manifest is installed.
 sailAvailable().then(() => {
@@ -30,29 +33,61 @@ sailAvailable().then(() => {
 	sailStatus.appendChild(pre);
 });
 
-// Create event listener to add approved hosts.
+// Create event listeners to add approved hosts.
 approvedHostsAdd.addEventListener("click", (e: Event) => {
 	e.preventDefault();
-	const host = approvedHostsAddInput.value.toLowerCase();
-	// TODO: validate here
+	submitApprovedHost();
+});
+approvedHostsAddInput.addEventListener("keyup", (e: KeyboardEvent) => {
+	if (e.keyCode === 13) {
+		e.preventDefault();
+		submitApprovedHost();
+	}
+});
+let invalidInputTimeout: number = null;
+let errorTimeout: number = null;
+const submitApprovedHost = (): Promise<void> => {
+	let host = approvedHostsAddInput.value.toLowerCase();
 	if (!host) {
 		return;
 	}
-	console.log(host);
 
-	addApprovedHost(host)
+	// Validation logic. Users can put in a full URL or a valid host and it
+	// should be parsed successfully.
+	const match = host.match(/^\s*(https?:\/\/)?((\.?[a-z\d_-]+)+)(\/.*)?\s*$/);
+	if (!match) {
+		approvedHostsBadInput.style.display = "block";
+		clearTimeout(invalidInputTimeout);
+		invalidInputTimeout = setTimeout(() => {
+			approvedHostsBadInput.style.display = "none";
+		}, 5000);
+		return;
+	}
+	host = match[2];
+
+	return addApprovedHost(host)
 		.then(() => {
 			approvedHostsAddInput.value = "";
 		})
 		.catch((ex) => {
-			alert("Failed to add host to approved hosts list.\n\n" + ex.toString());
+			console.error("Failed to add host to approved hosts list.", ex);
+			approvedHostsRemoveError.style.display = "block";
+			clearTimeout(errorTimeout);
+			errorTimeout = setTimeout(() => {
+				approvedHostsError.style.display = "none";
+			}, 5000);
 		})
 		.finally(() => {
-			reloadApprovedHostsTable();
+			reloadApprovedHostsTable()
+				.then((hosts) => console.log("Reloaded approved hosts.", hosts))
+				.catch((ex) => {
+					alert("Failed to reload approved hosts from extension storage.\n\n" + ex.toString());
+				});
 		});
-});
+};
 
 // Handles click events for remove buttons in the approved hosts table.
+let removeErrorTimeout: number = null;
 const removeBtnHandler = function (e: Event) {
 	e.preventDefault();
 	const host = this.dataset.host;
@@ -70,7 +105,12 @@ const removeBtnHandler = function (e: Event) {
 			return setApprovedHosts(hosts);
 		})
 		.catch((ex) => {
-			alert("Failed to remove host from approved hosts list.\n\n" + ex.toString());
+			console.error("Failed to remove host from approved hosts list.", ex);
+			approvedHostsRemoveError.style.display = "block";
+			clearTimeout(removeErrorTimeout);
+			removeErrorTimeout = setTimeout(() => {
+				approvedHostsRemoveError.style.display = "none";
+			}, 5000);
 		})
 		.finally(() => {
 			reloadApprovedHostsTable()