Site/Django

- can change pfp and banner
This commit is contained in:
Kum1ta
2024-09-24 17:44:20 +02:00
parent 5d46b06669
commit 47c8a64f5d
9 changed files with 176 additions and 40 deletions

View File

@ -34,6 +34,8 @@ RUN mkdir -p /var/www/djangoserver/
WORKDIR /var/www/djangoserver
STOPSIGNAL SIGKILL
RUN mkdir -p /var/www/djangoserver/static/
RUN mkdir -p /var/www/djangoserver/pfp/
RUN mkdir -p /var/www/djangoserver/banner/
COPY file/server /var/www/djangoserver/server
RUN chmod 755 /var/www/djangoserver/ && chown -R www-data:www-data /var/www/djangoserver/

View File

@ -0,0 +1,38 @@
# **************************************************************************** #
# #
# ::: :::::::: #
# changeBanner.py :+: :+: :+: #
# +:+ +:+ +:+ #
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/24 17:26:12 by edbernar #+# #+# #
# Updated: 2024/09/24 17:32:09 by edbernar ### ########.fr #
# #
# **************************************************************************** #
from asgiref.sync import sync_to_async
from ..models import User
from random import randint
import base64
import json
def genereateRandomName():
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
len = 50
name = "a"
for i in range(0, len):
name += chars[randint(0, 61)]
return name
@sync_to_async
def changeBanner(socket, content):
while True:
generate_name = genereateRandomName()
if (not User.objects.filter(banner=f"/banner/{generate_name}.jpg").exists()):
break
user = User.objects.get(id=socket.id)
user.banner = f"/banner/{generate_name}.jpg"
user.save()
with open(f"/var/www/djangoserver/banner/{generate_name}.jpg", "wb") as image_file:
image_file.write(base64.b64decode(content["img"]))
socket.sync_send(json.dumps({"type": "change_pfp", "content": {'banner': user.banner}}))

View File

@ -6,16 +6,33 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/23 23:35:41 by edbernar #+# #+# #
# Updated: 2024/09/23 23:48:45 by edbernar ### ########.fr #
# Updated: 2024/09/24 15:53:26 by edbernar ### ########.fr #
# #
# **************************************************************************** #
from asgiref.sync import sync_to_async
from ..models import User
from random import randint
import base64
import json
def genereateRandomName():
chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
len = 50
name = "a"
for i in range(0, len):
name += chars[randint(0, 61)]
return name
@sync_to_async
def changePfp(socket, content):
with open("./a.jpg", "w") as image_file:
image_file.write(content["img"])
while True:
generate_name = genereateRandomName()
if (not User.objects.filter(pfp=f"/pfp/{generate_name}.jpg").exists()):
break
user = User.objects.get(id=socket.id)
user.pfp = f"/pfp/{generate_name}.jpg"
user.save()
with open(f"/var/www/djangoserver/pfp/{generate_name}.jpg", "wb") as image_file:
image_file.write(base64.b64decode(content["img"]))
socket.sync_send(json.dumps({"type": "change_pfp", "content": {'pfp': user.pfp}}))

View File

@ -30,7 +30,9 @@ urlpatterns = [
path("login42", views.login42, name='login42'),
path("logout", views.logout, name='logout'),
path("verify", views.verify, name='verify'),
path("404", views.err404, name='err404')
path("404", views.err404, name='err404'),
path("pfp/<str>", views.pfp, name='pfp'),
path("banner/<str>", views.banner, name='banner'),
]
handler404 = "server.views.handler404"

View File

@ -1,4 +1,4 @@
from django.http import HttpResponse
from django.http import HttpResponse, FileResponse
from django.shortcuts import render, redirect
from .models import User, MailVerify
from .data import UID42, SECRET42, SERVER_URL
@ -126,7 +126,15 @@ def logout(request):
return redirect("/")
def handler404(request, exception):
return(index(request));
return(index(request))
def err404(request):
return(render(request, "err404.html"))
def pfp(request, str):
image_path = os.path.join('/var/www/djangoserver/pfp/', str)
return FileResponse(open(image_path, 'rb'), content_type='image/png')
def banner(request, str):
image_path = os.path.join('/var/www/djangoserver/banner/', str)
return FileResponse(open(image_path, 'rb'), content_type='image/png')

