game: add: config

to display 404 error on not found page

.gitignore

@@ -0,0 +1,6 @@
+.env
+*.pyc
+db.sqlite3
+**/migrations/**
+/profiles/static/avatars/*
+!/profiles/static/avatars/default.env

README.md

@@ -0,0 +1,39 @@
+# BACKEND
+
+## Installation
+
+- Clone the project:
+``` bash
+git clone https://git.chauvet.pro/michel/ft_transcendence
+cd ft_transcendence
+git switch server
+```
+- Create python virtual environnement.
+``` bash
+python3 -m venv .env
+```
+- Source the environnement.
+``` bash
+source .env/bin/activate
+```
+- Install the requirements
+``` bash
+pip install -r requirements.txt
+```
+- Setup database
+```
+python manage.py makemigrations games
+python manage.py makemigrations profiles
+python manage.py makemigrations chat
+python manage.py makemigrations tournament
+python manage.py migrate
+```
+- Start the developpement server
+```
+python manage.py runserver 0.0.0.0:8000
+```
+
+coc nvim
+```
+pip install django-stubs
+```

accounts/serializers/login.py

@@ -0,0 +1,12 @@
+from rest_framework.serializers import Serializer, CharField
+from django.contrib.auth import authenticate
+from django.core.exceptions import ValidationError
+
+class LoginSerializer(Serializer):
+    
+	username = CharField()
+	password = CharField()
+
+	def get_user(self, data):
+		user = authenticate(username=data['username'], password=data['password'])
+		return user

accounts/serializers/register.py

@@ -0,0 +1,12 @@
+from rest_framework.serializers import ModelSerializer 
+from django.contrib.auth.models import User
+
+class RegisterSerialiser(ModelSerializer):
+    class Meta:
+        model = User
+        fields = ['username', 'password']
+        
+    def create(self, data):
+        user_obj = User.objects.create_user(username=data['username'], password=data['password'])
+        user_obj.save()
+        return user_obj

accounts/tests/__init__.py

@@ -1,4 +1,5 @@
 from .register import *
 from .login import *
-from .change_password import *
+from .logout import *
+from .edit import *
 from .delete import *

accounts/tests/delete.py

@@ -0,0 +1,37 @@
+from django.test import TestCase
+
+# Create your tests here.
+from django.test.client import Client
+from django.http import HttpResponse
+from django.contrib.auth.models import User
+
+import uuid
+
+class DeleteTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+        
+        self.url = "/api/accounts/delete"
+        
+        self.username: str = str(uuid.uuid4())
+        self.password: str = str(uuid.uuid4())
+
+        user: User = User.objects.create_user(username=self.username, password=self.password)
+        self.client.login(username=self.username, password=self.password)
+        
+
+    def test_normal_delete(self):
+        response: HttpResponse = self.client.delete(self.url, {"password": self.password}, content_type='application/json')
+        response_text: str = response.content.decode("utf-8")
+        self.assertEqual(response_text, '"user deleted"')
+    
+    def test_wrong_pass(self):
+        response: HttpResponse = self.client.delete(self.url, {"password": "cacaman a frapper"}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {"password": ["Password wrong."]})
+
+    def test_no_logged(self):
+        self.client.logout()
+        response: HttpResponse = self.client.delete(self.url, {"password": self.password}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {"detail":"Authentication credentials were not provided."})

accounts/tests/edit.py

@@ -0,0 +1,49 @@
+from django.test import TestCase
+
+# Create your tests here.
+from django.test.client import Client
+from django.http import HttpResponse
+from django.contrib.auth.models import User
+
+import uuid
+
+class EditTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+        
+        self.url = "/api/accounts/edit"
+        
+        self.username: str = str(uuid.uuid4())
+        self.password: str = str(uuid.uuid4())
+        self.new_password: str = str(uuid.uuid4())
+        
+        User.objects.create_user(username = self.username, password = self.password)
+        
+    def test_normal(self):
+        self.client.login(username = self.username, password = self.password)
+        response: HttpResponse = self.client.patch(self.url, {"current_password": self.password, "new_password": self.new_password, "username": "bozo"}, content_type='application/json')
+        response_text: str = response.content.decode('utf-8')
+        self.assertEqual(response_text, '"data has been alterate"')
+    
+    def test_invalid_current_password(self):
+        self.client.login(username = self.username, password = self.password)
+        response: HttpResponse = self.client.patch(self.url, {"current_password": "bozo", "new_password": self.new_password, "username": "bozo"}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {"current_password":["Password is wrong."]})
+
+    def test_invalid_new_username_blank(self):
+        self.client.login(username = self.username, password = self.password)
+        response: HttpResponse = self.client.patch(self.url, {"current_password": self.password, "username": " "}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {'username': ['This field may not be blank.']})
+
+    def test_invalid_new_username_char(self):
+        self.client.login(username = self.username, password = self.password)
+        response: HttpResponse = self.client.patch(self.url, {"current_password": self.password, "username": "*&"}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {'username': ['Enter a valid username. This value may contain only letters, numbers, and @/./+/-/_ characters.']})
+
+    def test_nologged(self):
+        response: HttpResponse = self.client.patch(self.url, {"current_password": self.password, "new_password": self.new_password}, content_type='application/json')
+        errors: dict = eval(response.content)
+        self.assertDictEqual(errors, {'detail': 'Authentication credentials were not provided.'})

accounts/tests/login.py

@@ -0,0 +1,53 @@
+from django.test import TestCase
+
+# Create your tests here.
+from django.test.client import Client
+from django.contrib.auth.models import User
+from django.http import HttpResponse
+import uuid
+
+class LoginTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+        
+        self.url = "/api/accounts/login"
+        
+        self.username: str = str(uuid.uuid4())
+        self.password: str = str(uuid.uuid4())
+
+        User.objects.create_user(username=self.username, password=self.password)
+    
+    def test_normal_login(self):
+        response: HttpResponse = self.client.post(self.url, {'username': self.username, 'password': self.password})
+        response_text = response.content.decode('utf-8')
+        #self.assertEqual(response_text, 'user connected')
+
+    def test_invalid_username(self):
+        response: HttpResponse = self.client.post(self.url,  {"username": self.password, "password": self.password})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'user': ['Username or password wrong.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_invalid_password(self):
+        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.username})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'user': ['Username or password wrong.']}
+        self.assertEqual(errors, errors_expected)
+        
+    def test_invalid_no_username(self):
+        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'username': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_invalid_no_password(self):
+        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'password': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_invalid_no_password_no_username(self):
+        response: HttpResponse = self.client.post(self.url,  {})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'username': ['This field is required.'], 'password': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)

accounts/tests/logout.py

@@ -0,0 +1,17 @@
+from django.test import TestCase
+
+from django.test.client import Client
+from django.contrib.auth.models import User
+from django.contrib.auth import login
+
+class LoginTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+        
+        self.url = "/api/accounts/logout"
+        
+        self.client.login()
+
+    def test_normal_logout(self):
+        response: HttpResponse = self.client.post(self.url)
+        self.assertNotIn('_auth_user_id', self.client.session)

accounts/tests/register.py

@@ -0,0 +1,52 @@
+from django.test import TestCase
+
+# Create your tests here.
+from rest_framework import status
+from django.test.client import Client
+from django.contrib.auth.models import User
+from django.http import HttpResponse
+import uuid
+
+class RegisterTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+
+        self.url: str = "/api/accounts/register"
+
+        self.username: str = str(uuid.uuid4())
+        self.password: str = str(uuid.uuid4())
+
+    def test_normal_register(self):
+        response: HttpResponse = self.client.post(self.url, {'username': self.username, 'password': self.password})
+        self.assertEqual(response.status_code, status.HTTP_201_CREATED)
+
+    def test_incomplet_form_no_username_no_password(self):
+        response: HttpResponse = self.client.post(self.url)
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'username': ['This field is required.'], 'password': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_incomplet_form_no_password(self):
+        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'password': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_incomplet_form_no_username(self):
+        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {}
+        self.assertEqual(errors, errors_expected)
+    
+    def test_incomplet_form_no_username(self):
+        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'username': ['This field is required.']}
+        self.assertEqual(errors, errors_expected)
+
+    def test_already_registered(self):
+        User(username=self.username, password=self.password).save()
+        response: HttpResponse = self.client.post(self.url, {'username': self.username, 'password': self.password})
+        errors: dict = eval(response.content)
+        errors_expected: dict = {'username': ['A user with that username already exists.']}
+        self.assertEqual(errors, errors_expected)

accounts/urls.py

@@ -0,0 +1,13 @@
+from django.urls import path
+
+from .views import register, login, logout, delete, edit, logged
+
+urlpatterns = [
+    path("register", register.RegisterView.as_view(), name="register"),
+    path("login", login.LoginView.as_view(), name="login"),
+    path("logout", logout.LogoutView.as_view(), name="logout"),
+    path("logged", logged.LoggedView.as_view(), name="logged"),
+    path("delete", delete.DeleteView.as_view(), name="delete"),
+    path("edit", edit.EditView.as_view(), name="change_password")
+    
+]

accounts/views/delete.py

@@ -0,0 +1,21 @@
+from rest_framework.views import APIView
+from rest_framework import permissions, status
+from rest_framework.response import Response
+from django.contrib.auth import logout
+from django.http import HttpRequest
+from rest_framework.authentication import SessionAuthentication
+
+class DeleteView(APIView):
+	permission_classes = (permissions.IsAuthenticated,)
+	authentication_classes = (SessionAuthentication,)
+	def delete(self, request: HttpRequest):
+		data: dict = request.data
+
+		password: str = data["password"]
+		if (password is None):
+			return Response({"password": ["This field may not be blank."]})
+		if (request.user.check_password(password) == False):
+			return Response({"password": ["Password wrong."]})
+		request.user.delete()
+		logout(request)
+		return Response("user deleted", status=status.HTTP_200_OK)

accounts/views/edit.py

@@ -0,0 +1,45 @@
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import permissions, status
+from django.http import HttpRequest
+from django.contrib.auth import login
+from rest_framework.authentication import SessionAuthentication
+from django.contrib.auth.models import User
+import re
+
+class EditView(APIView):
+
+    permission_classes = (permissions.IsAuthenticated,)
+    authentication_classes = (SessionAuthentication,)
+
+    def get(self, request: HttpRequest):
+        return Response({"username": request.user.username, "id": request.user.pk})
+
+    def patch(self, request: HttpRequest):
+        data: dict = request.data
+
+        current_password: str = data.get("current_password")
+        if (current_password is None):
+            return Response({"current_password": ["This field may not be blank."]})
+
+        user_object = request.user
+
+        if (user_object.check_password(current_password) == False):
+            return Response({"current_password": ["Password is wrong."]})
+
+        new_username = data.get("username", user_object.username)
+        if (new_username != user_object.username):
+            if (User.objects.filter(username=new_username).exists()):
+                return Response({"username": ["A user with that username already exists."]})
+            if (set(new_username) == {' '}):
+                return Response({"username": ["This field may not be blank."]})
+            if (re.search('^([a-z]||\@||\+||\-||\_)+$', new_username) is None):
+                return Response({"username":["Enter a valid username. This value may contain only letters, numbers, and @/./+/-/_ characters."]})
+
+        new_password: str = data.get("password")
+        if (new_password is not None):
+           user_object.set_password(new_password)
+        
+        user_object.save()
+
+        return Response("data has been alterate")

accounts/views/logged.py

@@ -0,0 +1,18 @@
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import permissions, status
+from django.http import HttpRequest
+from django.contrib.auth import login
+from rest_framework.authentication import SessionAuthentication
+
+from ..serializers.login import LoginSerializer
+
+class LoggedView(APIView):
+    
+	permission_classes = (permissions.AllowAny,)
+	authentication_classes = (SessionAuthentication,)
+
+	def get(self, request: HttpRequest):
+		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

@@ -0,0 +1,23 @@
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import permissions, status
+from django.http import HttpRequest
+from django.contrib.auth import login
+from rest_framework.authentication import SessionAuthentication
+
+from ..serializers.login import LoginSerializer
+
+class LoginView(APIView):
+    
+	permission_classes = (permissions.AllowAny,)
+	authentication_classes = (SessionAuthentication,)
+
+	def post(self, request: HttpRequest):
+		data = request.data
+		serializer = LoginSerializer(data=data)
+		serializer.is_valid(raise_exception=True)
+		user = serializer.get_user(data)
+		if user is None:
+			return Response({'user': ['Username or password wrong.']}, status.HTTP_200_OK)
+		login(request, user)
+		return Response({'id': user.pk}, status=status.HTTP_200_OK)

accounts/views/logout.py

@@ -0,0 +1,13 @@
+from rest_framework.views import APIView
+from django.contrib.auth import logout
+from rest_framework import permissions, status
+from rest_framework.response import Response
+from django.http import HttpRequest
+from rest_framework.authentication import SessionAuthentication
+
+class LogoutView(APIView):
+	permission_classes = (permissions.IsAuthenticated,)
+	authentication_classes = (SessionAuthentication,)
+	def get(self, request: HttpRequest):
+		logout(request)
+		return Response("user unlogged", status=status.HTTP_200_OK)

accounts/views/register.py

@@ -0,0 +1,18 @@
+from rest_framework import permissions, status
+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,)
+	def post(self, request: HttpRequest):
+		data = request.data
+		serializer = RegisterSerialiser(data=data)
+		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)

chat/admin.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+from .models import ChatChannelModel, ChatMemberModel, ChatMessageModel
+
+admin.site.register(ChatChannelModel)
+admin.site.register(ChatMemberModel)
+admin.site.register(ChatMessageModel)

chat/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ChatConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'chat'

chat/consumers.py

@@ -0,0 +1,99 @@
+from channels.generic.websocket import WebsocketConsumer
+from asgiref.sync import async_to_sync
+
+from .models import ChatMemberModel, ChatMessageModel
+from profiles.models import BlockModel
+
+import time
+import json
+
+class ChatConsumer(WebsocketConsumer):
+
+	def connect(self):
+		
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		channel_id : int = int(self.scope['url_route']['kwargs']['chat_id'])
+
+		self.room_group_name = f'chat{channel_id}'
+
+		if ChatMemberModel.objects.filter(member_id=user.pk, channel_id=int(channel_id)).count() != 1:
+			return
+
+		if (self.channel_layer == None):
+			return
+
+		async_to_sync(self.channel_layer.group_add)(
+			self.room_group_name,
+			self.channel_name
+		)
+
+		self.accept()
+
+
+	def receive(self, text_data=None, bytes_data=None):
+
+		if text_data == None:
+			return
+
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		text_data_json: dict = json.loads(text_data)
+		
+		message = text_data_json.get('message')
+		if (message is None):
+			return
+		
+		receivers_id = text_data_json.get('receivers_id')
+		if (receivers_id is None):
+			return
+
+		channel_id : int = int(self.scope['url_route']['kwargs']['chat_id'])
+
+		if ChatMemberModel.objects.filter(member_id = user.pk, channel_id = channel_id).count() != 1:
+			return
+
+		if (self.channel_layer == None):
+			return
+
+		message_time: int = int(time.time() * 1000)
+		
+		if (len(receivers_id) == 1 and 
+			BlockModel.objects.filter(blocker=user.pk, blocked=receivers_id[0]) or
+			BlockModel.objects.filter(blocker=receivers_id[0], blocked=user.pk)
+			):
+			return
+
+		async_to_sync(self.channel_layer.group_send)(
+			self.room_group_name,
+			{
+				'type':'chat_message',
+				'author_id':user.pk,
+				'content':message,
+				'time':message_time,
+			}
+		)
+		
+		new_message = ChatMessageModel(channel_id = channel_id, author_id = user.pk, content = message, time = message_time).save()
+
+	def chat_message(self, event):
+
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		channel_id : int = int(self.scope['url_route']['kwargs']['chat_id'])
+
+		if ChatMemberModel.objects.filter(member_id = user.pk, channel_id = channel_id).count() != 1:
+			return
+
+		self.send(text_data=json.dumps({
+			'type':'chat',
+			'author_id':event['author_id'],
+			'content':event['content'],
+			'time': event['time'],
+		}))

chat/models.py

@@ -0,0 +1,31 @@
+from django.db import models
+from django.db.models import IntegerField
+from django.contrib.auth.models import User
+from django.contrib import admin
+
+# Create your models here.
+class ChatChannelModel(models.Model):
+	
+	def create(self, users_id: [int]):
+		self.save()
+		for user_id in users_id:
+			ChatMemberModel(channel_id = self.pk, member_id = user_id).save()
+
+	def get_members_id(self):
+		return [member_channel.member_id for member_channel in ChatMemberModel.objects.filter(channel_id = self.pk)]
+
+class ChatMemberModel(models.Model):
+	member_id = IntegerField(primary_key=False)
+	channel_id = IntegerField(primary_key=False)
+
+	def __str__(self):
+		return "member_id: " + str(self.member_id) + ", channel_id: " + str(self.channel_id)
+
+class ChatMessageModel(models.Model):
+	channel_id = IntegerField(primary_key=False)
+	author_id = IntegerField(primary_key=False)
+	content = models.CharField(max_length=255)
+	time = IntegerField(primary_key=False)
+
+	def __str__(self): 
+		return "author_id: " + str(self.author_id) + ", channel_id: " + str(self.channel_id) + ", content: " + self.content

chat/routing.py

@@ -0,0 +1,6 @@
+from django.urls import re_path
+from . import consumers
+
+websocket_urlpatterns = [
+	re_path(r'ws/chat/(?P<chat_id>\d+)$', consumers.ChatConsumer.as_asgi())
+]

chat/serializers.py

@@ -0,0 +1,30 @@
+from rest_framework import serializers
+
+from profiles.models import ProfileModel
+
+from .models import ChatChannelModel, ChatMessageModel
+
+class ChatChannelSerializer(serializers.ModelSerializer):
+
+    members_id = serializers.ListField(child = serializers.IntegerField())
+
+    class Meta:
+        model = ChatChannelModel
+        fields = ["members_id", "pk"]
+
+    def validate_members_id(self, value):
+        members_id: [int] = value
+        if len(members_id) < 2:
+            raise serializers.ValidationError('Not enought members to create the channel')
+        if len(set(members_id)) != len(members_id):
+            raise serializers.ValidationError('Same member')
+        for member_id in members_id:
+            if not ProfileModel.objects.filter(pk = member_id).exists():
+                raise serializers.ValidationError(f"The profile {member_id} doesn't exists.")
+        return members_id
+
+class ChatMessageSerializer(serializers.Serializer):
+
+    class Meta:
+        model = ChatMessageModel
+        fields = ["channel_id", "author_id", "content", "time"]

chat/tests.py

@@ -0,0 +1,30 @@
+from django.test import TestCase
+
+from django.test.client import Client
+from django.http import HttpResponse, HttpRequest
+from django.contrib.auth.models import User
+
+# Create your tests here.
+class ChatTest(TestCase):
+	def setUp(self):
+		self.client = Client()
+
+		self.username='bozo1'
+		self.password='password'
+
+		self.user: User = User.objects.create_user(username=self.username, password=self.password)
+
+		self.dest: User = User.objects.create_user(username="bozo2", password=self.password)
+
+		self.url = "/api/chat/"
+
+	def test_create_chat(self):
+		self.client.login(username=self.username, password=self.password)
+		response: HttpResponse = self.client.post(self.url + str(self.user.pk), {"members_id": [self.user.pk, self.dest.pk]})
+		response_dict: dict = eval(response.content)
+		self.assertDictEqual(response_dict, {})
+
+	def test_create_chat_unlogged(self):
+		response: HttpResponse = self.client.post(self.url + str(self.user.pk), {"members_id": [self.user.pk, self.dest.pk]})
+		response_dict: dict = eval(response.content)
+		self.assertDictEqual(response_dict,  {'detail': 'Authentication credentials were not provided.'})

chat/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from django.conf import settings
+from django.conf.urls.static import static
+
+from . import views
+
+urlpatterns = [
+    path("", views.ChannelView.as_view(), name="chats_page"),
+]

chat/views.py

@@ -0,0 +1,45 @@
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import permissions, status
+from rest_framework.authentication import SessionAuthentication
+
+from django.http import HttpRequest
+from django.contrib.auth import login
+from django.db.models import QuerySet
+from django.core import serializers
+
+
+from .models import ChatChannelModel, ChatMemberModel, ChatMessageModel
+from .serializers import ChatChannelSerializer, ChatMessageSerializer
+
+class ChannelView(APIView):
+    
+	queryset = ChatChannelModel.objects
+	serializer_class = ChatChannelSerializer
+	permission_classes = (permissions.IsAuthenticated,)
+	authentication_classes = (SessionAuthentication,)	
+
+	def post(self, request):
+
+		serializer = self.serializer_class(data = request.data)
+		
+		serializer.is_valid(raise_exception=True)
+
+		data: dict = serializer.validated_data
+
+		members_id = data.get("members_id")
+		if self.request.user.pk not in members_id:
+			return Response({"detail": "You are trying to create a chat group without you."}, status = status.HTTP_400_BAD_REQUEST)
+
+		for member_channel in ChatMemberModel.objects.filter(member_id = members_id[0]):
+			channel_id: int = member_channel.channel_id
+			if not ChatChannelModel.objects.filter(pk = channel_id).exists():
+				continue
+			channel: ChatChannelModel = ChatChannelModel.objects.get(pk = channel_id)
+			if set(channel.get_members_id()) == set(members_id):
+				messages = ChatMessageModel.objects.filter(channel_id = channel_id).order_by("time")
+				messages = serializers.serialize("json", messages)
+				return Response({'channel_id': channel_id, 'messages': messages}, status=status.HTTP_200_OK)				
+
+		new_channel_id = ChatChannelModel().create(members_id)
+		return Response({'channel_id': new_channel_id}, status=status.HTTP_201_CREATED)

django/.gitignore

@@ -1,4 +0,0 @@
-.env
-*.pyc
-db.sqlite3
-**/migrations/*

django/requirements.txt

@@ -1,3 +0,0 @@
-asgiref==3.7.2
-Django==4.2.6
-sqlparse==0.4.4

django/trancendence/accounts/forms/change_password.py

@@ -1,7 +0,0 @@
-from django import forms
-from ..settings import *
-
-class ChangePasswordForm(forms.Form):
-    username = forms.CharField(label="username", max_length=USERNAME_MAX_SIZE, min_length=USERNAME_MIN_SIZE, required=True)
-    current_password = forms.CharField(label="current_password", max_length=PASSWORD_MAX_SIZE, min_length=PASSWORD_MIN_SIZE, required=True)
-    new_password = forms.CharField(label="new_password", max_length=PASSWORD_MAX_SIZE, min_length=PASSWORD_MIN_SIZE, required=True)

django/trancendence/accounts/forms/delete.py

@@ -1,6 +0,0 @@
-from django import forms
-from ..settings import *
-
-class DeleteForm(forms.Form):
-    username = forms.CharField(label="username", max_length=USERNAME_MAX_SIZE, min_length=USERNAME_MIN_SIZE, required=True)
-    password = forms.CharField(label="password", max_length=PASSWORD_MAX_SIZE, min_length=PASSWORD_MIN_SIZE, required=True)

django/trancendence/accounts/forms/login.py

@@ -1,6 +0,0 @@
-from django import forms
-from ..settings import *
-
-class LoginForm(forms.Form):
-    username = forms.CharField(label="username", max_length=USERNAME_MAX_SIZE, min_length=USERNAME_MIN_SIZE, required=True)
-    password = forms.CharField(label="password", max_length=PASSWORD_MAX_SIZE, min_length=PASSWORD_MIN_SIZE, required=True)

django/trancendence/accounts/forms/register.py

@@ -1,6 +0,0 @@
-from django import forms
-from ..settings import *
-
-class RegisterForm(forms.Form):
-    username = forms.CharField(label="username", max_length=USERNAME_MAX_SIZE, min_length=USERNAME_MIN_SIZE, required=True)
-    password = forms.CharField(label="password", max_length=PASSWORD_MAX_SIZE, min_length=PASSWORD_MIN_SIZE, required=True)

django/trancendence/accounts/models.py

@@ -1,3 +0,0 @@
-from django.db import models
-
-# Create your models here.

django/trancendence/accounts/settings.py

@@ -1,4 +0,0 @@
-PASSWORD_MIN_SIZE = 3
-PASSWORD_MAX_SIZE = 128
-USERNAME_MIN_SIZE = 3
-USERNAME_MAX_SIZE = 40

django/trancendence/accounts/status_code.py

@@ -1,9 +0,0 @@
-INVALID_USERNAME: str = "error: username invalid"
-INVALID_PASSWORD: str = "error: password invalid"
-INVALID_USERNAME_PASSWORD: str = "error: username or password invalid"
-USERNAME_ALREADY_USED: str = "error: username already used"
-
-USER_ADDED: str = "ok: user added"
-USER_DELETED: str = "ok: account has been deleted"
-USER_VALID: str = "ok: account valid"
-PASSWORD_UPDATED: str = "ok: password has been updated"

django/trancendence/accounts/templates/change_password.html

@@ -1,9 +0,0 @@
-<html>
-    <form method='post'>
-        {% csrf_token %}
-        <input type="text" name="username" placeholder="username">
-        <input type="text" name="current_password" placeholder="current_password">
-        <input type="text" name="new_password" placeholder="new_password">
-        <input type='submit'>
-    </form>
-</html>

django/trancendence/accounts/templates/delete.html

@@ -1,7 +0,0 @@
-<html>
-    <form method='post'>
-        {% csrf_token %}
-        {{ form }}
-        <input type='submit'>
-    </form>
-</html>

django/trancendence/accounts/templates/login.html

@@ -1,7 +0,0 @@
-<html>
-    <form method='post'>
-        {% csrf_token %}
-        {{ form }}
-        <input type='submit'>
-    </form>
-</html>

django/trancendence/accounts/templates/register.html

@@ -1,7 +0,0 @@
-<html>
-    <form method='post'>
-        {% csrf_token %}
-        {{ form }}
-        <input type='submit'>
-    </form>
-</html>

django/trancendence/accounts/tests/change_password.py

@@ -1,76 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
-from django.test.client import Client
-from django.http import HttpResponse
-import uuid
-
-from ..status_code import *
-from ..settings import *
-
-class ChangePasswordTest(TestCase):
-    def setUp(self):
-        self.client = Client()
-        
-        self.url = "/api/accounts/change_password"
-        
-        self.username: str = str(uuid.uuid4())[:USERNAME_MAX_SIZE]
-        self.password: str = str(uuid.uuid4())[:PASSWORD_MAX_SIZE]
-        self.new_password: str = str(uuid.uuid4())[:PASSWORD_MAX_SIZE]
-        
-        self.client.post("/api/accounts/register",  {"username": self.username, "password": self.password})
-    
-    def test_normal_login(self):
-        response: HttpResponse = self.client.post("/api/accounts/login",  {"username": self.username, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, USER_VALID)
-
-    def test_invalid_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.password, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-    
-    def test_no_new_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "current_password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_new_password_to_short(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "current_password": self.password, "new_password": "a" * (PASSWORD_MIN_SIZE - (PASSWORD_MIN_SIZE > 0))})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_new_password_to_long(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "current_password": self.password, "new_password": "a" * (PASSWORD_MAX_SIZE + 1)})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_normal_change_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "current_password": self.password, "new_password": self.new_password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, PASSWORD_UPDATED)

django/trancendence/accounts/tests/delete.py

@@ -1,55 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
-from django.test.client import Client
-from django.http import HttpResponse
-import uuid
-
-from ..status_code import *
-from ..settings import *
-
-class DeleteTest(TestCase):
-    def setUp(self):
-        self.client = Client()
-        
-        self.url = "/api/accounts/delete"
-        
-        self.username: str = str(uuid.uuid4())[:USERNAME_MAX_SIZE]
-        self.password: str = str(uuid.uuid4())[:PASSWORD_MAX_SIZE]
-        
-        self.client.post("/api/accounts/register",  {"username": self.username, "password": self.password})
-
-    def test_invalid_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.password, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-    
-    def test_normal_delete(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, USER_DELETED)

django/trancendence/accounts/tests/login.py

@@ -1,50 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
-from django.test.client import Client
-from django.http import HttpResponse
-import uuid
-
-from ..status_code import *
-from ..settings import *
-
-class LoginTest(TestCase):
-    def setUp(self):
-        self.client = Client()
-        
-        self.url = "/api/accounts/login"
-        
-        self.username: str = str(uuid.uuid4())[:USERNAME_MAX_SIZE]
-        self.password: str = str(uuid.uuid4())[:PASSWORD_MAX_SIZE]
-        
-        self.client.post("/api/accounts/register",  {"username": self.username, "password": self.password})
-    
-    def test_normal_login(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, USER_VALID)
-
-    def test_invalid_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.password, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_invalid_no_password_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)

django/trancendence/accounts/tests/register.py

@@ -1,69 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
-from django.test.client import Client
-from django.http import HttpResponse
-import uuid
-
-from ..status_code import *
-from ..settings import *
-
-class RegisterTest(TestCase):
-    def setUp(self):
-        self.client = Client()
-
-        self.url: str = "/api/accounts/register"
-
-        self.username: str = str(uuid.uuid4())[:USERNAME_MAX_SIZE]
-        self.password: str = str(uuid.uuid4())[:PASSWORD_MAX_SIZE]
-
-    def test_incomplet_form_no_username_no_password(self):
-        response: HttpResponse = self.client.post(self.url)
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_incomplet_form_no_password(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_incomplet_form_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, "error: username invalid")
-    
-    def test_incomplet_form_no_username(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_normal_register(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, USER_ADDED)
-
-    def test_username_too_short(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": "a" * (USERNAME_MIN_SIZE - (USERNAME_MIN_SIZE > 0)), "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_username_too_long(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": "a" * (USERNAME_MAX_SIZE + 1), "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_password_too_short(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": "a" * (PASSWORD_MIN_SIZE - (PASSWORD_MIN_SIZE > 0))})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-
-    def test_password_too_long(self):
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": "a" * (PASSWORD_MAX_SIZE + 1)})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, INVALID_USERNAME_PASSWORD)
-        
-    def test_already_registered(self):
-        self.client.post(self.url,  {"username": self.username, "password": self.password})
-        response: HttpResponse = self.client.post(self.url,  {"username": self.username, "password": self.password})
-        response_text: str = response.content.decode("utf-8")
-        self.assertEqual(response_text, USERNAME_ALREADY_USED)

django/trancendence/accounts/urls.py

@@ -1,10 +0,0 @@
-from django.urls import path
-
-from .views import login, register, delete, change_password
-
-urlpatterns = [
-    path("login", login.LoginView.as_view(), name="login"),
-    path("register", register.RegisterView.as_view(), name="register"),
-    path("delete", delete.DeleteView.as_view(), name="delete"),
-    path("change_password", change_password.ChangePasswordView.as_view(), name="change_password"),
-]

django/trancendence/accounts/views/change_password.py

@@ -1,36 +0,0 @@
-from django.shortcuts import render
-from django.views import View
-from django.http import HttpResponse, HttpRequest
-from django.contrib.auth.models import User
-from django.db.models.query import QuerySet
-
-from ..status_code import *
-from ..settings import *
-from ..forms.change_password import ChangePasswordForm
-
-class ChangePasswordView(View):
-    def get(self, request: HttpRequest):
-        return render(request, "change_password.html")
-    
-    def post(self, request: HttpRequest):
-
-        form: ChangePasswordForm = ChangePasswordForm(request.POST)
-        if not form.is_valid():
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        username: str = form.cleaned_data['username']
-        current_password: str = form.cleaned_data['current_password']
-        new_password: str = form.cleaned_data['new_password']
-        
-        query: QuerySet = User.objects.filter(username=username)
-        if (not query.exists()):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        user: User = User.objects.get(username=username)
-        if (not user.check_password(current_password)):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        user.set_password(new_password)
-        user.save()
-        
-        return HttpResponse(PASSWORD_UPDATED)

django/trancendence/accounts/views/delete.py

@@ -1,35 +0,0 @@
-from django.shortcuts import render
-from django.views import View
-from django.http import HttpResponse, HttpRequest
-from django.contrib.auth.models import User
-from django.db.models.query import QuerySet
-
-from ..status_code import *
-from ..settings import *
-from ..forms.delete import DeleteForm
-
-class DeleteView(View):
-    def get(self, request: HttpRequest):
-        return render(request, "delete.html", {"form":  DeleteForm})
-    
-    def post(self, request: HttpRequest):
-        
-        form: DeleteForm = DeleteForm(request.POST)
-        if (not form.is_valid()):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        username: str = form.cleaned_data['username']
-        password: str = form.cleaned_data['password']
-        
-        query: QuerySet = User.objects.filter(username=username)
-        if (not query.exists()):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        user: User = User.objects.get(username=username)
-        if (not user.check_password(password)):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        user.delete()
-        
-        return HttpResponse(USER_DELETED)
-    

django/trancendence/accounts/views/login.py

@@ -1,31 +0,0 @@
-from django.shortcuts import render
-from django.views import View
-from django.http import HttpResponse
-from django.contrib.auth.models import User
-from django.db.models.query import QuerySet
-
-from ..status_code import *
-from ..settings import *
-from ..forms.login import LoginForm 
-
-class LoginView(View):
-    def get(self, request):
-        return render(request, "login.html", {"form": LoginForm})
-    
-    def post(self, request):
-        form: LoginForm = LoginForm(request.POST)
-        if not form.is_valid():
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        username: str = form.cleaned_data["username"]
-        password: str = form.cleaned_data["password"]
-        
-        query: QuerySet = User.objects.filter(username=username)
-        if (not query.exists()):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        user: User = User.objects.get(username=username)
-        if (not user.check_password(password)):
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        return HttpResponse(USER_VALID)

django/trancendence/accounts/views/register.py

@@ -1,29 +0,0 @@
-from django.shortcuts import render
-from django.views import View
-from django.http import HttpResponse, HttpRequest
-from django.contrib.auth.models import User
-from django.db.models.query import QuerySet
-
-from ..status_code import *
-from ..settings import *
-from ..forms.register import RegisterForm
-
-class RegisterView(View):
-    def get(self, request: HttpRequest):
-        return render(request, "register.html", {"form": RegisterForm}) 
-
-    def post(self, request: HttpRequest):
-        form: RegisterForm = RegisterForm(request.POST)
-        if not form.is_valid():
-            return HttpResponse(INVALID_USERNAME_PASSWORD)
-        
-        username: str = form.cleaned_data["username"]
-        password: str = form.cleaned_data["password"]
-        
-        if User.objects.filter(username=username).exists():
-            return HttpResponse(USERNAME_ALREADY_USED)
-        
-        user = User.objects.create_user(username, password=password)
-        user.save()
-        
-        return HttpResponse(USER_ADDED)

django/trancendence/profiles/urls.py

@@ -1,7 +0,0 @@
-from django.urls import path
-
-from . import views
-
-urlpatterns = [
-    path("<str:uuid>", views.ProfilePage.as_view(), name="profile_page"),
-]

django/trancendence/trancendence/asgi.py

@@ -1,16 +0,0 @@
-"""
-ASGI config for trancendence project.
-
-It exposes the ASGI callable as a module-level variable named ``application``.
-
-For more information on this file, see
-https://docs.djangoproject.com/en/4.2/howto/deployment/asgi/
-"""
-
-import os
-
-from django.core.asgi import get_asgi_application
-
-os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'trancendence.settings')
-
-application = get_asgi_application()

frontend/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'frontend'

frontend/static/css/accounts/login.css

@@ -0,0 +1,12 @@
+#app .form {
+	background-color: red;
+    width: 300px;
+    height: 300px;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	grid-gap: 10px;
+	margin-left: auto;
+    margin-right: auto;
+	margin-top: 90px;
+    border: 15px black solid;
+}

frontend/static/css/accounts/register.css

@@ -0,0 +1,12 @@
+#app .form {
+	background-color: red;
+    width: 300px;
+    height: 300px;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	grid-gap: 10px;
+	margin-left: auto;
+    margin-right: auto;
+	margin-top: 90px;
+    border: 15px black solid;
+}

frontend/static/css/index.css

@@ -0,0 +1,10 @@
+
+body {
+    margin: 0.5em;
+    font-family: 'Quicksand', sans-serif;
+    font-size: 30px;
+}
+
+a {
+    color: #009579;
+}

frontend/static/css/me.css

@@ -0,0 +1,18 @@
+#app #main .account
+{
+	background-color: red;
+}
+
+#app #main
+{
+	width: 60%;
+	display: flex;
+	margin-left: auto;
+	margin-right: auto;
+	flex-direction: column;
+}
+
+#app #main .profile
+{
+	background-color: green;
+}

frontend/static/css/profile.css

@@ -0,0 +1,20 @@
+#app #avatar
+{
+	height: 100px;
+	width: 100px;
+}
+
+#app #username
+{
+	font-size: 0.8em;
+}
+
+#app #block {
+	cursor: pointer;
+	font-size: 0.7em;
+	text-decoration: underline;
+}
+
+#app {
+	margin-top: 20px;
+}

frontend/static/css/search.css

@@ -0,0 +1,104 @@
+#app img
+{
+	max-height: 3em;
+	max-width: 3em;
+}
+
+#app ul
+{
+	font-size: 0.75em;
+	margin: 0.25em 0 0 0;
+	padding: 0 0 0 0;
+	list-style-type: none;
+	max-height: 80vh;
+	overflow: auto;
+}
+
+#app li
+{
+	margin: 0.25em 0.25em 0 0;
+}
+
+#app #chats {
+	overflow: hidden;
+	display: flex;
+	text-align: left;
+}
+#app #users {
+	margin: 0em 1.0em 0em 0.05em;
+}
+
+#app #chat {
+	position: relative;
+	max-height: 100vh;
+	width: 100vh;
+	/*border: 2px	solid green;*/
+	overflow: hidden;
+}
+
+#app #members {
+	font-size: 1em;
+}
+
+#app #add_chat_off {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+#app #add_chat_on {
+	cursor: pointer;
+}
+
+#app #messages {
+	max-height: 60vh;
+	overflow: scroll;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	font-size: 0.75em;
+}
+
+#app #input_user{
+	color: green;
+	width: 8.5em;
+	height: 1.1em;
+	font-size: 0.65em;
+	border: none;
+	outline: none;
+	border-bottom: 0.15em solid green;
+}
+
+#app #input_chat{
+	position: sticky;
+	bottom: 0;
+	/*width: calc(100% - 8px);*/
+	width: 100%;
+	border: none;
+	outline: none;
+	border-bottom: 0.2em solid green;
+	caret-color: green;
+	color: green;
+	font-size: 16px;
+}
+
+#app #you {
+	text-align: left;
+	position: relative;
+	max-width: 48%;
+	left: 0.5em;
+	margin: 0.5em 0 0 0;
+	color: green;
+
+	word-wrap: break-word;
+}
+
+#app #other {
+	text-align: right;
+	position: relative;
+	max-width: 48%;
+	margin: 0.5em 0 0 auto;
+	right: 0.5em;
+	color: red;
+
+	/* permet le retour à la ligne à la place de dépasser*/
+	word-wrap: break-word;
+}

