accounts: merge register and login #1
This commit is contained in:
AdrienLSH
parent
4778bf51d1
commit
4aecf2d9ab
@ -1,10 +1,8 @@
|
||||
import { Client } from "./api/client.js";
|
||||
|
||||
import LoginView from "./views/accounts/LoginView.js";
|
||||
import Dashboard from "./views/Dashboard.js";
|
||||
import Search from "./views/Search.js";
|
||||
import HomeView from "./views/HomeView.js";
|
||||
import RegisterView from "./views/accounts/RegisterView.js";
|
||||
import LogoutView from "./views/accounts/LogoutView.js";
|
||||
import GameOfflineView from "./views/GameOfflineView.js";
|
||||
import GameView from "./views/GameView.js";
|
||||
@ -18,6 +16,7 @@ import MatchMakingView from "./views/MatchMakingView.js";
|
||||
import TournamentPageView from "./views/tournament/TournamentPageView.js";
|
||||
import TournamentsView from "./views/tournament/TournamentsListView.js";
|
||||
import TournamentCreateView from "./views/tournament/TournamentCreateView.js";
|
||||
import AuthentificateView from "./views/accounts/AuthentifyView.js";
|
||||
|
||||
let client = new Client(location.origin);
|
||||
let lang = client.lang;
|
||||
@ -62,7 +61,6 @@ async function renderView(view)
|
||||
|
||||
let error_code = await view.postInit();
|
||||
|
||||
|
||||
if (error_code === 404)
|
||||
renderView(new PageNotFoundView());
|
||||
else if (error_code === 403)
|
||||
@ -77,9 +75,9 @@ const router = async(uri) => {
|
||||
{ path: "/tournaments/create", view: TournamentCreateView },
|
||||
{ path: "/tournaments/:id", view: TournamentPageView },
|
||||
{ path: "/tournaments/", view: TournamentsView },
|
||||
{ path: "/login", view: LoginView },
|
||||
{ path: "/login", view: AuthentificateView },
|
||||
{ path: "/register", view: AuthentificateView },
|
||||
{ path: "/logout", view: LogoutView },
|
||||
{ path: "/register", view: RegisterView },
|
||||
{ path: "/search", view: Search },
|
||||
{ path: "/home", view: HomeView },
|
||||
{ path: "/settings", view: SettingsView },
|
||||
|
||||
162
frontend/static/js/views/accounts/AuthentifyView.js
Normal file
162
frontend/static/js/views/accounts/AuthentifyView.js
Normal file
@ -0,0 +1,162 @@
|
||||
|
||||
import { client, lang, navigateTo } from "../../index.js";
|
||||
import { clear, fill_errors } from "../../utils/formUtils.js";
|
||||
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentifiedView.js";
|
||||
|
||||
export default class extends AbstractNonAuthentifiedView
|
||||
{
|
||||
constructor(params, lastUrlBeforeLogin = '/home')
|
||||
{
|
||||
super(params, lang.get('loginWindowTitle', 'Login'), lastUrlBeforeLogin);
|
||||
this.redirectTo = lastUrlBeforeLogin;
|
||||
this.current_mode = undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async postInit()
|
||||
{
|
||||
let element = document.getElementById("toogle-register-login");
|
||||
|
||||
element.onclick = this.toogle_register_login.bind(this);
|
||||
|
||||
let new_mode = location.pathname.slice(1);
|
||||
this.update_mode(new_mode);
|
||||
|
||||
document.getElementById("button").onclick = this.authentificate.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if field is normal
|
||||
* @returns {null | Object<String>}
|
||||
*/
|
||||
basic_verif()
|
||||
{
|
||||
let username = document.getElementById('username-input').value;
|
||||
let password = document.getElementById('password-input').value;
|
||||
|
||||
if (username === '')
|
||||
document.getElementById('username').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
|
||||
if (password === '')
|
||||
document.getElementById('password').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
|
||||
if (username === '' || password === '')
|
||||
return null;
|
||||
|
||||
return { username, password };
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { undefined }
|
||||
*/
|
||||
toogle_register_login(event)
|
||||
{
|
||||
event.preventDefault();
|
||||
|
||||
let new_mode = this.current_mode === "register" ? "login" : "register";
|
||||
|
||||
this.update_mode(new_mode);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} new_mode
|
||||
*/
|
||||
update_mode(new_mode)
|
||||
{
|
||||
if (new_mode === this.current_mode)
|
||||
return;
|
||||
|
||||
this.current_mode = new_mode;
|
||||
|
||||
let title = document.getElementById("title"),
|
||||
username_label = document.getElementById("username-label"),
|
||||
password_label = document.getElementById("password-label"),
|
||||
toogle_register_login = document.getElementById("toogle-register-login"),
|
||||
toogle_register_login_label = document.getElementById("toogle-register-login-label"),
|
||||
button = document.getElementById("button")
|
||||
;
|
||||
|
||||
let title_text = this.current_mode === "register" ? "registerFormTitle" : "loginFormTitle";
|
||||
title.innerText = lang.get(title_text, "ERROR LANG");
|
||||
|
||||
let username_label_text = this.current_mode === "register" ? "registerFormUsername" : "loginFormUsername";
|
||||
username_label.innerText = lang.get(username_label_text, "ERROR LANG");
|
||||
|
||||
let password_label_text = this.current_mode === "register" ? "registerFormPassword" : "loginFormPassword";
|
||||
password_label.innerText = lang.get(password_label_text, "ERROR LANG");
|
||||
|
||||
let toogle_register_login_label_text = this.current_mode === "register" ? "registerAlreadyAccount" : "loginNoAccount";
|
||||
toogle_register_login_label.innerText = lang.get(toogle_register_login_label_text, "ERROR LANG");;
|
||||
|
||||
let toogle_register_login_text = this.current_mode === "register" ? "registerLogin" : "loginRegister";
|
||||
toogle_register_login.innerText = lang.get(toogle_register_login_text, "ERROR LANG");
|
||||
|
||||
let button_text = this.current_mode === "login" ? "loginFormButton" : "registerFormButton";
|
||||
button.innerText = lang.get(button_text, "ERROR LANG");
|
||||
|
||||
history.pushState(null, null, `/${this.current_mode}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async authentificate()
|
||||
{
|
||||
let ret = this.basic_verif();
|
||||
|
||||
if (ret === null)
|
||||
return
|
||||
|
||||
let {username, password} = ret;
|
||||
|
||||
let response_data;
|
||||
|
||||
if (this.current_mode === "register")
|
||||
response_data = await client.account.create(username, password)
|
||||
else
|
||||
response_data = await client.login(username, password);
|
||||
|
||||
if (response_data !== null)
|
||||
{
|
||||
navigateTo(this.redirectTo);
|
||||
return;
|
||||
}
|
||||
|
||||
clear("innerHTML", ["username", "password", 'register']);
|
||||
fill_errors(response_data, "innerHTML");
|
||||
|
||||
}
|
||||
|
||||
async getHtml()
|
||||
{
|
||||
return /* HTML */ `
|
||||
<link rel="stylesheet" href="/static/css/authentify.css">
|
||||
|
||||
<div class='container-fluid'>
|
||||
<form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
|
||||
<h4 class='text-center fw-semibold mb-4' id="title">Loading...</h4>
|
||||
<div class='form-floating mb-2'>
|
||||
<input type='text' class='form-control' id='username-input' placeholder='Username'>
|
||||
<label for='usernameInput' id='username-label'>Loading...</label>
|
||||
<span class='text-danger' id='username'></span>
|
||||
</div>
|
||||
<div class='form-floating'>
|
||||
<input type='password' class='form-control' id='password-input' placeholder='Password'>
|
||||
<label for='password-input' id='password-label'>Loading...</label>
|
||||
<span class='text-danger' id='password'></span>
|
||||
</div>
|
||||
<div class='d-flex'>
|
||||
<button type='button' class='btn btn-primary mt-3 mb-2' id='button'>Loading...</button>
|
||||
<span class='text-danger my-auto mx-2' id='register'></span>
|
||||
<div class='ms-auto mt-auto flex-row d-flex gap-2' id="toogle">
|
||||
<p id='toogle-register-login-label'>Loading...</p>
|
||||
<a id="toogle-register-login" href='#'>Loading...</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import { client, lang, navigateTo } from "../../index.js";
|
||||
import { clear, fill_errors } from "../../utils/formUtils.js";
|
||||
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
|
||||
|
||||
async function login(redirectTo = '/home')
|
||||
{
|
||||
clear('innerHTML', ['username', 'password', 'login']);
|
||||
|
||||
let username = document.getElementById('usernameInput').value;
|
||||
let password = document.getElementById('passwordInput').value;
|
||||
|
||||
if (username === '') {
|
||||
document.getElementById('username').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
}
|
||||
if (password === '') {
|
||||
document.getElementById('password').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
}
|
||||
if (username === '' || password === '')
|
||||
return;
|
||||
|
||||
let response = await client.login(username, password);
|
||||
|
||||
if (response.status == 200) {
|
||||
navigateTo(redirectTo);
|
||||
} else {
|
||||
let error = await response.json();
|
||||
fill_errors(error, "innerHTML");
|
||||
}
|
||||
}
|
||||
|
||||
export default class extends AbstractNonAuthentifiedView {
|
||||
constructor(params, lastUrlBeforeLogin = '/home') {
|
||||
super(params, lang.get('loginWindowTitle', 'Login'), lastUrlBeforeLogin);
|
||||
this.redirectTo = lastUrlBeforeLogin;
|
||||
}
|
||||
|
||||
async postInit()
|
||||
{
|
||||
let usernameField = document.getElementById('usernameInput');
|
||||
usernameField.addEventListener('keydown', ev => {
|
||||
if (ev.key === 'Enter')
|
||||
login(this.redirectTo);
|
||||
});
|
||||
usernameField.focus();
|
||||
let passwordField = document.getElementById('passwordInput');
|
||||
passwordField.addEventListener('keydown', ev => {
|
||||
if (ev.key === 'Enter')
|
||||
login(this.redirectTo);
|
||||
});
|
||||
document.getElementById('loginButton').onclick = _ => login(this.redirectTo);
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
return `
|
||||
<div class='container-fluid'>
|
||||
<form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
|
||||
<h4 class='text-center fw-semibold mb-4'>${lang.get('loginFormTitle', 'Login')}</h4>
|
||||
<div class='form-floating mb-2'>
|
||||
<input type='text' class='form-control' id='usernameInput' placeholder='Username'>
|
||||
<label for='usernameInput'>${lang.get('loginFormUsername', 'Username')}</label>
|
||||
<span class='text-danger' id='username'></span>
|
||||
</div>
|
||||
<div class='form-floating'>
|
||||
<input type='password' class='form-control' id='passwordInput' placeholder='Password'>
|
||||
<label for='passwordInput'>${lang.get('loginFormPassword', 'Password')}</label>
|
||||
<span class='text-danger' id='password'></span>
|
||||
</div>
|
||||
<div class='d-flex'>
|
||||
<button type='button' class='btn btn-primary mt-3 mb-2' id='loginButton'>${lang.get('loginFormButton', 'Login')}</button>
|
||||
<span class='text-danger my-auto mx-2' id='login'></span>
|
||||
<p class='ms-auto mt-auto'>${lang.get('loginNoAccount', 'No account yet?')} <a href='/register' data-link>${lang.get('loginRegister', 'Register')}</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import { client, lang, navigateTo } from "../../index.js";
|
||||
import { clear, fill_errors } from "../../utils/formUtils.js";
|
||||
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
|
||||
|
||||
async function register(redirectTo = '/home')
|
||||
{
|
||||
let username = document.getElementById("usernameInput").value;
|
||||
let password = document.getElementById("passwordInput").value;
|
||||
|
||||
if (username === '' || password === '') {
|
||||
clear("innerHTML", ["username", "password"]);
|
||||
if (username === '')
|
||||
document.getElementById('username').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
if (password === '')
|
||||
document.getElementById('password').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
|
||||
return;
|
||||
}
|
||||
|
||||
let response_data = await client.account.create(username, password);
|
||||
|
||||
if (response_data == null)
|
||||
{
|
||||
navigateTo(redirectTo);
|
||||
return;
|
||||
}
|
||||
|
||||
clear("innerHTML", ["username", "password", 'register']);
|
||||
fill_errors(response_data, "innerHTML");
|
||||
}
|
||||
|
||||
export default class extends AbstractNonAuthentifiedView {
|
||||
constructor(params, lastUrlBeforeLogin = '/home') {
|
||||
super(params, lang.get('registerWindowTitle', 'Register'), lastUrlBeforeLogin);
|
||||
this.redirectTo = lastUrlBeforeLogin;
|
||||
}
|
||||
|
||||
async postInit()
|
||||
{
|
||||
let usernameField = document.getElementById('usernameInput');
|
||||
usernameField.addEventListener('keydown', ev => {
|
||||
if (ev.key === 'Enter')
|
||||
register(this.redirectTo);
|
||||
});
|
||||
usernameField.focus();
|
||||
let passwordField = document.getElementById('passwordInput');
|
||||
passwordField.addEventListener('keydown', ev => {
|
||||
if (ev.key === 'Enter')
|
||||
register(this.redirectTo);
|
||||
});
|
||||
document.getElementById("registerButton").onclick = _ => register(this.redirectTo);
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
return `
|
||||
<div class='container-fluid'>
|
||||
<form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
|
||||
<h4 class='text-center fw-semibold mb-4'>${lang.get('registerFormTitle', 'Register')}</h4>
|
||||
<div class='form-floating mb-2'>
|
||||
<input type='text' class='form-control' id='usernameInput' placeholder='Username'>
|
||||
<label for='usernameInput'>${lang.get('registerFormUsername', 'Username')}</label>
|
||||
<span class='text-danger' id='username'></span>
|
||||
</div>
|
||||
<div class='form-floating'>
|
||||
<input type='password' class='form-control' id='passwordInput' placeholder='Password'>
|
||||
<label for='passwordInput'>${lang.get('registerFormPassword', 'Password')}</label>
|
||||
<span class='text-danger' id='password'></span>
|
||||
</div>
|
||||
<div class='d-flex'>
|
||||
<button type='button' class='btn btn-primary mt-3 mb-2' id='registerButton'>${lang.get('registerFormButton', 'Register')}</button>
|
||||
<span class='text-danger my-auto mx-2' id='register'></span>
|
||||
<p class='ms-auto mt-auto'>${lang.get('registerAlreadyAccount', 'Already have an account?')} <a href='/login' data-link>${lang.get('registerLogin', 'Login')}</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user