accounts: merge register and login #1

frontend/static/js/index.js

@@ -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 },

frontend/static/js/views/accounts/AuthentifyView.js

@@ -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>
+        `;
+	}
+}

frontend/static/js/views/accounts/LoginView.js

@@ -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>
-		`;
-    }
-}

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

@@ -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>
-        `;
-    }
-}