Add french comments on chat application

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

chat/templates/chat/chat.html

@@ -4,6 +4,7 @@
 {% load i18n %}
 
 {% block extracss %}
+    {# Webmanifest PWA permettant l'installation de l'application sur un écran d'accueil, pour navigateurs supportés #}
     <link rel="manifest" href="{% static "chat.webmanifest" %}">
 {% endblock %}
 
@@ -14,6 +15,6 @@
 {% endblock %}
 
 {% block extrajavascript %}
-    {# This script contains all data for the chat management #}
+    {# Ce script contient toutes les données pour la gestion du chat. #}
     <script src="{% static 'chat.js' %}"></script>
 {% endblock %}

chat/templates/chat/content.html

@@ -1,32 +1,40 @@
 {% load i18n %}
 
 <noscript>
+    {# Le chat fonctionne à l'aide d'un script JavaScript, sans JavaScript activé il n'est pas possible d'utiliser le chat. #}
     {% trans "JavaScript must be enabled on your browser to access chat." %}
 </noscript>
 <div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasTitle">
     <div class="offcanvas-header">
+        {# Titre du sélecteur de canaux #}
         <h3 class="offcanvas-title" id="offcanvasTitle">{% trans "Chat channels" %}</h3>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
+        {# Contenu du sélecteur de canaux #}
         <div class="form-switch form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="sort-by-unread-switch">
             <label class="form-check-label" for="sort-by-unread-switch">{% trans "Sort by unread messages" %}</label>
         </div>
         <ul class="list-group list-group-flush" id="nav-channels-tab">
+            {# Liste des différentes catégories, avec les canaux par catégorie #}
             <li class="list-group-item d-none">
+                {# Canaux généraux #}
                 <h4>{% trans "General channels" %}</h4>
                 <ul class="list-group list-group-flush" id="nav-general-channels-tab"></ul>
             </li>
             <li class="list-group-item d-none">
+                {# Canaux liés à un tournoi #}
                 <h4>{% trans "Tournament channels" %}</h4>
                 <ul class="list-group list-group-flush" id="nav-tournament-channels-tab"></ul>
             </li>
             <li class="list-group-item d-none">
+                {# Canaux d'équipes #}
                 <h4>{% trans "Team channels" %}</h4>
                 <ul class="list-group list-group-flush" id="nav-team-channels-tab"></ul>
             </li>
             <li class="list-group-item d-none">
+                {# Échanges privés #}
                 <h4>{% trans "Private channels" %}</h4>
                 <ul class="list-group list-group-flush" id="nav-private-channels-tab"></ul>
             </li>
@@ -35,32 +43,41 @@
 </div>
 
 <div class="alert alert-info d-none" id="alert-download-chat-app">
+    {# Lorsque l'application du chat est installable (par exemple sur un Chrome sur Android), on affiche le message qui indique que c'est bien possible. #}
     {% trans "You can install a shortcut to the chat on your home screen using the download button on the header." %}
 </div>
 
+{# Conteneur principal du chat. #}
+{# Lorsque le chat est en plein écran, on le place en coordonnées absolues, occupant tout l'espace de l'écran. #}
 <div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' or fullscreen %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
      style="height: 95vh" id="chat-container">
     <div class="card-header">
         <h3>
         {% if fullscreen %}
-            {# Logout button must be present in a form. The form must includes the whole line. #}
+            {# Lorsque le chat est en plein écran, on affiche le bouton de déconnexion. #}
+            {# Le bouton de déconnexion doit être présent dans un formulaire. Le formulaire doit inclure toute la ligne. #}
             <form action="{% url 'chat:logout' %}" method="post">
                 {% csrf_token %}
         {% endif %}
+            {# Bouton qui permet d'ouvrir le sélecteur de canaux #}
             <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
                     aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <span id="channel-title"></span>
+
+            <span id="channel-title"></span> {# Titre du canal sélectionné #}
             {% if not fullscreen %}
+                {# Dans le cas où on est pas uniquement en plein écran (cas de l'application), on affiche les boutons pour passer en ou quitter le mode plein écran. #}
                 <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
                     <i class="fas fa-expand"></i>
                 </button>
             {% else %}
+                {# Le bouton de déconnexion n'est affiché que sur l'application. #}
                 <button class="btn float-end" title="{% trans "Log out" %}">
                     <i class="fas fa-sign-out-alt"></i>
                 </button>
             {% endif %}
+            {# On affiche le bouton d'installation uniquement dans le cas où l'application est installable sur l'écran d'accueil. #}
             <button class="btn float-end d-none" type="button" id="install-app-home-screen" title="{% trans "Install app on home screen" %}">
                 <i class="fas fa-download"></i>
             </button>
@@ -69,8 +86,12 @@
             {% endif %}
         </h3>
     </div>
+
+    {# Contenu de la carte, contenant la liste des messages. La liste des messages est affichée à l'envers pour avoir un scroll plus cohérent. #}
     <div class="card-body d-flex flex-column-reverse flex-grow-0 overflow-y-scroll" id="chat-messages">
+        {# Correspond à la liste des messages à afficher. #}
         <ul class="list-group list-group-flush" id="message-list"></ul>
+        {# S'il y a des messages à récupérer, on affiche un lien qui permet de récupérer les anciens messages. #}
         <div class="text-center d-none" id="fetch-previous-messages">
             <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
                 {% trans "Fetch previous messages…" %}
@@ -78,12 +99,16 @@
             <hr>
         </div>
     </div>
+    
+    {# Pied de la carte, contenant le formulaire pour envoyer un message. #}
     <div class="card-footer mt-auto">
+        {# Lorsqu'on souhaite envoyer un message, on empêche le formulaire de s'envoyer et on envoie le message par websocket. #}
         <form onsubmit="event.preventDefault(); sendMessage()">
             <div class="input-group">
                 <label for="input-message" class="input-group-text">
                     <i class="fas fa-comment"></i>
                 </label>
+                {# Affichage du contrôleur de texte pour rédiger le message à envoyer. #}
                 <input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autofocus autocomplete="off">
                 <button class="input-group-text btn btn-success" type="submit">
                     <i class="fas fa-paper-plane"></i>
@@ -94,6 +119,8 @@
 </div>
 
 <script>
+    {# Récupération de l'utilisateur⋅rice courant⋅e afin de pouvoir effectuer des tests plus tard. #}
     const USER_ID = {{ request.user.id }}
+    {# Récupération du statut administrateur⋅rice de l'utilisateur⋅rice connecté⋅e afin de pouvoir effectuer des tests plus tard. #}
     const IS_ADMIN = {{ request.user.registration.is_admin|yesno:"true,false" }}
 </script>

chat/templates/chat/fullscreen.html

@@ -7,9 +7,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>
-        Chat du TFJM²
+        {% trans "TFJM² Chat" %}
     </title>
-    <meta name="description" content="Chat du TFJM²">
+    <meta name="description" content="{% trans "TFJM² Chat" %}">
 
     {# Favicon #}
     <link rel="shortcut icon" href="{% static "favicon.ico" %}">
@@ -23,12 +23,15 @@
     {# Bootstrap JavaScript #}
     <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
 
+    {# Webmanifest PWA permettant l'installation de l'application sur un écran d'accueil, pour navigateurs supportés #}
     <link rel="manifest" href="{% static "chat.webmanifest" %}">
 </head>
 <body class="d-flex w-100 h-100 flex-column">
 {% include "chat/content.html" with fullscreen=True %}
 
+{# Inclusion du script permettant de gérer le thème sombre et le thème clair #}
 <script src="{% static 'theme.js' %}"></script>
+{# Inclusion du script gérant le chat #}
 <script src="{% static 'chat.js' %}"></script>
 </body>
 </html>

chat/templates/chat/login.html

@@ -7,9 +7,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>
-        Chat du TFJM² - {% trans "Log in" %}
+        {% trans "TFJM² Chat" %} - {% trans "Log in" %}
     </title>
-    <meta name="description" content="Chat du TFJM²">
+    <meta name="description" content="{% trans "TFJM² Chat" %}">
 
     {# Favicon #}
     <link rel="shortcut icon" href="{% static "favicon.ico" %}">
@@ -23,6 +23,7 @@
     {# Bootstrap JavaScript #}
     <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
 
+    {# Webmanifest PWA permettant l'installation de l'application sur un écran d'accueil, pour navigateurs supportés #}
     <link rel="manifest" href="{% static "chat.webmanifest" %}">
 </head>
 <body class="d-flex w-100 h-100 flex-column">
@@ -31,6 +32,7 @@
         {% include "registration/includes/login.html" %}
     </div>
 
+{# Inclusion du script permettant de gérer le thème sombre et le thème clair #}
 <script src="{% static 'theme.js' %}"></script>
 </body>
 </html>