From 589c84b2032c5612bbed60d1c531a3dd7a782588 Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Fri, 4 Sep 2026 12:02:30 +0200
Subject: [PATCH] fix(notifications): escape translation strings in
 notification_settings JS

---
 .../notifications/notification_settings.html  | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/loko/notifications/templates/notifications/notification_settings.html b/loko/notifications/templates/notifications/notification_settings.html
index 8f82ba2..89d1cf5 100644
--- a/loko/notifications/templates/notifications/notification_settings.html
+++ b/loko/notifications/templates/notifications/notification_settings.html
@@ -100,7 +100,7 @@
                         <form method="post" action="{% url 'notifications:api_webpush_delete_device' sub.pk %}">
                             {% csrf_token %}
                             {% if is_mobile %}<input type="hidden" name="from" value="mobile">{% endif %}
-                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle p-2 d-flex align-items-center justify-content-center" style="width:34px; height:34px;" title="{% translate 'Retirer cet appareil' %}" onclick="return confirm('{% translate 'Voulez-vous retirer cet appareil des notifications push ?' %}');">
+                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle p-2 d-flex align-items-center justify-content-center" style="width:34px; height:34px;" title="{% translate 'Retirer cet appareil' %}" onclick="return confirm('{% filter escapejs %}{% translate "Voulez-vous retirer cet appareil des notifications push ?" %}{% endfilter %}');">
                                 <i class="bi bi-trash"></i>
                             </button>
                         </form>
@@ -213,6 +213,7 @@
 <script src="{% static 'notifications/webpush.js' %}"></script>
 <script>
 document.addEventListener('DOMContentLoaded', async function () {
+    const _gettext = window.gettext || function(s) { return s; };
     const badge = document.getElementById('push-status-badge');
     const unsupportedAlert = document.getElementById('push-unsupported-alert');
     const deniedAlert = document.getElementById('push-denied-alert');
@@ -224,7 +225,7 @@ document.addEventListener('DOMContentLoaded', async function () {
 
     if (!window.LokoWebPush || !window.LokoWebPush.isSupported()) {
         badge.className = 'badge rounded-pill bg-warning-subtle text-warning-emphasis px-3 py-2';
-        badge.innerHTML = '<i class="bi bi-x-circle me-1"></i>{% translate "Non supporté" %}';
+        badge.innerHTML = '<i class="bi bi-x-circle me-1"></i>' + _gettext('Non supporté');
         unsupportedAlert.classList.remove('d-none');
         toggleBtn.classList.add('disabled');
         return;
@@ -234,10 +235,10 @@ document.addEventListener('DOMContentLoaded', async function () {
         const perm = window.LokoWebPush.getPermissionState();
         if (perm === 'denied') {
             badge.className = 'badge rounded-pill bg-danger-subtle text-danger px-3 py-2';
-            badge.innerHTML = '<i class="bi bi-shield-lock-fill me-1"></i>{% translate "Bloqué par le navigateur" %}';
+            badge.innerHTML = '<i class="bi bi-shield-lock-fill me-1"></i>' + _gettext('Bloqué par le navigateur');
             deniedAlert.classList.remove('d-none');
             toggleBtn.className = 'btn btn-secondary rounded-pill px-4 btn-sm disabled';
-            toggleBtnText.textContent = '{% translate "Permissions bloquées" %}';
+            toggleBtnText.textContent = _gettext('Permissions bloquées');
             testBtn.classList.add('d-none');
             return;
         }
@@ -245,19 +246,19 @@ document.addEventListener('DOMContentLoaded', async function () {
         const sub = await window.LokoWebPush.getExistingSubscription();
         if (sub) {
             badge.className = 'badge rounded-pill bg-success-subtle text-success px-3 py-2';
-            badge.innerHTML = '<i class="bi bi-check-circle-fill me-1"></i>{% translate "Actif sur cet appareil" %}';
+            badge.innerHTML = '<i class="bi bi-check-circle-fill me-1"></i>' + _gettext('Actif sur cet appareil');
             toggleBtn.className = 'btn btn-outline-danger rounded-pill px-4 btn-sm d-flex align-items-center gap-2';
-            toggleBtn.innerHTML = '<i class="bi bi-bell-slash"></i><span>{% translate "Désactiver sur cet appareil" %}</span>';
-            toggleTitle.textContent = '{% translate "Notifications actives sur cet appareil" %}';
-            toggleDesc.textContent = '{% translate "Cet appareil reçoit les alertes système instantanées." %}';
+            toggleBtn.innerHTML = '<i class="bi bi-bell-slash"></i><span>' + _gettext('Désactiver sur cet appareil') + '</span>';
+            toggleTitle.textContent = _gettext('Notifications actives sur cet appareil');
+            toggleDesc.textContent = _gettext('Cet appareil reçoit les alertes système instantanées.');
             testBtn.classList.remove('d-none');
         } else {
             badge.className = 'badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2';
-            badge.innerHTML = '<i class="bi bi-bell-slash me-1"></i>{% translate "Désactivé sur cet appareil" %}';
+            badge.innerHTML = '<i class="bi bi-bell-slash me-1"></i>' + _gettext('Désactivé sur cet appareil');
             toggleBtn.className = 'btn btn-primary rounded-pill px-4 btn-sm d-flex align-items-center gap-2';
-            toggleBtn.innerHTML = '<i class="bi bi-bell-fill"></i><span>{% translate "Activer sur cet appareil" %}</span>';
-            toggleTitle.textContent = '{% translate "Activer les notifications sur cet appareil" %}';
-            toggleDesc.textContent = '{% translate "Cliquez pour autoriser et enregistrer cet appareil." %}';
+            toggleBtn.innerHTML = '<i class="bi bi-bell-fill"></i><span>' + _gettext('Activer sur cet appareil') + '</span>';
+            toggleTitle.textContent = _gettext('Activer les notifications sur cet appareil');
+            toggleDesc.textContent = _gettext('Cliquez pour autoriser et enregistrer cet appareil.');
             testBtn.classList.add('d-none');
         }
     }
@@ -275,7 +276,7 @@ document.addEventListener('DOMContentLoaded', async function () {
             }
             window.location.reload();
         } catch (err) {
-            alert(err.message || '{% translate "Erreur lors de la modification des notifications." %}');
+            alert(err.message || _gettext('Erreur lors de la modification des notifications.'));
             await updateUiState();
         } finally {
             toggleBtn.disabled = false;
@@ -285,12 +286,12 @@ document.addEventListener('DOMContentLoaded', async function () {
     testBtn.addEventListener('click', async function () {
         testBtn.disabled = true;
         const originalHtml = testBtn.innerHTML;
-        testBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{% translate "Envoi..." %}';
+        testBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>' + _gettext('Envoi...');
         try {
             const res = await window.LokoWebPush.sendTestNotification();
             // L'alerte native de l'OS va s'afficher via le service worker
         } catch (err) {
-            alert(err.message || '{% translate "Erreur lors de l\'envoi du test." %}');
+            alert(err.message || _gettext("Erreur lors de l'envoi du test."));
         } finally {
             testBtn.disabled = false;
             testBtn.innerHTML = originalHtml;
@@ -299,3 +300,4 @@ document.addEventListener('DOMContentLoaded', async function () {
 });
 </script>
 {% endblock content %}
+