frontend/static/js/api/MyProfile.js

@@ -0,0 +1,19 @@
+import { Profile } from "./profile.js";
+
+class MyProfile extends Profile
+{
+	async change_avatar(form_data)
+	{
+		let response = await this.client._patch_file(`/api/profiles/me`, form_data);
+		let response_data = await response.json()
+
+		return response_data;
+	}
+
+	async init()
+	{
+		super.init("me");
+	}
+}
+
+export {MyProfile}

frontend/static/js/api/account.js

@@ -0,0 +1,72 @@
+import { Client } from "./client.js";
+
+class Account
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client)
+	{
+		/**
+		 * @type  {Client} client
+		 */
+		this.client = client;
+	}
+	
+	async create(username, password)
+	{
+		let response = await this.client._post("/api/accounts/register", {username: username, password: password});
+		let response_data = await response.json()
+
+		if (response_data == "user created")
+		{
+			this._logged = true;
+			return null;
+		}
+		return response_data
+	}
+
+	async delete(password)
+	{
+		let response = await this.client._delete("/api/accounts/delete", {password: password});
+		let response_data = await response.json();
+
+		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		{
+			this.client._update_logged(false);
+			return null;			
+		}
+		if (response_data == "user deleted")
+			this.client._logged = false;
+		return response_data;
+	}
+
+	async get()
+	{
+		let response = await this.client._get("/api/accounts/edit");
+		let response_data = await response.json();
+
+		if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
+		{
+			this.client._logged = false;
+			return null;			
+		}
+		return response_data;
+	}
+
+	async update(data, 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.'}))
+		{
+			this.client._;
+			return null;
+		}
+		return response_data;
+	}
+}
+
+export { Account }

frontend/static/js/api/chat/channel.js

@@ -0,0 +1,80 @@
+import {Message} from "./message.js"
+
+class Channel {
+	constructor(client, channel_id, members_id, messages, reload) {
+		this.client = client;
+		this.channel_id = channel_id;
+		this.members_id = members_id;
+		this.messages = [];
+		if (messages != undefined)
+			this.updateMessages(messages);
+
+		this.connect(reload);
+	}
+
+	// reload = function to use when we receive a message
+	async connect(reload) {
+		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/chat/${this.channel_id}`;
+
+		this.chatSocket = new WebSocket(url);
+		this.chatSocket.onmessage = (event) =>{
+			let data = JSON.parse(event.data)
+
+			this.messages.push(new Message(
+				this.channel_id,
+				data.author_id,
+				data.content,
+				data.time,
+			));
+
+			reload();
+		};
+	}
+
+	async disconnect() {
+		this.chatSocket.close();
+	}
+
+	updateMessages(messages)
+	{
+		console.log(messages);
+		messages = JSON.parse(messages);
+		let new_messages = [];
+
+		messages.forEach((message) => {
+			message = message["fields"];
+			new_messages.push(new Message(
+				message["channel_id"],
+				message["author_id"],
+				message["content"],
+				message["time"],
+			));
+		});
+
+		//console.log(new_messages);
+		this.messages = new_messages;
+		return new_messages;
+	}
+
+	async sendMessageChannel(message, receivers_id) {
+
+		if (this.chatSocket == undefined)
+			return;
+
+		this.chatSocket.send(JSON.stringify({
+			'message':message,
+			'receivers_id':receivers_id,
+		}));
+	}
+
+	async deleteChannel() {
+		let response = await this.client._delete("/api/chat/" + this.channel_id, {
+		});
+
+		let data = await response.json();
+		return data;
+	}
+
+}
+
+export {Channel}

frontend/static/js/api/chat/channels.js

@@ -0,0 +1,47 @@
+import {Channel} from "./channel.js"
+import {Message} from "./message.js"
+
+class Channels {
+	constructor(client) {
+		this.client = client;
+	}
+
+	async createChannel(members_id, reload) {
+		
+		let null_id = false;
+		members_id.forEach(member_id => {
+			if (member_id == null)
+				null_id = true;
+		});
+		if (null_id)
+			return console.log(members_id, "createChannel error, null id;");
+
+		let response = await this.client._post("/api/chat/", {
+			members_id:members_id
+		});
+
+		let data = await response.json();
+		let exit_code = await response.status;
+		if (exit_code >= 300)
+			return undefined;
+
+		let messages = undefined;
+		if (exit_code == 200)
+			messages = data.messages;
+		
+		return new Channel(this.client, data.channel_id, members_id, messages, reload);
+	}
+
+	async deleteChannel(members_id) {
+		let response = await this.client._delete("/api/chat/", {
+			members_id:members_id
+		});
+
+		let data = await response.json();
+		console.log(response.status)
+		return data;
+	}
+
+}
+
+export {Channels}

frontend/static/js/api/chat/message.js

@@ -0,0 +1,10 @@
+class Message {
+	constructor(channel_id, author_id, content, time) {
+		this.channel_id = channel_id;
+		this.author_id = author_id;
+		this.content = content;
+		this.time = time;
+	}
+}
+
+export {Message}

frontend/static/js/api/client.js

@@ -0,0 +1,144 @@
+import { Account } from "./account.js";
+import { MatchMaking } from "./matchmaking.js";
+import { Profiles } from "./profiles.js";
+import { Channels } from './chat/channels.js';
+import { MyProfile } from "./MyProfile.js";
+import { navigateTo } from "../index.js"
+import { Tourmanents } from "./tournament/tournaments.js";
+
+function getCookie(name)
+{
+	let cookie = {};
+	document.cookie.split(';').forEach(function(el) {
+		let split = el.split('=');
+		cookie[split[0].trim()] = split.slice(1).join("=");
+	})
+	return cookie[name];
+}
+
+class Client
+{
+	constructor(url)
+	{
+		this._url = url;
+		this.account = new Account(this);
+		this.profiles = new Profiles(this);
+		this.matchmaking = new MatchMaking(this);
+		this.tournaments = new Tourmanents(this);
+		this._logged = undefined;
+
+		this.channels = new Channels(this);
+		this.channel = undefined;
+	}
+
+	async isAuthentificate()
+	{
+		if (this._logged == undefined)
+			this.logged = await this._test_logged();
+		return this.logged;	
+	}
+
+	async _get(uri, data)
+	{
+		let response = await fetch(this._url + uri, {
+			method: "GET",
+			body: JSON.stringify(data),
+		});
+		return response;
+	}
+
+    async _post(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken": getCookie("csrftoken"),
+			},		  
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	async _delete(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "DELETE",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken": getCookie("csrftoken"),
+			},		  
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	async _patch_json(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "PATCH",
+			headers: {
+				"X-CSRFToken": getCookie("csrftoken"),
+				"Content-Type": "application/json",
+			},		  
+			body: JSON.stringify(data),
+		});
+        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 _update_logged(state)
+	{
+		if (!this.logged && state)
+		{
+			this.me = new MyProfile(this);
+			await this.me.init();
+		}
+		if (this.logged && !state)
+		{
+			navigateTo("/login");
+		}
+		this.logged = state;
+	}
+
+	async login(username, password)
+	{
+		let response = await this._post("/api/accounts/login", {username: username, password: password})
+		let data = await response.json();
+		if (data.id != undefined)
+		{
+			await this._update_logged(true);
+			return null;
+		}
+		return data;
+	}
+
+	async logout()
+	{
+		await this._get("/api/accounts/logout");
+		await this._update_logged(false);
+	}
+
+	async _test_logged()
+	{
+		let response = await this._get("/api/accounts/logged");
+		let data = await response.json();
+
+		if (data.id !== undefined)
+			await this._update_logged(true);
+		return data.id !== undefined;
+	}
+}
+
+export {Client}

frontend/static/js/api/matchmaking.js

@@ -0,0 +1,52 @@
+import { Client } from "./client.js";
+
+class MatchMaking
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client)
+	{
+		/**
+		 * @type {Client}
+		 */
+		this.client = client
+		this.searching = false;
+	}
+		
+	async start(receive_func, disconnect_func, mode)
+	{
+		if (!await this.client.isAuthentificate())
+			return null;
+		
+		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
+
+		this._socket = new WebSocket(url);
+		
+		this.searching = true;
+
+		this.receive_func = receive_func;
+		this.disconnect_func = disconnect_func;
+
+		this._socket.onmessage = function (event) {
+			const data = JSON.parse(event.data);
+			receive_func(data);
+		};
+
+		this._socket.onclose = this.onclose.bind(this);
+	}
+
+	onclose(event)
+	{
+		this.stop();
+		this.disconnect_func(event);
+	}
+
+	async stop()
+	{
+		this.searching = false;
+		this._socket.close()
+	}
+}
+
+export {MatchMaking}

frontend/static/js/api/profile.js

@@ -0,0 +1,49 @@
+import { Client } from "./client.js";
+
+class Profile
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client, username = undefined, avatar_url = undefined, user_id = undefined)
+	{
+		/**
+		 * @type  {Client} client
+		 */
+		this.client = client;
+		this.username = username;
+		this.avatar_url = avatar_url;
+		this.user_id = user_id;
+		this.isBlocked = false;
+	}
+
+	async init(user_id)
+	{
+		let response = await this.client._get(`/api/profiles/${user_id}`);
+
+		if (response.status === 404)
+			return 1;
+
+		let response_data = await response.json();
+
+		this.user_id = response_data.user_id;
+		this.username = response_data.username;
+		this.avatar_url = response_data.avatar_url;
+
+		let block_response = await this.client._get("/api/profiles/block");
+
+		if (block_response.status == 404)
+			return
+
+		let block_data = await block_response.json();
+		let block_list = JSON.parse(block_data);
+		block_list.forEach(block => {
+			let blocker = block.fields.blocker;
+			let blocked = block.fields.blocked;
+			if (blocker == this.client.me.user_id && blocked == user_id)
+				return this.isBlocked = true;
+		});
+	}
+}
+
+export {Profile}

frontend/static/js/api/profiles.js

@@ -0,0 +1,65 @@
+import { Profile } from "./profile.js";
+
+class Profiles
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client)
+	{
+		/**
+		 * @type {Client} 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))
+		});
+		return profiles;
+	}
+
+	async getProfile(user_id)
+	{
+		let profile = new Profile(this.client);
+		if (await profile.init(user_id))
+			return null;
+		return profile;
+	}
+
+	async block(user_id) {
+
+		// blocker & blocked
+		let response = await this.client._post("/api/profiles/block", { 
+			users_id:[this.client.me.user_id, user_id],
+		});
+
+		let data = await response.json();
+		console.log(response.status);
+		console.log(data);
+		return data;
+
+	}
+
+	async deblock(user_id) {
+
+		// blocker & blocked
+		let response = await this.client._delete("/api/profiles/block", { 
+			users_id:[this.client.me.user_id, user_id],
+		});
+
+		let data = await response.json();
+		console.log(response.status);
+		console.log(data);
+		return data;
+		
+	}
+}
+
+export {Profiles}

frontend/static/js/api/tournament/tournament.js

@@ -0,0 +1,98 @@
+import { Client } from "../client.js";
+
+class Tourmanent
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client, name = undefined, nb_players = undefined, nb_players_by_game = undefined, level = undefined, started = undefined, finished = undefined, levels = undefined, id = undefined)
+	{
+		/**
+		 * @type {Client}
+		 */
+		this.client = client;
+		this.name = name || `${nb_players_by_game}x1, ${nb_players} players`;
+		this.nb_players = nb_players;
+		this.nb_players_by_game = nb_players_by_game;
+		this.level = level;
+		this.started = started;
+		this.finished = finished;
+		this.levels = levels;
+		this.state = this.get_state();
+		this.id = id
+		
+		this.connected = false;
+	}
+
+	get_state()
+	{
+		if (this.finished)
+			return "finished";
+		if (this.started)
+			return "started";
+		else
+			return "waiting";
+	}
+
+	async init(id)
+	{
+		let response = await this.client._get(`/api/tournaments/${id}`);
+
+		if (response.status === 404)
+			return 1;
+
+		let response_data = await response.json();
+
+		this.name = response_data.name || `${response_data.nb_players_by_game}x1, ${response_data.nb_players} players`;
+		this.nb_players = response_data.nb_players;
+		this.nb_players_by_game = response_data.nb_players_by_game;
+		this.level = response_data.level;
+		this.started = response_data.started;
+		this.finished = response_data.finished;
+		this.levels = response_data.levels;
+		this.id = response_data.id
+		this.state = this.get_state();
+	}
+
+	leave(event)
+	{
+		if (this.connected == false)
+			return
+		this.connected = false;
+		this._socket.close()
+		this.disconnect_func(event);
+	}
+
+	toggle_participation()
+	{
+		if (!this.connected)
+			return
+		this._socket.send(JSON.stringify({participate: ""}));
+	}
+
+	async join(receive_func, disconnect_func)
+	{
+		if (!await this.client.isAuthentificate())
+			return null;
+		
+		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/tournaments/${this.id}`;
+		
+		this._socket = new WebSocket(url);
+		
+		this.connected = true;
+		this.isParticipating = false;
+
+		this.receive_func = receive_func;
+		this.disconnect_func = disconnect_func;
+
+		this._socket.onmessage = function (event) {
+			const data = JSON.parse(event.data);
+			receive_func(data);
+		};
+
+		this._socket.onclose = this.leave.bind(this);
+	}
+	
+}
+
+export { Tourmanent }

