use api for admin config page

relay/frontend/page/admin-config.haml

@@ -1,27 +1,29 @@
 -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 ''}}")
 
-				%label(for="description") << Description
+		.grid-2col
-				%textarea(id="description" name="note" value="{{config.note or ''}}") << {{config.note}}
+			%label(for="name") << Name
+			%input(id = "name" name="name" placeholder="Relay Name" value="{{config.name or ''}}")
 
-				%label(for="theme") << Color Theme
+			%label(for="description") << Description
-				=func.new_select("theme", config.theme, themes)
+			%textarea(id="description" name="note" value="{{config.note or ''}}") << {{config.note}}
 
-				%label(for="log-level") << Log Level
+			%label(for="theme") << Color Theme
-				=func.new_select("log-level", config.log_level.name, levels)
+			=func.new_select("theme", config.theme, themes)
 
-				%label(for="whitelist-enabled") << Whitelist
+			%label(for="log-level") << Log Level
-				=func.new_checkbox("whitelist-enabled", config.whitelist_enabled)
+			=func.new_select("log-level", config.log_level.name, levels)
 
-				%label(for="approval-required") << Approval Required
+			%label(for="whitelist-enabled") << Whitelist
-				=func.new_checkbox("approval-required", config.approval_required)
+			=func.new_checkbox("whitelist-enabled", config.whitelist_enabled)
 
-			%input(type="submit" value="Save")
+			%label(for="approval-required") << Approval Required
+			=func.new_checkbox("approval-required", config.approval_required)

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')