import AbstractView from "../AbstractView.js";
import { client, navigateTo } 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);
	}

	async postInit()
	{
		this.setTitle("register");
		document.getElementById("button").onclick = register;
	}

    async getHtml() {
		if (await client.isAuthentificate())
		{
			navigateTo("/home")
			return;
		}
        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" id="button">
				<span id="error_user"></span>
				<a href="/login" class="nav__link" data-link>Login</a>
			</div>
        `;
    }
}