Implement localisation on login and register UI + add their french locale (#244)

* Add localisation and french locale to login menu

* Add localisation and french locale to registration menu

src/locales/en/menu.ts

@@ -13,6 +13,22 @@ export const menu: SimpleTranslationEntries = {
     "newGame": "New Game",
     "selectGameMode": "Select a game mode.",
     "logInOrCreateAccount": "Log in or create an account to start. No email required!",
+    "username": "Username",
+    "password": "Password",
+    "login": "Login",
+    "register": "Register",
+    "emptyUsername": "Username must not be empty",
+    "invalidLoginUsername": "The provided username is invalid",
+    "invalidRegisterUsername": "Username must only contain letters, numbers, or underscores",
+    "invalidLoginPassword": "The provided password is invalid",
+    "invalidRegisterPassword": "Password must be 6 characters or longer",
+    "usernameAlreadyUsed": "The provided username is already in use",
+    "accountNonExistent": "The provided user does not exist",
+    "unmatchingPassword": "The provided password does not match",
+    "passwordNotMatchingConfirmPassword": "Password must match confirm password",
+    "confirmPassword": "Confirm Password",
+    "registrationAgeWarning": "By registering, you confirm you are of 13 years of age or older.",
+    "backToLogin": "Back to Login",
     "failedToLoadSaveData": "Failed to load save data. Please reload the page.\nIf this continues, please contact the administrator.",
     "sessionSuccess": "Session loaded successfully.",
     "failedToLoadSession": "Your session data could not be loaded.\nIt may be corrupted.",

src/locales/fr/menu.ts

@@ -8,6 +8,22 @@ export const menu: SimpleTranslationEntries = {
   "newGame": "Nouvelle partie",
   "selectGameMode": "Sélectionnez un mode de jeu.",
   "logInOrCreateAccount": "Connectez-vous ou créez un compte pour commencer. Aucun e-mail requis !",
+  "username": "Nom d'utilisateur",
+  "password": "Mot de passe",
+  "login": "Connexion",
+  "register": "S'inscrire",
+  "emptyUsername": "Le nom d'utilisateur est manquant",
+  "invalidLoginUsername": "Le nom d'utilisateur n'est pas valide",
+  "invalidRegisterUsername": "Le nom d'utilisateur ne doit contenir que \ndes lettres, chiffres ou traits bas",
+  "invalidLoginPassword": "Le mot de passe n'est pas valide",
+  "invalidRegisterPassword": "Le mot de passe doit contenir 6 caractères ou plus",
+  "usernameAlreadyUsed": "Le nom d'utilisateur est déjà utilisé",
+  "accountNonExistent": "Le nom d'utilisateur n'existe pas",
+  "unmatchingPassword": "Le mot de passe n'est pas correct",
+  "passwordNotMatchingConfirmPassword": "Les mots de passe ne correspondent pas",
+  "confirmPassword": "Confirmer le MDP",
+  "registrationAgeWarning": "Vous confirmez en vous inscrivant que vous avez 13 ans ou plus.",
+  "backToLogin": "Retour",
   "failedToLoadSaveData": "Échec du chargement des données. Veuillez recharger la page.\nSi cela continue, veuillez contacter l'administrateur.",
   "sessionSuccess": "Session chargée avec succès.",
   "failedToLoadSession": "Vos données de session n'ont pas pu être chargées.\nElles pourraient être corrompues.",

src/ui/login-form-ui-handler.ts

@@ -2,14 +2,15 @@ import { FormModalUiHandler } from "./form-modal-ui-handler";
 import { ModalConfig } from "./modal-ui-handler";
 import * as Utils from "../utils";
 import { Mode } from "./ui";
+import i18next from '../plugins/i18n';
 
 export default class LoginFormUiHandler extends FormModalUiHandler {
   getModalTitle(config?: ModalConfig): string {
-    return 'Login';
+    return i18next.t('menu:login');
   }
 
   getFields(config?: ModalConfig): string[] {
-    return [ 'Username', 'Password' ];
+    return [ i18next.t('menu:username'), i18next.t('menu:password') ];
   }
 
   getWidth(config?: ModalConfig): number {
@@ -21,7 +22,7 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
   }
 
   getButtonLabels(config?: ModalConfig): string[] {
-    return [ 'Log In', 'Register' ];
+    return [ i18next.t('menu:login'), i18next.t('menu:register') ];
   }
 
   getReadableErrorMessage(error: string): string {
@@ -30,13 +31,13 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
       error = error.slice(0, colonIndex);
     switch (error) {
       case 'invalid username':
-        return 'The provided username is invalid';
+        return i18next.t('menu:invalidLoginUsername');
       case 'invalid password':
-        return 'The provided password is invalid';
+        return i18next.t('menu:invalidLoginPassword');
       case 'account doesn\'t exist':
-        return 'The provided user does not exist';
+        return i18next.t('menu:accountNonExistent');
       case 'password doesn\'t match':
-        return 'The provided password does not match';
+        return i18next.t('menu:unmatchingPassword');
     }
 
     return super.getReadableErrorMessage(error);
@@ -57,7 +58,7 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
           this.scene.ui.playError();
         };
         if (!this.inputs[0].text)
-          return onFail('Username must not be empty');
+          return onFail(i18next.t('menu:emptyUsername'));
         const contentType = 'application/x-www-form-urlencoded';
         const headers = {
           'Content-Type': contentType,

src/ui/registration-form-ui-handler.ts

@@ -3,14 +3,15 @@ import { ModalConfig } from "./modal-ui-handler";
 import * as Utils from "../utils";
 import { Mode } from "./ui";
 import { TextStyle, addTextObject } from "./text";
+import i18next from '../plugins/i18n';
 
 export default class RegistrationFormUiHandler extends FormModalUiHandler {
   getModalTitle(config?: ModalConfig): string {
-    return 'Register';
+    return i18next.t('menu:register');
   }
 
   getFields(config?: ModalConfig): string[] {
-    return [ 'Username', 'Password', 'Confirm Password' ];
+    return [ i18next.t('menu:username'), i18next.t('menu:password'), i18next.t('menu:confirmPassword') ];
   }
 
   getWidth(config?: ModalConfig): number {
@@ -26,7 +27,7 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
   }
 
   getButtonLabels(config?: ModalConfig): string[] {
-    return [ 'Register', 'Back to Login' ];
+    return [ i18next.t('menu:register'), i18next.t('menu:backToLogin') ];
   }
 
   getReadableErrorMessage(error: string): string {
@@ -35,11 +36,11 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
       error = error.slice(0, colonIndex);
     switch (error) {
       case 'invalid username':
-        return 'Username must only contain letters, numbers, or underscores';
+        return i18next.t('menu:invalidRegisterUsername');
       case 'invalid password':
-        return 'Password must be 6 characters or longer';
+        return i18next.t('menu:invalidRegisterPassword');
       case 'failed to add account record':
-        return 'The provided username is already in use';
+        return i18next.t('menu:usernameAlreadyUsed');
     }
 
     return super.getReadableErrorMessage(error);
@@ -48,7 +49,7 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
   setup(): void {
     super.setup();
 
-    const label = addTextObject(this.scene, 10, 87, 'By registering, you confirm you are of 13 years of age or older.', TextStyle.TOOLTIP_CONTENT, { fontSize: '42px' });
+    const label = addTextObject(this.scene, 10, 87, i18next.t('menu:registrationAgeWarning'), TextStyle.TOOLTIP_CONTENT, { fontSize: '42px' });
 
     this.modalContainer.add(label);
   }
@@ -68,11 +69,11 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
           this.scene.ui.playError();
         };
         if (!this.inputs[0].text)
-          return onFail('Username must not be empty');
+          return onFail(i18next.t('menu:emptyUsername'));
         if (!this.inputs[1].text)
           return onFail(this.getReadableErrorMessage('invalid password'));
         if (this.inputs[1].text !== this.inputs[2].text)
-          return onFail('Password must match confirm password');
+          return onFail(i18next.t('menu:passwordNotMatchingConfirmPassword'));
         const contentType = 'application/x-www-form-urlencoded';
         const headers = {
           'Content-Type': contentType,