распределил файлы по папкам, дал функциональности кнопкам выйти, сделал перекидывание пользователя на главную, если он не залогинен
This commit is contained in:
parent
2efc877fce
commit
74a9464e05
8 changed files with 183 additions and 140 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
console.log('лох залогинен!');
|
||||
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)
|
||||
{
|
||||
const data = await response.json();
|
||||
return data
|
||||
console.log("ты вышел, лох");
|
||||
window.location.href = '/'
|
||||
} else
|
||||
{
|
||||
console.error('Не вышел, лошара');
|
||||
}
|
||||
} catch (error)
|
||||
{
|
||||
console.error('Ошибка при выполнении выхода:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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,29 +25,22 @@
|
|||
<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">{item}</div>
|
||||
{/each}
|
||||
<div class="listItem">Профиль</div>
|
||||
<div class="listItem">Настройки</div>
|
||||
<div class="ListLine"></div>
|
||||
{#each items2 as item (item)}
|
||||
<div class="listItem">{item}</div>
|
||||
{/each}
|
||||
<div on:click={handleLogout} class="Button">Выйти</div>
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<style>
|
||||
|
||||
.name{
|
||||
|
||||
}
|
||||
|
||||
.buttonUser {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -79,16 +72,13 @@
|
|||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.listItem {
|
||||
.dropdown > *{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div,
|
||||
h3 {
|
||||
div, 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;
|
||||
height: 70px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
|
||||
max-width: 100%;
|
||||
|
|
@ -145,5 +133,8 @@
|
|||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
}
|
||||
.AvatarDiv{
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
height: 5vh;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
|
|
@ -140,6 +170,17 @@
|
|||
|
||||
.MsgMsg{
|
||||
word-wrap: break-word;
|
||||
display: inline;
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
|
||||
.MsgName{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.MsgTime{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.MsgPic {
|
||||
|
|
@ -152,22 +193,20 @@
|
|||
}
|
||||
|
||||
.MsgAva {
|
||||
min-height: 50px;
|
||||
min-width: 50px;
|
||||
height: 5vw;
|
||||
width: 5vw;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 10px;
|
||||
margin: 0.25vw;
|
||||
|
||||
}
|
||||
|
||||
.MsgAll {
|
||||
display: grid;
|
||||
grid-template-columns: 5vw 44vw;
|
||||
display: block;
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
.divMessage {
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
|
|
@ -175,17 +214,18 @@
|
|||
margin: 3px;
|
||||
}
|
||||
|
||||
|
||||
.chatBox {
|
||||
|
||||
overflow-x:auto;
|
||||
overflow-y: 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>
|
||||
|
|
|
|||
39
src/routes/login/+page.svelte
Normal file
39
src/routes/login/+page.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue