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

add(translations): settings

Browse Source
This commit is contained in:
AdrienLSH 2024-03-20 13:29:31 +01:00
parent 6607fb30a0
commit 840b6dec3f
4 changed files with 105 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,5 +53,29 @@
"TournamentCreateTournamentName": "Tournament Name", "TournamentCreateTournamentName": "Tournament Name",
"TournamentCreateNbPlayerByGame": "Number of player in a game", "TournamentCreateNbPlayerByGame": "Number of player in a game",
"TournamentCreateNbPlayer": "Number of players in the tournament", "TournamentCreateNbPlayer": "Number of players in the tournament",
"passwordSaved": "New password has been saved."
"settingsWindowTitle": "Settings",
"settingsAvatarTitle": "Avatar",
"settingsAvatarSave": "Save",
"settingsAvatarDelete": "Delete",
"settingsAvatarSaved": "Avatar saved.",
"settingsAvatarDeleted": "Avatar deleted.",
"settingsAvatarDeleteError": "Something went wrong.",
"settingsAvatarTooLarge": "Image is too large.",
"settingsTitle": "Account settings",
"settingsUsername": "Username",
"settingsUsernameSave": "Save",
"settingsUsernameSaved": "Username saved.",
"settingsPasswordTitle": "Change password",
"settingsCurrentPassword": "Current password",
"settingsNewPassword": "New password",
"settingsRepeatNewPassword": "Repeat new password",
"settingsPasswordSave": "Save",
"settingsPasswordSaved": "New password has been saved.",
"settingsDeleteButton": "Delete account",
"settingsDeleteTitle": "Are you sure ? This action is permanent !!",
"settingsDeleteConfirm": "Please enter your password to confirm deletion:",
"settingsDeleteInput": "Password",
"settingsDeleteCancel": "Cancel",
"settingsDeleteSuccess": "Account successfully deleted."
} }

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

@ -53,5 +53,29 @@
"TournamentCreateTournamentName": "Nom du tournoi", "TournamentCreateTournamentName": "Nom du tournoi",
"TournamentCreateNbPlayerByGame": "Nombre de joueurs en jeu", "TournamentCreateNbPlayerByGame": "Nombre de joueurs en jeu",
"TournamentCreateNbPlayer": "Nombre de joueurs dans le tournoi", "TournamentCreateNbPlayer": "Nombre de joueurs dans le tournoi",
"passwordSaved": "Nouveau mot de passe enregistré avec succès."
"settingsWindowTitle": "Paramètres",
"settingsAvatarTitle": "Avatar",
"settingsAvatarSave": "Enregister",
"settingsAvatarDelete": "Supprimer",
"settingsAvatarSaved": "Avatar enregistré.",
"settingsAvatarDeleted": "Avatar supprimé.",
"settingsAvatarDeleteError": "Une erreur s'est produite.",
"settingsAvatarTooLarge": "L'image est trop lourde",
"settingsTitle": "Paramètres de compte",
"settingsUsername": "Nom d'utilisateur",
"settingsUsernameSave": "Enregister",
"settingsUsernameSaved": "Now d'utilisateur enregistré.",
"settingsPasswordTitle": "Modifier le mot de passe",
"settingsCurrentPassword": "Mot de passe actuel",
"settingsNewPassword": "Nouveau mot de passe",
"settingsRepeatNewPassword": "Répéter nouveau mot de passe",
"settingsPasswordSave": "Enregister",
"settingsPasswordSaved": "Nouveau mot de passe enregistré.",
"settingsDeleteButton": "Supprimer le compte",
"settingsDeleteTitle": "Êtes vous sûr ? Cette action est permanente !!",
"settingsDeleteConfirm": "Mot de passe nécessaire pour confirmer la suppression:",
"settingsDeleteInput": "Mot de passe",
"settingsDeleteCancel": "Annuler",
"settingsDeleteSuccess": "Compte supprimé avec succès."
} }

27
frontend/static/js/lang/tp.json
View File

