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

src/api/UsersServiceAPI.js

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

src/app.html

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

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 {

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.inputContainer = this.mainNode.querySelector('.ProfilePage__inputContainer');
-        this.profileButton = this.mainNode.querySelector('.Profile__button');
+        this.avatar = this.mainNode.querySelector('.ProfilePage__avatar');
-        this.title.textContent = 'Смена пароля';
-        this.avatar = this.mainNode.querySelector('.Profile__avatar');
         this.addEventListener(this.avatar, EVENTS.CLICK, () => {
             this.next(EVENTS.OPEN_MODAL);
         });
-        this.userName = this.mainNode.querySelector('.Profile__user-name');
+        this.userName = this.mainNode.querySelector('.ProfilePage__userName');
-        this.oldPassword = this.createComponent(FormControl, this.Password, {
+        this.oldPassword = this.createComponent(FormControl, this.inputContainer, {
-            label: 'Старый пароль:',
+            label: `${LABELS.OLD_PASSWORD}:`,
-            id: 'oldpass',
+            id: INPUT_IDS.OLD_PASSWORD,
-            placeholder: 'Введите старый пароль',
+            placeholder: LABELS.OLD_PASSWORD_PLACEHOLDER,
             type: FORM_TYPES.PASSWORD,
             required: true,
         });
-        this.newPassword = this.createComponent(FormControl, this.Password, {
+        this.newPassword = this.createComponent(FormControl, this.inputContainer, {
-            label: 'Новый пароль:',
+            label: `${LABELS.NEW_PASSWORD}:`,
-            id: 'newpass',
+            id: INPUT_IDS.NEW_PASSWORD,
-            placeholder: 'Введите новый пароль',
+            placeholder: LABELS.NEW_PASSWORD_PLACEHOLDER,
             type: FORM_TYPES.PASSWORD,
             required: true,
         });
-        this.newPasswordRepeat = this.createComponent(FormControl, this.Password, {
+        this.newPasswordRepeat = this.createComponent(FormControl, this.inputContainer, {
-            label: 'Повторите новый пароль:',
+            label: `${LABELS.NEW_PASSWORD_REPEAT}:`,
-            id: 'newpassrepeat',
+            id: INPUT_IDS.NEW_PASSWORD_REPEAT,
-            placeholder: 'Введите новый пароль еще раз',
+            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) {
+    validateInputs = () => {
-        this.avatar.src = user.avatar;
+        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;
     }
 

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: 'Введите новый пароль еще раз',
+};

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');
 }