Site/Django

- can change pfp and banner

docker-compose/requirements/djangoserver/Dockerfile

@@ -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/

docker-compose/requirements/djangoserver/file/server/server/typeRequests/changeBanner.py

@@ -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}}))

docker-compose/requirements/djangoserver/file/server/server/typeRequests/changePfp.py

@@ -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:
+	while True:
-		image_file.write(content["img"])
+		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}}))

docker-compose/requirements/djangoserver/file/server/server/urls.py

@@ -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"

docker-compose/requirements/djangoserver/file/server/server/views.py

@@ -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')

docker-compose/requirements/djangoserver/file/server/server/websocket.py

@@ -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

docker-compose/requirements/nginx/static/javascript/profilPage/main.js

@@ -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.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
-				inputPfp.addEventListener('change', (event) => {
+				inputPfp.addEventListener('change', () => inputChange(true));
-					const reader		= new FileReader();
-					const validTypes	=	['image/png', 'image/jpeg'];
-					const file			=	event.target.files[0];
 
-					function arrayBufferToBase64(buffer) {
+				editPenBanner = document.getElementsByClassName('editPen')[0];
-						let binary = '';
+				inputBanner = document.getElementById('inputBanner');
-						const bytes = new Uint8Array(buffer);
+				editPenBanner.addEventListener('click', () => {
-						const len = bytes.byteLength;
+					inputBanner.setAttribute('accept', '.png, .jpeg, .jpg, .gif');
-						for (let i = 0; i < len; i++) {
+					inputBanner.click();
-						  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);
-					}
 				});
+				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 };

docker-compose/requirements/nginx/static/javascript/typeResponse/typeChangePfp.js

@@ -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 };

docker-compose/requirements/nginx/static/javascript/websocket.js

@@ -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	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];
+	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];