frontend/static/js/api/tournament/tournaments.js

@@ -0,0 +1,78 @@
+import { Client } from "../client.js";
+import { Tourmanent } from "./tournament.js";
+
+class Tourmanents
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client)
+	{
+		/**
+		 * @type {Client}
+		 */
+		this.client = client
+	}
+
+	async getTournament(id)
+	{
+		let tournament = new Tourmanent(this.client);
+		if (await tournament.init(id))
+			return null;
+		return tournament;
+	}
+
+	async createTournament(nb_players,  nb_players_by_game, name = "")
+	{
+		let response = await this.client._post("/api/tournaments/", {nb_players: nb_players, nb_players_by_game: nb_players_by_game, name: name});
+
+		if (response.status === 403)
+		{
+			this.client._update_logged(false);
+			return null;			
+		}
+
+		let response_data = await response.json();
+		return response_data;
+	}
+
+	/**
+	 * @param {string} state must be "finished", or "started", or "waiting". Any other return all elements
+	 */
+
+	async search(state)
+	{
+		let response = await this.client._get(`/api/tournaments/search/${state}`);
+		let response_data = await response.json()
+
+		if (response.status === 404)
+		{
+			this.client._update_logged(false);
+			return null;
+		}
+
+		let tournaments = [];
+
+		response_data.forEach(tournament_data => {
+			tournaments.push(new Tourmanent(this.client,
+											tournament_data.name,
+											tournament_data.nb_players,
+											tournament_data.nb_players_by_game,
+											tournament_data.level,
+											tournament_data.started,
+											tournament_data.finished,
+											tournament_data.levels,
+											tournament_data.id));
+		});
+
+		return tournaments;
+	}
+
+	async all()
+	{
+		return await this.search("");
+	}
+	
+}
+
+export { Tourmanents }

frontend/static/js/index.js

@@ -0,0 +1,118 @@
+import { Client } from "./api/client.js";
+
+import LoginView from "./views/accounts/LoginView.js";
+import Dashboard from "./views/Dashboard.js";
+import Search from "./views/Search.js";
+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 PageNotFoundView from './views/PageNotFoundView.js' 
+
+import AbstractRedirectView from "./views/abstracts/AbstractRedirectView.js";
+import MeView from "./views/MeView.js";
+import ProfilePageView from "./views/ProfilePageView.js";
+import MatchMakingView from "./views/MatchMakingView.js";
+import TournamentPageView from "./views/TournamentPageView.js";
+import TournamentsView from "./views/TournamentsListView.js";
+import TournamentCreateView from "./views/TournamentCreateView.js";
+
+let client = new Client(location.protocol + "//" + location.host)
+
+let lastView = undefined
+
+const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");
+
+const getParams = match => {
+    const values = match.result.slice(1);
+    const keys = Array.from(match.route.path.matchAll(/:(\w+)/g)).map(result => result[1]);
+
+    return Object.fromEntries(keys.map((key, i) => {
+        return [key, values[i]];
+    }));
+};
+
+const navigateTo = async (uri) => {
+    if (await router(uri) === 0)
+        history.pushState(null, null, uri);
+};
+
+async function renderView(view)
+{
+    let content = await view.getHtml();
+    if (content == null)
+        return 1;
+
+    view.setTitle();
+    document.querySelector("#app").innerHTML = content
+
+	if (await view.postInit())
+        renderView(new PageNotFoundView());
+}
+
+const router = async (uri) => {
+    const routes = [
+        { path: "/", view: Dashboard },
+        { path: "/profiles/:id", view: ProfilePageView },
+        { path: "/tournaments/create", view: TournamentCreateView },
+        { path: "/tournaments/:id", view: TournamentPageView },
+        { path: "/tournaments/", view: TournamentsView },
+        { path: "/login", view: LoginView },
+        { path: "/logout", view: LogoutView },
+        { path: "/register", view: RegisterView },
+        { path: "/search", view: Search },
+        { path: "/home", view: HomeView },
+        { path: "/me", view: MeView },
+        { path: "/matchmaking", view: MatchMakingView },
+        { path: "/game/offline", view: GameView },
+    ];
+
+    // Test each route for potential match
+    const potentialMatches = routes.map(route => {
+        return {
+            route: route,
+            result: uri.match(pathToRegex(route.path))
+        };
+    });
+
+    let match = potentialMatches.find(potentialMatch => potentialMatch.result !== null);
+
+    if (!match) {
+        match = {
+            route: {
+				path: uri,
+				view: PageNotFoundView
+			},
+            result: [uri]
+        };
+    }
+
+	if (lastView !== undefined)
+		await lastView.leavePage();
+
+    const view = new match.route.view(getParams(match));
+
+    if (view instanceof AbstractRedirectView && await view.redirect())
+        return 1;
+
+	lastView = view;
+
+    await client.isAuthentificate();
+    renderView(view);
+    return 0;
+};
+
+window.addEventListener("popstate", function() {router(location.pathname)});
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.body.addEventListener("click", e => {
+        if (e.target.matches("[data-link]")) {
+            e.preventDefault();
+            navigateTo(e.target.href.slice(location.origin.length));
+        }
+    });
+    router(location.pathname);
+});
+
+export { client, navigateTo }