View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/09 14:31:30 by tomoron #+# #+# #
# Updated: 2024/09/23 23:36:04 by edbernar ### ########.fr #
# Updated: 2024/09/24 17:25:54 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -26,17 +26,18 @@ from .typeRequests.searchUser import searchUser
from .typeRequests.createAccount import createAccount
from .typeRequests.login import login
from .typeRequests.getAllListUser import getAllListUser
from .typeRequests.changeBanner import changeBanner
from .typeRequests.gameRequest import gameRequest
from .typeRequests.getUserInfo import getUserInfo
from .typeRequests.changePfp import changePfp
typeRequest = ["login", "get_private_list_user", "get_private_list_message",
"send_private_message", "create_account", "get_all_list_user", "game",
"search_user", "get_user_info", "change_pfp"
"search_user", "get_user_info", "change_pfp", "change_banner"
]
functionRequest = [login, getPrivateListUser, getPrivateListMessage,
sendPrivateMessage, createAccount, getAllListUser, gameRequest,
searchUser, getUserInfo, changePfp
searchUser, getUserInfo, changePfp, changeBanner
]
from random import randint

View File

@ -6,10 +6,11 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/23 23:40:42 by edbernar ### ########.fr */
/* Updated: 2024/09/24 17:32:22 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { waitForchangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { showPrivateChat } from "/static/javascript/liveChat/showPrivateChat.js";
@ -29,6 +30,8 @@ class ProfilPage
const crossProfil = document.getElementById('cross-profil');
let editPenPfpBg = null;
let inputPfp = null;
let editPenBanner = null;
let inputBanner = null;
let interval = null;
LiveChat.create();
@ -73,38 +76,24 @@ class ProfilPage
if (userInfo.id == userMeInfo.id)
{
pfp.innerHTML = `<div id='editPenPfpBg'><input style='display: none' id='inputPfp' type="file"><img class='editPenPfp' src='/static/img/profilPage/editPen.png'/></div>`
banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/>`
banner.innerHTML = `<img class='editPen' src='/static/img/profilPage/editPen.png'/><input style='display: none' id='inputBanner' type="file">`
editPenPfpBg = document.getElementById('editPenPfpBg');
inputPfp = document.getElementById('inputPfp');
editPenPfpBg.addEventListener('click', () => {
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputPfp.click();
});
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg');
inputPfp.addEventListener('change', (event) => {
const reader = new FileReader();
const validTypes = ['image/png', 'image/jpeg'];
const file = event.target.files[0];
inputPfp.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputPfp.addEventListener('change', () => inputChange(true));
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
if (validTypes.includes(file.type))
{
reader.onload = (e) => {
const arrayBuffer = e.target.result;
console.log(arrayBuffer);
sendRequest('change_pfp', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
}
reader.readAsArrayBuffer(file);
}
});
editPenBanner = document.getElementsByClassName('editPen')[0];
inputBanner = document.getElementById('inputBanner');
editPenBanner.addEventListener('click', () => {
inputBanner.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputBanner.click();
});
inputBanner.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
inputBanner.addEventListener('change', () => inputChange(false));
}
if (userInfo.id != userMeInfo.id)
{
@ -140,4 +129,40 @@ function externButtons(userInfo)
discordButton.remove();
}
function inputChange(isPfp)
{
const reader = new FileReader();
const validTypes = ['image/png', 'image/jpeg', 'image/webp']
const file = event.target.files[0];
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
if (validTypes.includes(file.type))
{
reader.onload = (e) => {
const arrayBuffer = e.target.result;
if (isPfp)
sendRequest('change_pfp', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
else
sendRequest('change_banner', {img: arrayBufferToBase64(arrayBuffer), type: file.type})
waitForchangePfp().then((content) => {
if (isPfp)
document.getElementsByClassName('profile-image')[0].style.backgroundImage = `url("${content.pfp}")`
else
document.getElementsByClassName('background-card')[0].style.backgroundImage = `url("${content.banner}")`
});
}
reader.readAsArrayBuffer(file);
}
}
export { ProfilPage };

View File

@ -0,0 +1,42 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* typeChangePfp.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/24 15:54:01 by edbernar #+# #+# */
/* Updated: 2024/09/24 17:36:57 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
let changePfp = [];
let changePfpAvailable = false;
let changePfpResolve = null;
function waitForchangePfp()
{
return new Promise((resolve) => {
if (changePfpAvailable)
{
changePfpAvailable = false;
resolve(changePfp);
}
else
changePfpResolve = resolve;
});
}
function typeChangePfp(list)
{
changePfp = list;
changePfpAvailable = true;
if (changePfpResolve)
{
changePfpResolve(changePfp);
changePfpResolve = null;
changePfpAvailable = false;
}
}
export { typeChangePfp, waitForchangePfp };

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/22 23:36:55 by edbernar ### ########.fr */
/* Updated: 2024/09/24 15:55:37 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -21,6 +21,7 @@ import { typeCreateAccount } from "/static/javascript/typeResponse/typeCreateAcc
import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
import { typeChangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
import { typeGame } from "/static/javascript/typeResponse/typeGame.js"
@ -35,8 +36,8 @@ function launchSocket()
socket = new WebSocket('/ws');
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info", "change_pfp"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo, typeChangePfp];
const errorCode = [9007, 9010, 9011, 9013];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account, typeErrorConnectedElsewhere];