mobile sign in and sign out modal confirm

src/entities/track/ui/track.hbs

@@ -2,10 +2,16 @@
     <img class="track__img" src="{{ image }}">
     <div class="track__info">
         <div class="track__name">{{ name }} </div>
-        <div class="track__artist">{{ artist }} </div>
+        <div class="track__artist">
+            <a class="track__artist__artist_link link"
+                href="/artist/{{ artistID }}">
+                {{ artistName }}
+            </a> 
+        </div>
     </div>
 </div> 
 <div class="track__right_side">
     {{ duration }}
     <img class="track__duration_icon" src="/images/icons/music.svg">
 </div>
+

src/entities/track/ui/track.js

@@ -37,16 +37,33 @@ export class TrackView {
 
 	addEvents() {
 		this.trackElement.addEventListener('click', this.bindTrack);
+
+		const links = this.trackElement.querySelectorAll('.link');
+		links.forEach(link => {
+			link.addEventListener('click', (event) => this.handleLink(event));
+		});
 	}
 
 	deleteEvents() {
 		this.trackElement.removeEventListener('click', this.bindTrack);
+
+		const links = this.trackElement.querySelectorAll('.link');
+		links.forEach((link) => {
+			link.removeEventListener('click', (event) => this.handleLink(event));
+		});
 	}
 
 	bindTrack = () => {
 		eventBus.emit('playById', this.trackIndex);
 	};
 
+	handleLink(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		const href = event.target.getAttribute('href')
+		eventBus.emit('navigate', href);
+	}
+
 	destructor() {
 		this.deleteEvents();
 	}

src/entities/track/ui/track.scss

@@ -37,6 +37,26 @@
     margin-left: 20px;
   }
 
+	&__artist {
+		margin-top: 5px;
+		color: #636363;
+		font-size: 20px;
+		font-weight: 400;
+
+		&__artist_link {
+			text-decoration: none;
+			color: #636363;
+
+			&:visited {
+				color: #636363;
+			}
+
+			&:hover {
+			  text-decoration: underline;
+			}
+		}
+	}
+
   &__name {
     color: #1f1f1f;
     font-size: 22px;
@@ -117,6 +137,10 @@
       font-size: 14px;
     }
 
+    &:hover{
+      transform: translateX(-12px);
+    }
+
     &:active {
       transform: translateX(-12px);
     }

src/pages/artist/ui/Artist.js

@@ -1,8 +1,7 @@
 import { TrackListAPI } from '../../../widgets/trackList/index.js';
-import { AlbumListAPI } from '../../../widgets/albumList/index.js';
 import { ArtistCardView } from '../../../widgets/artistCard/index.js';
 import { TrackListView } from '../../../widgets/trackList/index.js';
-import { AlbumListView } from '../../../widgets/albumList/index.js';
+import { AlbumCarouselView } from '../../../widgets/albumCarousel/index.js';
 import { FooterPlayerView } from '../../../widgets/footerPlayer/index.js';
 import { userStore } from '../../../entities/user/model/store.js';
 import { player } from '../../../shared/player/model/store.js';
@@ -29,10 +28,8 @@ export class ArtistPage {
 
 		player.setTracks(tracks);
 
-		const albumListAPI = new AlbumListAPI(this.artistId);
-		const albumListView = new AlbumListView(this.parent, this.artistId);
-		const albums = await albumListAPI.get();
-		await albumListView.render(albums.slice(0, 5));
+		const albumCarouselView = new AlbumCarouselView(this.parent, this.artistId);
+		await albumCarouselView.render();
 
 		const footPlayerView = new FooterPlayerView(this.parent);
 		const user = userStore.storage.user;

src/pages/more-albums/ui/MoreAlbums.js

@@ -21,6 +21,6 @@ export class MoreAlbumsPage {
 		const albumListAPI = new AlbumListAPI(this.artistId);
 		const albums = await albumListAPI.get();
 		const albumListView = new AlbumListView(this.parent, this.artistId);
-		await albumListView.render(albums, false);
+		await albumListView.render(albums);
 	}
 }

src/pages/more-artists/ui/MoreArtists.js

@@ -15,6 +15,6 @@ export class MoreArtistsPage {
 		const artistListAPI = new ArtistListAPI();
 		const artists = await artistListAPI.get();
 		const artistListView = new ArtistListView(this.parent);
-		await artistListView.render(artists, false);
+		await artistListView.render(artists);
 	}
 }

src/pages/search/ui/Search.js

@@ -44,7 +44,7 @@ export class SearchPage {
 		}
 
 		const artistListView = new ArtistListView(this.parent);
