распределил файлы по папкам, дал функциональности кнопкам выйти, сделал перекидывание пользователя на главную, если он не залогинен

package-lock.json

@@ -13,6 +13,7 @@
 				"sass": "^1.70.0",
 				"socket.io": "^4.7.4",
 				"socket.io-client": "^4.7.4",
+				"svelte-routing": "^2.12.0",
 				"websocket": "^1.0.34",
 				"ws": "^8.16.0"
 			},
@@ -3502,6 +3503,11 @@
 				}
 			}
 		},
+		"node_modules/svelte-routing": {
+			"version": "2.12.0",
+			"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-2.12.0.tgz",
+			"integrity": "sha512-6i4Mncy4P2b7gD7+BOT9JzQvrfGfGXqFra8VXYU5//bpn6AzJ0PLEhH1E/KwY2AxleOiS/8Nm37MGuic2kn15A=="
+		},
 		"node_modules/svelte-time": {
 			"version": "0.8.2",
 			"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.2.tgz",

package.json

@@ -38,6 +38,7 @@
 		"sass": "^1.70.0",
 		"socket.io": "^4.7.4",
 		"socket.io-client": "^4.7.4",
+		"svelte-routing": "^2.12.0",
 		"websocket": "^1.0.34",
 		"ws": "^8.16.0"
 	}

src/lib/userFunction.js

@@ -6,15 +6,62 @@ export async function UserCheck(){
 
     })
   
+    if(!response.ok){
+      window.location.href = '/'
+      return(response.status)
+    }
+
+    else{
+       const data = await response.json();
+       return data
+    }
+  }
+
+  export async function handleLogin(username, password) {
+    
+     const response = await fetch('http://localhost:8000/api/users/login', {
+      method: 'POST',
+      credentials:'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify
+      ({
+        email_or_username: username,
+        password: password
+      })
+      
+    })
     if(!response.ok)
     {
       console.log(response.status)
     }
-
+    else
-    if(response.ok)
     {
-       const data = await response.json();
+      console.log('лох залогинен!');
-       return data
+      window.location.href = '/chatPage'
+    }
+}
+
+  export async function handleLogout() {
+    try{
+        const response = await fetch('http://localhost:8000/api/users/logout',
+        {
+            method:'POST',
+            credentials:'include'
+  
+        })
+        if (response.ok) 
+        {
+            console.log("ты вышел, лох");
+            window.location.href = '/'
+        } else
+       {
+        console.error('Не вышел, лошара');
+      }
+    } catch (error) 
+    {
+      console.error('Ошибка при выполнении выхода:', error.message);
     }
   }
 

src/routes/+page.svelte

@@ -1,80 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import Header from './Header.svelte';
-
-    let username = "";
-    let password = "";
-
-    async function handleLogin() {
-    
-    const response = await fetch('http://localhost:8000/users/login', {
-      method: 'POST',
-      credentials:'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify
-      ({
-        email_or_username: username,
-        password: password,
-      })
-      
-    })
-
-    .catch(function (err) 
-      {
-      console.log('Ошибка:', err);
-      })
-
-    // В этом месте вы можете обработать успешный вход в систему, например, перенаправить пользователя на другую страницу
-    console.log('лох залогинен!');
-  
-}
-
-async function handleLogout() {
-  try{
-      const response = await fetch('http://localhost:8000/users/logout',
-      {
-          method:'POST',
-          credentials:'include'
-
-      })
-      if (response.ok) 
-      {
-          console.log("ты вышел, лох");
-      } else
-     {
-      console.error('Не вышел, лошара');
-    }
-  } catch (error) 
-  {
-    console.error('Ошибка при выполнении выхода:', error.message);
-  }
-}
-
-</script>
-
-
-
-<form on:submit|preventDefault={handleLogin}>
-    <label for="username">Username:</label>
-    <input type="text" id="username" bind:value={username} />
-
-    <label for="password">Password:</label>
-    <input type="password" id="password" bind:value={password} />
-
-    <button type="submit">Login</button>
-  </form>
-
-  <button on:click={handleLogout}>Выход</button>
-
-<style>
-    *{
-        font-weight: 600;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    }
-     
-    
-    
-    
-</style>

src/routes/Header.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
-	import { UserCheck } from '$lib/userFunction';
+	import { UserCheck, handleLogout} from '$lib/userFunction';
+
 
 	let Nickname;
 	let userImage;
@@ -13,8 +14,7 @@
 	});
 
 	let isOpen = false;
-	let items1 = ['Профиль', 'Настройки'];
+	
-	let items2 = ['Выйти'];
 </script>
 
 <header class="headerClass">
@@ -25,33 +25,26 @@
 	<div class="divUser">
 		<button class="buttonUser" on:click={() => (isOpen = !isOpen)}>
 			<h3 class="name">{Nickname}</h3>
