HM-81.Страница личного кабинета (#51)

src/app.html

@@ -106,7 +106,22 @@
             <button type="button" class="btn btn-primary NotFound__redirectButton w-auto">На главную</button>
         </div>
     </template>
-
+    <!-- Шаблон содержимого личного кабинета-->
+    <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">
+            <img src="./img/ava.jpg" class="Profile__avatar m-2" alt="avatar">
+            <div class="h6 text-center">login_name</div>
+           </div>
+        </div>
+    </template>
     <!-- Шаблон контейнера страниц-->
     <template id="page-container">
         <div class="PageContainer h-100"></div>
@@ -409,4 +424,4 @@
 
 </body>
 
-</html>
+</html>

src/app.js

@@ -10,6 +10,7 @@ import routeService from './services/RouteService';
 import RouterPagesContainer from './components/router-pages-container/index';
 import LogsPage from './components/logs-page/index';
 import LoginPage from './components/login-page';
+import ProfilePage from './components/profile-page';
 import authServiceApi from './api/AuthServiceAPI';
 import userInfoService from './services/UserInfoService';
 import {EVENTS} from './consts';
@@ -36,6 +37,7 @@ const initAppComponents = () => {
         {url: '/api', pageComponent: ApiPage},
         {url: '/logs', pageComponent: LogsPage},
         {url: '/login', pageComponent: LoginPage},
+        {url: '/profile', pageComponent: ProfilePage},
     ]);
 
     /**

src/components/profile-content/ProfileContent.js

@@ -0,0 +1,52 @@
+import Component from '../component/Component';
+import FormControl from '../form-control';
+import {FORM_TYPES} from '../../consts';
+
+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.oldPassword = new FormControl(this.Password, {
+            label: 'Старый пароль:',
+            id: 'oldpass',
+            placeholder: 'Введите старый пароль',
+            type: FORM_TYPES.PASSWORD,
+            required: true,
+        });
+        this.newPassword = new FormControl(this.Password, {
+            label: 'Новый пароль:',
+            id: 'newpass',
+            placeholder: 'Введите новый пароль',
+            type: FORM_TYPES.PASSWORD,
+            required: true,
+        });
+        this.newPasswordRepeat = new FormControl(this.Password, {
+            label: 'Повторите новый пароль:',
+            id: 'newpassrepeat',
+            placeholder: 'Введите новый пароль еще раз',
+            type: FORM_TYPES.PASSWORD,
+            required: true,
+        });
+
+        this.addEventListener(this.form, 'submit', this.submit);
+    }
+
+    disabled = (value) => {
+        const elements = [
+            this.oldPassword.input,
+            this.newPassword.input,
+            this.newPasswordRepeat.input,
+            this.profileButton,
+        ];
+
+        elements.forEach((element) => {
+            element.disabled = value;
+        });
+    }
+}
+
+export default ProfileContent;

src/components/profile-content/index.js

@@ -0,0 +1,3 @@
+import ProfileContent from './ProfileContent';
+
+export default ProfileContent;

src/components/profile-page/ProfilePage.css

@@ -0,0 +1,10 @@
+.Profile__avatar {
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
+    background-size: cover;
+    width: 150px;
+    height: 150px;
+    cursor: pointer;
+}

src/components/profile-page/ProfilePage.js

@@ -0,0 +1,13 @@
+import Component from '../component/index';
+import ProfileContent from '../profile-content';
+import './ProfilePage.css';
+
+class ProfilePage extends Component {
+    constructor (mainNodeSelector, parentNode) {
+        super(mainNodeSelector, parentNode);
+        this.form = new ProfileContent(this.mainNode);
+
+    }
+}
+
+export default ProfilePage;

src/components/profile-page/index.js

@@ -0,0 +1,3 @@
+import ProfilePage from './ProfilePage';
+
+export default ProfilePage;