lang: add locale in django and login view

.gitignore

@@ -4,3 +4,4 @@ db.sqlite3
 **/migrations/**
 /profiles/static/avatars/*
 !/profiles/static/avatars/default.env
+*.mo

accounts/locale/fr/LC_MESSAGES/django.po

@@ -0,0 +1,22 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2024-02-01 13:59+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+#: views/login.py:22
+msgid "Invalid username or password."
+msgstr "Nom d'utilisateur ou mot de passe incorect."

accounts/views/login.py

@@ -4,6 +4,7 @@ from rest_framework import permissions, status
 from django.http import HttpRequest
 from django.contrib.auth import login
 from rest_framework.authentication import SessionAuthentication
+from django.utils.translation import gettext as _
 
 from ..serializers.login import LoginSerializer
 
@@ -18,6 +19,6 @@ class LoginView(APIView):
 		serializer.is_valid(raise_exception=True)
 		user = serializer.get_user(data)
 		if user is None:
-			return Response({'login': ['Invalid username or password.']}, status.HTTP_401_UNAUTHORIZED)
+			return Response({'login': [_('Invalid username or password.')]}, status.HTTP_401_UNAUTHORIZED)
 		login(request, user)
 		return Response({'id': user.pk}, status=status.HTTP_200_OK)

frontend/static/js/index.js

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

frontend/static/js/lang/en.json

@@ -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."
 }

frontend/static/js/lang/fr.json

@@ -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."
 }

frontend/static/js/views/HomeView.js

@@ -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>
+			<h1>${lang.get('homeTitle', 'Home')}</h1>
-            <a href="/matchmaking" data-link>${client.lang.get('homeOnline', 'Play online')}</a>
+            <a href="/matchmaking" data-link>${lang.get('homeOnline', 'Play online')}</a>
-            <a href="/games/offline" data-link>${client.lang.get('homeOffline', 'Play offline')}</a>
+            <a href="/games/offline" data-link>${lang.get('homeOffline', 'Play offline')}</a>
-            <a href="/me" data-link>${client.lang.get('homeMe', 'Me')}</a>
+            <a href="/me" data-link>${lang.get('homeMe', 'Me')}</a>
-            <a href="/logout" data-link>${client.lang.get('homeLogout', 'Logout')}</a>
+            <a href="/logout" data-link>${lang.get('homeLogout', 'Logout')}</a>
         `;
     }
 }

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

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