frontend/static/js/utils/formUtils.js

@@ -0,0 +1,18 @@
+function clear(property_name, elements_id)
+{
+	elements_id.forEach(element_id => {
+		let element = document.getElementById(element_id)
+		element[property_name] = ""
+	});	
+}
+
+function fill_errors(errors, property_name)
+{
+	Object.keys(errors).forEach(error_field =>
+	{
+		let element = document.getElementById(error_field);
+		element[property_name] = errors[error_field];
+	});	
+}
+
+export {fill_errors, clear}

frontend/static/js/views/Dashboard.js

@@ -0,0 +1,19 @@
+import AbstractView from "./abstracts/AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Dashboard");
+    }
+
+    async getHtml() {
+        return `
+            <h1>Welcome back, Dom</h1>
+            <p>
+                Fugiat voluptate et nisi Lorem cillum anim sit do eiusmod occaecat irure do. Reprehenderit anim fugiat sint exercitation consequat. Sit anim laborum sit amet Lorem adipisicing ullamco duis. Anim in do magna ea pariatur et.
+            </p>
+            <p>
+                <a href="/posts" data-link>View recent posts</a>.
+            </p>
+        `;
+    }
+}

frontend/static/js/views/Game.js

@@ -0,0 +1,250 @@
+import AbstractView from "./abstracts/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

@@ -0,0 +1,18 @@
+import AbstractAuthentificateView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentificateView {
+    constructor(params) {
+        super(params, "Home");
+        this.redirect_url = "/login"
+	}
+
+    async getHtml() {
+        return `
+			<h1>HOME</h1>
+            <a href="/matchmaking" class="nav__link" data-link>Play a game</a>
+            <a href="/game/offline" class="nav__link" data-link>Play offline</a>
+            <a href="/me" class="nav__link" data-link>Me</a>
+            <a href="/logout" class="nav__link" data-link>Logout</a>
+        `;
+    }
+}

frontend/static/js/views/MatchMakingView.js

@@ -0,0 +1,69 @@
+import { client, navigateTo } from "../index.js";
+import { clear, fill_errors } from "../utils/formUtils.js";
+import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView {
+    constructor(params)
+    {
+        super(params, "Matchmaking");
+    }
+
+    async press_button()
+    {
+        if (client.matchmaking.searching)
+        {
+            client.matchmaking.stop();
+            document.getElementById("button").value = "Find a game"
+        }
+        else
+        {
+            let nb_players = document.getElementById("nb_players-input").value
+
+            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players);
+
+            document.getElementById("button").value = "Stop matchmaking"
+        }
+    }
+
+    ondisconnect(event)
+    {
+        if (event.code === 1000)
+            clear("innerText", ["detail"])
+        document.getElementById("button").value = "Find a game"
+    }
+
+    onreceive(data)
+    {
+        if (data.detail === "game_found")
+        {
+            navigateTo(`/games/${data.game_id}`);
+            return;
+        }
+        this.display_data(data)
+    }
+
+    display_data(data)
+    {
+        clear("innerText", ["detail"]);
+        fill_errors(data, "innerText");
+    }
+
+    async postInit()
+    {
+        document.getElementById("button").onclick = this.press_button.bind(this)
+    }
+
+    async getHtml() {
+        return `
+			<h1>Select mode</h1>
+            <input type="number" value="2" id="nb_players-input">
+            <input type="button" value="Find a game" id="button">
+            <span id="detail"></span>
+        `;
+    }
+
+    async leavePage()
+    {
+		await client.matchmaking.stop();
+    }
+}

frontend/static/js/views/MeView.js

@@ -0,0 +1,105 @@
+import { client, navigateTo } from "../index.js";
+import { clear, fill_errors } from "../utils/formUtils.js";
+import AbstractAuthentificateView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentificateView
+{    
+    constructor(params)
+    {
+        super(params, "Me");
+	}
+
+    async postInit()
+    {
+        document.getElementById("save-account-button").onclick = this.save_account;
+        document.getElementById("delete-account-button").onclick = this.delete_account;
+        document.getElementById("save-profile-button").onclick = this.save_profile;
+    }
+
+    async delete_account()
+    {
+        let current_password = document.getElementById("current_password-input").value;
+        
+        let response_data = await client.account.delete(current_password);
+
+        console.log(await client.isAuthentificate())
+        if (response_data === null || response_data === "user deleted")
+        {
+            navigateTo("/login");
+            return;
+        }
+        clear("innerHTML", ["current_password-input"])
+        fill_errors({"current_password-input": response_data["password"]}, "innerHTML")
+    }
+
+    async save_account()
+    {
+        let username = document.getElementById("username-input").value;
+        let new_password = document.getElementById("new_password-input").value;
+        let current_password = document.getElementById("current_password-input").value;
+    
+        let data = {};
+    
+        data.username = username;
+        if (new_password.length != 0)
+            data.new_password = new_password;
+
+        let response_data = await client.account.update(data, current_password);
+
+        if (response_data === null)
+        {
+            navigateTo("/login");
+            return;
+        }
+
+        if (response_data === "data has been alterate")
+            response_data = {"save-account": "saved"}
+
+        clear("innerHTML", ["username", "new_password", "current_password", "save-account", "delete-account"])
+        fill_errors(response_data, "innerHTML")
+    }
+    
+    async save_profile()
+    {
+        let avatar = document.getElementById("avatar-input");
+
+        if (avatar.files[0] !== undefined)
+        {
+            let form_data = new FormData();
+            form_data.append("file", avatar.files[0]);
+            await client.me.change_avatar(form_data);
+        }
+        document.getElementById("save-profile").innerHTML = "Saved";
+    }
+
+    async getHtml()
+    {
+        return `
+            <link rel="stylesheet" href="/static/css/me.css">
+			<h1>ME</h1>
+            <div id="main">
+                <div class="account">
+                    <h3>Account</h3>
+                    <input type="text" placeholder="username" id="username-input" text=${client.me.username}>
+                    <span id="username"></span>
+                    <input type=password placeholder="new_password" id="new_password-input">
+                    <span id="new_password"></span>
+                    <input type=password placeholder="current_password" id="current_password-input">
+                    <span id="current_password"></span>
+
+                    <input type="button" value="Save Credentials" id="save-account-button">
+                    <span id="save-account"></span>
+                    <input type="button" value="Delete Account" id="delete-account-button">
+                    <span id="delete-account"></span>
+                </div>
+                <div class="profile">
+                    <h3>Profile</h3>
+                    <input type="file" id="avatar-input" accept="image/png, image/jpeg">
+                    <input type="button" value="Save profile" id="save-profile-button">
+                    <span id="save-profile"></span>
+                </div>
+                <a href="/logout" class="nav__link" data-link>Logout</a>
+            </div>
+        `;
+    }
+}

frontend/static/js/views/PageNotFoundView.js

@@ -0,0 +1,14 @@
+import AbstractView from "./abstracts/AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Dashboard");
+    }
+
+	async getHtml() {
+		return `
+			<h1>404 Bozo</h1>
+			<p>Git gud</p>
+		`;
+	}
+}

frontend/static/js/views/ProfilePageView.js

@@ -0,0 +1,67 @@
+import AbstractView from "./abstracts/AbstractView.js";
+import { client } from "../index.js"
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Profile ");
+        this.user_id = params.id;
+    }
+
+    async postInit()
+    {
+        let profile = await client.profiles.getProfile(this.user_id);
+
+		if (profile === null)
+			return 1;
+
+        this.profile = await client.profiles.getProfile(this.user_id);
+		this.info = document.getElementById("info");
+
+		// Username
+        let username = document.createElement("a");
+		username.id = "username";
+        username.appendChild(document.createTextNode(this.profile.username));
+		this.info.appendChild(username);
+
+		this.info.appendChild(document.createElement("br"));
+
+		// Avatar
+        let avatar = document.createElement("img");
+		avatar.id = "avatar";
+        avatar.src = this.profile.avatar_url;
+		this.info.appendChild(avatar);
+
+		await this.blockButton();
+    }
+
+	async blockButton() {
+		// Block option
+		if (client.me.user_id != this.user_id) {
+			let block = document.getElementById("block") || document.createElement("a");
+			block.id = "block";
+			block.innerText = "";
+			block.onclick = async () => {
+				if (!this.profile.isBlocked)
+					await client.profiles.block(this.user_id);
+				else
+					await client.profiles.deblock(this.user_id);
+				this.profile = await client.profiles.getProfile(this.user_id);
+				this.blockButton();
+			};
+			if (this.profile.isBlocked)
+				block.appendChild(document.createTextNode("Deblock"));
+			else
+				block.appendChild(document.createTextNode("Block"));
+			this.info.appendChild(block);
+		}
+	}
+
+    async getHtml() {
+        return `
+            <link rel="stylesheet" href="/static/css/profile.css">
+			<div id="info"> 
+
+			</div>
+        `;
+    }
+}

frontend/static/js/views/Search.js

@@ -0,0 +1,227 @@
+import AbstractView from "./abstracts/AbstractView.js";
+import {client} from "../index.js";
+import {Message} from "../api/chat/message.js"
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Search");
+    }
+
+	async postInit() {
+
+		let search = document.getElementById("input_user");
+		search.oninput = this.users;
+
+		let chat_input = document.getElementById("input_chat");
+		//chat_input.addEventListener("keydown", this.chat_manager)
+
+		this.last_add_chat = undefined;
+		this.users();
+		this.chat();
+
+	}
+
+	async users() {
+
+		let search = document.getElementById("input_user").value.toLowerCase();
+		
+		let logged = await client.isAuthentificate();
+
+		let users = await client.profiles.all();
+		let list_users = document.getElementById('list_users');
+		list_users.innerHTML = "";
+
+		users.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {
+
+			if (user.user_id == null) {
+				console.log("list User one with id null;");
+				return;
+			}
+
+			var new_user = document.createElement("li");
+
+			// username
+			let username = document.createElement("a");
+			username.href = `/profiles/${user.user_id}`;
+			username.appendChild(document.createTextNode(user.username));
+			new_user.appendChild(username);
+
+			// space
+			new_user.appendChild(document.createTextNode(" "));
+
+			// chat
+			if (logged && client.me.user_id != user.user_id) {
+				let add_chat = document.createElement("a");
+				add_chat.id = "add_chat_off";
+				add_chat.onclick = async () => {
+					if (client.channel != undefined) {
+						client.channel.members_id.forEach((member_id) => {
+							if (member_id == user.user_id)
+								client.channel = undefined;
+						});
+
+						if (client.channel == undefined) {
+							add_chat.id = "add_chat_off";
+							this.last_add_chat = undefined;
+							return this.hideChat();
+						}
+
+						client.channel.disconnect();
+					}
+
+					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
+					this.chat();
+					if (this.last_add_chat != undefined)
+						this.last_add_chat.id = "add_chat_off";
+					this.last_add_chat = add_chat;
+					add_chat.id = "add_chat_on";
+				};
+				add_chat.appendChild(document.createTextNode("Chat"));
+				new_user.appendChild(add_chat);
+				
+				new_user.appendChild(document.createTextNode(" "));
+
+			}
+			
+			// break line
+			new_user.appendChild(document.createElement("br"));
+
+			// avatar
+			var img = document.createElement("img");
+			img.src = user.avatar_url;
+			new_user.appendChild(img);
+
+
+			list_users.appendChild(new_user);
+		});
+		//console.log(list_users);
+
+	}
+
+	async chat() {
+
+		let users = await client.profiles.all();
+		let logged = await client.isAuthentificate();
+		/*let reload = document.getElementById("messages");
+		if (reload != null)
+			reload.remove();*/
+
+		let reload = document.getElementById("members");
+		if (reload != null)
+			reload.remove();
+
+		if (client.channel == undefined || !logged)
+			return ;
+
+		let chats = document.getElementById("chats");
+
+		if (document.getElementById("chat") == null) {
+			let chat = document.createElement("div");
+			chat.id = "chat";
+			chats.appendChild(chat);
+		}
+
+		
+		// div des messages
+		let messages = document.getElementById("messages");
+		if (messages == null) {
+			messages = document.createElement("div");
+			messages.id = "messages";
+			if (document.getElementById("input_chat") == null)
+				chat.appendChild(messages);
+			else
+				document.getElementById("input_chat").before(messages);
+		}
+
+		// les messages, réecriture seulement du dernier 
+		let i = 0;
+		client.channel.messages.forEach((message) => {
+			if (messages.children[i] == null || message.content != messages.children[i].innerText) {
+				let text = document.createElement("p");
+				text.appendChild(document.createTextNode(message.content));
+				if (message.author_id == client.me.user_id)
+					text.id = "you";
+				else
+					text.id = "other";
+
+				messages.appendChild(text);
+			}
+			i++;
+		});
+
+		// Input pour rentrer un message
+		if (document.getElementById("input_chat") == null) {
+			let chat_input = document.createElement("input");
+			chat_input.id="input_chat";
+			chat_input.type="text";
+			chat_input.name="message";
+			chat_input.placeholder="message bozo";
+			chat_input.maxLength=255;
+			chat.appendChild(chat_input);
+			
+			chat_input.onkeydown = async () => {
+				if (event.keyCode == 13 && client.channel != undefined) {
+					//let chat_input = document.getElementById("input_chat");
+					let chat_text = chat_input.value;
+
+					let receivers_id = [];
+					client.channel.members_id.forEach((member_id) => {
+						if (member_id != client.me.user_id)
+							receivers_id.push(users.filter(user => user.user_id == member_id)[0].user_id);
+					});
+					await client.channel.sendMessageChannel(chat_text, receivers_id)
+
+					// Reset
+					chat_input.value = "";
+				}
+			};
+		}
+
+		// nom des membres du chat
+		let members = document.createElement("h2");
+		members.id = "members";
+		let usernames = "";
+		client.channel.members_id.forEach((member_id) => {
+			if (member_id != client.me.user_id) {
+				if (usernames.length > 0)
+					usernames += ", ";
+				usernames += (users.filter(user => user.user_id == member_id)[0].username);
+			}
+		});
+		members.appendChild(document.createTextNode(usernames));
+		messages.before(members);
+
+
+		// Scroll to the bottom of messages
+		messages.scrollTop = messages.scrollHeight;
+
+	}
+
+	async hideChat() {
+
+		let close = document.getElementById("chat");
+		if (close != null)
+			close.remove();
+
+	}
+
+	async leavePage() {
+		if (client.channel != undefined)
+			client.channel.disconnect();
+		client.channel = undefined
+	}
+
+    async getHtml() {
+        return `
+			<link rel="stylesheet" href="/static/css/search.css">
+
+			<div id="chats">
+				<div id="users">
+					<input id="input_user" type="text" name="message" placeholder="userbozo"/>
+					<ul id="list_users">
+					</ul>
+				</div>
+			</div>
+        `;
+    }
+}

frontend/static/js/views/TournamentCreateView.js

@@ -0,0 +1,52 @@
+import {client, navigateTo} from "../index.js";
+import { clear, fill_errors } from "../utils/formUtils.js";
+import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Create tournament");
+		this.id = params.id;
+    }
+
+	async create()
+	{
+		let name = document.getElementById("name-input").value;
+		let nb_players = document.getElementById("nb_players-input").value;
+		let nb_players_by_game = document.getElementById("nb_players_by_game-input").value
+
+		let response_data = await client.tournaments.createTournament(nb_players, nb_players_by_game, name);
+
+		if (response_data === null)
+			return;
+
+		let id = response_data["id"] 
+		if (id !== undefined)
+		{
+			navigateTo(`/tournaments/${id}`);
+			return;
+		}
+
+		clear("innerHTML", ["name", "nb_players", "nb_players_by_game"]);
+		fill_errors(response_data, "innerHTML");
+	}
+
+	async postInit()
+	{
+		document.getElementById("create-button").onclick = this.create;
+	}
+
+	async getHtml()
+	{
+		return `
+			<input type="text" id="name-input" placeholder="Tournament name">
+			<span id="name"></span>
+			<input type="number" id="nb_players-input" placeholder="Number of players in tournament">
+			<span id="nb_players"></span>
+			<input type="number" id="nb_players_by_game-input" placeholder="Number of players by game">
+			<span id="nb_players_by_game"></span>
+			<input type="button" id="create-button" value="Create tournament">
+		`
+	}
+}

frontend/static/js/views/TournamentPageView.js

@@ -0,0 +1,98 @@
+import {client, navigateTo} from "../index.js";
+import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Tournament");
+		this.id = params.id;
+    }
+
+	pressButton()
+	{
+		this.tournament.toggle_participation();
+	}
+
+	async receive(data)
+	{
+		if (data.detail === "nb_participants" || data.detail === "update_participants")
+			document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`
+		if (data.detail === "go_to")
+			navigateTo(data.url);
+		if (data.detail === "is_participant")
+			this.updateParticipating(data.is_participant)
+		if (data.detail === "error")
+			document.getElementById("display").innerText = data.error_message
+		}
+
+	async updateParticipating(state)
+	{
+		document.getElementById("button").value = state ? `Leave ${this.tournament.name}` : `Join ${this.tournament.name}`;
+		document.getElementById("display").innerText = state ? "You are a particpant" : "You are not a participant";
+	}
+
+	async ondisconnect(event)
+	{
+	}
+
+	async postInit()
+	{
+		this.tournament = await client.tournaments.getTournament(this.id);
+
+		if (this.tournament === null)
+			return 1;
+
+		this.tournament.join(this.receive.bind(this), this.ondisconnect.bind(this));
+
+		let button = document.getElementById("button")
+		
+		button.onclick = this.pressButton.bind(this);
+
+		document.getElementById("name").innerText = this.tournament.name;
+		document.getElementById("nb_players").innerText = this.tournament.nb_players;
+		document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
+		document.getElementById("level").innerText = this.tournament.level;
+		document.getElementById("state").innerText = this.tournament.state;
+
+		if (this.tournament.state === "waiting")
+			button.disabled = false;
+	}
+
+	async getHtml()
+	{
+		return `
+			<table>
+				<thead>
+					<tr>
+						<th id="name">Loading...</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Number of players</td>
+						<td id="nb_players">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of players by game</td>
+						<td id="nb_players_by_game">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of round</td>
+						<td id="level">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of player</td>
+						<td id="nb_participants">Loading...</td>
+					</tr>
+					<tr>
+						<td>status</td>
+						<td id="state">Loading...</td>
+					</tr>
+				</tbody>
+			</table>
+			<input type="button" id="button" value="Join tournament" disabled>
+			<span id="display"></span>
+			`
+	}
+}

frontend/static/js/views/TournamentsListView.js

@@ -0,0 +1,133 @@
+import {client} from "../index.js";
+import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Tournament");
+		this.id = params.id;
+    }
+
+	async external_search()
+	{
+		let state = document.getElementById("state-select").value;
+		this.tournaments = await client.tournaments.search(state);
+	}
+
+	add_nb_player_by_game_selector()
+	{
+		let nb_players_by_game_list = new Set()
+		this.tournaments.forEach(tournament => {
+			nb_players_by_game_list.add(tournament.nb_players_by_game);
+		});
+
+		let select = document.getElementById("nb-players-by-game-select");
+
+		let new_children = []
+
+		const opt = document.createElement("option");
+		opt.value = "all";
+		opt.text = "All";
+
+		new_children.push(opt);
+
+		nb_players_by_game_list.forEach(nb_players_by_game => {
+			const opt = document.createElement("option");
+			opt.value = nb_players_by_game;
+			opt.text = nb_players_by_game;
+			new_children.push(opt);
+		})
+		select.replaceChildren(...new_children);
+	}
+
+	internal_search()
+	{
+		let nb_players_by_game = document.getElementById("nb-players-by-game-select").value;
+
+		this.display_tournaments = [];
+		this.tournaments.forEach(tournament => {
+			if (nb_players_by_game === "all" || nb_players_by_game == tournament.nb_players_by_game)
+				this.display_tournaments.push(tournament);
+		});
+	}
+
+	display_result()
+	{
+		const tournaments_list = document.getElementById("tournaments-list");
+
+		const new_children = []
+		
+		this.display_tournaments.forEach(tournament => {
+
+			let tr = document.createElement("tr");
+
+			// name	
+			let td = document.createElement("td");
+			td.innerText = tournament.name;
+			tr.appendChild(td);
+
+			// state
+			td = document.createElement("td");
+			td.innerText = tournament.state;
+			tr.appendChild(td);
+
+			// nb_players
+			td = document.createElement("td");
+			td.innerText = tournament.nb_players;
+			tr.appendChild(td);
+
+			// nb_players_by_game
+			td = document.createElement("td");
+			td.innerText = tournament.nb_players_by_game;
+			tr.appendChild(td);
+
+			new_children.push(tr);
+		});
+		tournaments_list.replaceChildren(...new_children);
+	}
+
+	async update_query()
+	{
+		this.internal_search();
+		this.display_result();
+	}
+
+	async update_search()
+	{
+		await this.external_search();
+		this.add_nb_player_by_game_selector();
+		this.update_query();
+	}
+
+	async postInit()
+	{
+		await this.update_search()
+		document.getElementById("state-select").onchange = this.update_search.bind(this);
+		document.getElementById("nb-players-by-game-select").onchange = this.update_query.bind(this);
+	}
+
+	async getHtml()
+	{
+		return `
+			<select id="state-select">
+				<option value="waiting">Waiting</option>
+				<option value="started">Started</option>
+				<option value="finished">Finished</option>
+				<option value="all">All</option>
+			</select>
+			<select id="nb-players-by-game-select">
+			</select>
+			<table>
+				<thead>
+					<td>Name</td>
+					<td>Status</td>
+					<td>Max numbers of players</td>
+					<td>Max numbers of players by game</td>
+				</thead>
+				<tbody id="tournaments-list">
+				</tbody>
+			</table>
+		`
+	}
+}

frontend/static/js/views/abstracts/AbstractAuthentifiedView.js

@@ -0,0 +1,18 @@
+import { client, navigateTo } from "../../index.js";
+import AbstractRedirectView from "./AbstractRedirectView.js";
+
+export default class extends AbstractRedirectView{
+    constructor(params, title) {
+		super(params, title, "/login");
+    }
+
+    async redirect()
+    {
+		if (await client.isAuthentificate() === false)
+		{
+			navigateTo(this.redirect_url);
+			return 1;
+		}
+		return 0;
+    }
+}

frontend/static/js/views/abstracts/AbstractNonAuthentified.js

@@ -0,0 +1,16 @@
+import { client, navigateTo } from "../../index.js";
+import AbstractRedirectView from "./AbstractRedirectView.js";
+
+export default class extends AbstractRedirectView{
+    constructor(params, title, url) {
+		super(params, title, url);
+    }
+
+    async redirect()
+    {
+		if (await client.isAuthentificate() === false)
+			return 0;
+		navigateTo(this.redirect_url);
+		return 1;
+    }
+}

frontend/static/js/views/abstracts/AbstractRedirectView.js

@@ -0,0 +1,15 @@
+import { navigateTo } from "../../index.js";
+import AbstractView from "./AbstractView.js";
+
+export default class extends AbstractView{
+    constructor(params, title, url)
+    {
+        super(params, title);
+        this.redirect_url = url;
+    }
+
+    async redirect()
+    {
+        navigateTo(url);
+    }
+}

frontend/static/js/views/abstracts/AbstractView.js

@@ -0,0 +1,20 @@
+export default class {
+    constructor(params, title) {
+        this.params = params;
+        this.title = title;
+    }
+
+	async postInit() {
+	}
+
+	async leavePage() {
+	}
+
+    setTitle() {
+        document.title = this.title;
+    }
+
+    async getHtml() {
+        return "";
+    }
+}

frontend/static/js/views/accounts/LoginView.js

@@ -0,0 +1,47 @@
+import { client, navigateTo } from "../../index.js";
+import { clear, fill_errors } from "../../utils/formUtils.js";
+import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
+
+async function login()
+{
+	let username = document.getElementById("username-input").value;
+	let password = document.getElementById("password-input").value;
+	
+	let response_data = await client.login(username, password);
+
+	if (response_data == null)
+	{
+		navigateTo("/home");
+		return;
+	}
+
+	clear("innerHTML", ["username", "user", "password"]);
+	fill_errors(response_data, "innerHTML");
+}
+
+export default class extends AbstractNonAuthentifiedView {
+    constructor(params) {
+        super(params, "Login", "/home");
+	}
+
+	async postInit()
+	{
+		document.getElementById("login-button").onclick = login;
+	}
+
+    async getHtml() {
+        return `
+			<div class=form>
+				<label>Login</label>
+				<link rel="stylesheet" href="/static/css/accounts/login.css">
+				<input type="text" id="username-input" placeholder="username">
+				<span id="username"></span>
+				<input type="password" id="password-input" placeholder="password">
+				<span id="password"></span>
+				<input type="button" value="Login" id="login-button">
+				<span id="user"></span>
+				<a href="/register" class="nav__link" data-link>Register</a>
+			</div>
+        `;
+    }
+}

frontend/static/js/views/accounts/LogoutView.js

@@ -0,0 +1,11 @@
+import { client, navigateTo } from "../../index.js";
+import AbstractAuthentifiedView from "../abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+	constructor(params) {
+		super(params, "Logout");
+		client.logout();
+		navigateTo("/login")
+	}
+}

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

@@ -0,0 +1,47 @@
+import { client, navigateTo } from "../../index.js";
+import { clear, fill_errors } from "../../utils/formUtils.js";
+import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";
+
+async function register()
+{
+	let username = document.getElementById("username-input").value;
+	let password = document.getElementById("password-input").value;
+	
+	let response_data = await client.account.create(username, password);
+
+	if (response_data == null)
+	{
+		navigateTo("/home");
+		return;
+	}
+
+	clear("innerHTML", ["username", "user", "password"]);
+	fill_errors(response_data, "innerHTML");
+}
+
+export default class extends AbstractNonAuthentifiedView {
+    constructor(params) {
+        super(params, "Register", "/home");
+	}
+
+	async postInit()
+	{
+		document.getElementById("register-button").onclick = register;
+	}
+
+    async getHtml() {
+        return `
+			<div class=form>
+				<label>Register</label>
+				<link rel="stylesheet" href="/static/css/accounts/register.css">
+				<input type="text" id="username-input" placeholder="username">
+				<span id="username"></span>
+				<input type="password" id="password-input" placeholder="password">
+				<span id="password"></span>
+				<input type="button" value="Register" id="register-button">
+				<span id="user"></span>
+				<a href="/login" class="nav__link" data-link>Login</a>
+			</div>
+        `;
+    }
+}

frontend/templates/index.html

@@ -0,0 +1,21 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Single Page App</title>
+	<link rel="stylesheet" href="{% static 'css/index.css' %}">
+</head>
+<body>
+    <nav class="nav">
+        <a href="/" class="nav__link" data-link>Dashboard</a>
+        <a href="/search" class="nav__link" data-link>Search</a>
+        <a href="/home" class="nav__link" data-link>Home</a>
+        <a href="/login" class="nav__link" data-link>Login</a>
+        <a href="/register" class="nav__link" data-link>Register</a>
+    </nav>
+    <div id="app"></div>
+	<script type="module" src="{% static 'js/index.js' %}"></script>
+</body>
+</html>

frontend/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path, re_path
+
+from .views import index_view
+
+urlpatterns = [
+    re_path(r'^', index_view ,name="index"),
+]

frontend/views.py

@@ -0,0 +1,7 @@
+from django.shortcuts import render
+
+# Create your views here.
+
+
+def index_view(req):
+    return render(req, 'index.html');