HAR-133: Исправления после РК2

source/app/Router.js

@@ -68,7 +68,6 @@ export class Router {
     async go(path) {
         path = this.slashDel(path);
         const url = decodeURI(this.root + path);
-        window.history.pushState(null, null, url);
         const args = [];
         const reqRoute = this.routes.find((route) => {
             route = route.path;

source/entity/boardPin/ui/boardPin.handlebars

@@ -1,5 +1,5 @@
 <div class="feed-item_100-size">
-    <img src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{ pin.pin_id }}">
+    <img src="{{ pin.content_url }}" alt="" class="pin" id="pin-{{pin.pin_id}}">
     {{#if owner}}
         <button class="button primary-button board-pin__button" id="pin-del-{{pin.pin_id}}">Удалить</button>
     {{/if}}

source/entity/boardPin/ui/boardPin.js

@@ -40,15 +40,17 @@ export class BoardPinFeedView extends View {
             this.onClick(pin.pin_id);
         });
 
-        const delBtn = document.querySelector('#pin-del-' + pin.pin_id);
-        delBtn.addEventListener('click', async (event) => {
-            event.preventDefault();
-            const api = new API('/boards/' + board.board_id + '/pins/' + pin.pin_id);
-            const response = await api.delete();
-            if (response.code) {
-                return;
-            }
-            this.root.remove();
-        });
+        if (board.is_owner) {
+            const delBtn = document.querySelector('#pin-del-' + pin.pin_id);
+            delBtn.addEventListener('click', async (event) => {
+                event.preventDefault();
+                const api = new API('/boards/' + board.board_id + '/pins/' + pin.pin_id);
+                const response = await api.delete();
+                if (response.code) {
+                    return;
+                }
+                this.root.remove();
+            });
+        }
     }
 }

source/entity/errorWindow/ui/errorWindow.js

@@ -1,6 +1,7 @@
 import {View} from '../../../app/View.js';
 import errorViewTemplate from './errorWindow.handlebars';
 import './errorWindow.scss';
+import {errors} from '../../../shared/config.js';
 
 /** Error window view */
 export class ErrorWindowView extends View {
@@ -17,9 +18,12 @@ export class ErrorWindowView extends View {
 
     /**
     * Renders view by error message.
-    * @param {message} message - Error message entity.
+    * @param {string} message - Error message entity.
     */
     render(message) {
+        if (!message){
+            message = errors['oops'];
+        }
         this.root.innerHTML = errorViewTemplate({message});
 
         const cancelButton = document.querySelector('#error-cancel');

source/entity/errorWindow/ui/errorWindow.scss

@@ -3,7 +3,7 @@
 .error-window {
     min-width: 400px;
     min-height: 100px;
-    border: variables.$error-color 3px solid;
+    border: variables.$error-color 1px solid;
     border-radius: variables.$element-border-radius;
     background-color: variables.$background-color;
     position: fixed;

source/entity/inputField/ui/inputField.handlebars

@@ -1,8 +1,9 @@
 <label for="{{field.inputField}}">{{field.label}}</label>
-<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}">
+<input type="{{field.type}}" class="input" id="{{field.inputField}}" placeholder="{{field.placeholder}}" value="{{field.value}}" {{#if field.disabled}}disabled{{/if}}>
 {{#if isPassword}}
     <div class="eye" id="eye">
-        <img src="/static/eye.svg" alt="" class="eye-image">
+        <img src="/static/eye.svg" alt="" class="eye-image" id="eye-open">
+        <img src="/static/eye_closed.svg" alt="" class="eye-image-close eye__visibility-hidden" id="eye-closed">
     </div>
 {{/if}}
 <div class="input_error" id="{{field.errContent}}"></div>

source/entity/inputField/ui/inputField.js

@@ -13,11 +13,10 @@ export class InputField extends View {
     }
 
     render(blockID) {
-        this.root.innerHTML = inputFieldTemplate(
-            {
-                field: this.field,
-                isPassword: this.field.type === 'password',
-            });
+        this.root.innerHTML = inputFieldTemplate({
+            field: this.field,
+            isPassword: this.field.type === 'password',
+        });
         const input = this.root.querySelector('#' + this.field.inputField);
         if (this.field.hint) {
             const hint = this.root.querySelector('#' + this.field.hint);
@@ -36,12 +35,28 @@ export class InputField extends View {
             event.preventDefault();
             const value = input.value;
             const check = debounce(inputValidate, debounceTimeout);
+            if (this.field.repeat) {
+                const repeatInput = document.querySelector('#' + this.field.repeat);
+                check(this.field, value, repeatInput.value);
+                return;
+            }
             check(this.field, value);
         });
         if (this.field.type === 'password') {
             const eyeButton = this.root.querySelector('#eye');
+
+            const eyeOpen = document.querySelector('#eye-open');
+            const eyeClosed = document.querySelector('#eye-closed');
             eyeButton.addEventListener('click', () => {
-                eyeButton.classList.toggle('slash');
+                if (input.type === 'password') {
+                    eyeOpen.classList.add('eye__visibility-hidden');
+                    eyeClosed.classList.remove('eye__visibility-hidden');
+                    input.type = 'text';
+                } else {
+                    eyeOpen.classList.remove('eye__visibility-hidden');
+                    eyeClosed.classList.add('eye__visibility-hidden');
+                    input.type = 'password';
+                }
             });
         }
     }

source/entity/inputField/ui/inputField.scss

@@ -2,7 +2,7 @@
 
 .hint{
   position: absolute;
-  border: 2px solid;
+  border: 1px solid;
   background-color: variables.$background-color;
   border-radius: variables.$element-border-radius;
   inset: 10% auto auto calc(100% + 35px);
@@ -33,7 +33,7 @@
   cursor: pointer;
 }
 
-.eye::after{
+/*.eye::after{
   content: '';
   position: absolute;
   transform: rotate(45deg) scaleX(0);
@@ -46,11 +46,29 @@
 
 .slash::after{
   transform: rotate(45deg) scaleX(1);
-}
+}*/
 
 .eye-image{
   font-size: 18px;
   width: 1.4em;
   height: 1.4em;
   display: block;
 }
+
+.eye-image-close{
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.eye__visibility-hidden{
+  visibility: hidden;
+}
+
+@media screen and (max-width: 900px) {
+  .hint{
+    inset: 100px auto auto 0;
+    z-index: 2;
+  }
+}

source/entity/pinPhoto/ui/pinPhoto.scss

@@ -15,6 +15,6 @@
 
 @media screen and (max-width: 430px) {
     .pin-photo__image{
-        width: 100%;
+        width: 100vw;
     }
 }

source/entity/userListItem/ui/userListItem.handlebars

@@ -6,6 +6,6 @@
         {{user.nickname}}
     </div>
     <div class="list-item-followers-count">
-        подписчиков {{user.subscribers_count}}
+<!--        подписчиков {{user.subscribers_count}}-->
     </div>
 </div>

source/features/userFields/ui/userFields.js

@@ -73,6 +73,7 @@ export class UserFields extends View {
             'repPassword': {
                 label: 'Повторите пароль',
                 type: 'password',
+                repeat: 'register_password',
                 placeholder: 'Введите пароль повторно',
                 value: '',
                 errContent: 'signup_repeat_password_error',
@@ -112,7 +113,7 @@ export class UserFields extends View {
             const inputCont = [this.root.querySelector('#' + value.inputField).value];
             if (key === 'repPassword') {
                 inputCont.push(this.root.querySelector('#' +
-                    this.errFields.password.inputField).value);
+                    this.errFields['password'].inputField).value);
             }
             if (!value.validationFunc(...inputCont)) {
                 errContentChange(value, value.errText);

source/pages/board/ui/boardView.handlebars

@@ -15,9 +15,9 @@
                     Удалить
                 </div>
             {{else}}
-                <div class="primary-button button button_small">
-                    Подписаться
-                </div>
+<!--                <div class="primary-button button button_small">-->
+<!--                    Подписаться-->
+<!--                </div>-->
             {{/if}}
         </div>
     </div>

source/pages/board/ui/boardView.js

@@ -5,6 +5,7 @@ import {BoardAPI} from '../api/api.js';
 import {BoardEdit} from '../../boardEdit/ui/boardEdit.js';
 import {BoardFeedView} from '../../../widgets/boardFeed/ui/boardFeed.js';
 import {Error} from '../../error/ui/error.js';
+import {API} from '../../../shared/api/API.js';
 
 /**
  * Handle board page
@@ -26,18 +27,35 @@ export class BoardView extends View {
      * @param {json} boardID – board's ID
      */
     async render(boardID) {
-        const boardAPI = new BoardAPI(boardID);
-        const response = await boardAPI.api();
-        if (response.code !== 0) {
-            const errorView = new Error();
-            errorView.render();
-            return;
+        let board;
+        let pins;
+        if (boardID <= 0) {
+            const api = new API('/favorites');
+            const response = await api.get();
+            if(response.code){
+                return;
+            }
+            board = {
+                title: 'Понравившиеся',
+                description: 'Здесь появляются понравившиеся вам пины',
+                is_owner: false,
+            };
+            pins = response.body.pins;
+        } else {
+            const boardAPI = new BoardAPI(boardID);
+            const response = await boardAPI.api();
+            if (response.code !== 0) {
+                const errorView = new Error();
+                errorView.render();
+                return;
+            }
+            board = response.body.board;
+            pins = response.body.pins;
         }
-        const board = response.body.board;
         this.root.innerHTML = boardViewTemplate({board});
 
         const boardFeed = new BoardFeedView();
-        boardFeed.render(response.body.board, response.body.pins);
+        boardFeed.render(board, pins);
 
         if (board.is_owner) {
             const deleteButton = document.querySelector('#board-delete-button');

source/pages/chat/ui/chat.scss

@@ -1,7 +1,7 @@
 @use "../../../shared/styles/variables";
 
 .chat-window{
-  height: -webkit-calc(100vh - 150px);
+  height: -webkit-calc(100dvh - 150px);
   width: 75vw;
   display: flex;
   flex-direction: row;
@@ -29,21 +29,21 @@
 @media screen and (max-width: 430px) {
   .chat-window {
     width: 100%;
-    height: -webkit-calc(100vh - 130px);
+    height: -webkit-calc(100dvh - 130px);
     position: relative;
   }
 
   .chat-list{
     position: absolute;
     inset: 0;
-    height: -webkit-calc(100vh - 130px);
+    height: -webkit-calc(100dvh - 130px);
     width: 100%;
   }
 
   .chat-window__input{
     position: absolute;
     inset: 0;
-    height: -webkit-calc(100vh - 130px);
+    height: -webkit-calc(100dvh - 130px);
     width: 100%;
   }
 
@@ -68,7 +68,7 @@
 
 @media screen and (max-width: 1024px) and (min-width: 431px) {
   .chat-window{
-    height: 87vh;
+    height: 87dvh;
     width: 90vw;
   }
 }

source/pages/login/ui/loginView.handlebars

@@ -1,6 +1,6 @@
 <main>
     <div class="window user-form-window">
-        <h3 class="window_title">Добро пожаловать в Harmonium!</h3>
+        <div class="window_title">Добро пожаловать в Harmonium!</div>
         <form action="" class="window_login-fields">
             <div class="window_input-fields">
                 <input type="text" class="input" placeholder="Email" id="login_email">
@@ -10,7 +10,7 @@
             </div>
             <div class="button-field">
                 <button type="submit" class="button_full-width primary-button button button_medium" id="login_enter_button">Войти</button>
-                <button type="button" class="button_full-width secondary-button button button_medium" id="login_signup_button">Регистрация</button>
+                <div class="login-registration-field">Нет аккаунта? <span class="link-text" id="login_signup_button">Зарегистрируйтесь</span></div>
             </div>
         </form>
     </div>

source/pages/profile/ui/profile.handlebars

@@ -3,6 +3,11 @@
 
     </div>
     <div class="profile-switcher" id="content-switch">
+        {{#if user.is_owner}}
+            <div class="button-icon profile-like-button" id="profile-like-button">
+                <img src="/static/like_filled.svg" alt="" class="profile-image-button__likes">
+            </div>
+        {{/if}}
         <div class="switch-bundle">
             <div class="primary-button button_focus-font-size button" id="profile-content-pins">
                 Созданные
@@ -14,10 +19,10 @@
         {{#if user.is_owner}}
             <div class="add-block">
                 <div class="profile-pop-menu profile-pop-menu__closed" id="profile-pop-menu">
-                    <div class="button secondary-button profile-add-button" id="profile-pin-add">
+                    <div class="button secondary-button profile-popup-button" id="profile-pin-add">
                         Добавить пин
                     </div>
-                    <div class="button secondary-button profile-add-button" id="profile-board-add">
+                    <div class="button secondary-button profile-popup-button" id="profile-board-add">
                         Добавить доску
                     </div>
                 </div>

source/pages/profile/ui/profile.js

@@ -11,6 +11,7 @@ import {Error} from '../../error/ui/error.js';
 import {ModalListWindowView} from '../../../widgets/modalListWindow/ui/modalListWindow.js';
 import {API} from '../../../shared/api/API.js';
 import {UserListItemView} from '../../../entity/userListItem/ui/userListItem.js';
+import {BoardView} from '../../board/ui/boardView.js';
 
 /**
  * Handle profile page
@@ -77,6 +78,14 @@ export class Profile extends View {
         });
 
         if (user.is_owner) {
+            const buttonLikes = document.querySelector('#profile-like-button');
+            buttonLikes.addEventListener('click', async (event) => {
+                event.preventDefault();
+                history.pushState(null, null, '/board/0');
+                // const boardView = new BoardView();
+                // await boardView.render(0);
+            });
+
             const pinAdd = document.querySelector('#profile-pin-add');
             pinAdd.addEventListener('click', (event) => {
                 event.preventDefault();