fix(notifications): escape translation strings in notification_settings JS

This commit is contained in:
kdeterme 2026-09-04 12:02:30 +02:00
parent 0ac214f459
commit 589c84b203

View file

@ -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 %}