изменение аватарки, выбор зоны картинки, фулл рабочее
This commit is contained in:
parent
f8fa0a4f72
commit
a2fd7f7318
10 changed files with 386 additions and 75 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"@sveltestrap/sveltestrap": "^6.2.4",
|
||||
"@themesberg/flowbite": "^1.3.0",
|
||||
"cropperjs": "^1.6.2",
|
||||
"sass": "^1.70.0",
|
||||
"socket.io": "^4.7.5",
|
||||
"socket.io-client": "^4.7.5",
|
||||
|
|
@ -1553,6 +1554,11 @@
|
|||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/cropperjs": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
|
||||
"integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
"dependencies": {
|
||||
"@sveltestrap/sveltestrap": "^6.2.4",
|
||||
"@themesberg/flowbite": "^1.3.0",
|
||||
"cropperjs": "^1.6.2",
|
||||
"sass": "^1.70.0",
|
||||
"socket.io": "^4.7.5",
|
||||
"socket.io-client": "^4.7.5",
|
||||
|
|
|
|||
13
src/app.html
13
src/app.html
|
|
@ -14,6 +14,19 @@
|
|||
|
||||
<style lang="scss">
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(45deg, var(--blue), var(--purple));
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
src: url('./fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
|
||||
|
|
|
|||
|
|
@ -169,8 +169,8 @@
|
|||
});
|
||||
|
||||
if (response.ok) {
|
||||
let jopa = await response.json();
|
||||
return jopa.image_url
|
||||
let data = await response.json();
|
||||
return data.image_url
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export async function getAvatarHistory(token){
|
||||
|
||||
let response = fetch(`https://docs.black-phoenix.ru/api/users/avatars`,{
|
||||
let response = await fetch(`https://docs.black-phoenix.ru/api/users/avatars`,{
|
||||
method: 'GET',
|
||||
credentials:'include',
|
||||
headers: {'Authorization': token },
|
||||
|
|
@ -8,9 +8,53 @@ export async function getAvatarHistory(token){
|
|||
|
||||
if(response.ok){
|
||||
let data = await response.json();
|
||||
data = data.user_avatars
|
||||
data.reverse();
|
||||
return data;
|
||||
}
|
||||
else{
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
||||
export async function getConfirmationCode(token, email){
|
||||
console.log(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},
|
||||
body: JSON.stringify({'email': email})
|
||||
})
|
||||
|
||||
if(response.ok){
|
||||
return true
|
||||
}
|
||||
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',
|
||||
credentials:'include',
|
||||
headers: {'Content-Type': 'application/json',
|
||||
'Authorization': token },
|
||||
body: JSON.stringify({"verification_code": code,
|
||||
"email": email,
|
||||
"username": username,
|
||||
"new_password": password,
|
||||
"avatar_url": avatar})
|
||||
})
|
||||
|
||||
if(response.ok){
|
||||
return true
|
||||
}
|
||||
|
||||
else{
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
|
@ -5,17 +5,15 @@ export async function UserCheck(){
|
|||
method: 'GET',
|
||||
credentials:'include',
|
||||
headers: {'Authorization': token },
|
||||
|
||||
})
|
||||
|
||||
if(!response.ok){
|
||||
console.log(response)
|
||||
return(response.status)
|
||||
if(response.ok){
|
||||
const data = await response.json();
|
||||
return data
|
||||
}
|
||||
|
||||
else{
|
||||
const data = await response.json();
|
||||
return data
|
||||
console.log(response)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.dropdown > * {
|
||||
|
|
|
|||
|
|
@ -1,64 +1,153 @@
|
|||
<script>
|
||||
import Cropper from 'cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
import { uploadImages } from '$lib/chat';
|
||||
import { blur } from 'svelte/transition';
|
||||
import Header from './../Header.svelte';
|
||||
import { UserCheck } from '$lib/userFunction';
|
||||
import { onMount } from 'svelte';
|
||||
import { getAvatarHistory } from '$lib/settings'
|
||||
import { getAvatarHistory, changeUserData, getConfirmationCode } from '$lib/settings'
|
||||
|
||||
let userName
|
||||
let userEmail
|
||||
let newAvatarVisualize
|
||||
let avatarHistory
|
||||
let token
|
||||
let confCode
|
||||
let userData = []
|
||||
let oldName
|
||||
let oldEmail
|
||||
|
||||
let afterChanging
|
||||
let newAvatarVisualize = ""
|
||||
let avatars = []
|
||||
|
||||
let newName = ""
|
||||
let newEmail = ""
|
||||
let newPassword = ""
|
||||
let newAvatar = ""
|
||||
let code = ""
|
||||
|
||||
let showSubmitFiled = false
|
||||
let showSubmitDiv = false
|
||||
onMount(async () => {
|
||||
let token = localStorage.getItem('BPChat')
|
||||
token = localStorage.getItem('BPChat')
|
||||
|
||||
let userData = await UserCheck()
|
||||
userData = await UserCheck()
|
||||
//console.log(userData)
|
||||
avatarHistory = await getAvatarHistory(token)
|
||||
console.log(avatarHistory)
|
||||
userName = userData.username
|
||||
userEmail = userData.email
|
||||
console.log(`история аватарок ${avatarHistory}`)
|
||||
avatars = await getAvatarHistory(token)
|
||||
console.log(avatars)
|
||||
oldName = userData.username
|
||||
oldEmail = userData.email
|
||||
console.log(oldEmail)
|
||||
|
||||
})
|
||||
|
||||
function handleFileChange(event) {
|
||||
const file = event.target.files[0];
|
||||
newAvatar = file
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = (e) => {
|
||||
|
||||
newAvatarVisualize = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
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
|
||||
else
|
||||
console.log("ну ты лошара, земля тебе пухом")
|
||||
}
|
||||
|
||||
async function submit(){
|
||||
newAvatar = await uploadImages(newAvatar)
|
||||
console.log(newAvatar)
|
||||
let changing = afterChanging = await changeUserData(token, newName, newEmail, newPassword, newAvatar, code)
|
||||
console.log(changing)
|
||||
if (changing == true){
|
||||
showSubmitDiv = false
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
async function changingData(){
|
||||
showSubmitFiled = true
|
||||
function cancel(){
|
||||
newName = ""
|
||||
newEmail = ""
|
||||
newPassword = ""
|
||||
newAvatar = ""
|
||||
newAvatarVisualize = ""
|
||||
}
|
||||
|
||||
async function Submit(){
|
||||
let imageElement;
|
||||
let cropper;
|
||||
let croppedImage = "";
|
||||
let showCroppingImgDiv = false
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
showCroppingImgDiv = true
|
||||
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();
|
||||
|
||||
}
|
||||
cropper.getCroppedCanvas().toBlob((blob) => {
|
||||
newAvatar = blob;
|
||||
}, 'image/jpeg');
|
||||
|
||||
}
|
||||
showCroppingImgDiv = false
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
|
||||
{#if showSubmitFiled}
|
||||
{#if showCroppingImgDiv}
|
||||
<div class="backgroundBlur"></div>
|
||||
|
||||
<div class="croppingDiv">
|
||||
<img class="cropAvatar" bind:this={imageElement} alt="Image to crop" />
|
||||
<button class="cropButton" on:click={getCroppedImage}>Подтвердить</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showSubmitDiv}
|
||||
<div class="backgroundBlur"></div>
|
||||
<div class="submitPassword">
|
||||
<h2>Введите старый пароль</h2>
|
||||
<input type="password" id="oldPassword" placeholder="Старый пароль">
|
||||
<button on:click={Submit}>Отправить</button>
|
||||
<h2>Подтвердите кодом из почты</h2>
|
||||
<input bind:value={code} type="password" id="oldPassword" placeholder="Код">
|
||||
<button on:click={submit}>Отправить</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
@ -79,9 +168,19 @@
|
|||
<div class="avatarDiv">
|
||||
<h2>изменить аватарку</h2>
|
||||
<button class="changeAvatar" on:click={() => document.getElementById('fileInput').click()}>
|
||||
{#if croppedImage != ""}
|
||||
<img class="newAvatar" src="{croppedImage}" alt="новая ава">
|
||||
{:else}
|
||||
+
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="avatarsHistory">
|
||||
{#each avatars as avatar}
|
||||
<img class="avatarHistory" src="{avatar.avatar_url}" alt="ава">
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<input type="file" accept="image/*" id="fileInput"
|
||||
on:change={handleFileChange} style="display: none;">
|
||||
</div>
|
||||
|
|
@ -89,21 +188,21 @@
|
|||
<div class="textDiv">
|
||||
<div>
|
||||
<h3>ник</h3>
|
||||
<input type="text" placeholder={userName}>
|
||||
<input bind:value={newName} type="name" placeholder={oldName}>
|
||||
</div>
|
||||
<div>
|
||||
<h3>почта</h3>
|
||||
<input type="text" placeholder={userEmail}>
|
||||
<input bind:value={newEmail} type="email" placeholder={oldEmail}>
|
||||
</div>
|
||||
<div>
|
||||
<h2>новый пароль</h2>
|
||||
<input type="text" placeholder="новый пароль">
|
||||
<input bind:value={newPassword} type="password" placeholder="новый пароль">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="finishButton">
|
||||
<button on:click={changingData}>Подтвердить</button>
|
||||
<button>Отменить</button>
|
||||
<button on:click={cancel}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,6 +213,84 @@
|
|||
</body>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.cropper-modal {
|
||||
background-color: #101010;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cropButton{
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.cropAvatar{
|
||||
border-radius: 15px;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
|
||||
.croppingDiv{
|
||||
z-index: 5;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
position: absolute;
|
||||
left: 50%; top: 50%;
|
||||
transform: (-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
padding: 20px;
|
||||
max-height: 90%;
|
||||
max-width: 90%;
|
||||
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.newAvatar{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.avatarsHistory{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 50%;
|
||||
background-color: #FFFFFF0a;
|
||||
border-radius: 15px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.avatarHistory{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 3px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.changeAvatar{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button{
|
||||
font-size: 32px;
|
||||
|
|
@ -127,7 +304,7 @@ button{
|
|||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 5;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#oldPassword{
|
||||
|
|
@ -154,30 +331,30 @@ button{
|
|||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.changeAvatar{
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
|
||||
|
||||
.submitPassword::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('./noise.png');
|
||||
background-repeat: repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
opacity: 0.01;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.avatarDiv{
|
||||
height: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -216,8 +393,8 @@ input {
|
|||
height: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
//background-color: red;
|
||||
justify-content: space-between;
|
||||
//background-color: blue;
|
||||
}
|
||||
|
||||
.button{
|
||||
|
|
@ -278,6 +455,7 @@ input {
|
|||
.header {
|
||||
height: 10%;
|
||||
width: 85%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.mainDiv{
|
||||
|
|
@ -318,7 +496,7 @@ input {
|
|||
|
||||
|
||||
body{
|
||||
display: flexbox;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -515,19 +515,6 @@ function helperDivShow(event, id, text, img, username) {
|
|||
//top: -35px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(45deg, var(--blue), var(--purple));
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.deleteAnswer{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<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/*" on:change={handleFileChange} />
|
||||
<img 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>
|
||||
|
||||
Loading…
Add table
Reference in a new issue