@ -52,5 +52,30 @@
"TournamentCreateButton": "jo ala pona li jo e ijo li pali e ijo li pana e ijo li toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo li kama toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo", "TournamentCreateButton": "jo ala pona li jo e ijo li pali e ijo li pana e ijo li toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo li kama toki e ijo li kama jo e ijo li kama pali e ijo li kama pana e ijo",
"TournamentCreateTournamentName": "ilo kipisi", "TournamentCreateTournamentName": "ilo kipisi",
"TournamentCreateNbPlayerByGame": "ilo jan lon poki pi lon anpa en sike pimeja li kama.", "TournamentCreateNbPlayerByGame": "ilo jan lon poki pi lon anpa en sike pimeja li kama.",
"TournamentCreateNbPlayer": "nanpa pi jan pona lon soweli musi" "TournamentCreateNbPlayer": "nanpa pi jan pona lon soweli musi",
"settingsWindowTitle": "Ilo open",
"settingsAvatarTitle": "Jan ante",
"settingsAvatarSave": "O lukin",
"settingsAvatarDelete": "O pana e tawa ala",
"settingsAvatarSaved": "Jan ante li kama.",
"settingsAvatarDeleted": "Jan ante li pakala e ijo.",
"settingsAvatarDeleteError": "Ijo li pakala.",
"settingsAvatarTooLarge": "Ijo li suli mute.",
"settingsTitle": "Ilo pi ijo sina",
"settingsUsername": "Nimi jan",
"settingsUsernameSave": "O lukin",
"settingsUsernameSaved": "Nimi jan li kama.",
"settingsPasswordTitle": "O ante e nimi pi toki anu nimi",
"settingsCurrentPassword": "Nimi pi tenpo ni",
"settingsNewPassword": "Nimi sin",
"settingsRepeatNewPassword": "Nimi sin",
"settingsPasswordSave": "O lukin",
"settingsPasswordSaved": "Nimi sin li kama.",
"settingsDeleteButton": "O pakala e ilo mi",
"settingsDeleteTitle": "Sina wile ala wile ? Ni li ike mute !!",
"settingsDeleteConfirm": "O toki e nimi sina lon insa.",
"settingsDeleteInput": "Nimi",
"settingsDeleteCancel": "O pana tawa ala",
"settingsDeleteSuccess": "Ijo sina li pakala mute."
} }

58
frontend/static/js/views/SettingsView.js
View File

