diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index 911920a..90c789e 100644 --- a/frontend/static/js/index.js +++ b/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 }, diff --git a/frontend/static/js/views/accounts/AuthentifyView.js b/frontend/static/js/views/accounts/AuthentifyView.js new file mode 100644 index 0000000..0c675c3 --- /dev/null +++ b/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} + */ + 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 */ ` + + +
+
+

Loading...

+
+ + + +
+
+ + + +
+
+ + +
+

Loading...

+ Loading... +
+
+
+
+ `; + } +} \ No newline at end of file diff --git a/frontend/static/js/views/accounts/LoginView.js b/frontend/static/js/views/accounts/LoginView.js deleted file mode 100644 index 61b9b14..0000000 --- a/frontend/static/js/views/accounts/LoginView.js +++ /dev/null @@ -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 ` -
-
-

${lang.get('loginFormTitle', 'Login')}

-
- - - -
-
- - - -
-
- - -

${lang.get('loginNoAccount', 'No account yet?')} ${lang.get('loginRegister', 'Register')}

-
-
-
- `; - } -} diff --git a/frontend/static/js/views/accounts/RegisterView.js b/frontend/static/js/views/accounts/RegisterView.js deleted file mode 100644 index 135a5d2..0000000 --- a/frontend/static/js/views/accounts/RegisterView.js +++ /dev/null @@ -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 ` -
-
-

${lang.get('registerFormTitle', 'Register')}

-
- - - -
-
- - - -
-
- - -

${lang.get('registerAlreadyAccount', 'Already have an account?')} ${lang.get('registerLogin', 'Login')}

-
-
-
- `; - } -}