use api for whitelist admin page

relay/frontend/page/admin-whitelist.haml

@@ -1,19 +1,22 @@
 -extends "base.haml"
 -set page="Whitelist"
+
+-block head
+	%script(type="application/javascript" src="/static/whitelist.js" nonce="{{view.request['hash']}}")
+
 -block content
 	%details.section
 		%summary << Add Domain
-		%form(action="/admin/whitelist" method="POST")
+		#add-item
-			#add-item
+			%label(for="new-domain") << Domain
-				%label(for="domain") << Domain
+			%input(type="domain" id="new-domain" placeholder="Domain")
-				%input(type="domain" id="domain" name="domain" placeholder="Domain")
 
-			%input(type="submit" value="Add Domain")
+		%input(type="button" value="Add Domain", onclick="add_whitelist()")
 
 	%fieldset.data-table.section
 		%legend << Whitelist
 
-		%table
+		%table#whitelist
 			%thead
 				%tr
 					%td.domain << Domain
@@ -22,7 +25,7 @@
 
 			%tbody
 				-for item in whitelist
-					%tr
+					%tr(id="{{item.domain}}")
 						%td.domain
 							=item.domain
 
@@ -30,4 +33,4 @@
 							=item.created.strftime("%Y-%m-%d")
 
 						%td.remove
-							%a(href="/admin/whitelist/delete/{{item.domain}}" title="Remove whitlisted domain") << &#10006;
+							%a(href="#" onclick="del_whitelist('{{item.domain}}')" title="Remove whitlisted domain") << &#10006;

relay/frontend/static/instance.js

@@ -36,7 +36,7 @@ async function add_instance() {
 	}
 
 	if (values.actor === "") {
-		alert("Domain, actor, and inbox are required");
+		alert("Actor is required");
 		return;
 	}
 

relay/frontend/static/whitelist.js

@@ -0,0 +1,49 @@
+async function add_whitelist() {
+	var domain_elem = document.getElementById("new-domain");
+	var domain = domain_elem.value.trim();
+
+	if (domain === "") {
+		alert("Domain is required");
+		return;
+	}
+
+	try {
+		var item = await client.request("POST", "v1/whitelist", {"domain": domain});
+
+	} catch (err) {
+		alert(err);
+		return
+	}
+
+	var table = document.getElementById("whitelist");
+	var row = table.insertRow(-1);
+	row.id = item.domain;
+
+	var domain = row.insertCell(0);
+	domain.className = "domain";
+	domain.innerHTML = item.domain;
+
+	var date = row.insertCell(1);
+	date.className = "date";
+	date.innerHTML = get_date_string(item.created);
+
+	var remove = row.insertCell(2);
+	remove.className = "remove";
+	remove.innerHTML = `<a href="#" onclick="del_whitelist('${item.domain}')" title="Remove whitelisted domain">&#10006;</a>`;
+
+	domain_elem.value = null;
+	document.querySelector("details.section").open = false;
+}
+
+
+async function del_whitelist(domain) {
+	try {
+		await client.request("DELETE", "v1/whitelist", {"domain": domain});
+
+	} catch (error) {
+		alert(error);
+		return;
+	}
+
+	document.getElementById(domain).remove();
+}