starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lang: add locale in django and login view

Browse Source
This commit is contained in:
AdrienLSH
2024-02-01 14:51:20 +01:00
parent a82cf1377b
commit 2786212b9c
8 changed files with 63 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/static/js/index.js
View File

@ -20,6 +20,7 @@ import TournamentsView from "./views/tournament/TournamentsListView.js";
import TournamentCreateView from "./views/tournament/TournamentCreateView.js";
let client = new Client(location.origin);
let lang = client.lang;
let lastView = undefined;
let lastPageUrlBeforeLogin = undefined;
@ -144,13 +145,13 @@ document.addEventListener("DOMContentLoaded", async () => {
//Languages
Array.from(document.getElementById('languageSelector').children).forEach(el => {
el.onclick = async _ => {
if (await client.lang.changeLanguage(el.value))
if (await lang.changeLanguage(el.value))
return;
document.querySelector('#languageSelector > .active')?.classList.remove('active');
el.classList.add('active');
};
});
document.querySelector(`#languageSelector > [value=${client.lang.chosenLang}]`)
document.querySelector(`#languageSelector > [value=${lang.chosenLang}]`)
?.classList.add('active');
await client.isAuthentificate();
@ -158,4 +159,4 @@ document.addEventListener("DOMContentLoaded", async () => {
document.querySelector('a[href=\'' + location.pathname + '\']')?.classList.add('active');
});
export { client, navigateTo, reloadView }
export { client, lang, navigateTo, reloadView }

10
frontend/static/js/lang/en.json
View File

@ -11,5 +11,13 @@
"homeOnline": "Play online",
"homeOffline": "Play offline",
"homeMe": "Me",
"homeLogout": "Logout"
"homeLogout": "Logout",
"loginWindowTitle": "Login",
"loginFormTitle": "Login",
"loginFormUsername": "Username",
"loginFormPassword": "Password",
"loginFormButton": "Login",
"loginNoAccount": "No account yet?",
"loginRegister": "Register",
"errorEmptyField": "This field may not be blank."
}

10
frontend/static/js/lang/fr.json
View File

@ -11,5 +11,13 @@
"homeOnline": "Jouer en ligne",
"homeOffline": "Jouer hors ligne",
"homeMe": "Moi",
"homeLogout": "Déconnexion"
"homeLogout": "Déconnexion",
"loginWindowTitle": "Connexion",
"loginFormTitle": "Connexion",
"loginFormUsername": "Nom d'utilisateur",
"loginFormPassword": "Mot de passe",
"loginFormButton": "Connexion",
"loginNoAccount": "Pas de compte?",
"loginRegister": "S'inscrire",
"errorEmptyField": "Ce champ ne peut être vide."
}

14
frontend/static/js/views/HomeView.js
View File

@ -1,19 +1,19 @@
import { client } from "../index.js";
import { lang } from "../index.js";
import AbstractAuthentificateView from "./abstracts/AbstractAuthentifiedView.js";
export default class extends AbstractAuthentificateView {
constructor(params) {
super(params, client.lang.get('homeWindowTitle', 'Home'));
super(params, lang.get('homeWindowTitle', 'Home'));
this.redirect_url = "/login"
}
async getHtml() {
return /* HTML */ `
<h1>${client.lang.get('homeTitle', 'Home')}</h1>
<a href="/matchmaking" data-link>${client.lang.get('homeOnline', 'Play online')}</a>
<a href="/games/offline" data-link>${client.lang.get('homeOffline', 'Play offline')}</a>
<a href="/me" data-link>${client.lang.get('homeMe', 'Me')}</a>
<a href="/logout" data-link>${client.lang.get('homeLogout', 'Logout')}</a>
<h1>${lang.get('homeTitle', 'Home')}</h1>
<a href="/matchmaking" data-link>${lang.get('homeOnline', 'Play online')}</a>
<a href="/games/offline" data-link>${lang.get('homeOffline', 'Play offline')}</a>
<a href="/me" data-link>${lang.get('homeMe', 'Me')}</a>
<a href="/logout" data-link>${lang.get('homeLogout', 'Logout')}</a>
`;
}
}

18
frontend/static/js/views/accounts/LoginView.js
View File

@ -1,4 +1,4 @@
import { client, navigateTo } from "../../index.js";
import { client, lang, navigateTo } from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js";
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
@ -10,10 +10,10 @@ async function login(redirectTo = '/home')
let password = document.getElementById('passwordInput').value;
if (username === '') {
document.getElementById('username').innerHTML = 'This field may not be blank.';
document.getElementById('username').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
}
if (password === '') {
document.getElementById('password').innerHTML = 'This field may not be blank.';
document.getElementById('password').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
}
if (username === '' || password === '')
return;
@ -32,7 +32,7 @@ async function login(redirectTo = '/home')
export default class extends AbstractNonAuthentifiedView {
constructor(params, lastUrlBeforeLogin = '/home') {
super(params, "Login", lastUrlBeforeLogin);
super(params, lang.get('loginWindowTitle', 'Login'), lastUrlBeforeLogin);
this.redirectTo = lastUrlBeforeLogin;
}
@ -56,21 +56,21 @@ export default class extends AbstractNonAuthentifiedView {
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'>Login</h4>
<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'>Username</label>
<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'>Password</label>
<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'>Login</button>
<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'>No account yet? <a href='/register' data-link>Register</a></p>
<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>