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]>
2026-08-07 20:51:07 -04:00
parent 15bfebf4fc
commit 09453199b8
16 changed files with 180 additions and 40 deletions
@@ -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 %}
@@ -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 %}
@@ -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>
@@ -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 %}
@@ -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 %}
@@ -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 %}
@@ -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>
@@ -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>
@@ -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>
@@ -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">