@ -6,7 +6,7 @@ export default class extends AbstractAuthenticatedView
{ {
constructor(params) constructor(params)
{ {
super(params, 'Settings'); super(params, lang.get('settingsWindowTitle'));
this.PROFILE_PICTURE_MAX_SIZE = 2 * 1024 * 1024; // 2MB this.PROFILE_PICTURE_MAX_SIZE = 2 * 1024 * 1024; // 2MB
} }
@ -129,7 +129,7 @@ export default class extends AbstractAuthenticatedView
if (!error) { if (!error) {
passwordDetail.classList.remove('text-danger'); passwordDetail.classList.remove('text-danger');
passwordDetail.classList.add('text-success'); passwordDetail.classList.add('text-success');
passwordDetail.innerHTML = lang.get('passwordSaved'); passwordDetail.innerHTML = lang.get('settingsPasswordSaved');
setTimeout(_ => passwordDetail.innerHTML = '', 3000); setTimeout(_ => passwordDetail.innerHTML = '', 3000);
clearElements('value', [currentPasswordInput, newPasswordInput, newPassword2Input]); clearElements('value', [currentPasswordInput, newPasswordInput, newPassword2Input]);
} else { } else {
@ -158,7 +158,7 @@ export default class extends AbstractAuthenticatedView
if (!error) { if (!error) {
usernameDetail.classList.remove('text-danger', 'd-none'); usernameDetail.classList.remove('text-danger', 'd-none');
usernameDetail.classList.add('text-success'); usernameDetail.classList.add('text-success');
usernameDetail.innerHTML = 'Username Saved.'; usernameDetail.innerHTML = lang.get('settingsUsernameSaved');
setTimeout(_ => usernameDetail.add('d-none'), 2000); setTimeout(_ => usernameDetail.add('d-none'), 2000);
document.getElementById('usernameSave').classList.add('disabled'); document.getElementById('usernameSave').classList.add('disabled');
} else { } else {
@ -182,7 +182,7 @@ export default class extends AbstractAuthenticatedView
if (selectedFile.size > this.PROFILE_PICTURE_MAX_SIZE) { if (selectedFile.size > this.PROFILE_PICTURE_MAX_SIZE) {
avatarDetail.classList.remove('text-success'); avatarDetail.classList.remove('text-success');
avatarDetail.classList.add('text-danger'); avatarDetail.classList.add('text-danger');
avatarDetail.innerHTML = 'Image is too large.'; //to translate avatarDetail.innerHTML = lang.get('settingsAvatarTooLarge');
return; return;
} }
@ -190,7 +190,7 @@ export default class extends AbstractAuthenticatedView
if (!error) { if (!error) {
avatarDetail.classList.remove('text-danger'); avatarDetail.classList.remove('text-danger');
avatarDetail.classList.add('text-success'); avatarDetail.classList.add('text-success');
avatarDetail.innerHTML = 'Avatar saved.'; //to translate avatarDetail.innerHTML = lang.get('settingsAvatarSaved');
setTimeout(_ => avatarDetail.innerHTML = '', 2000); setTimeout(_ => avatarDetail.innerHTML = '', 2000);
document.getElementById('avatarDelete').classList.remove('d-none'); document.getElementById('avatarDelete').classList.remove('d-none');
document.getElementById('avatarUpload').classList.add('d-none'); document.getElementById('avatarUpload').classList.add('d-none');
@ -213,13 +213,13 @@ export default class extends AbstractAuthenticatedView
if (!error) { if (!error) {
avatarDetail.classList.remove('text-danger'); avatarDetail.classList.remove('text-danger');
avatarDetail.classList.add('text-success'); avatarDetail.classList.add('text-success');
avatarDetail.innerHTML = 'Avatar deleted.'; //to translate avatarDetail.innerHTML = lang.get('settingsAvatarDeleted');
setTimeout(_ => avatarDetail.innerHTML = '', 2000); setTimeout(_ => avatarDetail.innerHTML = '', 2000);
document.getElementById('avatarDelete').classList.add('d-none'); document.getElementById('avatarDelete').classList.add('d-none');
} else { } else {
avatarDetail.classList.remove('text-success'); avatarDetail.classList.remove('text-success');
avatarDetail.classList.add('text-danger'); avatarDetail.classList.add('text-danger');
avatarDetail.innerHTML = 'Something went wrong.'; //to translate avatarDetail.innerHTML = lang.get('settingsAvatarDeleteError');
} }
this.displayAvatar(); this.displayAvatar();
} }
@ -241,7 +241,7 @@ export default class extends AbstractAuthenticatedView
const error = await client.account.delete(password); const error = await client.account.delete(password);
if (!error) { if (!error) {
passwordDetail.classList.replace('text-danger', 'text-success'); passwordDetail.classList.replace('text-danger', 'text-success');
passwordDetail.innerHTML = 'Account successfully deleted.'; passwordDetail.innerHTML = lang.get('settingsDeleteSuccess');
setTimeout(_ => { setTimeout(_ => {
bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide(); bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
navigateTo('/login'); navigateTo('/login');
@ -259,68 +259,68 @@ export default class extends AbstractAuthenticatedView
return /* HTML */ ` return /* HTML */ `
<div class='container-fluid col-lg-8 d-flex rounded border border-2 bg-light-subtle py-3'> <div class='container-fluid col-lg-8 d-flex rounded border border-2 bg-light-subtle py-3'>
<div class='row col-4 bg-body-tertiary border rounded p-2 m-2 d-flex justify-content-center align-items-center'> <div class='row col-4 bg-body-tertiary border rounded p-2 m-2 d-flex justify-content-center align-items-center'>
<h2 class='border-bottom'>Avatar</h2> <h2 class='border-bottom'>${lang.get('settingsAvatarTitle')}</h2>
<img id='avatar' class='rounded p-0' src=${client.me.avatar_url} style='cursor: pointer;'> <img id='avatar' class='rounded p-0' src=${client.me.avatar_url} style='cursor: pointer;'>
<input id='avatarInput' class='d-none' type='file' accept='image/*'> <input id='avatarInput' class='d-none' type='file' accept='image/*'>
<div class='d-flex gap-2 mt-1 px-0'> <div class='d-flex gap-2 mt-1 px-0'>
<span class='my-auto ms-1 me-auto' id='avatarDetail'></span> <span class='my-auto ms-1 me-auto' id='avatarDetail'></span>
<button class='btn btn-primary d-none' id='avatarUpload'>Save</button> <button class='btn btn-primary d-none' id='avatarUpload'>${lang.get('settingsAvatarSave')}</button>
<button class='btn btn-danger${avatarUnchanged ? ' d-none' : ''}' id='avatarDelete'>Delete</button> <button class='btn btn-danger${avatarUnchanged ? ' d-none' : ''}' id='avatarDelete'>${lang.get('settingsAvatarDelete')}</button>
</div> </div>
</div> </div>
<div class='flex-grow-1'> <div class='flex-grow-1'>
<h1 class='border-bottom ps-1 mb-3'>Account settings</h1> <h1 class='border-bottom ps-1 mb-3'>${lang.get('settingsTitle')}</h1>
<div class='d-flex flex-column gap-2'> <div class='d-flex flex-column gap-2'>
<div> <div>
<div class='input-group'> <div class='input-group'>
<div class='form-floating'> <div class='form-floating'>
<input type='text' class='form-control' id='usernameInput' placeholder='username' value=${client.me.username}> <input type='text' class='form-control' id='usernameInput' placeholder='${lang.get('settingsUsername')}' value=${client.me.username}>
<label for='usernameInput'>Username</label> <label for='usernameInput'>${lang.get('settingsUsername')}</label>
</div> </div>
<button class='input-group-text btn btn-success disabled' id='usernameSave'>Save</button> <button class='input-group-text btn btn-success disabled' id='usernameSave'>${lang.get('settingsUsernameSave')}</button>
</div> </div>
<span class='form-text' id='usernameDetail'></span> <span class='form-text' id='usernameDetail'></span>
</div> </div>
<div class='flex-grow-1 p-1 border rounded bg-body-tertiary'> <div class='flex-grow-1 p-1 border rounded bg-body-tertiary'>
<h5 class='ps-1 border-bottom'>Change password</h5> <h5 class='ps-1 border-bottom'>${lang.get('settingsPasswordTitle')}</h5>
<div class='d-flex flex-column gap-1'> <div class='d-flex flex-column gap-1'>
<div class='form-floating'> <div class='form-floating'>
<input type='password' class='form-control' id='currentPasswordInput' placeholder='Current password'> <input type='password' class='form-control' id='currentPasswordInput' placeholder='${lang.get('settingsCurrentPassword')}'>
<label for='currentPasswordInput'>Current password</label> <label for='currentPasswordInput'>${lang.get('settingsCurrentPassword')}</label>
</div> </div>
<span class='text-danger ps-1' id='currentPasswordDetail'></span> <span class='text-danger ps-1' id='currentPasswordDetail'></span>
<div class='form-floating'> <div class='form-floating'>
<input type='password' class='form-control' id='newPasswordInput' placeholder='New password'> <input type='password' class='form-control' id='newPasswordInput' placeholder='${lang.get('settingsNewPassword')}'>
<label for='newPassword2Input'>New password</label> <label for='newPassword2Input'>${lang.get('settingsNewPassword')}</label>
</div> </div>
<span class='text-danger ps-1' id='newPasswordDetail'></span> <span class='text-danger ps-1' id='newPasswordDetail'></span>
<div class='form-floating'> <div class='form-floating'>
<input type='password' class='form-control' id='newPassword2Input' placeholder='Repeat new password'> <input type='password' class='form-control' id='newPassword2Input' placeholder='${'settingsRepeatNewPassword'}'>
<label for='newPassword2Input'>Repeat new password</label> <label for='newPassword2Input'>${lang.get('settingsRepeatNewPassword')}</label>
</div> </div>
<span class='text-danger ps-1' id='newPassword2Detail'></span> <span class='text-danger ps-1' id='newPassword2Detail'></span>
<div class='d-flex flex-row'> <div class='d-flex flex-row'>
<span class='ps-1 my-auto text-danger' id='passwordDetail'></span> <span class='ps-1 my-auto text-danger' id='passwordDetail'></span>
<button class='btn btn-success ms-auto' id='passwordSave'>Save</button> <button class='btn btn-success ms-auto' id='passwordSave'>${lang.get('settingsPasswordSave')}</button>
</div> </div>
</div> </div>
</div> </div>
<button class='btn btn-outline-danger' data-bs-toggle='modal' data-bs-target='#deleteModal'>Delete account</button> <button class='btn btn-outline-danger' data-bs-toggle='modal' data-bs-target='#deleteModal'>${lang.get('settingsDeleteButton')}</button>
<div class='modal fade' id='deleteModal' tabindex='-1'> <div class='modal fade' id='deleteModal' tabindex='-1'>
<div class='modal-dialog'> <div class='modal-dialog'>
<div class='modal-content'> <div class='modal-content'>
<div class='modal-header bg-danger bg-gradient'> <div class='modal-header bg-danger bg-gradient'>
<h1 class='modal-title fs-5'>Are you sure ? This action is permanent !!</h1> <h1 class='modal-title fs-5'>${lang.get('settingsDeleteTitle')}</h1>
<button class='btn-close' data-bs-dismiss='modal'></button> <button class='btn-close' data-bs-dismiss='modal'></button>
</div> </div>
<div class='modal-body'> <div class='modal-body'>
<h6 class='form-label'>Please enter your password to confirm deletion:</h6> <h6 class='form-label'>${lang.get('settingsDeleteConfirm')}</h6>
<input type='password' class='form-control' id='deleteInput' placeholder='Password'> <input type='password' class='form-control' id='deleteInput' placeholder='${lang.get('settingsDeleteInput')}'>
<span class='form-text text-danger' id='deleteDetail'></span> <span class='form-text text-danger' id='deleteDetail'></span>
</div> </div>
<div class='modal-footer'> <div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Cancel</button> <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>${lang.get('settingsDeleteCancel')}</button>
<button type='button' class='btn btn-danger' id='deleteButton'>Delete account</button> <button type='button' class='btn btn-danger' id='deleteButton'>${lang.get('settingsDeleteButton')}</button>
</div> </div>
</div> </div>
</div> </div>