LDBR-2.4: Добавить страницу настроек профиля (#24)

* LDBR-2.12: Перевести проект на Flux-архитектуру. * LDBR-2.12: Исправить actions & actionTypes, добавить каналы в EventBus, подробнее раскрыть Dispatcher, убрать use strict, переименовать переменные в Router и починить историю, изменить алгоритм инициализирующего запроса, вынести в константу неизменяемые параметры запросов Network. * LDBR-2.12: Переименовать действие init в fetchUser. * LDBR-2.12: Исправить NotFoundView, исправить logout, исправить замечания из PR, исправить структуру папок actions. * LDBR-2.12: Исправить адреса на адреса деплоя. * LDBR-2.12: Исправить .eslintrc.json * LDBR-2.12: Исправить порт в server.js * LDBR-2.12: Исправить Dispatcher, исправить EventBus. * LDBR-2.12: Исправить Dispatcher, исправить EventBus. * LDBR-2.12: Обновить версию eslint. * LDBR-2.12: Исправить getContext. * LDBR-2.1: Дополнить README (#21) * LDBR-2.1: Дополнить README.md: внести структуру каталогов, внести кодстайл, внести инструкцию к командам. * LDBR-2.1: Убрать файлы из README.md * LDBR-2.13: Рефакторинг страницы входа (#20) * LDBR-2.13: Исправить дизайн страницы входа, добавить шрифты на сервер, обновить стили. * LDBR-2.13: Вынести валидацию в хранилище, добавить сохранение валидного ввода, перевести все картинки в формат .webp. * LDBR-2.13: Заменить .png на .webp в Navbar'е. * LDBR-2.13: Исправить цвета в css, удалить метод __isOpened, убрать валидацию из view, исправить setContext, исправить payload. * LDBR-2.14: Рефакторинг страницы регистрации (#22) * LDBR-2.12: Исправить getContext. * LDBR-2.14: Исправить страницу регистрации, изменить дизайн интерфейса. * LDBR-2.14: Исправить валидацию: разделить на две формы. Исправить замечания в ПР. * LDBR-2.13: Убрать мошенничество в jsdoc, поправить уезжающий контейнер логина. * LDBR-2.4: Добавить страницу профиля с обновлением настроек. * LDBR-2.4: Добавить страницу профиля с обновлением настроек. * LDBR-2.4: Исправить network, исправить валидацию, исправить превью. * LDBR-2.4: Убрать debugging-вывод в консоль. * LDBR-2.4: Добавить возможность смены пароля, добавить контрольный ввод старого пароля. * LDBR-2.4: Исправить SettingsStore. * LDBR-2.4: Исправить SettingsStore - element. * LDBR-2.4: Исправить сравнения в странице настроек. * LDBR-2.4: Обновить в соответствии с main. * LDBR-2.4: Починить отображение полей в шаблоне.
frontend-park-mail-ru · Nov 1, 2021 · 41b4321 · 41b4321
1 parent dfc33af
commit 41b4321
Show file tree

Hide file tree

Showing 20 changed files with 885 additions and 40 deletions.
diff --git a/public/assets/icons/upload.webp b/public/assets/icons/upload.webp
diff --git a/src/actions/boards.js b/src/actions/boards.js
@@ -23,5 +23,3 @@ export const boardsActions = {
         });
     },
 };
-
-export default boardsActions;
diff --git a/src/actions/settings.js b/src/actions/settings.js
@@ -0,0 +1,55 @@
+'use strict';
+
+// Modules
+import Dispatcher from '../modules/Dispatcher/Dispatcher.js';
+
+/**
+ * Константа, содержащая в себе типы действий для настроек.
+ */
+export const SettingsActionTypes = {
+    SETTINGS_GET: 'settings/get',
+    SETTINGS_UPDATE: 'settings/put',
+    AVATAR_UPLOAD: 'avatar/post',
+};
+
+/**
+ * Константа, содержащая в себе действия, связанные с настройками.
+ */
+export const settingsActions = {
+    /**
+     * Действие: запрос актуальных настроек пользователя.
+     * @param {String} userName
+     */
+    getSettings(userName) {
+        Dispatcher.dispatch({
+            actionName: SettingsActionTypes.SETTINGS_GET,
+            data: {
+                userName: userName,
+            },
+        });
+    },
+
+    /**
+     * Действие: обновление настроек пользователя.
+     * @param {FormData} data
+     */
+    putSettings(data) {
+        Dispatcher.dispatch({
+            actionName: SettingsActionTypes.SETTINGS_UPDATE,
+            data: data,
+        });
+    },
+
+    /**
+     * Действие: загрузка новой аватарки пользователя.
+     * @param {File|String} avatar аватар (файл или ссылка на блоб)
+     */
+    uploadAvatar(avatar) {
+        Dispatcher.dispatch({
+            actionName: SettingsActionTypes.AVATAR_UPLOAD,
+            data: {
+                avatar: avatar,
+            },
+        });
+    },
+};
diff --git a/src/actions/user.js b/src/actions/user.js
@@ -71,5 +71,3 @@ export const userActions = {
     },
 
 };
-
-export default userActions;
diff --git a/src/components/Footer/Footer.hbs b/src/components/Footer/Footer.hbs
@@ -1,5 +1,5 @@
 <footer id="footer-main">
     <div class="footer">
-        <p class="footer__text">TestRello, 2021</p>
+        <p class="footer__text">Brrrello, 2021</p>
     </div>
 </footer>
diff --git a/src/components/Navbar/Navbar.hbs b/src/components/Navbar/Navbar.hbs
@@ -11,7 +11,7 @@
         <div class="navbar__links">
             <a href="/boards" class="navbar__link">Доски</a>
             {{#if isAuthorized}}
-                <a href="/profile/{{userName}}" class="navbar__link">Профиль</a>
+                <a href="/profile" class="navbar__link">Профиль</a>
                 <a id="logout" class="navbar__link">Выход</a>
             {{else}}
                 <a href="/login" class="navbar__link">Войти</a>

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -1,5 +1,5 @@
 // Базовый компонент
-import userActions from '../../actions/user.js';
+import {userActions} from '../../actions/user.js';
 import BaseComponent from '../BaseComponent.js';
 // Стили
 import './Navbar.scss';

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -9,6 +9,7 @@ export const Urls = {
     Login: '/login',
     Register: '/register',
     Logout: '/logout',
+    Profile: '/profile',
     NotFound: '/404',
 };
 
@@ -41,6 +42,8 @@ export const BackendAddress = {
 export const HttpStatusCodes = {
     Ok: 200,
     Created: 201,
+    NotMofidied: 304,
+    BadRequest: 400,
     Unauthorized: 401,
     InternalServerError: 500,
 };
@@ -49,6 +52,8 @@ export const HttpStatusCodes = {
   * Константа, содержащая в себе константные сообщения.
   */
 export const ConstantMessages = {
+    NotModified: 'Вы ничего не поменяли',
+    BadRequest: 'Не получилось отправить запрос',
     WrongCredentials: 'Неверный логин или пароль',
     UnableToLogin: 'Не получилось войти',
     UnableToRegister: 'Не получилось зарегистрироваться',
@@ -64,5 +69,5 @@ export const ConstantMessages = {
     NoSpecialSymbolsPassword: 'Введите пароль, не содержащий специальных символов',
     UseOnlyLatinLettersPassword: 'Введите пароль, содержащий только латинские буквы',
 
-
+    AvatarTooBig: 'Аватар не должен превышать 500 МиБ',
 };
diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,7 @@ import './styles/scss/Common.scss';
 import RegisterView from './views/RegisterView/RegisterView.js';
 import LoginView from './views/LoginView/LoginView.js';
 import BoardsView from './views/BoardsView/BoardsView.js';
+import ProfileView from './views/ProfileView/ProfileView.js';
 
 /* Обработчик на загрузку страницы */
 window.addEventListener('DOMContentLoaded', async () => {
@@ -34,6 +35,7 @@ window.addEventListener('DOMContentLoaded', async () => {
         Router.register(Urls.Register, new RegisterView(root));
         Router.register(Urls.Login, new LoginView(root));
         Router.register(Urls.Boards, new BoardsView(root));
+        Router.register(Urls.Profile, new ProfileView(root));
 
         Router.start();
     } catch (error) {

diff --git a/src/index_template.html b/src/index_template.html
@@ -3,9 +3,9 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.backend %>; style-src 'self'; font-src 'self'; object-src 'none'; script-src 'self'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.backend %> blob:; style-src 'self'; font-src 'self'; object-src 'none'; script-src 'self'">
     <!-- for super modern broswers - coloring browser header -->
     <meta name="theme-color" content="#258085">
     <!-- light blue -->

diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -14,6 +14,12 @@ class Network {
         this.BackendUrl = BackendAddress.Url;
         this.BackendPort = BackendAddress.Port;
 
+        this._endpoints = {
+            sessions: 'api/sessions',
+            profile: 'api/profile',
+            board: 'api/boards',
+        };
+
         this._defaultOptions = {
             mode: 'cors',
             credentials: 'include',
@@ -31,7 +37,7 @@ class Network {
      * @return {Promise<Response>} промис запроса
     */
     httpRequest(URL, options) {
-        return fetch(URL, options)
+        return fetch(URL, {...this._defaultOptions, ...options})
             .then((response) => response.json()
                 .then((data) => ({status: response.status, data: data})),
             );
@@ -47,8 +53,23 @@ class Network {
             method: 'get',
             body: JSON.stringify(data),
         };
-        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/sessions`,
-                                {...options, ...this._defaultOptions});
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.sessions}`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос GET /api/profile.
+     * @param {object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async getSettings(data) {
+        const options = {
+            method: 'get',
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.profile}/${data.userName}`,
+            options);
     }
 
     /**
@@ -61,8 +82,25 @@ class Network {
             method: 'post',
             body: JSON.stringify(data),
         };
-        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/profile`,
-                                {...options, ...this._defaultOptions});
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.profile}`,
+            options);
+    }
+
+    /**
+     * Метод, реализующий запрос PUT /api/profile.
+     * @param {object} data полезная нагрузка запроса
+     * @return {Promise<Response>} промис запроса
+     */
+    async putSettings(data) {
+        const options = {
+            method: 'put',
+            body: data,
+        };
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/` +
+            `${this._endpoints.profile}/${data.get('login')}`,
+            options);
     }
 
     /**
@@ -75,8 +113,9 @@ class Network {
             method: 'post',
             body: JSON.stringify(data),
         };
-        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/sessions`,
-                                {...options, ...this._defaultOptions});
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.sessions}`,
+            options);
     }
 
     /**
@@ -89,8 +128,9 @@ class Network {
             method: 'get',
             body: JSON.stringify(data),
         };
-        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/boards`,
-                                {...options, ...this._defaultOptions});
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.board}`,
+            options);
     }
 
     /**
@@ -103,8 +143,9 @@ class Network {
             method: 'delete',
             body: JSON.stringify(data),
         };
-        return this.httpRequest(`http://${this.BackendUrl}:${this.BackendPort}/api/sessions`,
-                                {...options, ...this._defaultOptions});
+        return this.httpRequest(
+            `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.sessions}`,
+            options);
     }
 }
 

diff --git a/src/modules/Validator/Validator.js b/src/modules/Validator/Validator.js
@@ -4,6 +4,13 @@ import {ConstantMessages} from '../../constants/constants.js';
   * Класс, реализующий валидацию форм.
   */
 export default class Validator {
+    /**
+     * @constructor
+     */
+    constructor() {
+        this.maxImageSize = 500 * 1024; // 500 MB
+    }
+
     /**
      * Метод, валидирующий e-mail.
      * @param {String} source e-mail для валидации
@@ -61,4 +68,16 @@ export default class Validator {
 
         return null;
     }
+
+    /**
+     * Метод, валидирующий размер аватара;
+     * @param {File} source аватар
+     * @return {String | null} сообщение об ошибке
+     */
+    validateAvatar(source) {
+        if (source.size > this.maxImageSize) {
+            return ConstantMessages.AvatarTooBig;
+        }
+        return null;
+    }
 }
diff --git a/src/stores/BaseStore.js b/src/stores/BaseStore.js
@@ -19,6 +19,15 @@ export default class BaseStore {
         EventBus.addChannel(channelName);
     }
 
+    /**
+     * Метод, возвращающий текущее состояние (контекст) хранилища.
+     * @param {String?} field возвращаемое поле
+     * @return {String} контекст хранилища
+     */
+    getContext(field) {
+        return field ? this._storage.get(field) : this._storage;
+    }
+
     /**
      * Метод, добавляющий нового слушателя в EventBus.
      * @param {function} callback функция-обработчик

diff --git a/src/stores/BoardsStore/BoardsStore.js b/src/stores/BoardsStore/BoardsStore.js
@@ -22,15 +22,6 @@ class BoardsStore extends BaseStore {
         this._storage.set('teams', undefined);
     }
 
-    /**
-     * Метод, возвращающий текущее состояние (контекст) хранилища.
-     * @param {String?} field возвращаемое поле
-     * @return {String} контекст хранилища
-     */
-    getContext(field) {
-        return field ? this._storage.get(field) : this._storage;
-    }
-
     /**
      * Метод, реализующий реакцию на рассылку Диспетчера.
      * @param {Action} action действие, которое будет обработано
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,5 +23,3 @@ export const boardsActions = { @@
             });
         },
     };
-    export default boardsActions;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -71,5 +71,3 @@ export const userActions = {
		},

		};

		export default userActions;