add: register page

frontend/static/css/accounts/register.css

@@ -0,0 +1,12 @@
+#app .form {
+	background-color: red;
+    width: 300px;
+    height: 300px;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	grid-gap: 10px;
+	margin-left: auto;
+    margin-right: auto;
+	margin-top: 90px;
+    border: 15px black solid;
+}

frontend/static/js/api/accounts.js

@@ -0,0 +1,15 @@
+class Accounts
+{
+	constructor (client)
+	{
+		this.client = client;
+	}
+	
+	async create(username, password)
+	{
+		let response = await this.client._post("/api/accounts/register", {username: username, password: password});
+		return response
+	}
+}
+
+export { Accounts }

frontend/static/js/api/client.js

@@ -1,8 +1,20 @@
+import { Accounts } from "./accounts.js";
+
+function extract_token(response)
+{
+    let cookies = response.headers.get("set-cookie");
+	if (cookies == null)
+		return null;
+    token = cookies.slice(cookies.indexOf("=") + 1, cookies.indexOf(';'))
+    return token;
+}
+
 class Client
 {
 	constructor(url)
 	{
 		this._url = url;
+		this.accounts = new Accounts(this);
 		this._token = undefined; 
 	}
 
@@ -20,12 +32,16 @@ class Client
 			  },		  
 			body: JSON.stringify(data),
 		});
+		let token = extract_token(response);
+		if (token != null)
+			this.token = token;
         return response;
     }
 
 	async login(username, password)
 	{
-		return this._post("/api/accounts/login", {username: username, password: password})
+		let response = await this._post("/api/accounts/login", {username: username, password: password})
+		return response
 	}
 }
 

frontend/static/js/index.js

@@ -5,6 +5,7 @@ import PostView from "./views/PostView.js";
 import Settings from "./views/Settings.js";
 
 import { Client } from "./api/client.js";
+import RegisterView from "./views/accounts/RegisterView.js";
 
 let client = new Client(location.protocol + "//" + location.host)
 
@@ -31,6 +32,7 @@ const router = async () => {
         { path: "/posts/:id", view: PostView },
         { path: "/settings", view: Settings },
         { path: "/login", view: LoginView },
+        { path: "/register", view: RegisterView },
     ];
 
     // Test each route for potential match

frontend/static/js/views/accounts/RegisterView.js

@@ -0,0 +1,51 @@
+import AbstractView from "../AbstractView.js";
+import { client } from "../../index.js";
+
+async function register()
+{
+	let username = document.getElementById("username").value;
+	let password = document.getElementById("password").value;
+	
+	let response = await client.accounts.create(username, password);
+	let response_data = await response.json();
+	
+	["username", "user", "password"].forEach(error_field => {
+		let error_display = document.getElementById(`error_${error_field}`);
+		if (error_display != null)
+			error_display.innerHTML = "";
+	});
+
+	Object.keys(response_data).forEach(error_field => {
+		let error_display = document.getElementById(`error_${error_field}`);
+		if (error_display != null)
+			error_display.innerHTML = response_data[error_field];
+	});
+}
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params);
+        this.setTitle("register");
+		document.body.addEventListener("click", e => {
+			e.preventDefault();
+			if (e.target.type == "button")
+				register();
+		});
+	}
+
+    async getHtml() {
+        return `
+			<div class=form>
+				<label>Register</label>
+				<link rel="stylesheet" href="static/css/accounts/register.css">
+				<input type="text" id="username" placeholder="username">
+				<span id="error_username"></span>
+				<input type="password" id="password" placeholder="password">
+				<span id="error_password"></span>
+				<input type="button" value="register">
+				<span id="error_user"></span>
+				<a href="/login" class="nav__link" data-link>Login</a>
+			</div>
+        `;
+    }
+}