-			<img class="userAvatar" src={userImage} alt="аватарка" />
+			<div class="AvatarDiv"><img class="userAvatar" src={userImage} alt="аватарка" /></div>
 		</button>
 	</div>
 
 	{#if isOpen}
 		<div class="dropdown">
-			{#each items1 as item (item)}
+			<div class="listItem">Профиль</div>
-				<div class="listItem">{item}</div>
+			<div class="listItem">Настройки</div>
-			{/each}
 			<div class="ListLine"></div>
-			{#each items2 as item (item)}
+			<div on:click={handleLogout} class="Button">Выйти</div>
-				<div class="listItem">{item}</div>
-			{/each}
 		</div>
 	{/if}
 </header>
 
 <style>
 
-	.name{
-
-	}
-
 	.buttonUser {
 		width: 100%;
 		height: 100%;
-    border-bottom-left-radius: 10px;
+   		border-bottom-left-radius: 10px;
 		border-bottom-right-radius: 10px;
 		display: flex;
 		justify-content: space-around;
@@ -69,7 +62,7 @@
 	}
 
 	.dropdown {
-    z-index: 3;
+    	z-index: 3;
 		cursor: pointer;
 		position: absolute;
 		right: 5vw;
@@ -79,16 +72,13 @@
     background-color: rgba(255, 255, 255, 0.3);
     border: 0;
     border-radius: 10px;
-
-   
 	}
 
-	.listItem {
+	.dropdown > *{
 		cursor: pointer;
 	}
 
-	div,
+	div, h3 {
-	h3 {
 		font-weight: 600;
 		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 	}
@@ -105,7 +95,6 @@
 	.siteAvatar {
 		margin: 0;
 		padding: 0;
-
 		height: 100%;
 		object-fit: cover;
 	}
@@ -121,7 +110,6 @@
 		display: flex;
 		justify-content: space-evenly;
 		align-items: center;
-		border: 1px solid black;
 	}
 	.divUser {
 		grid-column: 8;
@@ -133,8 +121,8 @@
 	}
 	.userAvatar {
 		justify-content: right;
-		width: 70px;
+		width: 75px;
-		height: 70px;
+		height: 75px;
 		border-radius: 50%;
 
 		max-width: 100%;
@@ -145,5 +133,8 @@
 
 		display: flex;
 		align-items: center;
+		background-color: white;
+	}
+	.AvatarDiv{
 	}
 </style>

src/routes/chatPage/+page.svelte

@@ -4,7 +4,7 @@
 	import Time from 'svelte-time';
 	import { dayjs } from 'svelte-time';
 	import 'dayjs/locale/ru';
-	import { UserCheck, getLastMessages, MessagePicToUrl } from '$lib/userFunction.js';
+	import { UserCheck, getLastMessages, MessagePicToUrl} from '$lib/userFunction.js';
 	import createWebSocket from '$lib/websocket';
 
 	dayjs.locale('ru');
@@ -17,6 +17,8 @@
 	let messageText = ''; //сообщения для отправки
 	let messagePic; //картинка для отправки
 
+	
+
 	onMount(async () => {
 		const userData = await UserCheck();
 		let userId = userData.id;
@@ -48,7 +50,7 @@
 
 		if (messageText.trim() !== '' || messageUrl != null) {
 			socket.send(JSON.stringify({ message: messageText, image_url: messageUrl }));
-			messageText = null;
+			messageText = ""
 		}
 	}
 
@@ -56,6 +58,7 @@
 		if (event.key === 'Enter' && !event.shiftKey) {
 			// Если нажат Enter и не нажат Shift, отправляем сообщение
 			sendMessage(event);
+			event.preventDefault();
 		}
 		
 	}
@@ -67,6 +70,13 @@
 	<div>жопа2</div>
 	<div class="divChat">
 		<div class="chatBox">
+			{#if messages.length == 0}
+			<div class="NoMsgDiv">
+				<h1 class="NoMsg1">В этом чате еще нет сообщений.</h1>
+				<h3 class="NoMsg2">Крыски, начните обсуждать киску <br> прям за ее спиной</h3>
+			</div>
+			{/if}
+
 			{#each messages as message}
 				<div class="MsgAll">
 					<img class="MsgAva" src={message.avatar_image} alt="ава" />
@@ -109,6 +119,26 @@
 </body>
 
 <style>
+.NoMsgDiv {
+
+  
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  
+
+}
+.NoMsgDiv > * {
+  align-self: center; /* Центрирование по вертикали внутри .NoMsgDiv */
+}
+.NoMsg1{
+	
+}
+.NoMsg2{
+	
+}
+
+
 
 .fileInputDiv{
   background-color: rgba(255, 255, 255, 0.1);
@@ -118,8 +148,8 @@
 .attachingImages{
   display: flex;
   justify-content: center;
-  width: 5vh;
+  width: 4vh;
-  height: 5vh;
+  height: 4vh;
   min-width: 30px;
   min-height: 30px;
   padding: 10px;
@@ -140,8 +170,19 @@
 
 	.MsgMsg{
 		word-wrap: break-word;
+		display: inline;
+		background-color: red;
+		
+	}
+	
+	.MsgName{
+		display: inline;
 	}
 
+	.MsgTime{
+		display: inline;
+	}
+	
 	.MsgPic {
 		margin-left: 1vw;
 		margin-bottom: 1vh;
@@ -152,40 +193,39 @@
 	}
 
 	.MsgAva {
-		min-height: 50px;
+		height: 50px;
-		min-width: 50px;
+		width: 50px;
-		height: 5vw;
-		width: 5vw;
 		border: 2px solid rgba(255, 255, 255, 0.6);
 		border-radius: 10px;
-		margin: 0.25vw;
+		
 	}
 
 	.MsgAll {
-		display: grid;
+		display: block;
-		grid-template-columns: 5vw 44vw;
 		gap: 1vw;
 	}
 
 	.divMessage {
+		
 		background-color: rgba(255, 255, 255, 0.3);
 		border: 1px solid rgba(255, 255, 255, 0.5);
 		border-radius: 15px;
 		box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
 		margin: 3px;
 	}
+	
 
 	.chatBox {
-
+		overflow-y: auto;
-		overflow-x:auto;
+		height: 100%;
 		width: 100%;
-		
-
 		/* From https://css.glass */
 		background-color: rgba(255, 255, 255, 0.2);
+
 		border-radius: 15px;
     	border-bottom-left-radius: 0;
    		border-bottom-right-radius: 0; 
+
 		   box-shadow:
   8.6px 0px 10.7px -13px rgba(0, 0, 0, 0.07),
   14.3px 0px 17.9px -13px rgba(0, 0, 0, 0.042),
@@ -194,21 +234,12 @@
   25.8px 0px 26.4px -13px rgba(0, 0, 0, 0.037),
   31.9px 0px 30.2px -13px rgba(0, 0, 0, 0.037),
   44px 0px 43px -13px rgba(0, 0, 0, 0.036),
-  100px 0px 142px -13px rgba(0, 0, 0, 0.031)
+  100px 0px 142px -13px rgba(0, 0, 0, 0.031);
-;
+
-    
 		backdrop-filter: blur(7px);
 		border: 1px solid rgba(255, 255, 255, 0.43);
 	}
 
-	.DivHeader {
-		grid-column: 3 span;
-		border: 0 !important;
-		margin: 0;
-		padding: 0;
-		z-index: 2;
-	}
-
 	.chatSend {
 		box-shadow:
   8.6px 8.6px 10.7px -13px rgba(0, 0, 0, 0.07),
@@ -218,8 +249,8 @@
   25.8px 25.8px 26.4px -13px rgba(0, 0, 0, 0.037),
   31.9px 31.9px 30.2px -13px rgba(0, 0, 0, 0.037),
   44px 44px 43px -13px rgba(0, 0, 0, 0.036),
-  100px 100px 142px -13px rgba(0, 0, 0, 0.031)
+  100px 100px 142px -13px rgba(0, 0, 0, 0.031);
-;
+
 	display: flex;
 	width: 100%;
 	justify-content: space-between;
@@ -229,7 +260,6 @@
 	}
 
 	.chatInput {
-		
     outline: none;
 		width: 100%;
 		resize: none;
@@ -238,7 +268,6 @@
     border: transparent solid;
     max-height: 12em;
     border-bottom-left-radius: 15px;
-    
 	}
 
 	.divChat {
@@ -249,7 +278,7 @@
 
 	body {
 		display: grid;
-		grid-template-columns: 25vw 50vw 25vw; /* 2 колонки с равным распределением ширины */
+		grid-template-columns: 30vw 40vw 30vw; /* 2 колонки с равным распределением ширины */
 		grid-template-rows: 10vh 80vh 10vh;
 	}
 
@@ -272,4 +301,14 @@
 		background-position-x: 50%;
 		background-position-y: 50%;
 	}
+
+	.DivHeader {
+		grid-column: 3 span;
+		border: 0 !important;
+		margin: 0;
+		padding: 0;
+		z-index: 2;
+		min-height: 500px !important;
+		
+	}
 </style>

src/routes/login/+page.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { onMount } from 'svelte';
+    import Header from '../Header.svelte';
+    import {navigate} from 'svelte-routing'
+    import {handleLogin, handleLogout} from '$lib/userFunction'
+
+    let username = "";
+    let password = "";
+
+    function login(){
+      handleLogin(username,password)
+    }
+
+</script>
+
+
+
+<form on:submit|preventDefault={login}>
+    <label for="username">Username:</label>
+    <input type="text" id="username" bind:value={username} />
+
+    <label for="password">Password:</label>
+    <input type="password" id="password" bind:value={password} />
+
+    <button type="submit">Login</button>
+  </form>
+
+  <button on:click={handleLogout}>Выход</button>
+
+<style>
+    *{
+        font-weight: 600;
+        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    }
+     
+    
+    
+    
+</style>