-		await artistListView.render(artists, false);
+		await artistListView.render(artists);
 	}
 
 	async handleFoundAlbums(albums) {
@@ -58,7 +58,7 @@ export class SearchPage {
 		}
 
 		const albumListView = new AlbumListView(this.parent);
-		await albumListView.render(albums, false);
+		await albumListView.render(albums);
 	}
 
 	async handleFoundTracks(tracks) {

src/pages/sign-in/ui/SignIn.hbs

@@ -27,9 +27,7 @@
           required
         />
         <div id="login__password-error" class="login__input-error"></div>
-
-        <div class="login__additional">
-        </div>
+
         <button class="login__submit_btn" type="submit">Войти</button>
         <div class="login__additional">
           Нет аккаунта? 

src/pages/sign-in/ui/SignIn.js

@@ -48,6 +48,7 @@ export class SignInPage {
 		const password = document.querySelector('#password').value;
 
 		let validationErrors = this.inputValidation(username, password);
+		console.log(validationErrors);
 
 		if (Object.keys(validationErrors).length > 0) {
 			this.handleSignInError(validationErrors);
@@ -76,13 +77,17 @@ export class SignInPage {
 		document.querySelector('#login__username-error').textContent = '';
 		document.querySelector('#login__password-error').textContent = '';
 		document.querySelector('#login__general-error').textContent = '';
+		document.querySelector('#username').classList.remove('login__input_error');
+		document.querySelector('#password').classList.remove('login__input_error');
 
 		if (error.username) {
+			document.querySelector('#username').classList.add('login__input_error');
 			document.querySelector('#login__username-error').textContent =
 				error.username;
 		}
 
 		if (error.password) {
+			document.querySelector('#password').classList.add('login__input_error');
 			document.querySelector('#login__password-error').textContent =
 				error.password;
 		}
@@ -93,7 +98,7 @@ export class SignInPage {
 	}
 
 	inputValidation(username, password) {
-		let errors = {};
+		let validationErrors = {};
 
 		const usernameError = validate(username, VALIDATION_RULES.username);
 		if (usernameError) {
@@ -105,7 +110,8 @@ export class SignInPage {
 			validationErrors.password = passwordError;
 		}
 
-		return errors;
+		console.log(validationErrors);
+		return validationErrors;
 	}
 
 	destructor() {

src/pages/sign-in/ui/SignIn.scss

@@ -31,7 +31,6 @@
   }
 
   &__info {
-    margin-bottom: 35px;
     color: #f1f1f1;
     font-size: 16px;
     font-weight: 400;
@@ -60,41 +59,43 @@
     &:first-child {
       margin-top: 0px;
     }
+
+    &_error {
+      border: 3px solid #D64751;
+    }
   }
 
   &__input-error {
-    color: red;
-    font-size: 12px;
+    width: 430px;
+    color: #F46F77;
+    font-size: 16px;
+    font-weight: 400;
     margin-top: 5px;
   }
 
   &__general-error {
-    color: red;
-    font-size: 16px;
-    margin-top: 10px;
+    width: 430px;
+    color: #F46F77;
+    font-size: 20px;
+    font-weight: 400;
+    margin-top: 15px;
+    text-align: center;
   }
 
   &__submit_btn {
-    margin-top: 28px;
+    margin-top: 25px;
     width: 450px;
     height: 50px;
     padding: 10px;
     background: #FF5F0F;
     border-radius: 9px;
     border: none;
     color: #f1f1f1;
-    font-size: 24px;
+    font-size: 25px;
     font-weight: 400;
     text-align: center;
   }
 
-  &__checkbox {
-    width: 20px;
-    height: 20px;
-    margin-right: 5px;
-    accent-color: #FF5F0F;
-  }
-
   &__additional {
     margin-top: 10px;
     color: #f1f1f1;
@@ -109,6 +110,7 @@
   &__register_site {
     text-decoration: none;
     font-weight: 700;
+    color: #f1f1f1;
 
     &:visited {
       color: #f1f1f1;
@@ -118,4 +120,73 @@
       text-decoration: underline;
     }
   }
+
+  @media (pointer: coarse) {
+    &__enter_account {
+      text-decoration: underline;
+    }
+  } 
+
+  @media (max-width: 768px) {
+    &__input,
+    &__input-error,
+    &__general-error {
+      width: calc(60vw - 20px);
+    }
+
+    &__submit_btn {
+      width: 60vw;
+    }
+
+    &__additional {
+      margin-top: 25px;
+      flex-direction: column;
+      row-gap: 10px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    &__form {
+      margin-top: 41px;
+    }
+
+    &__intro {
+      min-height: 100px;
+    }
+
+    &__title {
+      font-size: 24px;
+    }
+
+    &__subtitle {
+      font-size: 18px;
+    }
+
+    &__info {
+      font-size: 14px;
+    }
+
+    &__input,
+    &__input-error,
+    &__general-error {
+      width: calc(80vw - 20px);
+    }
+
+    &__input {
+      font-size: 16px;
+    }
+
+    &__input-error {
+      font-size: 14px;
+    }
+
+    &__general-error {
+      font-size: 15px;
+    }
+
+    &__submit_btn {
+      width: 80vw;
+      font-size: 18px;
+    }
+  }
 }

src/pages/sign-up/ui/SignUp.js

@@ -93,18 +93,24 @@ export class SignUpPage {
 		document.querySelector('#register__email-error').textContent = '';
 		document.querySelector('#register__password-error').textContent = '';
 		document.querySelector('#register__general-error').textContent = '';
+		document.querySelector('#username').classList.remove('register__input_error');
+		document.querySelector('#email').classList.remove('register__input_error');
+		document.querySelector('#password').classList.remove('register__input_error');
 
 		if (error.username) {
+			document.querySelector('#username').classList.add('register__input_error');
 			document.querySelector('#register__username-error').textContent =
 				error.username;
 		}
 
 		if (error.email) {
+			document.querySelector('#email').classList.add('register__input_error');
 			document.querySelector('#register__email-error').textContent =
 				error.email;
 		}
 
 		if (error.password) {
+			document.querySelector('#password').classList.add('register__input_error');
 			document.querySelector('#register__password-error').textContent =
 				error.password;
 		}