vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HM-120. Добавлена возможность менять пароль пользователя (#61)

Browse Source
This commit is contained in:
Nikolay
2020-08-30 16:36:33 +03:00
committed by GitHub
parent ab0fa2cfc3
commit d6c009c4d6
6 changed files with 95 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/UsersServiceAPI.js
View File

@ -36,13 +36,13 @@ class UsersService {
return data;
}
setAvatar = async (avatar, updateOptions) => {
const {data} = await http.post(`${ROOT_URL}/edit-me`, {...updateOptions, avatar});
editSelfInfo = async (user) => {
const {data} = await http.post(`${ROOT_URL}/edit-me`, user);
return data;
}
changePassword = async (password, updateOptions) => {
const {data} = await http.post(`${ROOT_URL}/edit-me`, {...updateOptions, password});
changePassword = async (old_password, new_password) => {
const {data} = await http.post(`${ROOT_URL}/change-password`, {old_password, new_password});
return data;
}

18
src/app.html
View File

@ -110,16 +110,14 @@
<!-- Шаблон содержимого личного кабинета-->
<template id="profile-content">
<div class="d-flex">
<div class="ProfilePage__form p-3 flex-grow-1">
<div class="h6 text-center"></div>
<div class="Password__inputContainer m-1" id="oldpass"></div>
<div class="Password__inputContainer m-1" id="newpass"></div>
<div class="Password__inputContainer m-1" id="newpassrepeat"></div>
<button type="button" class="Profile__button btn btn-outline-primary mt-3">Сохранить</button>
</div>
<div class="p-2 flex-grow-4 Profile__avatar-container">
<img src="./img/ava.jpg" class="Profile__avatar m-2" alt="avatar">
<div class="h6 text-center Profile__user-name">login_name</div>
<form class="ProfilePage__form p-3 flex-grow-1">
<div class="h6 text-center">Смена пароля</div>
<div class="ProfilePage__inputContainer m-1" id="oldpass"></div>
<button type="submit" class="btn btn-outline-primary mt-3">Сохранить</button>
</form>
<div class="p-2 flex-grow-4">
<div class="ProfilePage__avatar m-2"></div>
<div class="h6 text-center ProfilePage__userName">login_name</div>
</div>
</div>
</template>

2
src/components/avatar-modal-component/AvatarModal.js
View File

@ -63,7 +63,7 @@ class AvatarModal extends Modal {
submit = async () => {
if (this.url) {
await usersServiceApi.setAvatar(this.url);
await usersServiceApi.editSelfInfo({avatar: this.url});
userInfoService.setUserLogin();
this.hide();
} else {

86
src/components/profile-content/ProfileContent.js
View File

@ -1,47 +1,93 @@
import Component from '../component/Component';
import FormControl from '../form-control';
import {FORM_TYPES, EVENTS} from '../../consts';
import {INPUT_IDS, LABELS} from './consts';
import usersServiceApi from '../../api/UsersServiceAPI';
import notify from '../../services/NotifyService';
class ProfileContent extends Component {
constructor (parentNode) {
super('#profile-content', parentNode);
this.title = this.mainNode.querySelector('.h6');
this.form = this.mainNode.querySelector('.ProfilePage__form');
this.Password = this.mainNode.querySelector('.Password__inputContainer');
this.profileButton = this.mainNode.querySelector('.Profile__button');
this.title.textContent = 'Смена пароля';
this.avatar = this.mainNode.querySelector('.Profile__avatar');
this.inputContainer = this.mainNode.querySelector('.ProfilePage__inputContainer');
this.avatar = this.mainNode.querySelector('.ProfilePage__avatar');
this.addEventListener(this.avatar, EVENTS.CLICK, () => {
this.next(EVENTS.OPEN_MODAL);
});
this.userName = this.mainNode.querySelector('.Profile__user-name');
this.oldPassword = this.createComponent(FormControl, this.Password, {
label: 'Старый пароль:',
id: 'oldpass',
placeholder: 'Введите старый пароль',
this.userName = this.mainNode.querySelector('.ProfilePage__userName');
this.oldPassword = this.createComponent(FormControl, this.inputContainer, {
label: `${LABELS.OLD_PASSWORD}:`,
id: INPUT_IDS.OLD_PASSWORD,
placeholder: LABELS.OLD_PASSWORD_PLACEHOLDER,
type: FORM_TYPES.PASSWORD,
required: true,
});
this.newPassword = this.createComponent(FormControl, this.Password, {
label: 'Новый пароль:',
id: 'newpass',
placeholder: 'Введите новый пароль',
this.newPassword = this.createComponent(FormControl, this.inputContainer, {
label: `${LABELS.NEW_PASSWORD}:`,
id: INPUT_IDS.NEW_PASSWORD,
placeholder: LABELS.NEW_PASSWORD_PLACEHOLDER,
type: FORM_TYPES.PASSWORD,
required: true,
});
this.newPasswordRepeat = this.createComponent(FormControl, this.Password, {
label: 'Повторите новый пароль:',
id: 'newpassrepeat',
placeholder: 'Введите новый пароль еще раз',
this.newPasswordRepeat = this.createComponent(FormControl, this.inputContainer, {
label: `${LABELS.NEW_PASSWORD_REPEAT}:`,
id: INPUT_IDS.NEW_PASSWORD_REPEAT,
placeholder: LABELS.NEW_PASSWORD_REPEAT_PLACEHOLDER,
type: FORM_TYPES.PASSWORD,
required: true,
});
this.addEventListener(this.form, EVENTS.SUBMIT, this.submit);
this.addEventListener(this.form, EVENTS.SUBMIT, this.submitChangePassword);
}
initProfile (user) {
this.avatar.src = user.avatar;
validateInputs = () => {
this.form.classList.add('was-validated');
const oldPassword = this.oldPassword.getValue();
const newPassword = this.newPassword.getValue();
const newPasswordRepeat = this.newPasswordRepeat.getValue();
if (!oldPassword) {
this.oldPassword.setError('Заполните старый пароль');
}
if (!newPassword) {
this.newPassword.setError('Заполните новый пароль');
}
const isEqualPassword = newPassword === newPasswordRepeat;
if (!isEqualPassword) {
notify.warn('Пароли не совпадают');
}
if (!newPasswordRepeat) {
this.newPasswordRepeat.setError('Повторите новый пароль');
}
return this.form.checkValidity() && isEqualPassword;
}
clearForm = () => {
this.form.classList.remove('was-validated');
this.oldPassword.setValue('');
this.newPassword.setValue('');
this.newPasswordRepeat.setValue('');
}
submitChangePassword = async (event) => {
event.preventDefault();
if (this.validateInputs()) {
const oldPassword = this.oldPassword.getValue();
const newPassword = this.newPassword.getValue();
await usersServiceApi.changePassword(oldPassword, newPassword);
this.clearForm();
notify.success('Пароль успешно изменен');
}
}
initProfile = (user) => {
this.avatar.style.backgroundImage = `url('${user.avatar}')`;
this.userName.textContent = user.login;
}

14
src/components/profile-content/consts.js Normal file
View File

@ -0,0 +1,14 @@
export const INPUT_IDS = {
OLD_PASSWORD: 'profile-page-content-old-password',
NEW_PASSWORD: 'profile-page-content-new-password',
NEW_PASSWORD_REPEAT: 'profile-page-content-new-password-repeat',
};
export const LABELS = {
OLD_PASSWORD: 'Старый пароль',
NEW_PASSWORD: 'Новый пароль',
NEW_PASSWORD_REPEAT: 'Повторите новый пароль',
OLD_PASSWORD_PLACEHOLDER: 'Введите старый пароль',
NEW_PASSWORD_PLACEHOLDER: 'Введите новый пароль',
NEW_PASSWORD_REPEAT_PLACEHOLDER: 'Введите новый пароль еще раз',
};

3
src/components/profile-page/ProfilePage.css
View File

@ -1,4 +1,4 @@
.Profile__avatar {
.ProfilePage__avatar {
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
@ -7,4 +7,5 @@
width: 150px;
height: 150px;
cursor: pointer;
background-image: url('../../img/ava.jpg');
}