use api for users admin page

relay/frontend/page/admin-users.haml

@@ -1,29 +1,32 @@
 -extends "base.haml"
 -set page="Users"
+
+-block head
+	%script(type="application/javascript" src="/static/user.js" nonce="{{view.request['hash']}}")
+
 -block content
 	%details.section
 		%summary << Add User
-		%form(action="/admin/users", method="POST")
 		#add-item
-				%label(for="username") << Username
+			%label(for="new-username") << Username
-				%input(id="username" name="username" placeholder="Username")
+			%input(id="new-username" name="username" placeholder="Username")
 
-				%label(for="password") << Password
+			%label(for="new-password") << Password
-				%input(type="password" id="password" name="password" placeholder="Password")
+			%input(id="new-password" type="password" placeholder="Password")
 
-				%label(for="password2") << Password Again
+			%label(for="new-password2") << Password Again
-				%input(type="password" id="password2" name="password2" placeholder="Password Again")
+			%input(id="new-password2" type="password" placeholder="Password Again")
 
-				%label(for="handle") << Handle
+			%label(for="new-handle") << Handle
-				%input(type="email" name="handle" id="handle" placeholder="handle")
+			%input(id="new-handle" type="email" placeholder="handle")
 
-			%input(type="submit" value="Add User")
+		%input(type="button" value="Add User" onclick="add_user()")
 
 	%fieldset.section
 		%legend << Users
 
 		.data-table
-			%table
+			%table#users
 				%thead
 					%tr
 						%td.username << Username
@@ -33,7 +36,7 @@
 
 				%tbody
 					-for user in users
-						%tr
+						%tr(id="{{user.username}}")
 							%td.username
 								=user.username
 
@@ -44,4 +47,4 @@
 								=user.created.strftime("%Y-%m-%d")
 
 							%td.remove
-								%a(href="/admin/users/delete/{{user.username}}" title="Remove User") << &#10006;
+								%a(href="#" onclick="del_user('{{user.username}}')" title="Remove User") << &#10006;

relay/frontend/static/user.js

@@ -0,0 +1,60 @@
+async function add_user() {
+	var elems = {
+		username: document.getElementById("new-username"),
+		password: document.getElementById("new-password"),
+		password2: document.getElementById("new-password2"),
+		handle: document.getElementById("new-handle")
+	}
+
+	var values = {
+		username: elems.username.value.trim(),
+		password: elems.password.value.trim(),
+		password2: elems.password2.value.trim(),
+		handle: elems.handle.value.trim()
+	}
+
+	if (values.username === "" | values.password === "" | values.password2 === "") {
+		alert("Username, password, and password2 are required");
+		return;
+	}
+
+	if (values.password !== values.password2) {
+		alert("Passwords do not match");
+		return;
+	}
+
+	try {
+		var user = await client.request("POST", "v1/user", values);
+
+	} catch (err) {
+		alert(err);
+		return
+	}
+
+	append_table_row(document.getElementById("users"), user.username, {
+		domain: user.username,
+		handle: user.handle,
+		date: get_date_string(user.created),
+		remove: `<a href="#" onclick="del_user('${user.username}')" title="Delete User">&#10006;</a>`
+	});
+
+	elems.username.value = null;
+	elems.password.value = null;
+	elems.password2.value = null;
+	elems.handle.value = null;
+
+	document.querySelector("details.section").open = false;
+}
+
+
+async function del_user(username) {
+	try {
+		await client.request("DELETE", "v1/user", {"username": username});
+ 
+	} catch (error) {
+		alert(error);
+		return;
+	}
+
+	document.getElementById(username).remove();
+}