Add feature to install chat on the home screen

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

chat/static/chat.js

@@ -251,4 +251,25 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     setupSocket()
+
+    let deferredPrompt = null
+
+    window.addEventListener("beforeinstallprompt", (e) => {
+        e.preventDefault()
+        deferredPrompt = e
+        let btn = document.getElementById('install-app-home-screen')
+        let alert = document.getElementById('alert-download-chat-app')
+        btn.classList.remove('d-none')
+        alert.classList.remove('d-none')
+        btn.onclick = function () {
+            deferredPrompt.prompt()
+            deferredPrompt.userChoice.then((choiceResult) => {
+                if (choiceResult.outcome === 'accepted') {
+                    deferredPrompt = null
+                    btn.classList.add('d-none')
+                    alert.classList.add('d-none')
+                }
+            })
+        }
+    })
 })

chat/static/chat.webmanifest

@@ -0,0 +1,21 @@
+{
+    "background_color": "white",
+    "description": "Chat pour le TFJM²",
+    "display": "standalone",
+    "icons": [
+        {
+            "src": "tfjm-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "tfjm-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "name": "Chat TFJM²",
+    "short_name": "Chat TFJM²",
+    "start_url": "/chat/fullscreen/",
+    "theme_color": "black"
+}

chat/templates/chat/chat.html

@@ -3,59 +3,14 @@
 {% load static %}
 {% load i18n %}
 
+{% block extracss %}
+    <link rel="manifest" href="{% static "chat.webmanifest" %}">
+{% endblock %}
+
 {% block content-title %}{% endblock %}
 
 {% block content %}
-    <noscript>
+    {% include "chat/content.html" %}
-        {% trans "JavaScript must be enabled on your browser to access chat." %}
-    </noscript>
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
-        <div class="offcanvas-header">
-            <h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body">
-            <ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
-        </div>
-    </div>
-
-    <div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
-         style="height: 95vh" id="chat-container">
-        <div class="card-header">
-            <h3>
-                <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>
-                <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
-                    <i class="fas fa-expand"></i>
-                </button>
-            </h3>
-        </div>
-        <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
-            <div class="text-center d-none" id="fetch-previous-messages">
-                <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
-                    {% trans "Fetch previous messages…" %}
-                </a>
-                <hr>
-            </div>
-            <ul class="list-group list-group-flush" id="message-list"></ul>
-        </div>
-        <div class="card-footer mt-auto">
-            <form onsubmit="event.preventDefault(); sendMessage()">
-                <div class="input-group">
-                    <label for="input-message" class="input-group-text">
-                        <i class="fas fa-comment"></i>
-                    </label>
-                    <input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
-                    <button class="input-group-text btn btn-success" type="submit">
-                        <i class="fas fa-paper-plane"></i>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
 {% endblock %}
 
 {% block extrajavascript %}

chat/templates/chat/content.html

@@ -0,0 +1,61 @@
+{% load i18n %}
+
+<noscript>
+    {% trans "JavaScript must be enabled on your browser to access chat." %}
+</noscript>
+<div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
+    <div class="offcanvas-header">
+        <h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+        <ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
+    </div>
+</div>
+
+<div class="alert alert-info d-none" id="alert-download-chat-app">
+    {% trans "You can install a shortcut to the chat on your home screen using the download button on the header." %}
+</div>
+
+<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>
+            <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>
+            {% if not fullscreen %}
+                <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
+                    <i class="fas fa-expand"></i>
+                </button>
+            {% endif %}
+            <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>
+        </h3>
+    </div>
+    <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
+        <div class="text-center d-none" id="fetch-previous-messages">
+            <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
+                {% trans "Fetch previous messages…" %}
+            </a>
+            <hr>
+        </div>
+        <ul class="list-group list-group-flush" id="message-list"></ul>
+    </div>
+    <div class="card-footer mt-auto">
+        <form onsubmit="event.preventDefault(); sendMessage()">
+            <div class="input-group">
+                <label for="input-message" class="input-group-text">
+                    <i class="fas fa-comment"></i>
+                </label>
+                <input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
+                <button class="input-group-text btn btn-success" type="submit">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

chat/templates/chat/fullscreen.html

@@ -0,0 +1,34 @@
+{% load i18n static %}
+
+<!DOCTYPE html>
+{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
+<html lang="{{ LANGUAGE_CODE|default:"fr" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>
+        Chat du TFJM²
+    </title>
+    <meta name="description" content="Chat du TFJM²">
+
+    {# Favicon #}
+    <link rel="shortcut icon" href="{% static "favicon.ico" %}">
+    <meta name="theme-color" content="#ffffff">
+
+    {# Bootstrap CSS #}
+    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
+    <link rel="stylesheet" href="{% static 'fontawesome/css/all.css' %}">
+    <link rel="stylesheet" href="{% static 'fontawesome/css/v4-shims.css' %}">
+
+    {# Bootstrap JavaScript #}
+    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+
+    <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 %}
+
+<script src="{% static 'theme.js' %}"></script>
+<script src="{% static 'chat.js' %}"></script>
+</body>
+</html>

chat/urls.py

@@ -2,6 +2,7 @@
 # SPDX-License-Identifier: GPL-3.0-or-later
 
 from django.urls import path
+from django.views.generic import TemplateView
 
 from .views import ChatView
 
@@ -10,4 +11,5 @@ app_name = 'chat'
 
 urlpatterns = [
     path('', ChatView.as_view(), name='chat'),
+    path('fullscreen/', TemplateView.as_view(template_name="chat/fullscreen.html"), name='fullscreen'),
 ]

locale/fr/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: TFJM\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-04-27 16:15+0200\n"
+"POT-Creation-Date: 2024-04-27 18:49+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: Emmy D'Anello <emmy.danello@animath.fr>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,23 +143,35 @@ msgstr "message"
 msgid "messages"
 msgstr "messages"
 
-#: chat/templates/chat/chat.html:10
+#: chat/templates/chat/chat.html:14
 msgid "JavaScript must be enabled on your browser to access chat."
 msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat."
 
-#: chat/templates/chat/chat.html:14
+#: chat/templates/chat/chat.html:18
 msgid "Chat channels"
 msgstr "Canaux de chat"
 
-#: chat/templates/chat/chat.html:31
+#: chat/templates/chat/chat.html:27
+msgid ""
+"You can install a shortcut to the chat on your home screen using the "
+"download button on the header."
+msgstr ""
+"Vous pouvez installer un raccourci vers le chat sur votre écran d'accueil en "
+"utilisant le bouton de téléchargement dans l'en-tête."
+
+#: chat/templates/chat/chat.html:40
 msgid "Toggle fullscreen mode"
 msgstr "Inverse le mode plein écran"
 
-#: chat/templates/chat/chat.html:39
+#: chat/templates/chat/chat.html:44
+msgid "Install app on home screen"
+msgstr "Installer l'application sur l'écran d'accueil"
+
+#: chat/templates/chat/chat.html:52
 msgid "Fetch previous messages…"
 msgstr "Récupérer les messages précédents…"
 
-#: chat/templates/chat/chat.html:51
+#: chat/templates/chat/chat.html:64
 msgid "Send message…"
 msgstr "Envoyer un message…"
 
@@ -3748,7 +3760,7 @@ msgstr "S'inscrire"
 msgid "My account"
 msgstr "Mon compte"
 
-#: tfjm/templates/navbar.html:115
+#: tfjm/templates/navbar.html:117
 msgid "Log out"
 msgstr "Déconnexion"
 

tfjm/templates/navbar.html

@@ -111,9 +111,12 @@
                             </a>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="{% url "logout" %}">
+                            <form action="{% url 'logout' %}" method="post">
+                                {% csrf_token %}
+                                <button class="dropdown-item">
                                     <i class="fas fa-sign-out-alt"></i> {% trans "Log out" %}
-                            </a>
+                                </button>
+                            </form>
                         </li>
                     </ul>
                 </li>