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

add(settings): password changing

Browse Source
This commit is contained in:
AdrienLSH
2024-03-19 13:59:21 +01:00
parent 837ed85001
commit 0371881afa
13 changed files with 234 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/static/js/api/Account.js
View File

@ -67,6 +67,30 @@ class Account
}
return respondeData['authorize'] || respondeData['detail'] || respondeData['username']?.join(' ') || 'Error.';
}
async updatePassword(currentPassword, newPassword, newPassword2)
{
const data = {
current_password: currentPassword,
new_password: newPassword,
new_password2: newPassword2
};
const response = await this.client._put('/api/accounts/update_password', data);
if (response.ok)
return null;
const responseData = await response.json();
const formatedData = {};
if (responseData['current_password'])
formatedData['currentPasswordDetail'] = responseData['current_password'];
if (responseData['new_password'])
formatedData['newPasswordDetail'] = responseData['new_password'];
if (responseData['new_password2'])
formatedData['newPassword2Detail'] = responseData['new_password2'];
if (formatedData == {})
formatedData['passwordDetail'] = 'Error';
return formatedData;
}
}
export { Account };

20
frontend/static/js/api/Client.js
View File

@ -144,6 +144,26 @@ class Client
return response;
}
/**
* Send a PUT request with json
* @param {String} uri
* @param {*} data
* @returns {Promise<Response>}
*/
async _put(uri, data)
{
let response = await fetch(this._url + uri, {
method: "PUT",
headers: {
"X-CSRFToken": getCookie("csrftoken"),
"Content-Type": "application/json",
'Accept-Language': this.lang.currentLang,
},
body: JSON.stringify(data),
});
return response;
}
/**
* Send a PATCH request with json
* @param {String} uri

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

@ -52,5 +52,6 @@
"TournamentCreateButton": "Create tournament",
"TournamentCreateTournamentName": "Tournament Name",
"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."
}

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

@ -52,5 +52,6 @@
"TournamentCreateButton": "Créer le tournoi",
"TournamentCreateTournamentName": "Nom du tournoi",
"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."
}

6
frontend/static/js/utils/formUtils.js
View File

@ -1,4 +1,4 @@
export function clear(property_name, elements_id)
export function clearIds(property_name, elements_id)
{
elements_id.forEach(element_id => {
let element = document.getElementById(element_id);
@ -6,6 +6,10 @@ export function clear(property_name, elements_id)
});
}
export function clearElements(prop, elements) {
elements.forEach(element => element[prop] = '');
}
export function fill_errors(errors, property_name)
{
Object.keys(errors).forEach(error_field =>

6
frontend/static/js/views/MatchMakingView.js
View File

@ -1,5 +1,5 @@
import { client, lang, navigateTo } from "../index.js";
import { clear, fill_errors } from "../utils/formUtils.js";
import { clearIds, fill_errors } from "../utils/formUtils.js";
import AbstractAuthenticatedView from "./abstracts/AbstractAuthenticatedView.js";
export default class extends AbstractAuthenticatedView {
@ -11,7 +11,7 @@ export default class extends AbstractAuthenticatedView {
async toggle_search()
{
clear("innerText", ["detail"]);
clearIds("innerText", ["detail"]);
if (client.matchmaking.searching)
{
client.matchmaking.stop();
@ -44,7 +44,7 @@ export default class extends AbstractAuthenticatedView {
display_data(data)
{
clear("innerText", ["detail"]);
clearIds("innerText", ["detail"]);
fill_errors(data, "innerText");
}

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

@ -1,5 +1,5 @@
import { client, navigateTo } from '../index.js';
import { clear, fill_errors } from '../utils/formUtils.js';
import {client, lang} from '../index.js';
import {clearElements, fill_errors} from '../utils/formUtils.js'
import AbstractAuthenticatedView from './abstracts/AbstractAuthenticatedView.js';
export default class extends AbstractAuthenticatedView
@ -14,10 +14,25 @@ export default class extends AbstractAuthenticatedView
{
this.avatarInit();
this.usernameInit();
// document.getElementById('delete-account-button').onclick = () => this.delete_account();
this.passwordInit();
}
passwordInit() {
document.getElementById('currentPasswordInput').onkeydown = e => {
if (e.key === 'Enter')
this.savePassword();
};
document.getElementById('newPasswordInput').onkeydown = e => {
if (e.key === 'Enter')
this.savePassword();
};
document.getElementById('newPassword2Input').onkeydown = e => {
if (e.key === 'Enter')
this.savePassword();
};
document.getElementById('passwordSave').onclick = this.savePassword;
}
usernameInit() {
const usernameInput = document.getElementById('usernameInput');
const usernameSave = document.getElementById('usernameSave');
@ -54,50 +69,47 @@ export default class extends AbstractAuthenticatedView
async displayAvatar() {
let avatar = document.getElementById('avatar');
avatar.src = client.me.avatar_url + '?t=' + new Date().getTime();
console.log(avatar.src);
}
async delete_account()
{
let current_password = document.getElementById('current_password-input').value;
let response_data = await client.account.delete(current_password);
async savePassword() {
const currentPasswordInput = document.getElementById('currentPasswordInput');
const currentPassword = currentPasswordInput.value;
const currentPasswordDetail = document.getElementById('currentPasswordDetail');
const newPasswordInput = document.getElementById('newPasswordInput');
const newPassword = newPasswordInput.value;
const newPasswordDetail = document.getElementById('newPasswordDetail');
const newPassword2Input = document.getElementById('newPassword2Input');
const newPassword2 = newPassword2Input.value;
const newPassword2Detail = document.getElementById('newPassword2Detail');
const passwordDetail = document.getElementById('passwordDetail');
if (response_data === null || response_data === 'user deleted')
{
navigateTo('/login');
return;
}
clear('innerHTML', ['current_password-input']);
fill_errors({'current_password-input': response_data.password}, 'innerHTML');
}
clearElements('innerHTML', [currentPasswordDetail,
newPasswordDetail,
newPassword2Detail,
passwordDetail
]);
if (!currentPassword.length)
currentPasswordDetail.innerHTML = lang.get('errorEmptyField');
if (!newPassword.length)
newPasswordDetail.innerHTML = lang.get('errorEmptyField');
if (!newPassword2.length)
newPassword2Detail.innerHTML = lang.get('errorEmptyField');
if (!currentPassword.length || !newPassword.length || !newPassword2.length)
return;
async save_account()
{
let username = document.getElementById('username-input').value;
let new_password = document.getElementById('new_password-input').value;
let current_password = document.getElementById('current_password-input').value;
let data = {};
data.username = username;
if (new_password.length != 0)
data.new_password = new_password;
let response_data = await client.account.update(data, current_password);
if (response_data === null)
{
navigateTo('/login');
return;
}
if (response_data === 'data has been alterate')
response_data = {'save-account': 'saved'};
clear('innerHTML', ['username', 'new_password', 'current_password', 'save-account', 'delete-account']);
fill_errors(response_data, 'innerHTML');
}
const error = await client.account.updatePassword(currentPassword, newPassword, newPassword2);
if (!error) {
passwordDetail.classList.remove('text-danger');
passwordDetail.classList.add('text-success');
passwordDetail.innerHTML = lang.get('passwordSaved');
setTimeout(_ => passwordDetail.innerHTML = '', 3000);
clearElements('value', [currentPasswordInput, newPasswordInput, newPassword2Input]);
} else {
passwordDetail.classList.add('text-danger');
passwordDetail.classList.remove('text-success');
fill_errors(error, 'innerHTML');
}
}
async saveUsername()
{
@ -110,13 +122,13 @@ export default class extends AbstractAuthenticatedView
const error = await client.account.updateUsername(username);
if (!error) {
usernameDetail.classList.remove('text-danger');
usernameDetail.classList.remove('text-danger', 'd-none');
usernameDetail.classList.add('text-success');
usernameDetail.innerHTML = 'Username Saved.';
setTimeout(_ => usernameDetail.innerHTML = '', 2000);
setTimeout(_ => usernameDetail.add('d-none'), 2000);
document.getElementById('usernameSave').classList.add('disabled');
} else {
usernameDetail.classList.remove('text-success');
usernameDetail.classList.remove('text-success', 'd-none');
usernameDetail.classList.add('text-danger');
usernameDetail.innerHTML = error;
document.getElementById('usernameSave').classList.add('disabled');
@ -183,44 +195,58 @@ export default class extends AbstractAuthenticatedView
const avatarUnchanged = client.me.avatar_url === '/static/avatars/default.avif';
return /* HTML */ `
<div class='container col-sm-10 col-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'>
<h2 class='border-bottom'>Avatar</h2>
<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/*'>
<div class='d-flex gap-2 mt-1 px-0'>
<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-danger${avatarUnchanged ? ' d-none' : ''}' id='avatarDelete'>Delete</button>
</div>
</div>
<div class='flex-grow-1'>
<h1 class='border-bottom ps-1 mb-3'>Account</h1>
<div>
<div class='input-group'>
<div class='form-floating'>
<input type='text' class='form-control' id='usernameInput' placeholder='username' value=${client.me.username}>
<label for='usernameInput'>Username</label>
</div>
<button class='input-group-text btn btn-success disabled' id='usernameSave'>Save</button>
</div>
<span class='form-text' id='usernameDetail'></span>
</div>
</div>
<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'>
<h2 class='border-bottom'>Avatar</h2>
<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/*'>
<div class='d-flex gap-2 mt-1 px-0'>
<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-danger${avatarUnchanged ? ' d-none' : ''}' id='avatarDelete'>Delete</button>
</div>
</div>
<div class='flex-grow-1'>
<h1 class='border-bottom ps-1 mb-3'>Account settings</h1>
<div class='d-flex flex-column gap-2'>
<div>
<div class='input-group'>
<div class='form-floating'>
<input type='text' class='form-control' id='usernameInput' placeholder='username' value=${client.me.username}>
<label for='usernameInput'>Username</label>
</div>
<button class='input-group-text btn btn-success disabled' id='usernameSave'>Save</button>
</div>
<span class='form-text' id='usernameDetail'></span>
</div>
<div class='flex-grow-1 p-1 border rounded bg-body-tertiary'>
<h5 class='ps-1 border-bottom'>Change password</h5>
<div class='d-flex flex-column gap-1'>
<div class='form-floating'>
<input type='password' class='form-control' id='currentPasswordInput' placeholder='Current password'>
<label for='currentPasswordInput'>Current password</label>
</div>
<span class='text-danger ps-1' id='currentPasswordDetail'></span>
<div class='form-floating'>
<input type='password' class='form-control' id='newPasswordInput' placeholder='New password'>
<label for='newPassword2Input'>New password</label>
</div>
<span class='text-danger ps-1' id='newPasswordDetail'></span>
<div class='form-floating'>
<input type='password' class='form-control' id='newPassword2Input' placeholder='Repeat new password'>
<label for='newPassword2Input'>Repeat new password</label>
</div>
<span class='text-danger ps-1' id='newPassword2Detail'></span>
<div class='d-flex flex-row'>
<span class='ps-1 my-auto text-danger' id='passwordDetail'></span>
<button class='btn btn-success ms-auto' id='passwordSave'>Save</button>
</div>
</div>
</div>
<button class='btn btn-outline-danger'>Delete account</button>
</div>
</div>
</div>
`;
// <input class='form-control' type='text' placeholder='Username' id='username-input' value=${client.me.username}>
// <h1>Settings</h1>
// <input class='form-control d-inline-block' type='text' placeholder='Username' id='username-input' value=${client.me.username}>
// <span id='username'></span>
// <input type=password placeholder='New Password' id='new_password-input'>
// <span id='new_password'></span>
// <input type=password placeholder='Current Password' id='current_password-input'>
// <span id='current_password'></span>
// <input type='button' value='Save Credentials' id='save-account-button'>
// <span id='save-account'></span>
//
// <input type='button' value='Delete Account' id='delete-account-button'>
// <span id='delete-account'></span>
}
}

4
frontend/static/js/views/accounts/AuthenticationView.js
View File

@ -1,5 +1,5 @@
import { client, lang, navigateTo } from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js";
import { clearIds, fill_errors } from "../../utils/formUtils.js";
import AbstractNonAuthenticatedView from "../abstracts/AbstractNonAuthenticatedView.js";
export default class extends AbstractNonAuthenticatedView
@ -141,7 +141,7 @@ export default class extends AbstractNonAuthenticatedView
let response_data = await response.json();
clear("innerHTML", ["username", "password", 'login']);
clearIds("innerHTML", ["username", "password", 'login']);
fill_errors(response_data, "innerHTML");
}

4
frontend/static/js/views/tournament/TournamentCreateView.js
View File

@ -1,5 +1,5 @@
import {client, lang, navigateTo} from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js";
import { clearIds, fill_errors } from "../../utils/formUtils.js";
import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js";
export default class extends AbstractAuthenticatedView
@ -26,7 +26,7 @@ export default class extends AbstractAuthenticatedView
return;
}
clear("innerHTML", ["name", "nb_players", "nb_players_by_game"]);
clearIds("innerHTML", ["name", "nb_players", "nb_players_by_game"]);
fill_errors(response_data, "innerHTML");
}