use api for admin config page

relay/frontend/page/admin-config.haml

@@ -1,10 +1,14 @@
 -extends "base.haml"
 -set page="Config"
+
+-block head
+	%script(type="application/javascript" src="/static/config.js" nonce="{{view.request['hash']}}" defer)
+
 -import "functions.haml" as func
 -block content
 	%fieldset.section
 		%legend << Config
-		%form(action="/admin/config" method="POST")
+
 		.grid-2col
 			%label(for="name") << Name
 			%input(id = "name" name="name" placeholder="Relay Name" value="{{config.name or ''}}")
@@ -23,5 +27,3 @@
 
 			%label(for="approval-required") << Approval Required
 			=func.new_checkbox("approval-required", config.approval_required)
-
-			%input(type="submit" value="Save")

relay/frontend/static/config.js

@@ -0,0 +1,34 @@
+const elems = [
+	document.querySelector("#name"),
+	document.querySelector("#description"),
+	document.querySelector("#theme"),
+	document.querySelector("#log-level"),
+	document.querySelector("#whitelist-enabled"),
+	document.querySelector("#approval-required")
+]
+
+
+async function handle_config_change(event) {
+	params = {
+		key: event.target.id,
+		value: event.target.type === "checkbox" ? event.target.checked : event.target.value
+	}
+
+	try {
+		await client.request("POST", "v1/config", params);
+
+	} catch (error) {
+		alert(error);
+		return;
+	}
+
+	if (params.key === "name") {
+		document.querySelector("#header .title").innerHTML = params.value;
+		document.querySelector("title").innerHTML = params.value;
+	}
+}
+
+
+for (const elem of elems) {
+	elem.addEventListener("change", handle_config_change);
+}

relay/views/api.py

@@ -133,6 +133,8 @@ class Config(View):
 		if isinstance(data, Response):
 			return data
 
+		data['key'] = data['key'].replace('-', '_');
+
 		if data['key'] not in ConfigData.USER_KEYS():
 			return Response.new_error(400, 'Invalid key', 'json')