Files
team-tryouts/app/templates/pages/teams.html
T
GGThedandClaude Opus 5 fcb58e8a17 feat(csp): retirer unsafe-inline de script-src
SEC-WEB-001 / OPS-010, ferme. C'est cette directive qui laissait s'executer
le XSS stocke de SEC-XSS-001 au lieu de le bloquer.

Les cinq derniers gabarits sont migres : match_form 13, calendar 11,
teams 11, evaluate_player 9, view_tryout 8. Total sur le chantier : 82
gestionnaires en ligne retires dans 17 gabarits. Il n'en reste aucun.

Deux motifs generiques de plus dans main.js
  data-mirror             affichage direct de la valeur d'un curseur.
                          evaluate_player repetait le meme
                          oninput="this.nextElementSibling.textContent = ..."
                          sur ses neuf curseurs de note.
  data-submit-on-change   remplace onchange="this.form.submit()"

Markup genere dans des chaines JavaScript
  match_form construisait sept gestionnaires par concatenation, en y
  injectant l'identifiant du joueur. Le markup portait deja data-player-id :
  returnToPool et assignToTeam lisent desormais leurs arguments depuis
  l'element clique. Cela supprime a la fois l'attribut en ligne et la
  concatenation qui l'alimentait. Meme motif que dans coach_availability.

Bascule
  CSP_ALLOW_INLINE_SCRIPT passe a false. script-src vaut maintenant
  'self' 'nonce-<aleatoire par requete>' https://cdn.jsdelivr.net.
  La variable d'environnement reste, comme issue de secours si un
  deploiement rencontrait un gestionnaire oublie -- mais la laisser active
  revient a renoncer a la protection.

Le cliquet devient une garde
  Le budget par gabarit est vide et les tests deviennent absolus : aucun
  gestionnaire en ligne, et tout bloc <script> inline doit porter son
  nonce. Sans nonce, un bloc n'est simplement pas execute, et rien dans les
  journaux ne le signale -- d'ou le test.

Verifications
  22 pages parcourues avec les trois roles : toutes rendent en 200, aucune
  ne contient de gestionnaire en ligne, et chaque bloc inline porte bien le
  nonce de sa propre reponse. Syntaxe JavaScript de chaque gabarit verifiee
  par node --check.

193 tests. Le dernier xfail de SEC-WEB-001 reussissait, le marqueur est
retire. Il n'en reste qu'un : SEC-AUTH-006, enumeration de comptes.

style-src conserve 'unsafe-inline' : les attributs style="" sont partout et
ne sont pas un vecteur XSS a eux seuls. Migration distincte, non prioritaire.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-07 21:03:31 -04:00

551 lines
22 KiB
HTML

{% extends "layouts/base.html" %}
{% block title %}Teams - TryoutPro{% endblock %}
{% block page_title %}Teams{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / Teams</span>{% endblock %}
{% block header_actions %}
{% if can_manage %}
<button class="btn btn-primary" data-action="show-create-form">
<i class="fas fa-plus"></i> New Team
</button>
{% endif %}
{% endblock %}
{% block content %}
{% if can_manage %}
<div id="createTeamForm" class="card mb-4 {% if not form_visible %}hidden{% endif %}">
<div class="card-header">
<h3>Create New Team</h3>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('teams.create_team') }}" class="form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<div class="form-row">
<div class="form-group col-4">
<label for="name">Team Name</label>
<input type="text" id="name" name="name" placeholder="e.g., Varsity, JV, U14" required>
</div>
<div class="form-group col-4">
<label for="coach_id">Assigned Coach</label>
<select id="coach_id" name="coach_id" class="form-select">
<option value="">-- No coach assigned --</option>
{% for coach in coaches %}
<option value="{{ coach.id }}">{{ coach.username }}</option>
{% endfor %}
</select>
</div>
<div class="form-group col-4">
<label for="manager_id">Assigned Manager</label>
<select id="manager_id" name="manager_id" class="form-select">
<option value="">-- No manager assigned --</option>
{% for manager in managers %}
<option value="{{ manager.id }}">{{ manager.username }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" data-action="hide-create-form">Cancel</button>
<button type="submit" class="btn btn-primary">Create Team</button>
</div>
</form>
</div>
</div>
{% endif %}
{% for team in teams %}
{% set can_manage_team = can_manage or (current_user.role == 'coach' and team.coach_id == current_user.id) %}
<div class="card mb-4">
<div class="card-header">
<h3><i class="fas fa-users-cog"></i> {{ team.name }}</h3>
<div class="card-actions">
{% if can_manage %}
<button class="btn btn-sm btn-outline edit-team-btn" data-team-id="{{ team.id }}" data-team-name="{{ team.name }}" data-coach-id="{{ team.coach_id or '' }}" data-manager-id="{{ team.manager_id or '' }}">
<i class="fas fa-edit"></i> Edit
</button>
<form method="POST" action="{{ url_for('teams.delete_team', team_id=team.id) }}" class="inline-form" data-confirm="{{ _('Delete team %(name)s? It will be unassigned from any linked tryouts.', name=team.name) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<button type="submit" class="btn btn-sm btn-danger">
<i class="fas fa-trash"></i> Delete
</button>
</form>
{% endif %}
{% if current_user.role == 'coach' and team.coach_id == current_user.id %}
<a href="{{ url_for('users.notes_dashboard') }}" class="btn btn-sm btn-primary" title="Add Notes">
<i class="fas fa-sticky-note"></i> Notes
</a>
{% endif %}
</div>
</div>
<!-- Full-width staff bar for coaches and managers -->
<div class="team-staff-bar">
<div class="staff-row">
<div class="staff-group">
<span class="staff-label"><i class="fas fa-chalkboard-teacher"></i> Coaches</span>
<div class="staff-items">
{% set team_coaches = team.get_coaches() %}
{% if team_coaches %}
{% for c in team_coaches %}
<span class="staff-tag">
{{ c.username }}
{% if can_manage %}
<form method="POST" action="{{ url_for('teams.remove_coach', team_id=team.id) }}" class="inline-form" data-confirm="{{ _('Remove coach %(coach)s from %(team)s?', coach=c.username, team=team.name) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<input type="hidden" name="coach_id" value="{{ c.id }}"/>
<button type="submit" class="btn-icon-sm" title="Remove Coach">&times;</button>
</form>
{% endif %}
</span>
{% endfor %}
{% else %}
<span class="text-muted text-sm">None assigned</span>
{% endif %}
</div>
</div>
<div class="staff-group">
<span class="staff-label"><i class="fas fa-user-tie"></i> Managers</span>
<div class="staff-items">
{% set team_managers = team.get_managers() %}
{% if team_managers %}
{% for m in team_managers %}
<span class="staff-tag manager-tag">
{{ m.username }}
{% if can_manage %}
<form method="POST" action="{{ url_for('teams.remove_manager', team_id=team.id) }}" class="inline-form" data-confirm="{{ _('Remove manager %(manager)s from %(team)s?', manager=m.username, team=team.name) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<input type="hidden" name="manager_id" value="{{ m.id }}"/>
<button type="submit" class="btn-icon-sm" title="Remove Manager">&times;</button>
</form>
{% endif %}
</span>
{% endfor %}
{% else %}
<span class="text-muted text-sm">None assigned</span>
{% endif %}
</div>
</div>
<a href="{{ url_for('team_matches.list_matches') }}?team_id={{ team.id }}" class="btn btn-sm btn-outline" title="View Team Matches">
<i class="fas fa-futbol"></i> Matches
</a>
{% if current_user.can_schedule_matches() and (current_user.role in ['admin', 'manager'] or (current_user.role == 'coach' and team.coaches.filter_by(id=current_user.id).first()) or (current_user.role == 'coach' and team.coach_id == current_user.id)) %}
<a href="{{ url_for('team_matches.create_match', team_id=team.id) }}" class="btn btn-sm btn-success" title="Schedule Team Match">
<i class="fas fa-plus"></i> Match
</a>
<a href="{{ url_for('team_matches.create_match', team_id=team.id, type='practice') }}" class="btn btn-sm btn-info" title="Schedule Practice">
<i class="fas fa-dumbbell"></i> Practice
</a>
{% endif %}
</div>
</div>
<div class="card-body">
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Player</th>
<th>Status</th>
<th>Position / Role</th>
<th>Email</th>
<th>Phone</th>
{% if can_manage_team %}
<th>Actions</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for entry in team.get_players_with_status() %}
<tr>
<td>
<div class="user-mini">
<div class="avatar-sm">{{ entry.player.username[:2] | upper }}</div>
<a href="{{ url_for('users.view_user', user_id=entry.player.id) }}">{{ entry.player.username }}</a>
</div>
</td>
<td>
{% if can_manage_team %}
<button class="btn btn-sm status-toggle-btn {% if entry.status == 'starter' %}btn-success{% else %}btn-warning{% endif %}"
data-team-id="{{ team.id }}"
data-player-id="{{ entry.player.id }}"
data-action="toggle-status">
{{ entry.status | capitalize }}
</button>
{% else %}
<span class="badge {% if entry.status == 'starter' %}badge-success{% else %}badge-warning{% endif %}">
{{ entry.status | capitalize }}
</span>
{% endif %}
</td>
<td>{{ entry.player.role | capitalize }}</td>
<td>{{ entry.player.email }}</td>
<td>{{ entry.player.phone or '-' }}</td>
{% if can_manage_team %}
<td>
<form method="POST" action="{{ url_for('teams.remove_player', team_id=team.id, player_id=entry.player.id) }}" class="inline-form" data-confirm="{{ _('Remove %(player)s from %(team)s?', player=entry.player.username, team=team.name) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<button type="submit" class="btn btn-sm btn-danger">
<i class="fas fa-user-minus"></i> Remove
</button>
</form>
</td>
{% endif %}
</tr>
{% else %}
<tr>
<td colspan="{% if can_manage_team %}6{% else %}5{% endif %}" class="text-center">
<div class="empty-state">
<i class="fas fa-users-slash"></i>
<h4>No players assigned</h4>
{% if can_manage_team %}
<p>Add players to this team using the form below.</p>
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if can_manage_team %}
<hr class="my-3">
<div class="add-player-section">
<h5 class="mb-2"><i class="fas fa-user-plus"></i> Add Player to {{ team.name }}</h5>
<form method="POST" action="{{ url_for('teams.add_player', team_id=team.id) }}" class="form-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<select name="player_id" class="form-select" required>
<option value="">-- Select a player --</option>
{% for p in all_players %}
{% if p.id not in team.players | map(attribute='id') %}
<option value="{{ p.id }}">{{ p.username }}</option>
{% endif %}
{% endfor %}
</select>
<select name="status" class="form-select ml-2">
<option value="starter">Starter</option>
<option value="substitute">Substitute</option>
</select>
<button type="submit" class="btn btn-sm btn-primary ml-2">
<i class="fas fa-plus"></i> Add to Team
</button>
</form>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="card">
<div class="card-body text-center">
<div class="empty-state">
<i class="fas fa-users-cog"></i>
<h3>No teams yet</h3>
{% if can_manage %}
<p>Create organization teams and assign coaches to manage tryouts.</p>
<button class="btn btn-primary" data-action="show-create-form">Create Team</button>
{% else %}
<p>There are no teams to display.</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
<!-- Edit Team Modal -->
<div id="editTeamModal" class="modal hidden">
<div class="modal-backdrop" data-action="hide-edit-form"></div>
<div class="modal-content">
<div class="modal-header">
<h3>Edit Team</h3>
<button class="modal-close" data-action="hide-edit-form">&times;</button>
</div>
<div class="modal-body">
<form id="editTeamForm" method="POST" action="" class="form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<input type="hidden" name="sync_staff" value="1"/>
<div class="form-group">
<label for="edit_name">Team Name</label>
<input type="text" id="edit_name" name="name" required>
</div>
<hr class="section-divider">
<!-- Manage Coaches -->
<h5 class="mb-2"><i class="fas fa-chalkboard-teacher"></i> Coaches</h5>
<div class="form-group">
<select name="coach_ids" id="edit-coach-select" class="form-select" multiple style="min-height: 100px; width: 100%;">
{% for coach in coaches %}
<option value="{{ coach.id }}" class="coach-option">{{ coach.username }}</option>
{% endfor %}
</select>
<small class="form-text">Hold Ctrl/Cmd to select multiple. Only unassigned coaches shown.</small>
</div>
<!-- Manage Managers -->
<h5 class="mb-2"><i class="fas fa-user-tie"></i> Managers</h5>
<div class="form-group">
<select name="manager_ids" id="edit-manager-select" class="form-select" multiple style="min-height: 100px; width: 100%;">
{% for manager in managers %}
<option value="{{ manager.id }}" class="manager-option">{{ manager.username }}</option>
{% endfor %}
</select>
<small class="form-text">Hold Ctrl/Cmd to select multiple. Only unassigned managers shown.</small>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" data-action="hide-edit-form">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
<script nonce="{{ csp_nonce }}">
function showCreateForm() {
document.getElementById('createTeamForm').classList.remove('hidden');
}
function hideCreateForm() {
document.getElementById('createTeamForm').classList.add('hidden');
}
function toggleStatus(btn) {
var teamId = btn.getAttribute('data-team-id');
var playerId = btn.getAttribute('data-player-id');
fetch('/teams/' + teamId + '/toggle_status/' + playerId, {
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token() }}',
'Content-Type': 'application/json'
}
})
.then(function(response) { return response.json(); })
.then(function(data) {
if (data.success) {
btn.textContent = data.new_status.charAt(0).toUpperCase() + data.new_status.slice(1);
if (data.new_status === 'starter') {
btn.classList.remove('btn-warning');
btn.classList.add('btn-success');
} else {
btn.classList.remove('btn-success');
btn.classList.add('btn-warning');
}
}
})
.catch(function(error) {
console.error('Error:', error);
});
}
var currentEditTeamId = null;
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.edit-team-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
currentEditTeamId = this.getAttribute('data-team-id');
var teamName = this.getAttribute('data-team-name');
document.getElementById('editTeamForm').action = '/teams/' + currentEditTeamId + '/edit';
document.getElementById('edit_name').value = teamName;
document.getElementById('editTeamModal').classList.remove('hidden');
populateEditSelects(currentEditTeamId);
});
});
});
function getCurrentStaffIds(teamId, type) {
// Get currently assigned coach/manager IDs from the staff bar pills
var ids = [];
var teamCard = document.querySelector('[data-team-id="' + teamId + '"]');
if (!teamCard) return ids;
var staffBar = teamCard.closest('.card').querySelector('.team-staff-bar');
if (!staffBar) return ids;
var groupIndex = type === 'coach' ? 0 : 1;
var group = staffBar.querySelectorAll('.staff-group')[groupIndex];
if (!group) return ids;
group.querySelectorAll('.staff-tag form input[name="coach_id"], .staff-tag form input[name="manager_id"]').forEach(function(input) {
ids.push(input.value);
});
return ids;
}
function populateEditSelects(teamId) {
var coachSelect = document.getElementById('edit-coach-select');
var managerSelect = document.getElementById('edit-manager-select');
var currentCoachIds = getCurrentStaffIds(teamId, 'coach');
var currentManagerIds = getCurrentStaffIds(teamId, 'manager');
// Show all coaches, but pre-select current ones and hide non-assigned
// Actually: show only currently-assigned options (pre-selected)
coachSelect.querySelectorAll('.coach-option').forEach(function(opt) {
var isAssigned = currentCoachIds.includes(opt.value);
opt.selected = isAssigned;
// Always show all options so user can add/remove
opt.style.display = '';
});
managerSelect.querySelectorAll('.manager-option').forEach(function(opt) {
var isAssigned = currentManagerIds.includes(opt.value);
opt.selected = isAssigned;
opt.style.display = '';
});
// Also update text to reflect current count
document.querySelector('#edit-coach-select + .form-text').textContent =
'Currently assigned: ' + currentCoachIds.length + '. Hold Ctrl/Cmd to select multiple.';
document.querySelector('#edit-manager-select + .form-text').textContent =
'Currently assigned: ' + currentManagerIds.length + '. Hold Ctrl/Cmd to select multiple.';
}
function hideEditForm() {
document.getElementById('editTeamModal').classList.add('hidden');
}
// Behaviours declared in the markup, dispatched by the delegated listener
// in main.js. Inline onclick attributes cannot be authorised by a CSP nonce.
registerActions({
'show-create-form': showCreateForm,
'hide-create-form': hideCreateForm,
'hide-edit-form': hideEditForm,
'toggle-status': toggleStatus,
});
</script>
<style>
/* === Full-width staff bar layout === */
.team-staff-bar {
padding: 10px 20px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.staff-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.staff-group {
display: flex;
align-items: center;
gap: 8px;
}
.staff-label {
font-size: 0.8rem;
color: #64748b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.staff-label i {
margin-right: 3px;
font-size: 0.75rem;
}
.staff-items {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.staff-tag {
display: inline-flex;
align-items: center;
gap: 5px;
background: #e0e7ff;
color: #3730a3;
padding: 3px 10px;
border-radius: 14px;
font-size: 0.82rem;
font-weight: 500;
line-height: 1.3;
}
.staff-tag.manager-tag {
background: #fef3c7;
color: #92400e;
}
.staff-tag .btn-icon-sm {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 0;
font-size: 0.85rem;
font-weight: 700;
line-height: 1;
margin-left: 1px;
}
.staff-tag .btn-icon-sm:hover {
color: #dc2626;
}
.staff-add-forms {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.staff-add-forms .form-select-sm {
font-size: 0.8rem;
padding: 4px 28px 4px 10px;
height: auto;
border-radius: 6px;
border: 1px dashed #cbd5e1;
background: #fff;
min-width: 150px;
}
.staff-add-forms .form-select-sm:focus {
border-color: #6366f1;
outline: none;
box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.text-sm {
font-size: 0.82rem;
}
.ml-2 {
margin-left: 8px;
}
.status-toggle-btn {
cursor: pointer;
min-width: 90px;
}
/* === Dark mode overrides for staff bar === */
[data-theme="dark"] .team-staff-bar {
background: var(--bg-tertiary);
border-bottom-color: var(--border-color);
}
[data-theme="dark"] .staff-label {
color: var(--text-muted);
}
[data-theme="dark"] .staff-tag {
background: rgba(99, 102, 241, 0.2);
color: #a5b4fc;
}
[data-theme="dark"] .staff-tag.manager-tag {
background: rgba(229, 169, 57, 0.2);
color: #fcd34d;
}
[data-theme="dark"] .staff-tag .btn-icon-sm {
color: var(--text-muted);
}
[data-theme="dark"] .staff-tag .btn-icon-sm:hover {
color: var(--danger);
}
[data-theme="dark"] .staff-add-forms .form-select-sm {
background: var(--input-bg);
border-color: var(--border-color);
color: var(--text-secondary);
}
[data-theme="dark"] .staff-add-forms .form-select-sm:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 152, 76, 0.25);
}
[data-theme="dark"] .staff-add-forms .form-select-sm option {
background: var(--bg-secondary);
color: var(--text-primary);
}
</style>
{% endblock %}