diff --git a/src/api/UsersServiceAPI.js b/src/api/UsersServiceAPI.js index 4edf1eb..b8427e7 100644 --- a/src/api/UsersServiceAPI.js +++ b/src/api/UsersServiceAPI.js @@ -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; } diff --git a/src/app.html b/src/app.html index 5b31354..9627db9 100644 --- a/src/app.html +++ b/src/app.html @@ -110,16 +110,14 @@ diff --git a/src/components/avatar-modal-component/AvatarModal.js b/src/components/avatar-modal-component/AvatarModal.js index 6cdd0c8..a03c2c5 100644 --- a/src/components/avatar-modal-component/AvatarModal.js +++ b/src/components/avatar-modal-component/AvatarModal.js @@ -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 { diff --git a/src/components/profile-content/ProfileContent.js b/src/components/profile-content/ProfileContent.js index 590acb3..43e74a7 100644 --- a/src/components/profile-content/ProfileContent.js +++ b/src/components/profile-content/ProfileContent.js @@ -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; } diff --git a/src/components/profile-content/consts.js b/src/components/profile-content/consts.js new file mode 100644 index 0000000..edcf068 --- /dev/null +++ b/src/components/profile-content/consts.js @@ -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: 'Введите новый пароль еще раз', +}; diff --git a/src/components/profile-page/ProfilePage.css b/src/components/profile-page/ProfilePage.css index 9b59433..260ceaf 100644 --- a/src/components/profile-page/ProfilePage.css +++ b/src/components/profile-page/ProfilePage.css @@ -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'); }