refactor(csp): migrer dix gabarits vers les comportements declaratifs

OPS-010, suite. 76 gestionnaires en ligne -> 52, dans 5 gabarits au lieu de
15. Le cliquet de tests/test_csp.py est abaisse en consequence.

Six motifs recurrents, generalises dans main.js plutot que traites un a un
  data-action        clic, resolu par un ecouteur delegue
  data-change        changement -- attribut distinct du clic, sans quoi un
                     <select> declencherait son gestionnaire des le clic
                     qui l'ouvre
  data-confirm       confirmation avant un envoi destructeur, en
                     remplacement de onsubmit="return confirm(...)". Le
                     texte reste dans le markup, donc traduisible.
  data-navigate      navigation sur selection, {value} etant encode
  remove-element     suppression d'un ancetre designe par data-remove
  history-back       retour arriere

registerActions()
  Les fonctions propres a une page vivent dans son bloc de script et ne
  peuvent donc pas figurer dans la table globale. Chaque page declare les
  siennes, l'ecouteur delegue reste unique.

Cas particulier, coach_availability
  Le gestionnaire y etait construit dans une chaine JavaScript, au moment
  de generer la grille de creneaux. Le markup portait deja data-day et
  data-time : toggleSlot lit desormais ses arguments depuis l'element, ce
  qui supprime a la fois l'attribut en ligne et la concatenation.

Gabarits migres : my_teams, register, users, view_user, one_on_one,
coach_availability, profile, team_matches, notes, contracts.

Restent, par ordre decroissant : match_form 13, calendar 11, teams 11,
evaluate_player 9, view_tryout 8.

Syntaxe JavaScript de chaque bloc modifie verifiee par node --check.

A noter : la traduction de ces dix gabarits reste a faire. Seules les deux
chaines devenues visibles dans le markup au cours de cette migration -- les
messages de confirmation de suppression -- sont balisees et traduites.

192 tests.

Co-Authored-By: Claude Opus 5 <[email protected]>

app/static/js/main.js

@@ -481,15 +481,79 @@ const DATA_ACTIONS = {
         event.preventDefault();
         history.back();
     },
+    // Removes the nearest ancestor matching data-remove, or the parent.
+    'remove-element': function (element) {
+        const selector = element.getAttribute('data-remove');
+        const target = selector ? element.closest(selector) : element.parentElement;
+        if (target) {
+            target.remove();
+        }
+    },
 };
 
-document.addEventListener('click', function (event) {
+/**
-    const trigger = event.target.closest('[data-action]');
+ * Register behaviours defined by a single page.
+ *
+ * Page-local functions live in that page's script block, so they cannot be
+ * listed in DATA_ACTIONS above. Each page declares its own:
+ *
+ *     registerActions({ 'clear-availability': clearAllAvailability });
+ *
+ * @param {Object} map - action name to handler(element, event).
+ */
+function registerActions(map) {
+    Object.assign(DATA_ACTIONS, map);
+}
+
+function dispatchAction(attribute, event) {
+    const trigger = event.target.closest('[' + attribute + ']');
     if (!trigger) {
         return;
     }
-    const handler = DATA_ACTIONS[trigger.getAttribute('data-action')];
+    const handler = DATA_ACTIONS[trigger.getAttribute(attribute)];
     if (handler) {
         handler(trigger, event);
     }
+}
+
+document.addEventListener('click', function (event) {
+    dispatchAction('data-action', event);
+});
+
+// Separate attribute rather than one shared with click: a <select> would
+// otherwise fire its handler on the click that opens it.
+document.addEventListener('change', function (event) {
+    dispatchAction('data-change', event);
+});
+
+/**
+ * Confirmation before a destructive submit.
+ *
+ *     <form data-confirm="Delete this match?">
+ *
+ * Replaces onsubmit="return confirm(...)", and keeps the wording in the
+ * markup where it can be translated.
+ */
+document.addEventListener('submit', function (event) {
+    const form = event.target.closest('[data-confirm]');
+    if (form && !window.confirm(form.getAttribute('data-confirm'))) {
+        event.preventDefault();
+    }
+});
+
+/**
+ * Navigate on selection.
+ *
+ *     <select data-navigate="/team-matches/{value}/create">
+ *
+ * {value} is replaced by the chosen option, URL-encoded. An empty
+ * selection navigates nowhere.
+ */
+document.addEventListener('change', function (event) {
+    const select = event.target.closest('[data-navigate]');
+    if (!select || !select.value) {
+        return;
+    }
+    window.location.href = select.getAttribute('data-navigate')
+        .replace('{value}', encodeURIComponent(select.value));
 });

app/templates/pages/coach_availability.html

@@ -15,7 +15,7 @@
         </div>
         
         <div class="form-actions mt-4">
-            <button type="button" class="btn btn-secondary" onclick="clearAllAvailability()">
+            <button type="button" class="btn btn-secondary" data-action="clear-availability">
                 <i class="fas fa-trash"></i> Clear All
             </button>
         </div>
@@ -134,7 +134,7 @@ function renderGrid() {
         TIME_SLOTS.forEach(slot => {
             const isSelected = selectedSlots[dayIndex] && selectedSlots[dayIndex].includes(slot.time);
             const cssClass = isSelected ? 'time-slot selected' : 'time-slot';
-            html += '<div class="' + cssClass + '" data-day="' + dayIndex + '" data-time="' + slot.time + '" onclick="toggleSlot(' + dayIndex + ', \'' + slot.time + '\', this)">' + slot.display + '</div>';
+            html += '<div class="' + cssClass + '" data-day="' + dayIndex + '" data-time="' + slot.time + '" data-action="toggle-slot">' + slot.display + '</div>';
         });
         
         html += '</div>';
@@ -143,7 +143,9 @@ function renderGrid() {
     grid.innerHTML = html;
 }
 
-function toggleSlot(dayOfWeek, timeStr, element) {
+function toggleSlot(element) {
+    const dayOfWeek = Number(element.getAttribute('data-day'));
+    const timeStr = element.getAttribute('data-time');
     if (!selectedSlots[dayOfWeek]) {
         selectedSlots[dayOfWeek] = [];
     }
@@ -203,7 +205,7 @@ function flash(message, type) {
     const flashContainer = document.querySelector('.flash-messages');
     const alert = document.createElement('div');
     alert.className = 'alert alert-' + type + ' alert-dismissible';
-    alert.innerHTML = '<span>' + message + '</span><button type="button" class="alert-close" onclick="this.parentElement.remove()">&times;</button>';
+    alert.innerHTML = '<span>' + message + '</span><button type="button" class="alert-close" data-action="remove-element">&times;</button>';
     flashContainer.appendChild(alert);
 }
 
@@ -215,5 +217,13 @@ document.addEventListener('click', function(e) {
         saveTimeout = setTimeout(saveAvailability, 1000);
     }
 });
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'clear-availability': clearAllAvailability,
+    'toggle-slot': toggleSlot,
+});
 </script>
 {% endblock %}

app/templates/pages/contracts.html

@@ -55,7 +55,7 @@
                                 </a>
                                 {% endif %}
                                 {% if current_user.role == 'player' and contract.status == 'pending' %}
-                                <button class="btn btn-sm btn-warning" onclick="showUploadSignedForm({{ contract.id }})" title="Upload Signed Contract">
+                                <button class="btn btn-sm btn-warning" data-action="show-upload-signed" data-contract-id="{{ contract.id }}" title="Upload Signed Contract">
                                     <i class="fas fa-upload"></i> Return Signed
                                 </button>
                                 {% endif %}
@@ -83,11 +83,11 @@
 {% if current_user.role == 'player' %}
 <!-- Upload Signed Contract Modal -->
 <div id="uploadSignedModal" class="modal hidden">
-    <div class="modal-backdrop" onclick="hideUploadSignedForm()"></div>
+    <div class="modal-backdrop" data-action="hide-upload-signed"></div>
     <div class="modal-content">
         <div class="modal-header">
             <h3>Upload Signed Contract</h3>
-            <button class="modal-close" onclick="hideUploadSignedForm()">&times;</button>
+            <button class="modal-close" data-action="hide-upload-signed">&times;</button>
         </div>
         <div class="modal-body">
             <form id="uploadSignedForm" method="POST" enctype="multipart/form-data" class="form">
@@ -98,7 +98,7 @@
                     <small class="form-text text-muted">Accepted formats: PDF, DOC, DOCX, JPG, PNG</small>
                 </div>
                 <div class="form-actions">
-                    <button type="button" class="btn btn-secondary" onclick="hideUploadSignedForm()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="hide-upload-signed">Cancel</button>
                     <button type="submit" class="btn btn-primary">Upload Signed Contract</button>
                 </div>
             </form>
@@ -116,5 +116,15 @@ function showUploadSignedForm(contractId) {
 function hideUploadSignedForm() {
     document.getElementById('uploadSignedModal').classList.add('hidden');
 }
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'show-upload-signed': function (element) {
+        showUploadSignedForm(element.getAttribute('data-contract-id'));
+    },
+    'hide-upload-signed': hideUploadSignedForm,
+});
 </script>
 {% endblock %}

app/templates/pages/my_teams.html

@@ -137,7 +137,7 @@
                                 <button class="btn btn-sm {% if mdata.is_confirmed %}btn-success{% else %}btn-outline{% endif %} presence-toggle-btn"
                                         data-match-id="{{ tm.id }}"
                                         data-participant-id="{{ mdata.participant_id }}"
-                                        onclick="togglePresence(this)">
+                                        data-action="toggle-presence">
                                     {% if mdata.is_confirmed %}✅ Confirmed{% else %}Confirm{% endif %}
                                 </button>
                                 {% else %}
@@ -198,6 +198,13 @@ function togglePresence(btn) {
         console.error('Error:', error);
     });
 }
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'toggle-presence': togglePresence,
+});
 </script>
 
 <style>

app/templates/pages/notes.html

@@ -151,7 +151,7 @@
                                     <i class="fas fa-check"></i> Accept
                                 </button>
                             </form>
-                            <button type="button" class="btn btn-sm btn-danger" onclick="showRejectModal({{ req.id }})" title="Refuse">
+                            <button type="button" class="btn btn-sm btn-danger" data-action="show-reject-modal" data-request-id="{{ req.id }}" title="Refuse">
                                 <i class="fas fa-times"></i> Refuse
                             </button>
                             {% elif req.status == 'rejected' and req.coach_rejection_message %}
@@ -171,11 +171,11 @@
 
 <!-- Reject Modal -->
 <div id="rejectModal" class="modal" style="display:none;">
-    <div class="modal-overlay" onclick="hideRejectModal()"></div>
+    <div class="modal-overlay" data-action="hide-reject-modal"></div>
     <div class="modal-content">
         <div class="modal-header">
             <h4><i class="fas fa-times-circle"></i> Reject One on One Request</h4>
-            <button type="button" class="modal-close" onclick="hideRejectModal()">&times;</button>
+            <button type="button" class="modal-close" data-action="hide-reject-modal">&times;</button>
         </div>
         <form id="rejectForm" method="POST" action="">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
@@ -186,7 +186,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" onclick="hideRejectModal()">Cancel</button>
+                <button type="button" class="btn btn-secondary" data-action="hide-reject-modal">Cancel</button>
                 <button type="submit" class="btn btn-danger">Reject Request</button>
             </div>
         </form>
@@ -272,5 +272,15 @@ function hideRejectModal() {
     document.getElementById('rejectModal').style.display = 'none';
     document.getElementById('rejection_reason').value = '';
 }
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'show-reject-modal': function (element) {
+        showRejectModal(element.getAttribute('data-request-id'));
+    },
+    'hide-reject-modal': hideRejectModal,
+});
 </script>
 {% endblock %}

app/templates/pages/one_on_one.html

@@ -130,7 +130,7 @@
                 <div class="form-row">
                     <div class="form-group">
                         <label for="date">Select Date</label>
-                        <select name="date" id="date" class="form-select" onchange="updateTimeSlots()" required>
+                        <select name="date" id="date" class="form-select" data-change="update-time-slots" required>
                             {% for d in dates %}
                             <option value="{{ d.value }}" data-day="{{ d.day_of_week }}">{{ d.display }}</option>
                             {% endfor %}
@@ -138,7 +138,7 @@
                     </div>
                     <div class="form-group">
                         <label for="start_time">Start Time</label>
-                        <select name="start_time" id="start_time" class="form-select" onchange="updateEndTimeOptions()" required>
+                        <select name="start_time" id="start_time" class="form-select" data-change="update-end-times" required>
                             <option value="">-- Select Date First --</option>
                         </select>
                     </div>
@@ -305,5 +305,13 @@ function updateEndTimeOptions() {
         }
     });
 }
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'update-time-slots': updateTimeSlots,
+    'update-end-times': updateEndTimeOptions,
+});
 </script>
 {% endblock %}

app/templates/pages/profile.html

@@ -193,10 +193,10 @@
                 <p class="text-muted">Loading...</p>
             </div>
             <div class="form-actions">
-                <button type="button" class="btn btn-primary" onclick="saveDisponibilities()">
+                <button type="button" class="btn btn-primary" data-action="save-disponibilities">
                     <i class="fas fa-save"></i> Save Disponibilities
                 </button>
-                <button type="button" class="btn btn-secondary" onclick="clearDisponibilities()">
+                <button type="button" class="btn btn-secondary" data-action="clear-disponibilities">
                     <i class="fas fa-trash"></i> Clear All
                 </button>
             </div>
@@ -216,7 +216,7 @@
                 <p class="text-muted">Loading availability grid...</p>
             </div>
             <div class="form-actions mt-3">
-                <button type="button" class="btn btn-secondary" onclick="clearAllAvailability()">
+                <button type="button" class="btn btn-secondary" data-action="clear-availability">
                     <i class="fas fa-trash"></i> Clear All
                 </button>
             </div>
@@ -599,6 +599,15 @@ function clearDisponibilities() {
 document.addEventListener('DOMContentLoaded', function() {
     renderDisponibilityGrid();
 });
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'save-disponibilities': saveDisponibilities,
+    'clear-disponibilities': clearDisponibilities,
+    'clear-availability': clearAllAvailability,
+});
 </script>
 {% endif %}
 {% endblock %}

app/templates/pages/register.html

@@ -93,7 +93,7 @@
             <label class="checkbox-label">
                 <input type="checkbox" name="games" value="{{ game }}"
                        {% if is_checked %}checked{% endif %}
-                       onchange="toggleGamertagInput(this)">
+                       data-change="toggle-gamertag">
                 <span>{{ game }}</span>
             </label>
             {% endfor %}
@@ -172,6 +172,13 @@ document.addEventListener('DOMContentLoaded', function() {
         toggleGamertagInput(checkbox);
     });
 });
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'toggle-gamertag': toggleGamertagInput,
+});
 </script>
 
 <style>

app/templates/pages/team_matches.html

@@ -6,7 +6,7 @@
 {% block header_actions %}
 {% if teams %}
 <div class="header-actions">
-    <select id="teamSelect" class="form-select" style="width:200px;" onchange="window.location.href='/team-matches/' + this.value + '/create'">
+    <select id="teamSelect" class="form-select" style="width:200px;" data-navigate="/team-matches/{value}/create">
         <option value="">+ Schedule Match</option>
         {% for t in teams %}
         <option value="{{ t.id }}">{{ t.name }}</option>
@@ -97,7 +97,7 @@
                     <a href="{{ url_for('team_matches.edit_match', match_id=m.id) }}" class="btn btn-sm btn-outline" title="Edit Match">
                         <i class="fas fa-edit"></i>
                     </a>
-                    <form method="POST" action="{{ url_for('team_matches.delete_match', match_id=m.id) }}" class="inline-form" onsubmit="return confirm('Delete this match?')">
+                    <form method="POST" action="{{ url_for('team_matches.delete_match', match_id=m.id) }}" class="inline-form" data-confirm="{{ _('Delete this match?') }}">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                         <button type="submit" class="btn btn-sm btn-danger" title="Delete Match">
                             <i class="fas fa-trash"></i>
@@ -111,7 +111,7 @@
                     <button class="btn btn-sm {% if p.is_confirmed %}btn-success{% else %}btn-outline{% endif %} presence-toggle-btn"
                             data-match-id="{{ m.id }}"
                             data-participant-id="{{ p.id }}"
-                            onclick="togglePresence(this)">
+                            data-action="toggle-presence">
                         {% if p.is_confirmed %}✅ Confirmed{% else %}Confirm{% endif %}
                     </button>
                     {% endif %}
@@ -132,7 +132,7 @@
             <p class="text-muted">Regular season matches have not been scheduled yet.</p>
             {% if teams %}
             <div class="mt-3">
-                <select id="teamSelectEmpty" class="form-select" style="width:220px; display:inline;" onchange="window.location.href='/team-matches/' + this.value + '/create'">
+                <select id="teamSelectEmpty" class="form-select" style="width:220px; display:inline;" data-navigate="/team-matches/{value}/create">
                     <option value="">-- Schedule a Match --</option>
                     {% for t in teams %}
                     <option value="{{ t.id }}">{{ t.name }}</option>
@@ -175,6 +175,13 @@ function togglePresence(btn) {
         console.error('Error:', error);
     });
 }
+
+// Behaviours are declared in the markup with data-action / data-change and
+// dispatched by the delegated listener in main.js. This replaces inline
+// onclick attributes, which no CSP nonce is able to authorise.
+registerActions({
+    'toggle-presence': togglePresence,
+});
 </script>
 
 <style>

app/templates/pages/users.html

@@ -50,7 +50,7 @@
                                 <i class="fas fa-edit"></i> Edit
                             </a>
                             {% if u.id != current_user.id %}
-                            <form method="POST" action="{{ url_for('users.delete_user', user_id=u.id) }}" class="inline-form" onsubmit="return confirm('Delete {{ u.username }}? This cannot be undone.');">
+                            <form method="POST" action="{{ url_for('users.delete_user', user_id=u.id) }}" class="inline-form" data-confirm="{{ _('Delete %(name)s? This cannot be undone.', name=u.username) }}">
                                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                 <button type="submit" class="btn btn-sm btn-danger">
                                     <i class="fas fa-trash"></i>

app/templates/pages/view_user.html

@@ -1,7 +1,7 @@
 {% extends "layouts/base.html" %}
 {% block title %}{{ profile_user.username }} - TryoutPro{% endblock %}
 {% block page_title %}{{ profile_user.username }}{% endblock %}
-{% block breadcrumb %}<span class="breadcrumb">Home / <a href="#" onclick="history.back()">Back</a> / {{ profile_user.username }}</span>{% endblock %}
+{% block breadcrumb %}<span class="breadcrumb">Home / <a href="#" data-action="history-back">Back</a> / {{ profile_user.username }}</span>{% endblock %}
 
 {% block content %}
 <div class="card mb-4">

app/translations/en/LC_MESSAGES/messages.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: team-tryouts VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-08-07 20:42-0400\n"
+"POT-Creation-Date: 2026-08-07 20:50-0400\n"
 "PO-Revision-Date: 2026-08-07 20:22-0400\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: en\n"
@@ -316,3 +316,12 @@ msgstr "Don't have an account?"
 msgid "Register here"
 msgstr "Register here"
 
+#: app/templates/pages/team_matches.html:100
+msgid "Delete this match?"
+msgstr "Delete this match?"
+
+#: app/templates/pages/users.html:53
+#, python-format
+msgid "Delete %(name)s? This cannot be undone."
+msgstr "Delete %(name)s? This cannot be undone."
+

app/translations/fr/LC_MESSAGES/messages.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: team-tryouts VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2026-08-07 20:42-0400\n"
+"POT-Creation-Date: 2026-08-07 20:50-0400\n"
 "PO-Revision-Date: 2026-08-07 20:22-0400\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -316,3 +316,12 @@ msgstr "Vous n'avez pas de compte ?"
 msgid "Register here"
 msgstr "Inscrivez-vous ici"
 
+#: app/templates/pages/team_matches.html:100
+msgid "Delete this match?"
+msgstr "Supprimer ce match ?"
+
+#: app/templates/pages/users.html:53
+#, python-format
+msgid "Delete %(name)s? This cannot be undone."
+msgstr "Supprimer %(name)s ? Cette action est irréversible."
+

tests/test_csp.py

@@ -40,16 +40,6 @@ HANDLER_BUDGET = {
     'pages/teams.html': 11,
     'pages/evaluate_player.html': 9,
     'pages/view_tryout.html': 8,
-    'pages/contracts.html': 4,
-    'pages/notes.html': 4,
-    'pages/team_matches.html': 4,
-    'pages/coach_availability.html': 3,
-    'pages/profile.html': 3,
-    'pages/one_on_one.html': 2,
-    'pages/my_teams.html': 1,
-    'pages/register.html': 1,
-    'pages/users.html': 1,
-    'pages/view_user.html': 1,
 }
 
 #: What the ratchet is counting down to.