42_ft_transcendence/frontend/static/js/views/accounts/RegisterView.js
2024-01-11 13:03:43 +01:00

67 lines
2.0 KiB
JavaScript

import { client, navigateTo } from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js";
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
async function register()
{
let username = document.getElementById("username-input").value;
let password = document.getElementById("password-input").value;
if (username === '' || password === '') {
clear("innerHTML", ["username", "password"]);
if (username === '')
document.getElementById('username').innerHTML = 'This field may not be blank.';
if (password === '')
document.getElementById('password').innerHTML = 'This field may not be blank.';
return;
}
let response_data = await client.account.create(username, password);
if (response_data == null)
{
navigateTo("/home");
return;
}
clear("innerHTML", ["username", "user", "password"]);
fill_errors(response_data, "innerHTML");
}
export default class extends AbstractNonAuthentifiedView {
constructor(params) {
super(params, "Register", "/home");
}
async postInit()
{
let usernameField = document.getElementById('username-input');
usernameField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
register();
});
usernameField.focus();
let passwordField = document.getElementById('password-input');
passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
register();
});
document.getElementById("register-button").onclick = register;
}
async getHtml() {
return `
<div class=form>
<label>Register</label>
<link rel="stylesheet" href="/static/css/accounts/register.css">
<input type="text" id="username-input" placeholder="username">
<span id="username"></span>
<input type="password" id="password-input" placeholder="password">
<span id="password"></span>
<input type="button" value="Register" id="register-button">
<span id="user"></span>
<a href="/login" class="nav__link" data-link>Login</a>
</div>
`;
}
}