ver 1.0
This commit is contained in:
parent
ea980b3974
commit
435afb5414
12 changed files with 368 additions and 307 deletions
|
|
@ -19,8 +19,6 @@
|
|||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -52,6 +50,7 @@
|
|||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -20,19 +20,7 @@ export async function getLastMessages(chatId,msgLoaded){
|
|||
|
||||
if(msgMassive === null){
|
||||
return []
|
||||
}
|
||||
else{
|
||||
msgMassive.reverse();
|
||||
|
||||
// for(let i = 0; i < msgMassive.length; i++){
|
||||
// let utc = msgMassive[i].created_at
|
||||
// let newutc = new Date(utc)
|
||||
// //console.log(utc)
|
||||
// const formattedDate = formatDistanceToNow(new Date(newutc), { addSuffix: true, locale: ruLocale });
|
||||
// //console.log(newutc)
|
||||
// console.log(formattedDate)
|
||||
// msgMassive[i].created_at = formattedDate
|
||||
// }
|
||||
} else {
|
||||
return msgMassive
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,15 +21,13 @@ export async function handleLogin(username, password) {
|
|||
const data = await response.json()
|
||||
const token = data.authorization
|
||||
localStorage.setItem('BPChat', token)
|
||||
|
||||
window.location.href = '/chat'
|
||||
return "" // чтобы ничего не выводилось в качестве ошибки
|
||||
}
|
||||
else if(response.status === 401)
|
||||
{
|
||||
return "Неправильный логин или пароль"
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,20 @@
|
|||
export async function checkName(username) {
|
||||
const response = await fetch('https://docs.black-phoenix.ru/api/users/check_existing_username', {
|
||||
export async function checkExsistingUser(username, email) {
|
||||
const response = await fetch('https://docs.black-phoenix.ru/api/users/check_existing_user', {
|
||||
method:'POST',
|
||||
credentials:"include",
|
||||
headers:{
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"username": username
|
||||
"username": username,
|
||||
"email": email
|
||||
})
|
||||
})
|
||||
if(response.status === 200){
|
||||
return ""
|
||||
}
|
||||
else if(response.status === 409){
|
||||
let data = "ник занят"
|
||||
let data = "ЗАНЯТО НАХУЙ"
|
||||
return data
|
||||
}
|
||||
else if(response.status === 422){
|
||||
|
|
@ -25,30 +26,6 @@ export async function checkName(username) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function checkMail(mail) {
|
||||
const response = await fetch('https://docs.black-phoenix.ru/api/users/check_existing_email', {
|
||||
method:'POST',
|
||||
credentials:"include",
|
||||
headers:{
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"email": mail
|
||||
})
|
||||
})
|
||||
if(response.status === 200){
|
||||
return ""
|
||||
}
|
||||
|
||||
else if(response.status === 409){
|
||||
return "почта занята"
|
||||
}
|
||||
|
||||
else if(response.status === 422){
|
||||
return "не похоже на почту"
|
||||
}
|
||||
}
|
||||
|
||||
export async function VerificationEmail(Code){
|
||||
const response = await fetch('https://docs.black-phoenix.ru/api/users/email_verification',{
|
||||
method:'POST',
|
||||
|
|
@ -70,26 +47,40 @@ export async function VerificationEmail(Code){
|
|||
}
|
||||
}
|
||||
|
||||
export async function resendVerification(token){
|
||||
const response = await fetch(`https://docs.black-phoenix.ru/api/users/resend_email_verification`,{
|
||||
method:'POST',
|
||||
credentials:'include',
|
||||
headers: {'Authorization': token }
|
||||
})
|
||||
|
||||
export async function handleRegister(username,password,email,date_of_birth){
|
||||
if(response.ok){
|
||||
return "Отправлено"
|
||||
} else {
|
||||
console.log(response)
|
||||
return "Произошла ошибка"
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleRegister(username,password,password2,email,date_of_birth){
|
||||
const response = await fetch('https://docs.black-phoenix.ru/api/users/register',{
|
||||
method:'POST',
|
||||
credentials:"include",
|
||||
headers:{
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
headers:{ 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
"email": email,
|
||||
"username": username,
|
||||
"password": password,
|
||||
"password2": password2,
|
||||
"date_of_birth": date_of_birth
|
||||
})
|
||||
})
|
||||
|
||||
if(response.status === 201){
|
||||
const data = await response.json();
|
||||
console.log(data)
|
||||
return data;
|
||||
const token = data.authorization
|
||||
localStorage.setItem('BPChat', token)
|
||||
return ""
|
||||
}
|
||||
else if(response.status === 422){
|
||||
console.log(response.status)
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ export async function getAvatarHistory(token){
|
|||
data = data.user_avatars
|
||||
data.reverse();
|
||||
return data;
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
|
@ -22,21 +21,19 @@ export async function getConfirmationCode(token, email){
|
|||
const response = await fetch(`https://docs.black-phoenix.ru/api/users/send_confirmation_code`,{
|
||||
method: 'POST',
|
||||
credentials:'include',
|
||||
headers: {'Content-Type': 'application/json',
|
||||
'Authorization': token},
|
||||
headers: { 'Content-Type': 'application/json',
|
||||
'Authorization': token },
|
||||
body: JSON.stringify({'email': email})
|
||||
})
|
||||
|
||||
if(response.ok){
|
||||
return true
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
||||
export async function changeUserData(token, username, email, password, avatar, code){
|
||||
|
||||
let response = await fetch(`https://docs.black-phoenix.ru/api/users/change_data`,{
|
||||
|
||||
method: 'POST',
|
||||
|
|
@ -52,9 +49,9 @@ export async function changeUserData(token, username, email, password, avatar, c
|
|||
|
||||
if(response.ok){
|
||||
return true
|
||||
}
|
||||
} else if (response.status == 409){
|
||||
|
||||
else{
|
||||
} else {
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
|
@ -31,9 +31,7 @@
|
|||
|
||||
<div class="userUser">
|
||||
<button
|
||||
class="buttonUser"
|
||||
style:border-bottom-right-radius={isOpen ? '0px' : '15px'}
|
||||
style:border-bottom-left-radius={isOpen ? '0px' : '15px'}
|
||||
class="buttonUser" class:buttonUser2={isOpen}
|
||||
on:click={dropDown}
|
||||
>
|
||||
<h3>{Nickname}</h3>
|
||||
|
|
@ -41,8 +39,7 @@
|
|||
</button>
|
||||
|
||||
{#if isOpen }
|
||||
<div class="dropdown" transition:slide={{ duration: 300, delay: 150 }}>
|
||||
<a href="/profile" class="listItem">Профиль</a>
|
||||
<div class="dropdown" in:slide={{ duration: 300, delay: 150 }} out:slide={{ duration:300 }}>
|
||||
<a href="/settings" class="listItem">Настройки</a>
|
||||
<a on:click={handleLogout} class="listItem">Выйти</a>
|
||||
</div>
|
||||
|
|
@ -57,13 +54,13 @@
|
|||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
//background-repeat: no-repeat;
|
||||
//background-attachment: fixed;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-bottom: 0;
|
||||
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -90,13 +87,22 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.buttonUser {
|
||||
.buttonUser,
|
||||
.buttonUser2 {
|
||||
width: 230px;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
margin-top: -1px;
|
||||
|
||||
transition: all 300ms ease-in !important;
|
||||
}
|
||||
.buttonUser2{
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -120,14 +126,16 @@
|
|||
}
|
||||
|
||||
.listItem {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0 20px white;
|
||||
background: transparent;
|
||||
|
||||
border: 0;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 3px;
|
||||
background: transparent;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatarDiv {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { fade, slide, fly, scale } from 'svelte/transition';
|
||||
|
||||
import { getAvatarHistory, changeUserData, getConfirmationCode } from '$lib/settings'
|
||||
import { checkExsistingUser } from '$lib/register'
|
||||
import { UserCheck } from '$lib/userFunction';
|
||||
import { uploadImages } from '$lib/chat';
|
||||
import Header from './../Header.svelte';
|
||||
|
|
@ -25,10 +26,17 @@
|
|||
let newName = ""
|
||||
let newEmail = ""
|
||||
let newPassword = ""
|
||||
let newAvatar = ""
|
||||
let newAvatar = null
|
||||
let code = ""
|
||||
|
||||
let showSubmitDiv = false
|
||||
|
||||
let nameError = ""
|
||||
let emailError = ""
|
||||
let passwordError = ""
|
||||
|
||||
let submitButton
|
||||
|
||||
onMount(async () => {
|
||||
token = localStorage.getItem('BPChat')
|
||||
|
||||
|
|
@ -44,16 +52,6 @@
|
|||
|
||||
async function changingData(){
|
||||
|
||||
if(newName == "")
|
||||
newName = oldName; console.log(newName, "новое имя")
|
||||
if(newEmail == "")
|
||||
newEmail = oldEmail; console.log(newEmail, "новая почта")
|
||||
if(newPassword == "")
|
||||
newPassword = null; console.log(newPassword, " новый пароль")
|
||||
if(newAvatar == "")
|
||||
newAvatar = null; console.log(newAvatar, "ава")
|
||||
console.log(newName, newEmail, newPassword, newAvatar, " - измененные данные")
|
||||
|
||||
confCode = await getConfirmationCode(token, oldEmail)
|
||||
if(confCode == true)
|
||||
showSubmitDiv = true
|
||||
|
|
@ -68,19 +66,52 @@
|
|||
newAvatar = await uploadImages(newAvatar)
|
||||
}
|
||||
|
||||
let changing = afterChanging = await changeUserData(token, newName, newEmail, newPassword, newAvatar, code)
|
||||
let nName = ""
|
||||
let nEmail = ""
|
||||
let nPassword = ""
|
||||
|
||||
if(newName != ""){
|
||||
nName = newName
|
||||
} else {
|
||||
nName = oldName
|
||||
}
|
||||
|
||||
if(newEmail != ""){
|
||||
nEmail = newEmail
|
||||
} else {
|
||||
nEmail = oldEmail
|
||||
}
|
||||
|
||||
if(newPassword != ""){
|
||||
nPassword = newPassword
|
||||
} else {
|
||||
nPassword = null
|
||||
}
|
||||
if(newAvatar == undefined){
|
||||
newAvatar = null
|
||||
}
|
||||
|
||||
console.log(nName, nEmail,nPassword,newAvatar)
|
||||
let changing = afterChanging = await changeUserData(token, nName, nEmail, nPassword, newAvatar, code)
|
||||
console.log(changing)
|
||||
if (changing == true){
|
||||
showSubmitDiv = false
|
||||
location.reload()
|
||||
} else {
|
||||
let changingError = "ник или почта уже занята"
|
||||
}
|
||||
}
|
||||
|
||||
function cancelSubmitting(){
|
||||
showSubmitDiv = false
|
||||
code = ""
|
||||
}
|
||||
|
||||
function cancel(){
|
||||
newName = ""
|
||||
newEmail = ""
|
||||
newPassword = ""
|
||||
newAvatar = ""
|
||||
newAvatar = null
|
||||
newAvatarVisualize = ""
|
||||
}
|
||||
|
||||
|
|
@ -145,6 +176,43 @@
|
|||
function PickOldAvatar(oldAvatarUrl){
|
||||
pickedImg = oldAvatarUrl
|
||||
}
|
||||
|
||||
async function existingUser(){
|
||||
if((newName.length <= 2) && (newName != "")){
|
||||
nameError = "ник от 2 символов"
|
||||
} else{
|
||||
nameError = ""
|
||||
}
|
||||
|
||||
if((newName != "") && (newName.length > 2)){
|
||||
nameError = await checkExsistingUser(newName, null)
|
||||
}
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
let isValidEmail = emailPattern.test(newEmail)
|
||||
console.log(isValidEmail)
|
||||
|
||||
if((newEmail != "") && (isValidEmail == true)){
|
||||
emailError = await checkExsistingUser(null, newEmail)
|
||||
}
|
||||
|
||||
if((newPassword.length < 8) && (newPassword != "")){
|
||||
passwordError = "пароль от 8 символов"
|
||||
submitButton.disabled = true
|
||||
} else {
|
||||
passwordError = ""
|
||||
submitButton.disabled = false
|
||||
}
|
||||
|
||||
if((nameError || emailError || passwordError) != ""){
|
||||
submitButton.disabled = true
|
||||
} else {
|
||||
submitButton.disabled = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
|
@ -167,7 +235,10 @@
|
|||
<div class="submitPassword" transition:fly={{y: -800, duration: 500 }}>
|
||||
<h2>Подтвердите кодом из почты</h2>
|
||||
<input bind:value={code} type="password" id="oldPassword" placeholder="Код">
|
||||
<div class="submitDiv">
|
||||
<button on:click={submit}>Отправить</button>
|
||||
<button on:click={cancelSubmitting}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
@ -211,22 +282,31 @@
|
|||
</div>
|
||||
|
||||
<div class="textDiv">
|
||||
<div>
|
||||
<div class="blockDiv">
|
||||
<h3>ник</h3>
|
||||
<input bind:value={newName} type="name" placeholder={oldName}>
|
||||
<input bind:value={newName} type="name" placeholder={oldName} on:input={existingUser}>
|
||||
{#if nameError != ""}
|
||||
<h2 class="error">{nameError}</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="blockDiv">
|
||||
<h3>почта</h3>
|
||||
<input bind:value={newEmail} type="email" placeholder={oldEmail}>
|
||||
<input bind:value={newEmail} type="email" placeholder={oldEmail} on:input={existingUser}>
|
||||
{#if emailError != ""}
|
||||
<h2 class="error">{emailError}</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="blockDiv">
|
||||
<h2>новый пароль</h2>
|
||||
<input bind:value={newPassword} type="password" placeholder="новый пароль">
|
||||
<input on:blur={existingUser} bind:value={newPassword} type="password" placeholder="новый пароль">
|
||||
{#if passwordError != ""}
|
||||
<h2 class="error">Пароль от 8 символов</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="finishButton">
|
||||
<button on:click={changingData}>Подтвердить</button>
|
||||
<button on:click={changingData} bind:this={submitButton}>Подтвердить</button>
|
||||
<button on:click={cancel}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -239,6 +319,30 @@
|
|||
|
||||
<style lang="scss">
|
||||
|
||||
.blockDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 33%;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.error{
|
||||
color:var(--disable);
|
||||
}
|
||||
|
||||
.submitDiv{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
|
||||
button{
|
||||
height: 100%;
|
||||
&:nth-child(2){
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cropper-modal {
|
||||
background-color: #101010;
|
||||
|
|
@ -368,6 +472,7 @@ button{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<script>
|
||||
import { getLastMessages, MessagePicToUrl, getAllChats, getPinnedMsg, getMessageById, pinMessage, unpinMessage, uploadImages, getAllUsers, createNewChat, deleteChat } from '$lib/chat';
|
||||
import { getLastMessages, MessagePicToUrl, getAllChats, getPinnedMsg, getMessageById, uploadImages, getAllUsers, createNewChat, deleteChat } from '$lib/chat';
|
||||
import { UserCheck } from '$lib/userFunction'
|
||||
|
||||
import Header from '../Header.svelte';
|
||||
import createWebSocket from '$lib/websocket';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount, tick } from 'svelte';
|
||||
import { fade, slide, fly, scale } from 'svelte/transition';
|
||||
|
||||
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
|
||||
import ruLocale from 'date-fns/locale/ru';
|
||||
|
||||
|
||||
console.clear();
|
||||
|
||||
let userId; //пользователь, который залогинен
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
let msgLoaded = 0
|
||||
let messageText = '' //сообщения для отправки
|
||||
let selectedFile // картинка для отправки
|
||||
let image_url = null
|
||||
let imageToUpload = null
|
||||
let messagePic //картинка для отправки
|
||||
let flag = "send"
|
||||
let answer = null
|
||||
|
|
@ -53,47 +52,61 @@
|
|||
|
||||
chats = await getAllChats()
|
||||
createNewChatButton = true
|
||||
console.log(chats, " чаты")
|
||||
//console.log(chats, " чаты")
|
||||
|
||||
async function handleChatUrlChange() {
|
||||
if (window.location.hash.startsWith('#id=')) {
|
||||
|
||||
chatId = window.location.hash.slice(4);
|
||||
msgLoaded = 0
|
||||
console.log(chatId, " chatId")
|
||||
//console.log(chatId, " chatId")
|
||||
|
||||
currentChat = chats.find(chat => chat.chat_id == chatId)
|
||||
console.log(currentChat, " текущий чат")
|
||||
//console.log(currentChat, " текущий чат")
|
||||
pickedChatName = currentChat.chat_name
|
||||
pickedChatImg = currentChat.avatar_image
|
||||
|
||||
messages = await getLastMessages(chatId,msgLoaded)
|
||||
setTimeout(scrollDown,50)
|
||||
msgLoaded += 15
|
||||
pinnedMsg = await getPinnedMsg(chatId)
|
||||
|
||||
console.log(pinnedMsg, " pinned")
|
||||
console.log(messages, " сообщения")
|
||||
//console.log(messages, " сообщения")
|
||||
|
||||
token = localStorage.getItem('BPChat')
|
||||
const websocketUrl = `wss://docs.black-phoenix.ru/api/chat/ws/${chatId}`
|
||||
|
||||
console.log(socket)
|
||||
if (socket)
|
||||
socket = null
|
||||
|
||||
|
||||
socket = createWebSocket(websocketUrl, token, async (message) => {
|
||||
|
||||
console.log(message, "сообщение!!!!!")
|
||||
if(message.flag === "pin" ){
|
||||
|
||||
console.log("ЗАКРЕП!!!!!!!!!!!")
|
||||
pinnedMsg = [message, ...pinnedMsg]
|
||||
|
||||
}
|
||||
else if(message.flag === "delete"){
|
||||
|
||||
let messageToDelete = messages.findIndex(msg => msg.id === message.id)
|
||||
console.log(messageToDelete, "индекс сообщения, которое нужно делитнуть")
|
||||
messages.splice(messageToDelete,1)
|
||||
messages = messages
|
||||
console.log(messages," сообщения после удаления")
|
||||
|
||||
} else if(message.flag === "unpin"){
|
||||
|
||||
console.log(message)
|
||||
|
||||
} else {
|
||||
messages = [...messages, message]
|
||||
setTimeout(scrollDown,50)
|
||||
|
||||
|
||||
messages = [message, ...messages]
|
||||
|
||||
}
|
||||
messages = messages
|
||||
|
||||
|
|
@ -105,24 +118,29 @@
|
|||
|
||||
});
|
||||
|
||||
let isLoaded = false
|
||||
|
||||
async function sendMessage() {
|
||||
|
||||
let image = null
|
||||
if(image_url != null)
|
||||
image = await uploadImages(image_url)
|
||||
|
||||
if(imageToUpload != null){
|
||||
isLoaded = true
|
||||
image = await uploadImages(imageToUpload)
|
||||
isLoaded = false
|
||||
}
|
||||
if((messageText != "") || image != null){
|
||||
|
||||
console.log(image, " картинка")
|
||||
console.log(`${messageText} - текст, ${image} - картинка`)
|
||||
|
||||
socket.send(JSON.stringify({flag: flag,
|
||||
message: messageText,
|
||||
image_url: image,
|
||||
answer: answer }));
|
||||
|
||||
messageText = ""
|
||||
imageFile = undefined
|
||||
imageShow = false
|
||||
image_url = null
|
||||
imageToUpload = null
|
||||
answer = null
|
||||
answerMessageTextShow = false
|
||||
answerMessageImgShow = false
|
||||
|
|
@ -136,6 +154,7 @@
|
|||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
console.log("нажата ", messageText)
|
||||
if(!isLoaded)
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
|
|
@ -173,8 +192,13 @@ let PickedName = ""
|
|||
//$: console.log(pickedId)
|
||||
//$: console.log(answer)
|
||||
|
||||
let pinOrNot = false
|
||||
|
||||
function helperDivShow(event, id, text, img, username) {
|
||||
|
||||
pinOrNot = pinnedMsg.some(msg => msg.id == id)
|
||||
console.log(pinOrNot)
|
||||
|
||||
if (helperDiv) {
|
||||
helperDivBoolShow = false
|
||||
}
|
||||
|
|
@ -225,18 +249,17 @@ let PickedName = ""
|
|||
|
||||
async function pinFunc(event){
|
||||
|
||||
let alreadyPinned = false
|
||||
if(pinnedMsg != null){
|
||||
let findPinMsg = pinnedMsg.find(msg => msg.id === pickedId)
|
||||
if(findPinMsg != null)
|
||||
alreadyPinned = true
|
||||
}
|
||||
if(alreadyPinned === false){
|
||||
socket.send(JSON.stringify({"flag": "pin",
|
||||
"user_id": userId,
|
||||
"id": pickedId
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
async function unpinFunc(event){
|
||||
socket.send(JSON.stringify({"flag": "unpin",
|
||||
"id": pickedId
|
||||
}));
|
||||
}
|
||||
|
||||
function delFunc(event){
|
||||
|
|
@ -253,7 +276,7 @@ let PickedName = ""
|
|||
|
||||
function handleFileChange(event) {
|
||||
const file = event.target.files[0];
|
||||
image_url = file
|
||||
imageToUpload = file
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = (e) => {
|
||||
|
|
@ -274,7 +297,7 @@ let PickedName = ""
|
|||
|
||||
imageFile = e.target.result;
|
||||
imageShow = true;
|
||||
image_url = imageFile
|
||||
imageToUpload = imageFile
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -283,7 +306,7 @@ let PickedName = ""
|
|||
function deleteImage(){
|
||||
imageFile = undefined;
|
||||
imageShow = false;
|
||||
image_url = null
|
||||
imageToUpload = null
|
||||
}
|
||||
|
||||
function deleteAnswer(){
|
||||
|
|
@ -293,32 +316,31 @@ let PickedName = ""
|
|||
answerMessage = ""
|
||||
}
|
||||
|
||||
let oldScrollHeight = null;
|
||||
$: console.log(oldScrollHeight, "старый скорлл")
|
||||
let uploadingNewMsg = true
|
||||
async function handleScroll(event) {
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.target
|
||||
console.log(scrollHeight, ";" )
|
||||
if (scrollTop === 0) { // если прокрутка достигла верхней части
|
||||
console.log("конец")
|
||||
|
||||
const previousScrollHeight = scrollHeight
|
||||
let topHeight = scrollTop*-1 + clientHeight + 1
|
||||
|
||||
//console.log(topHeight)
|
||||
//console.log("высота дива - ", scrollHeight)
|
||||
|
||||
if (topHeight == scrollHeight) {
|
||||
// если прокрутка достигла верхней части
|
||||
|
||||
|
||||
let newMessages = await getLastMessages(chatId,msgLoaded)
|
||||
console.log(newMessages, "new msg")
|
||||
messages = [...newMessages, ...messages]
|
||||
const newMessages = await getLastMessages(chatId,msgLoaded)
|
||||
messages = [ ...messages, ...newMessages ]
|
||||
msgLoaded += newMessages.length
|
||||
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
const differentScrollHeight = scrollHeight - previousScrollHeight
|
||||
console.log(differentScrollHeight, "нынешняя", previousScrollHeight, "предыдущая", scrollHeight, "ныняшняя")
|
||||
scrollableDiv.scrollTop = differentScrollHeight
|
||||
console.log(differentScrollHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function scrollDown(){
|
||||
scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
|
||||
scrollableDiv.scrollTop = scrollableDiv.scrollHeight
|
||||
}
|
||||
|
||||
let createNewChatButton = false
|
||||
|
|
@ -335,6 +357,22 @@ let PickedName = ""
|
|||
console.log(users)
|
||||
}
|
||||
|
||||
async function submtiCreateNewChat(){
|
||||
token = localStorage.getItem('BPChat')
|
||||
let newChatId = await createNewChat(newChatName, selectedUserId, token)
|
||||
|
||||
createNewChatShow = false
|
||||
|
||||
history.pushState(null, null, `/chat#id=${newChatId}`);
|
||||
//handleRouteChange();
|
||||
chats = await getAllChats()
|
||||
}
|
||||
|
||||
function cancelCreateNewChat(){
|
||||
createNewChatShow = false
|
||||
selectedUserId = ""
|
||||
}
|
||||
|
||||
function checkCheckBox(event){
|
||||
const userId = event.target.value;
|
||||
selectedUserId = userId;
|
||||
|
|
@ -348,20 +386,6 @@ let PickedName = ""
|
|||
console.log(users)
|
||||
}
|
||||
|
||||
async function submtiCreateNewChat(){
|
||||
let newChatId = await createNewChat(newChatName, selectedUserId, token)
|
||||
|
||||
createNewChatShow = false
|
||||
|
||||
history.pushState(null, null, `/chat#id=${newChatId}`);
|
||||
handleRouteChange();
|
||||
}
|
||||
|
||||
function cancelCreateNewChat(){
|
||||
createNewChatShow = false
|
||||
selectedUserId = ""
|
||||
}
|
||||
|
||||
let msgTime
|
||||
let msgTimeShow = false
|
||||
|
||||
|
|
@ -383,6 +407,7 @@ let PickedName = ""
|
|||
chats.splice(index, 1);
|
||||
console.log(index)
|
||||
console.log(result)
|
||||
chats = await getAllChats()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -479,7 +504,13 @@ let PickedName = ""
|
|||
<div bind:this={helperDiv} id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}
|
||||
transition:slide={{ duration: 500 }}>
|
||||
<button on:click={ansFunc} class="helpDiv"><img class="helpImg" src="./icon/answer.png" alt="ans"><p class="ans">Ответить</p></button>
|
||||
|
||||
{#if pinOrNot == true}
|
||||
<button on:click={unpinFunc} class="helpDiv"><img class="helpImg" src="./icon/pin.png" alt="pin"><p class="pin">Открепить</p></button>
|
||||
{:else}
|
||||
<button on:click={pinFunc} class="helpDiv"><img class="helpImg" src="./icon/pin.png" alt="pin"><p class="pin">Закрепить</p></button>
|
||||
{/if}
|
||||
|
||||
<button on:click={delFunc} class="helpDiv"><img class="helpImg" src="./icon/trash.png" alt="del"><p class="del">Удалить</p></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -499,7 +530,7 @@ let PickedName = ""
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="messageMain" on:contextmenu={helperDivShow(event,message.id, message.message, message.image_url, message.username)}
|
||||
on:mouseover={msgTimeFunc(message.created_at)} on:mouseout={msgTimeFuncOver}
|
||||
transition:fade={{ duration: 600 }}>
|
||||
in:fade={{ duration: 600 }}>
|
||||
|
||||
<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
|
|
@ -615,7 +646,7 @@ let PickedName = ""
|
|||
<div><h1> </h1></div>
|
||||
<di class="PS">
|
||||
<h2>Made by:</h2>
|
||||
<h3>Uniknow and Urec56</h3>
|
||||
<h3>Uniknow and urec56</h3>
|
||||
</di>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -623,7 +654,7 @@ let PickedName = ""
|
|||
<style lang="scss">
|
||||
|
||||
.chatName{
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.deleteChat{
|
||||
|
|
@ -637,7 +668,6 @@ width: 100%;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.msgTime{
|
||||
|
|
@ -671,7 +701,6 @@ width: 100%;
|
|||
.newChatAvatar{
|
||||
width: 3rem;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
.newChatText{
|
||||
|
|
@ -1029,7 +1058,7 @@ width: 100%;
|
|||
flex-direction: column;
|
||||
width: calc(100% - 15px);
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
overflow: scroll;;
|
||||
}
|
||||
|
||||
.aChatDivLeft{
|
||||
|
|
@ -1166,7 +1195,7 @@ width: 100%;
|
|||
|
||||
.msgDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
import { fly, blur } from 'svelte/transition';
|
||||
import { cubicOut, backInOut } from 'svelte/easing';
|
||||
|
||||
let username = ''
|
||||
let password = ''
|
||||
let enterError = ''
|
||||
let passwordError = ""
|
||||
|
||||
|
||||
async function listener(event){
|
||||
|
||||
if(enterError.length !== 0){
|
||||
|
|
@ -12,39 +18,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
let username = '';
|
||||
let password = '';
|
||||
let enterError = '';
|
||||
let passwordError = "длжо";
|
||||
async function login() {
|
||||
switch (true) {
|
||||
case username.length === 0 && password.length !== 0:
|
||||
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||||
document.getElementById('password').placeholder = '';
|
||||
|
||||
console.log('ЖОПА1');
|
||||
break;
|
||||
|
||||
case username.length !== 0 && password.length === 0:
|
||||
document.getElementById('username').placeholder = '';
|
||||
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||||
console.log('ЖОПА2');
|
||||
|
||||
break;
|
||||
|
||||
case username.length === 0 && password.length === 0:
|
||||
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||||
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||||
console.log('ЖОПА3');
|
||||
break;
|
||||
|
||||
default:
|
||||
document.getElementById('password').placeholder = '';
|
||||
document.getElementById('username').placeholder = '';
|
||||
enterError = await handleLogin(username, password);
|
||||
|
||||
let token = localStorage.getItem('BPChat')
|
||||
console.log(token)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -91,12 +85,14 @@
|
|||
<div class="bigGroup">
|
||||
<div class="group">
|
||||
<h3>никнейм или почта</h3>
|
||||
<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username} />
|
||||
<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username}
|
||||
on:keydown={(event) => event.key == 'Enter' && login()} />
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>пароль</h3>
|
||||
<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password} />
|
||||
<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password}
|
||||
on:keydown={(event) => event.key == 'Enter' && login()}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Cropper from 'cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
||||
let imageElement;
|
||||
let cropper;
|
||||
let croppedImage;
|
||||
let showCropMessage = false;
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
imageElement.src = e.target.result;
|
||||
if (cropper) {
|
||||
cropper.destroy();
|
||||
}
|
||||
cropper = new Cropper(imageElement, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 1,
|
||||
autoCropArea: 0, // Начальное значение для автообрезки 0
|
||||
center: true,
|
||||
zoomOnTouch: false,
|
||||
zoomOnWheel: false,
|
||||
cropBoxMovable: true,
|
||||
cropBoxResizable: true,
|
||||
background: false, // Убирает сеточный фон
|
||||
autoCrop: false, // Изначально не показывать зону обрезки
|
||||
ready: function () {
|
||||
cropper.setCropBoxData({
|
||||
width: 200,
|
||||
height: 200,
|
||||
left: (cropper.getContainerData().width - 200) / 2,
|
||||
top: (cropper.getContainerData().height - 200) / 2,
|
||||
});
|
||||
cropper.crop(); // Включить зону обрезки
|
||||
},
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const getCroppedImage = () => {
|
||||
if (cropper) {
|
||||
croppedImage = cropper.getCroppedCanvas().toDataURL();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="crop-container">
|
||||
<input type="file" accept="image/*" id="fileInput" on:change={handleFileChange} />
|
||||
<img class="CropAvatar" bind:this={imageElement} alt="Image to crop" />
|
||||
|
||||
</div>
|
||||
<button on:click={getCroppedImage}>Crop Image</button>
|
||||
|
||||
{#if croppedImage}
|
||||
<h3>Cropped Image</h3>
|
||||
<img src={croppedImage} alt="Cropped Image" />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.crop-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80vh; /* Настройка высоты по мере необходимости */
|
||||
}
|
||||
.crop-message {
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { handleRegister, checkName, checkMail, VerificationEmail } from '$lib/register';
|
||||
import { handleRegister, checkExsistingUser, VerificationEmail, resendVerification } from '$lib/register';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
|
||||
|
|
@ -14,10 +14,22 @@
|
|||
let years = [];
|
||||
for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
|
||||
|
||||
let name = ''; let mail; let password = ''; let password2 = ''; let dateDay = ''; let dateMonth = ''; let dateYear = '';
|
||||
let name = ''
|
||||
let mail = ''
|
||||
let password = ''
|
||||
let password2 = ''
|
||||
let dateDay = ''
|
||||
let dateMonth = ''
|
||||
let dateYear = ''
|
||||
|
||||
let nameError = ''; let mailError = ''; let passwordError = ''; let password2Error = '';
|
||||
let code = ''; let codeError = '';
|
||||
let nameError = ''
|
||||
let mailError = ''
|
||||
let passwordError = ''
|
||||
let password2Error = ''
|
||||
let code = ''
|
||||
let codeError = ''
|
||||
|
||||
let token
|
||||
|
||||
async function SendData() {
|
||||
if ((name === '' )|| (name === undefined))
|
||||
|
|
@ -41,7 +53,10 @@
|
|||
(password2Error === '') ||( password2Error === undefined)) {
|
||||
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
||||
|
||||
let reg = await handleRegister(name, password, mail, date);
|
||||
await handleRegister(name, password, password2, mail, date);
|
||||
|
||||
token = localStorage.getItem('BPChat')
|
||||
|
||||
rotate();
|
||||
console.log("отправлено")
|
||||
}
|
||||
|
|
@ -56,7 +71,7 @@
|
|||
nameError = "ник от двух символов";
|
||||
}
|
||||
else if (name.length != 0) {
|
||||
let error = await checkName(name);
|
||||
let error = await checkExsistingUser(name, null);
|
||||
console.log(error);
|
||||
nameError = error;
|
||||
}
|
||||
|
|
@ -66,7 +81,7 @@
|
|||
if (mail.length == 0) {
|
||||
mailError = '';
|
||||
} else {
|
||||
let error = await checkMail(mail);
|
||||
let error = await checkExsistingUser(null, mail);
|
||||
console.log(error);
|
||||
mailError = error;
|
||||
}
|
||||
|
|
@ -92,7 +107,6 @@
|
|||
|
||||
code = event.target.value
|
||||
|
||||
|
||||
if(code.length == 6){
|
||||
codeError = await VerificationEmail(code)
|
||||
}
|
||||
|
|
@ -103,6 +117,10 @@
|
|||
function rotate() {
|
||||
rotated = !rotated;
|
||||
}
|
||||
|
||||
async function sendCodeAgain(){
|
||||
await resendVerification(token)
|
||||
}
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
|
@ -110,7 +128,6 @@
|
|||
<div class="mainDivInner">
|
||||
|
||||
<div class="mainDivFront">
|
||||
<div class="noise">
|
||||
<div class="marginDiv">
|
||||
<form on:submit|preventDefault={SendData}>
|
||||
<h1>Регистрация</h1>
|
||||
|
|
@ -207,8 +224,6 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mainDivBack">
|
||||
<div class="noise">
|
||||
|
|
@ -220,7 +235,7 @@
|
|||
<form class="codeForm" on:submit|preventDefault={VerificationEmail}>
|
||||
<h3 id="codeError">{codeError}</h3>
|
||||
<input maxlength="6" type="text" name="code" id="code" on:input={lisenerCode}>
|
||||
<button id="resendButt" type="submit">отправить код еще раз</button>
|
||||
<button on:click={sendCodeAgain} id="resendButt" type="submit">отправить код еще раз</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -228,6 +243,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -258,6 +274,9 @@
|
|||
aspect-ratio: 1 / 1.44;
|
||||
height: calc(100% - 100px);
|
||||
perspective: 1000px;
|
||||
|
||||
display: flex;
|
||||
place-content: center center;
|
||||
}
|
||||
|
||||
.mainDivInner{
|
||||
|
|
@ -279,8 +298,24 @@
|
|||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
|
||||
display: flex;
|
||||
place-content: center center;
|
||||
|
||||
}
|
||||
|
||||
.mainDivFront::before,
|
||||
.mainDivBack::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('./noise.gif');
|
||||
background-repeat: repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
opacity: 0.01;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rotated
|
||||
.mainDivInner,
|
||||
.mainDivBack{
|
||||
|
|
@ -328,9 +363,9 @@
|
|||
.marginDiv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
margin: 0 30px;
|
||||
//background-color: red;
|
||||
}
|
||||
.birthday {
|
||||
display: flex;
|
||||
|
|
@ -356,6 +391,9 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input{
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
transition: 0.5s ease-in;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue