add: profiles.all()

.gitignore

@@ -2,3 +2,5 @@
 *.pyc
 db.sqlite3
 **/migrations/**
+/profiles/static/avatars/*
+!/profiles/static/avatars/default

accounts/views/edit.py

@@ -13,7 +13,7 @@ class EditView(APIView):
     authentication_classes = (SessionAuthentication,)
 
     def get(self, request: HttpRequest):
-        return Response({"username": request.user.username})
+        return Response({"username": request.user.username, "id": request.user.pk})
 
     def patch(self, request: HttpRequest):
         data: dict = request.data

accounts/views/logged.py

@@ -13,4 +13,6 @@ class LoggedView(APIView):
 	authentication_classes = (SessionAuthentication,)
 
 	def get(self, request: HttpRequest):
-		return Response(str(request.user.is_authenticated), status=status.HTTP_200_OK)
+		if (request.user.is_authenticated):
+			return Response({'id': request.user.pk}, status=status.HTTP_200_OK)
+		return Response('false', status=status.HTTP_200_OK)

accounts/views/login.py

@@ -20,4 +20,4 @@ class LoginView(APIView):
 		if user is None:
 			return Response({'user': ['Username or password wrong.']}, status.HTTP_200_OK)
 		login(request, user)
-		return Response('user connected', status=status.HTTP_200_OK)
+		return Response({'id': user.pk}, status=status.HTTP_200_OK)

accounts/views/register.py

@@ -3,6 +3,7 @@ from ..serializers.register import RegisterSerialiser
 from rest_framework.views import APIView
 from rest_framework.response import Response
 from django.http import HttpRequest
+from django.contrib.auth import login
 
 class RegisterView(APIView):
 	permission_classes = (permissions.AllowAny,)
@@ -12,5 +13,6 @@ class RegisterView(APIView):
 		if serializer.is_valid(raise_exception=True):
 			user = serializer.create(data)
 			if user:
+				login(request, user)
 				return Response("user created", status=status.HTTP_201_CREATED)
 		return Response(status=status.HTTP_400_BAD_REQUEST)

frontend/static/js/api/account.js

@@ -23,7 +23,13 @@ class Account
 		let response = await this.client._delete("/api/accounts/delete", {password: password});
 		let response_data = await response.json();
 
-		if (response_data === "user deleted")
+		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		{
+			this.client._logged = false;
+			return null;			
+		}
+		console.log(response_data)
+		if (response_data == "user deleted")
 			this.client._logged = false;
 		return response_data;
 	}
@@ -35,7 +41,7 @@ class Account
 
 		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
 		{
-			console.log("error, client is not logged");
+			this.client._logged = false;
 			return null;			
 		}
 		return response_data;
@@ -43,13 +49,13 @@ class Account
 
 	async update(data, password)
 	{
-		data.password = password;
+		data.current_password = password;
 		let response = await this.client._patch_json("/api/accounts/edit", data);
 		let response_data = await response.json();
 
 		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
 		{
-			console.log("error, client is not logged");
+			this.client._logged = false;
 			return null;
 		}
 		return response_data;

frontend/static/js/api/client.js

@@ -1,4 +1,6 @@
 import { Account } from "./account.js";
+import { Profile } from "./profile.js";
+import { Profiles } from "./profiles.js";
 
 function getCookie(name)
 {
@@ -16,6 +18,7 @@ class Client
 	{
 		this._url = url;
 		this.account = new Account(this);
+		this.profiles = new Profiles(this);
 		this._logged = undefined;
 	}
 
@@ -73,12 +76,26 @@ class Client
         return response;
     }
 
+	async _patch_file(uri, file)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "PATCH",
+			headers: {
+				"X-CSRFToken": getCookie("csrftoken"),
+			},		  
+			body: file,
+		});
+        return response;
+    }
+
 	async login(username, password)
 	{
 		let response = await this._post("/api/accounts/login", {username: username, password: password})
 		let data = await response.json();
-		if (data == "user connected")
+		if (data.id != undefined)
 		{
+			this.me = new Profile(this)
+			await this.me.init(data.id)
 			this.logged = true;
 			return null;
 		}
@@ -95,7 +112,13 @@ class Client
 	{
 		let response = await this._get("/api/accounts/logged");
 		let data = await response.json();
-		return data === "True";
+
+		if (data.id !== undefined)
+		{
+			this.me = new Profile(this)
+			await this.me.init(data.id)
+		}
+		return data.id !== undefined;
 	}
 }
 

frontend/static/js/api/profile.js

@@ -0,0 +1,35 @@
+class Profile
+{
+	constructor (client, username = undefined, avatar_url = undefined, user_id = undefined)
+	{
+		this.client = client;
+		this.username = username;
+		this.avatar_url = avatar_url
+		this.user_id = user_id
+	}
+
+	async init(id)
+	{
+		let response = await this.client._get(`/api/profiles/${id}`);
+		let response_data = await response.json();
+
+		this.id = id;
+		this.username = response_data.username;
+		this.avatar_url = response_data.avatar_url;
+	}
+
+	async change_avatar(form_data)
+	{
+		let response = await this.client._patch_file(`/api/profiles/${this.id}`, form_data);
+		let response_data = await response.json()
+
+		return response_data;
+	}
+
+	async setData (data)
+	{
+		
+	}
+}
+
+export {Profile}

frontend/static/js/api/profiles.js

@@ -0,0 +1,23 @@
+import { Profile } from "./profile.js";
+
+class Profiles
+{
+	constructor (client)
+	{
+		this.client = client
+	}
+
+	async all()
+	{
+		let response = await this.client._get("/api/profiles/");
+		let response_data = await response.json();
+
+		let profiles = []
+		response_data.forEach((profile) => {
+			profiles.push(new Profile(this.client, profile.username, profile.avatar_url, profile.user_id))
+		});
+		console.log(profiles);
+	}
+}
+
+export {Profiles}

frontend/static/js/index.js

@@ -8,8 +8,6 @@ import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
 
-import GameView from "./views/Game.js"
-
 import { Client } from "./api/client.js";
 import AbstractRedirectView from "./views/AbstractRedirectView.js";
 import MeView from "./views/MeView.js";
@@ -46,7 +44,6 @@ const router = async (uri = "") => {
         { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
-        { path: "/game", view: GameView },
     ];
 
     // Test each route for potential match

frontend/static/js/views/Game.js

@@ -1,250 +0,0 @@
-import AbstractView from './AbstractView.js'
-
-export default class extends AbstractView {
-	constructor(params) {
-		super(params, 'Game');
-		this.game = null;
-	}
-
-	async getHtml() {
-		return `
-			<h1>Game</h1>
-			<button id='startGameButton'>Start Game</button>
-			<button id='stopGameButton'>Stop Game</button>
-		`;
-	}
-
-	async postInit() {
-		document.getElementById('startGameButton').onclick = this.startGame.bind(this);
-		document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
-	}
-
-	startGame() {
-		if (this.game == null) {
-			document.getElementById('startGameButton').innerHTML = 'Reset Game';
-			this.game = new Game;
-		}
-		else {
-			document.getElementById('app').removeChild(this.game.canvas);
-			this.game.cleanup();
-			this.game = new Game;
-		}
-	}
-
-	stopGame() {
-		if (!this.game)
-			return;
-		document.getElementById('app').removeChild(this.game.canvas);
-		document.getElementById('app').removeChild(this.game.scoresDisplay);
-		this.game.cleanup();
-		this.game = null;
-		document.getElementById('startGameButton').innerHTML = 'Start Game';
-	}
-}
-
-class Game {
-	constructor() {
-		//Global variables
-		this.def = {
-			CANVASHEIGHT: 270,
-			CANVASWIDTH: 480,
-			PADDLEHEIGHT: 70,
-			PADDLEWIDTH: 10,
-			PADDLEMARGIN: 5,
-			PADDLESPEED: 3,
-			BALLRADIUS: 5,
-			BALLSPEED: 2,
-			BALLSPEEDINCR: 0.15,
-			MAXBOUNCEANGLE: 10 * (Math.PI / 12),
-			MAXSCORE: 6
-		};
-
-		this.canvas = document.createElement('canvas');
-		this.canvas.id = 'gameCanvas';
-		this.canvas.width = this.def.CANVASWIDTH;
-		this.canvas.height = this.def.CANVASHEIGHT;
-		this.canvas.style.border = '1px solid #d3d3d3';
-		this.canvas.style.backgroundColor = '#f1f1f1';
-		this.context = this.canvas.getContext('2d');
-		document.getElementById('app').appendChild(this.canvas);
-		this.scoresDisplay = document.createElement('p');
-		this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
-		document.getElementById('app').appendChild(this.scoresDisplay);
-
-		this.players = [
-			{
-				paddle: new Paddle(this.context,
-							this.def.PADDLEMARGIN,
-							this.def),
-				score: 0
-			},
-			{
-				paddle: new Paddle(this.context,
-							this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH,
-							this.def),
-				score: 0
-			}
-		];
-		this.ballStartSide = 0;
-		this.ballRespawned = false;
-		this.ball = new Ball(this.context, this.def, this.ballStartSide);
-
-		this.interval = setInterval(this.updateGame.bind(this), 10);
-
-		this.keys = [];
-		this.keyUpHandler = this.keyUpHandler.bind(this);
-		this.keyDownHandler = this.keyDownHandler.bind(this);
-		document.addEventListener('keydown', this.keyDownHandler);
-		document.addEventListener('keyup', this.keyUpHandler);
-	}
-
-	cleanup() {
-		clearInterval(this.interval);
-		document.removeEventListener('keydown', this.keyDownHandler);
-		document.removeEventListener('keyup', this.keyUpHandler);
-		this.canvas.style.display = 'none';
-	}
-
-	clear() {
-		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-	}
-
-	updateGame() {
-		//Paddle movement
-		if (this.keys.includes('s') &&
-			this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
-				this.players[0].paddle.y += this.def.PADDLESPEED;
-		if (this.keys.includes('w') &&
-			this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
-				this.players[0].paddle.y -= this.def.PADDLESPEED;
-
-		if (this.keys.includes('ArrowDown') &&
-			this.players[1].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
-				this.players[1].paddle.y += this.def.PADDLESPEED;
-		if (this.keys.includes('ArrowUp') &&
-			this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
-				this.players[1].paddle.y -= this.def.PADDLESPEED;
-
-		//GOOAAAAL
-		if (this.ball.x <= 0)
-			this.updateScore(this.players[0].score, ++this.players[1].score);
-		else if (this.ball.x >= this.def.CANVASWIDTH)
-			this.updateScore(++this.players[0].score, this.players[1].score);
-
-		//Ball collisions
-		if (this.detectCollision(this.players[0].paddle, this.ball))
-			this.calculateBallVelocity(this.players[0].paddle.getCenter().y, this.ball);
-		else if (this.detectCollision(this.players[1].paddle, this.ball))
-			this.calculateBallVelocity(this.players[1].paddle.getCenter().y, this.ball, -1);
-
-		if (this.ball.y - this.ball.radius <= 0)
-			this.ball.vy *= -1;
-		else if (this.ball.y + this.ball.radius >= this.canvas.height)
-			this.ball.vy *= -1;
-
-		if (!this.ballRespawned) {
-			this.ball.x += this.ball.vx;
-			this.ball.y += this.ball.vy;
-		}
-
-		this.clear();
-		this.players[0].paddle.update();
-		this.players[1].paddle.update();
-		this.ball.update();
-	}
-
-	updateScore(p1Score, p2Score) {
-		if (p1Score > this.def.MAXSCORE) {
-			this.scoresDisplay.innerHTML = 'Player 1 wins!! GGS';
-			this.cleanup();
-		}
-		else if (p2Score > this.def.MAXSCORE) {
-			this.scoresDisplay.innerHTML = 'Player 2 wins!! GGS';
-			this.cleanup();
-		} else {
-			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
-			this.ballStartSide = 1 - this.ballStartSide;
-			this.ball = new Ball(this.context, this.def, this.ballStartSide);
-			this.ballRespawned = true;
-			new Promise(r => setTimeout(r, 300))
-				.then(_ => this.ballRespawned = false);
-		}
-	}
-
-	detectCollision(paddle, ball) {
-		let paddleCenter = paddle.getCenter();
-		let dx = Math.abs(ball.x - paddleCenter.x);
-		let dy = Math.abs(ball.y - paddleCenter.y);
-		if (dx <= ball.radius + paddle.width / 2 &&
-			dy <= ball.radius + paddle.height / 2)
-				return true;
-		return false;
-	}
-
-	calculateBallVelocity(paddleCenterY, ball, side = 1) {
-		let relativeIntersectY = paddleCenterY - ball.y;
-		let normRelIntersectY = relativeIntersectY / this.def.PADDLEHEIGHT / 2;
-		let bounceAngle = normRelIntersectY * this.def.MAXBOUNCEANGLE;
-
-		ball.speed += this.def.BALLSPEEDINCR;
-		ball.vx = ball.speed * side * Math.cos(bounceAngle);
-		ball.vy = ball.speed * -Math.sin(bounceAngle);
-	}
-
-	keyUpHandler(ev) {
-		const idx = this.keys.indexOf(ev.key);
-		if (idx != -1)
-			this.keys.splice(idx, 1);
-	}
-
-	keyDownHandler(ev) {
-		if (!this.keys.includes(ev.key))
-			this.keys.push(ev.key);
-	}
-}
-
-class Paddle {
-	constructor(context, paddleSide, def) {
-		this.width = def.PADDLEWIDTH;
-		this.height = def.PADDLEHEIGHT;
-		this.x = paddleSide;
-		this.y = def.CANVASHEIGHT / 2 - this.height / 2;
-		this.ctx = context;
-		this.update();
-	}
-
-	update() {
-		this.ctx.fillStyle = 'black';
-		this.ctx.fillRect(this.x, this.y, this.width, this.height);
-	}
-
-	getCenter() {
-		return {
-			x: this.x + this.width / 2,
-			y: this.y + this.height / 2
-		};
-	}
-}
-
-class Ball {
-	constructor(context, def, startSide) {
-		this.radius = def.BALLRADIUS;
-		this.speed = def.BALLSPEED;
-		this.x = def.CANVASWIDTH / 2;
-		this.y = def.CANVASHEIGHT / 2;
-		this.vy = 0;
-		if (startSide === 0)
-			this.vx = -this.speed;
-		else
-			this.vx = this.speed;
-		this.ctx = context;
-		this.update();
-	}
-
-	update() {
-		this.ctx.fillStyle = 'black';
-		this.ctx.beginPath();
-		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
-		this.ctx.fill();
-	}
-}

frontend/static/js/views/HomeView.js

@@ -1,3 +1,4 @@
+import { client } from "../index.js";
 import AbstractAuthentificateView from "./AbstractAuthentifiedView.js";
 
 export default class extends AbstractAuthentificateView {

frontend/static/js/views/MeView.js

@@ -20,6 +20,11 @@ export default class extends AbstractAuthentificateView
     {
         let data = await client.account.get();
     
+        if (data === null)
+        {
+            navigateTo("/login")
+            return;
+        }
         document.getElementById("username").value = data.username;
     }
 
@@ -66,7 +71,12 @@ export default class extends AbstractAuthentificateView
 
         if (response_data === null)
         {
-            navigateTo(super.redirect_url);
+            navigateTo("/login");
+            return;
+        }
+        else if (response_data === "data has been alterate")
+        {
+            navigateTo("/me");
             return; 
         }
     
@@ -81,18 +91,31 @@ export default class extends AbstractAuthentificateView
             if (error_display != null)
                 error_display.innerHTML = response_data[error_field];
         });
+        let avatar = document.getElementById("avatar");
+
+        if (avatar.files[0] !== undefined)
+        {
+            let form_data = new FormData();
+            form_data.append("file", avatar.files[0]);
+            await client.me.change_avatar(form_data)
+        }
     }
     
     async getHtml()
     {
         return `
 			<h1>ME</h1>
-            <input type=text placeholder="username" id="username">
+            <div class="accounts">
+                <input type="text" placeholder="username" id="username">
                 <span id="error_username"></span>
                 <input type=password placeholder="new password" id="new_password">
                 <span id="error_new_password"></span>
                 <input type=password placeholder="current password" id="current_password">
                 <span id="error_current_password"></span>
+            </div>
+            <div class="profile">
+                <input type="file" placeholder="username" id="avatar" accept="image/png, image/jpeg">
+            </div>
             <input type="button" value="Save" id="save-button">
             <span id="error_save"></span>
             <input type="button" value="Delete" id="delete-button">

frontend/static/js/views/accounts/RegisterView.js

@@ -1,5 +1,5 @@
 import { client, navigateTo } from "../../index.js";
-import AbstractAuthentifiedView from "../AbstractNonAuthentified.js";
+import AbstractNonAuthentifiedView from "../AbstractNonAuthentified.js";
 
 async function register()
 {
@@ -14,7 +14,6 @@ async function register()
 		return;
 	}
 
-	
 	["username", "user", "password"].forEach(error_field => {
 		let error_display = document.getElementById(`error_${error_field}`);
 		if (error_display != null)
@@ -28,7 +27,7 @@ async function register()
 	});
 }
 
-export default class extends AbstractAuthentifiedView {
+export default class extends AbstractNonAuthentifiedView {
     constructor(params) {
         super(params, "Register", "/home");
 	}

profiles/models.py

@@ -3,11 +3,15 @@ from django.db import models
 from django.contrib.auth.models import User
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.conf import settings
+
+def upload_to(instance, filename: str):
+    return f"./profiles/static/avatars/{instance.pk}.{filename.split('.')[1]}"
 
 # Create your models here.
 class ProfileModel(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE)
-    title = models.CharField(max_length=40)
+    avatar_url = models.ImageField(upload_to=upload_to, default="../static/avatars/default.avif") #blank=True, null=True)
 
 @receiver(post_save, sender=User)
 def on_user_created(sender, instance, created, **kwargs):

profiles/serializers.py

@@ -0,0 +1,11 @@
+from rest_framework import serializers
+from .models import ProfileModel
+
+class ProfileSerializer(serializers.ModelSerializer):
+
+    username = serializers.ReadOnlyField(source='user.username')
+    avatar_url = serializers.ImageField(required=False)
+
+    class Meta:
+        model = ProfileModel
+        fields = ["username", "avatar_url", "user_id"]

profiles/status_code.py

@@ -1 +0,0 @@
-PROFILE_NOT_FOUND = "Profile Not Found"

profiles/urls.py

@@ -1,7 +1,11 @@
 from django.urls import path
+from django.conf import settings
+from django.conf.urls.static import static
 
-from . import views
+from . import viewsets
 
 urlpatterns = [
-    path("<int:pk>", views.ProfileView.as_view(), name="profile_page"),
+    path("<int:pk>", viewsets.ProfileViewSet.as_view({'get': 'retrieve', 'patch': 'partial_update'}), name="profile_page"),
-]
+    path("", viewsets.ProfileViewSet.as_view({'get': 'list'}), name="profiles_list"),
+    #path("me", viewsets.ProfileViewSet.as_view(), name="my_profile_page"),
+] + static("/static/avatars/", document_root="./avatars")

profiles/views.py

@@ -1,19 +0,0 @@
-from django.http import HttpRequest
-from rest_framework.views import APIView
-from rest_framework.response import Response
-from rest_framework import permissions, status
-
-from .models import ProfileModel
-
-# Create your views here.
-class ProfileView(APIView):
-    permission_classes = (permissions.AllowAny,)
-
-    def get(self, request: HttpRequest, pk: int):
-        
-        profile: ProfileModel = ProfileModel.objects.get(pk=pk)
-        if (profile is None):
-            return Response(status=status.HTTP_404_NOT_FOUND)
-        
-        return Response(status=status.HTTP_200_OK, data={'name': profile.user.username,
-                             'title': profile.title})

profiles/viewsets.py

@@ -0,0 +1,44 @@
+from rest_framework import permissions
+from rest_framework.parsers import MultiPartParser, FormParser
+from rest_framework import permissions, status
+from rest_framework import viewsets
+from rest_framework.response import Response
+
+from django.http import HttpRequest
+from django.db.models import QuerySet
+
+from .serializers import ProfileSerializer
+from .models import ProfileModel
+
+class ProfileViewSet(viewsets.ModelViewSet):
+    queryset = ProfileModel.objects.order_by('-pk')
+    serializer_class = ProfileSerializer
+    parser_classes = (MultiPartParser, FormParser)
+    permission_classes = (permissions.IsAuthenticatedOrReadOnly,)
+
+    def retrieve(self, request: HttpRequest, pk=None):
+        instance = self.get_object()
+        instance.avatar_url.name = instance.avatar_url.name.replace("profiles", "", 1)
+        return Response(self.serializer_class(instance).data,
+                        status=status.HTTP_200_OK)
+
+    def get_queryset(self):
+        profiles = ProfileModel.objects.all()
+        for profile in profiles:
+            profile.avatar_url.name = profile.avatar_url.name.replace("profiles", "", 1)
+        return profiles
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+    def perform_update(self, serializer):
+        query: QuerySet = ProfileModel.objects.filter(pk=self.request.user.pk)
+        if (not query.exists()):
+            return Response("profile not found", status=status.HTTP_400_BAD_REQUEST)
+        profile: ProfileModel = ProfileModel.objects.get(pk=self.request.user.pk)
+        avatar = self.request.data.get("file", None)
+        if (avatar is not None):
+            if (profile.avatar_url.name != "default.avif"):
+                profile.avatar_url.storage.delete(profile.avatar_url.name)
+            profile.avatar_url = avatar
+        profile.save()

trancendence/settings.py

@@ -10,6 +10,8 @@ For the full list of settings and their values, see
 https://docs.djangoproject.com/en/4.2/ref/settings/
 """
 
+import os
+
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.