use api on login page

relay/frontend/page/admin-users.haml

@@ -9,16 +9,16 @@
 		%summary << Add User
 		#add-item
 			%label(for="new-username") << Username
-			%input(id="new-username" name="username" placeholder="Username")
+			%input(id="new-username" name="username" placeholder="Username" autocomplete="off")
 
 			%label(for="new-password") << Password
-			%input(id="new-password" type="password" placeholder="Password")
+			%input(id="new-password" type="password" placeholder="Password" autocomplete="off")
 
 			%label(for="new-password2") << Password Again
-			%input(id="new-password2" type="password" placeholder="Password Again")
+			%input(id="new-password2" type="password" placeholder="Password Again" autocomplete="off")
 
 			%label(for="new-handle") << Handle
-			%input(id="new-handle" type="email" placeholder="handle")
+			%input(id="new-handle" type="email" placeholder="handle" autocomplete="off")
 
 		%input#new-user(type="button" value="Add User")
 

relay/frontend/page/login.haml

@@ -1,10 +1,13 @@
 -extends "base.haml"
 -set page="Login"
+
+-block head
+	%script(type="application/javascript" src="/static/login.js" nonce="{{view.request['hash']}}" defer)
+
 -block content
 	%fieldset.section
 		%legend << Login
 
-		%form(action="/login" method="POST")
 		.grid-2col
 			%label(for="username") << Username
 			%input(id="username" name="username" placeholder="Username" value="{{username or ''}}")
@@ -12,4 +15,4 @@
 			%label(for="password") << Password
 			%input(id="password" name="password" placeholder="Password" type="password")
 
-			%input(type="submit" value="Login")
+		%input.submit(type="button" value="Login")

relay/frontend/static/login.js

@@ -0,0 +1,29 @@
+async function login(event) {
+	fields = {
+		username: document.querySelector("#username"),
+		password: document.querySelector("#password")
+	}
+
+	values = {
+		username: fields.username.value.trim(),
+		password: fields.password.value.trim()
+	}
+
+	if (values.username === "" | values.password === "") {
+		toast("Username and/or password field is blank");
+		return;
+	}
+
+	try {
+		await request("POST", "v1/token", values);
+
+	} catch (error) {
+		toast(error);
+		return;
+	}
+
+	document.location = "/";
+}
+
+
+document.querySelector(".submit").addEventListener("click", login);

relay/views/api.py

@@ -81,7 +81,19 @@ class Login(View):
 
 			token = conn.put_token(data['username'])
 
-		return Response.new({'token': token['code']}, ctype = 'json')
+		resp = Response.new({'token': token['code']}, ctype = 'json')
+		resp.set_cookie(
+				'user-token',
+				token['code'],
+				max_age = 60 * 60 * 24 * 365,
+				domain = self.config.domain,
+				path = '/',
+				secure = True,
+				httponly = False,
+				samesite = 'lax'
+			)
+
+		return resp
 
 
 	async def delete(self, request: Request) -> Response:

relay/views/frontend.py

@@ -72,47 +72,6 @@ class Login(View):
 		return Response.new(data, ctype = 'html')
 
 
-	async def post(self, request: Request) -> Response:
-		form = await request.post()
-		params = {}
-
-		with self.database.session(True) as conn:
-			if not (user := conn.get_user(form['username'])):
-				params = {
-					'username': form['username'],
-					'error': 'User not found'
-				}
-
-			else:
-				try:
-					conn.hasher.verify(user['hash'], form['password'])
-
-				except VerifyMismatchError:
-					params = {
-						'username': form['username'],
-						'error': 'Invalid password'
-					}
-
-			if params:
-				data = self.template.render('page/login.haml', self, **params)
-				return Response.new(data, ctype = 'html')
-
-			token = conn.put_token(user['username'])
-			resp = Response.new_redir(request.query.getone('redir', '/'))
-			resp.set_cookie(
-				'user-token',
-				token['code'],
-				max_age = 60 * 60 * 24 * 365,
-				domain = self.config.domain,
-				path = '/',
-				secure = True,
-				httponly = False,
-				samesite = 'lax'
-			)
-
-			return resp
-
-
 @register_route('/logout')
 class Logout(View):
 	async def get(self, request: Request) -> Response: