chore: update .gitignore

Replace unsafe innerHTML template literals with document.createElement()
and textContent for all user-conrolled data fields in index.html.

Event cards and modal details previously interpolated API responses
(event.name, event.title, player.fname, staff.role, etc.) directly into
innerHTML without escaping, allowing stored XSS if upstream MyIce data
is malicious (CWE-79 / vuln-0002).

All dynamic text now flows through textContent or createTextNode(),
while static HTML structures (SVG icons, strong labels) remain safe
hardcoded innerHTML assignments.

Refs vuln-0002

.gitignore

@@ -3,7 +3,11 @@ myice.ini
 schedule.json
 .envrc
 cookies.txt
-# Byte-compiled / optimized / DLL files
+# Tailwind CSS generated artifacts
+style.css
+tailwindcss
+
+# Python bytecode
 __pycache__/
 *.py[cod]
 *$py.class
@@ -165,3 +169,4 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+strix_runs/*

AGENTS.md

@@ -48,6 +48,21 @@ pre-commit run ruff-format --files myice/webapi.py
 pre-commit run mypy --files myice/myice.py
 ```
 
+### CSS/Frontend Build
+
+When modifying `index.html` or the Tailwind CSS setup:
+
+```bash
+# One-off build of style.css
+./build-css.sh
+
+# Watch mode for development
+./build-css.sh --watch
+
+# Or manually with the standalone CLI (if already downloaded)
+./tailwindcss -i ./style-input.css -o ./style.css --minify
+```
+
 ### Running the Web API
 
 ```bash

Dockerfile

@@ -4,7 +4,12 @@ FROM python:3.13-slim AS builder
 # Create working directory
 WORKDIR /app
 
-# poetry export -f requirements.txt --output requirements.txt --without-hashes
+# Install tools needed for Tailwind CSS build
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
 # Copy dependency files
 COPY requirements.txt ./
 
@@ -12,6 +17,12 @@ COPY requirements.txt ./
 RUN --mount=type=cache,target=/root/.cache/pip \
     pip install --no-deps --disable-pip-version-check -r requirements.txt
 
+# Build Tailwind CSS
+COPY index.html style-input.css tailwind.config.js ./
+RUN curl -sL https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/tailwindcss-linux-x64 -o tailwindcss \
+    && chmod +x tailwindcss \
+    && ./tailwindcss -i ./style-input.css -o ./style.css --minify
+
 # Runtime stage
 FROM python:3.13-slim AS runtime
 
@@ -29,8 +40,9 @@ RUN useradd --home-dir /app --no-create-home --uid 1000 myice
 # Copy installed packages from builder stage
 COPY --from=builder /usr/local/lib/python3.13/site-packages /usr/local/lib/python3.13/site-packages
 
-# Copy application code
+# Copy application code and compiled assets
 COPY index.html favicon.ico ./
+COPY --from=builder /app/style.css ./style.css
 COPY myice ./myice
 
 # Change ownership of copied files

build-css.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+set -euo pipefail
+
+# Build CSS using Tailwind CSS standalone CLI
+# For local development, run:
+#   ./build-css.sh        # one-off build
+#   ./build-css.sh --watch  # watch mode
+
+version="v3.4.17"
+os="$(uname -s)"
+arch="$(uname -m)"
+
+case "$os" in
+    Linux*)     platform="linux";;
+    Darwin*)    platform="macos";;
+    *)          echo "Unsupported OS: $os"; exit 1;;
+esac
+
+case "$arch" in
+    x86_64)     arch="x64";;
+    arm64)      arch="arm64";;
+    aarch64)    arch="arm64";;
+    *)          echo "Unsupported architecture: $arch"; exit 1;;
+esac
+
+binary="tailwindcss-${platform}-${arch}"
+url="https://github.com/tailwindlabs/tailwindcss/releases/download/${version}/${binary}"
+
+if [ ! -f "tailwindcss" ]; then
+    echo "Downloading Tailwind CSS standalone CLI (${version} ${platform}/${arch})..."
+    curl -sL "$url" -o tailwindcss
+    chmod +x tailwindcss
+fi
+
+if [ "${1:-}" == "--watch" ]; then
+    echo "Building CSS in watch mode..."
+    ./tailwindcss -i ./style-input.css -o ./style.css --watch
+else
+    echo "Building CSS..."
+    ./tailwindcss -i ./style-input.css -o ./style.css --minify
+fi

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MyIce - Games</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/style.css">
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
 
@@ -545,40 +545,49 @@
                 filteredEvents.forEach(event => {
                     const eventCard = document.createElement("div");
                     eventCard.className = "bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 cursor-pointer";
-                    eventCard.innerHTML = `
-                        <div class="p-6 border-l-4" style="border-color: ${event.color || '#818cf8'}">
-                            <div class="flex justify-between items-start">
-                                <div>
-                                    <h3 class="text-xl font-bold text-gray-800">${event.agegroup} - ${event.name}</h3>
-                                    <p class="text-gray-600 mt-1">${event.title}</p>
-                                </div>
-                            </div>
 
-                            <div class="mt-4 space-y-2">
+                    const card = document.createElement("div");
-                                <p class="flex items-center text-gray-700">
+                    card.className = "p-6 border-l-4";
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    card.style.borderColor = event.color || "#818cf8";
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                                    </svg>
-                                    <strong>Adversaire:</strong> ${event.opponent}
-                                </p>
 
-                                <p class="flex items-center text-gray-700">
+                    const inner = document.createElement("div");
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    inner.className = "flex justify-between items-start";
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                    </svg>
-                                    <strong>Lieu:</strong> ${event.place}
-                                </p>
 
-                                <p class="flex items-center text-gray-700">
+                    const innerDiv = document.createElement("div");
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    const h3 = document.createElement("h3");
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    h3.className = "text-xl font-bold text-gray-800";
-                                    </svg>
+                    h3.textContent = event.agegroup + " - " + event.name;
-                                    <strong>Heure:</strong> ${event.start} - ${event.end}
+                    const subtitle = document.createElement("p");
-                                </p>
+                    subtitle.className = "text-gray-600 mt-1";
-                            </div>
+                    subtitle.textContent = event.title;
-                        </div>
+                    innerDiv.appendChild(h3);
-                    `;
+                    innerDiv.appendChild(subtitle);
+                    inner.appendChild(innerDiv);
+                    card.appendChild(inner);
+
+                    const detailsDiv = document.createElement("div");
+                    detailsDiv.className = "mt-4 space-y-2";
+
+                    const p1 = document.createElement("p");
+                    p1.className = "flex items-center text-gray-700";
+                    p1.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg><strong>Adversaire:</strong> ';
+                    p1.appendChild(document.createTextNode(event.opponent));
+                    detailsDiv.appendChild(p1);
+
+                    const p2 = document.createElement("p");
+                    p2.className = "flex items-center text-gray-700";
+                    p2.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg><strong>Lieu:</strong> ';
+                    p2.appendChild(document.createTextNode(event.place));
+                    detailsDiv.appendChild(p2);
+
+                    const p3 = document.createElement("p");
+                    p3.className = "flex items-center text-gray-700";
+                    p3.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><strong>Heure:</strong> ';
+                    p3.appendChild(document.createTextNode(event.start + " - " + event.end));
+                    detailsDiv.appendChild(p3);
+
+                    card.appendChild(detailsDiv);
+                    eventCard.appendChild(card);
                     eventCard.addEventListener("click", () => fetchEventDetails(event.id_event));
                     eventList.appendChild(eventCard);
                 });
@@ -591,129 +600,172 @@
                 })
                     .then(response => response.json())
                 .then(data => {
-                    // Check if available players data exists
                     const availablePlayers = data.convocation.available || [];
                     const sortedPlayers = availablePlayers
                         .sort((a, b) => (a.number || 0) - (b.number || 0));
 
-                        // Calculate player statistics
+                    const totalPlayers = sortedPlayers.length;
-                        const totalPlayers = sortedPlayers.length;
+                    const positionCount = {};
-                        const positionCount = {};
+                    sortedPlayers.forEach(player => {
-                        sortedPlayers.forEach(player => {
+                        const position = player.position || "N/A";
-                            const position = player.position || "N/A";
+                        positionCount[position] = (positionCount[position] || 0) + 1;
-                            positionCount[position] = (positionCount[position] || 0) + 1;
+                    });
-                        });
 
-                        // Generate position breakdown
+                    const positionBreakdown = Object.entries(positionCount)
-                        const positionBreakdown = Object.entries(positionCount)
+                        .map(([position, count]) => position + ": " + count)
-                            .map(([position, count]) => `${position}: ${count}`)
+                        .join(", ");
-                            .join(', ');
 
-                        // Sort players by position first, then by number
+                    const playersByPosition = [...sortedPlayers].sort((a, b) => {
-                        const playersByPosition = [...sortedPlayers].sort((a, b) => {
+                        const positionA = a.position || "ZZZ";
-                            // Sort by position first
+                        const positionB = b.position || "ZZZ";
-                            const positionA = a.position || "ZZZ"; // Put undefined positions at the end
+                        if (positionA !== positionB) {
-                            const positionB = b.position || "ZZZ";
+                            return positionA.localeCompare(positionB);
-
-                            if (positionA !== positionB) {
-                                return positionA.localeCompare(positionB);
-                            }
-
-                            // If positions are the same, sort by number
-                            const numA = parseInt(a.number) || 0;
-                            const numB = parseInt(b.number) || 0;
-                            return numA - numB;
-                        });
-
-                        // Process staff data
-                        const staffList = data.convocation.staff || [];
-                        const totalStaff = staffList.length;
-
-                        // Check if there are no players
-                        if (totalPlayers === 0 && totalStaff === 0) {
-                            eventDetailsContent.innerHTML = `
-                                <div class="rounded-xl border border-amber-300 bg-amber-50 p-6">
-                                    <div class="text-center">
-                                        <h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
-                                        <div class="space-y-2 text-gray-700 mb-6">
-                                            <p><strong>Type:</strong> ${data.type}</p>
-                                            <p><strong>Lieu:</strong> ${data.place}</p>
-                                            <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
-                                        </div>
-                                        <div class="bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg">
-                                            <h6 class="font-bold text-lg mb-1">Aucun joueur ni personnel convoqué</h6>
-                                            <p>Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match.</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            `;
-                        } else {
-                            let staffHtml = '';
-                            if (totalStaff > 0) {
-                                staffHtml = `
-                                    <div class="mt-6">
-                                        <h6 class="text-xl font-semibold text-gray-800 mb-3">Personnel (${totalStaff}):</h6>
-                                        <ul class="space-y-2">
-                                            ${staffList.map(staff => {
-                                                return `<li class="flex items-center"><span class="font-medium w-32">${staff.role}:</span> <span>${staff.fname} ${staff.lname}</span></li>`;
-                                            }).join('')}
-                                        </ul>
-                                    </div>
-                                `;
-                            } else {
-                                staffHtml = `
-                                    <div class="mt-6 bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg">
-                                        <h6 class="font-bold mb-1">Aucun personnel convoqué</h6>
-                                        <p>Il n'y a actuellement aucun personnel convoqué pour ce match.</p>
-                                    </div>
-                                `;
-                            }
-
-                            if (totalPlayers === 0) {
-                                eventDetailsContent.innerHTML = `
-                                    <div>
-                                        <h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
-                                        <div class="space-y-2 text-gray-700 mb-6">
-                                            <p><strong>Type:</strong> ${data.type}</p>
-                                            <p><strong>Lieu:</strong> ${data.place}</p>
-                                            <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
-                                        </div>
-                                        <div class="bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg">
-                                            <h6 class="font-bold mb-1">Aucun joueur convoqué</h6>
-                                            <p>Il n'y a actuellement aucun joueur convoqué pour ce match.</p>
-                                        </div>
-                                        ${staffHtml}
-                                    </div>
-                                `;
-                            } else {
-                                eventDetailsContent.innerHTML = `
-                                    <div>
-                                        <h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
-                                        <div class="space-y-2 text-gray-700 mb-6">
-                                            <p><strong>Type:</strong> ${data.type}</p>
-                                            <p><strong>Lieu:</strong> ${data.place}</p>
-                                            <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
-                                            <p><strong>Joueurs convoqués:</strong> ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})</p>
-                                        </div>
-
-                                        <div>
-                                            <h6 class="text-xl font-semibold text-gray-800 mb-3">Liste des joueurs:</h6>
-                                            <ul class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                                                ${playersByPosition.map(player => {
-                                                    let number = player.number ? player.number : "N/A";
-                                                    let position = player.position ? player.position : "N/A";
-                                                    return `<li class="bg-indigo-50 rounded-lg p-3"><span class="font-medium">[${position}] ${number}</span> - ${player.fname} ${player.lname} <span class="text-gray-500 text-sm">(${player.dob})</span></li>`;
-                                                }).join('')}
-                                            </ul>
-                                        </div>
-
-                                        ${staffHtml}
-                                    </div>
-                                `;
-                            }
                         }
-                        eventDetailsModal.classList.remove("hidden");
+                        const numA = parseInt(a.number) || 0;
-                    })
+                        const numB = parseInt(b.number) || 0;
+                        return numA - numB;
+                    });
+
+                    const staffList = data.convocation.staff || [];
+                    const totalStaff = staffList.length;
+
+                    eventDetailsContent.innerHTML = "";
+
+                    if (totalPlayers === 0 && totalStaff === 0) {
+                        const wrapper = document.createElement("div");
+                        wrapper.className = "rounded-xl border border-amber-300 bg-amber-50 p-6";
+                        const centerDiv = document.createElement("div");
+                        centerDiv.className = "text-center";
+                        const h5 = document.createElement("h5");
+                        h5.className = "text-2xl font-bold text-gray-800 mb-4";
+                        h5.textContent = data.title;
+                        centerDiv.appendChild(h5);
+
+                        const infoDiv = document.createElement("div");
+                        infoDiv.className = "space-y-2 text-gray-700 mb-6";
+                        const pType = document.createElement("p");
+                        pType.innerHTML = "<strong>Type:</strong> ";
+                        pType.appendChild(document.createTextNode(data.type));
+                        infoDiv.appendChild(pType);
+                        const pLieu = document.createElement("p");
+                        pLieu.innerHTML = "<strong>Lieu:</strong> ";
+                        pLieu.appendChild(document.createTextNode(data.place));
+                        infoDiv.appendChild(pLieu);
+                        const pHeure = document.createElement("p");
+                        pHeure.innerHTML = "<strong>Heure:</strong> ";
+                        pHeure.appendChild(document.createTextNode(data.time_start + " - " + data.time_end));
+                        infoDiv.appendChild(pHeure);
+                        centerDiv.appendChild(infoDiv);
+
+                        const msgDiv = document.createElement("div");
+                        msgDiv.className = "bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg";
+                        const msgH6 = document.createElement("h6");
+                        msgH6.className = "font-bold text-lg mb-1";
+                        msgH6.textContent = "Aucun joueur ni personnel convoqué";
+                        msgDiv.appendChild(msgH6);
+                        const msgP = document.createElement("p");
+                        msgP.textContent = "Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match.";
+                        msgDiv.appendChild(msgP);
+                        centerDiv.appendChild(msgDiv);
+                        wrapper.appendChild(centerDiv);
+                        eventDetailsContent.appendChild(wrapper);
+                    } else {
+                        const container = document.createElement("div");
+                        const h5 = document.createElement("h5");
+                        h5.className = "text-2xl font-bold text-gray-800 mb-4";
+                        h5.textContent = data.title;
+                        container.appendChild(h5);
+
+                        const infoDiv = document.createElement("div");
+                        infoDiv.className = "space-y-2 text-gray-700 mb-6";
+                        const pType = document.createElement("p");
+                        pType.innerHTML = "<strong>Type:</strong> ";
+                        pType.appendChild(document.createTextNode(data.type));
+                        infoDiv.appendChild(pType);
+                        const pLieu = document.createElement("p");
+                        pLieu.innerHTML = "<strong>Lieu:</strong> ";
+                        pLieu.appendChild(document.createTextNode(data.place));
+                        infoDiv.appendChild(pLieu);
+                        const pHeure = document.createElement("p");
+                        pHeure.innerHTML = "<strong>Heure:</strong> ";
+                        pHeure.appendChild(document.createTextNode(data.time_start + " - " + data.time_end));
+                        infoDiv.appendChild(pHeure);
+                        container.appendChild(infoDiv);
+
+                        if (totalPlayers === 0) {
+                            const noPlayersDiv = document.createElement("div");
+                            noPlayersDiv.className = "bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg";
+                            const noPlayersH6 = document.createElement("h6");
+                            noPlayersH6.className = "font-bold mb-1";
+                            noPlayersH6.textContent = "Aucun joueur convoqué";
+                            noPlayersDiv.appendChild(noPlayersH6);
+                            const noPlayersP = document.createElement("p");
+                            noPlayersP.textContent = "Il n'y a actuellement aucun joueur convoqué pour ce match.";
+                            noPlayersDiv.appendChild(noPlayersP);
+                            container.appendChild(noPlayersDiv);
+                        } else {
+                            const playersP = document.createElement("p");
+                            playersP.innerHTML = "<strong>Joueurs convoqués:</strong> ";
+                            playersP.appendChild(document.createTextNode(totalPlayers + " joueur" + (totalPlayers > 1 ? "s" : "") + " (" + positionBreakdown + ")"));
+                            infoDiv.appendChild(playersP);
+
+                            const playersDiv = document.createElement("div");
+                            const playersH6 = document.createElement("h6");
+                            playersH6.className = "text-xl font-semibold text-gray-800 mb-3";
+                            playersH6.textContent = "Liste des joueurs:";
+                            playersDiv.appendChild(playersH6);
+                            const playersUl = document.createElement("ul");
+                            playersUl.className = "grid grid-cols-1 md:grid-cols-2 gap-3";
+                            playersByPosition.forEach(player => {
+                                const li = document.createElement("li");
+                                li.className = "bg-indigo-50 rounded-lg p-3";
+                                const number = player.number ? player.number : "N/A";
+                                const position = player.position ? player.position : "N/A";
+                                li.textContent = "[" + position + "] " + number + " - " + player.fname + " " + player.lname + " (" + player.dob + ")";
+                                playersUl.appendChild(li);
+                            });
+                            playersDiv.appendChild(playersUl);
+                            container.appendChild(playersDiv);
+                        }
+
+                        if (totalStaff > 0) {
+                            const staffDiv = document.createElement("div");
+                            staffDiv.className = "mt-6";
+                            const staffH6 = document.createElement("h6");
+                            staffH6.className = "text-xl font-semibold text-gray-800 mb-3";
+                            staffH6.textContent = "Personnel (" + totalStaff + "):";
+                            staffDiv.appendChild(staffH6);
+                            const staffUl = document.createElement("ul");
+                            staffUl.className = "space-y-2";
+                            staffList.forEach(staff => {
+                                const li = document.createElement("li");
+                                li.className = "flex items-center";
+                                const roleSpan = document.createElement("span");
+                                roleSpan.className = "font-medium w-32";
+                                roleSpan.textContent = staff.role + ":";
+                                li.appendChild(roleSpan);
+                                li.appendChild(document.createTextNode(" " + staff.fname + " " + staff.lname));
+                                staffUl.appendChild(li);
+                            });
+                            staffDiv.appendChild(staffUl);
+                            container.appendChild(staffDiv);
+                        } else {
+                            const noStaffDiv = document.createElement("div");
+                            noStaffDiv.className = "mt-6 bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg";
+                            const noStaffH6 = document.createElement("h6");
+                            noStaffH6.className = "font-bold mb-1";
+                            noStaffH6.textContent = "Aucun personnel convoqué";
+                            noStaffDiv.appendChild(noStaffH6);
+                            const noStaffP = document.createElement("p");
+                            noStaffP.textContent = "Il n'y a actuellement aucun personnel convoqué pour ce match.";
+                            noStaffDiv.appendChild(noStaffP);
+                            container.appendChild(noStaffDiv);
+                        }
+
+                        eventDetailsContent.appendChild(container);
+                    }
+                    eventDetailsModal.classList.remove("hidden");
+                })
                     .catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
             }
         });

myice/myice.py

@@ -594,16 +594,16 @@ mobile_headers = {
 }
 
 
-def curl_for_mobile_login(username: str, password: str) -> str:
+# def curl_for_mobile_login(username: str, password: str) -> str:
-    """Generate curl command to replicate mobile_login request."""
+#     """Generate curl command to replicate mobile_login request."""
-    import base64
+#     import base64
 
-    headers_str = " ".join([f"-H '{k}: {v}'" for k, v in mobile_headers.items()])
+#     headers_str = " ".join([f"-H '{k}: {v}'" for k, v in mobile_headers.items()])
-    encoded_username = base64.b64encode(username.encode()).decode()
+#     encoded_username = base64.b64encode(username.encode()).decode()
-    encoded_password = base64.b64encode(password.encode()).decode()
+#     encoded_password = base64.b64encode(password.encode()).decode()
-    return f"""curl -X POST "https://app.myice.hockey/api/mobilerest/login" \
+#     return f"""curl -X POST "https://app.myice.hockey/api/mobilerest/login" \
-{headers_str} \
+# {headers_str} \
--d 'login_email={encoded_username}&login_password={encoded_password}&language=FR&v=2'"""
+# -d 'login_email={encoded_username}&login_password={encoded_password}&language=FR&v=2'"""
 
 
 def mobile_login(config_section: str | None = None):
@@ -619,7 +619,7 @@ def mobile_login(config_section: str | None = None):
 
     print("Requesting token", file=sys.stderr)
     # Print curl equivalent for debugging
-    print(curl_for_mobile_login(username, password), file=sys.stderr)
+    # print(curl_for_mobile_login(username, password), file=sys.stderr)
     with requests.post(
         "https://app.myice.hockey/api/mobilerest/login",
         headers=mobile_headers,
@@ -643,23 +643,26 @@ userdata = {
 }
 
 
-def curl_for_refresh_data(token: str, club_id: int) -> str:
+# def curl_for_refresh_data(token: str, club_id: int) -> str:
-    """Generate curl command to replicate refresh_data request."""
+#     """Generate curl command to replicate refresh_data request."""
-    headers_str = " ".join([f"-H '{k}: {v}'" for k, v in mobile_headers.items()])
+#     headers_str = " ".join([f"-H '{k}: {v}'" for k, v in mobile_headers.items()])
-    return f"""curl -X POST "https://app.myice.hockey/api/mobilerest/refreshdata" \
+#     return f"""curl -X POST "https://app.myice.hockey/api/mobilerest/refreshdata" \
-{headers_str} \
+# {headers_str} \
--d 'token={token}&id_club={club_id}&language=FR'"""
+# -d 'token={token}&id_club={club_id}&language=FR'"""
 
 
-def refresh_data():
+def refresh_data(user_data=None):
+    # Use provided user_data or fall back to global userdata for backward compatibility
+    if user_data is None:
+        user_data = userdata
     # Print curl equivalent for debugging
-    print(
+    # print(
-        curl_for_refresh_data(userdata["token"], userdata["id_club"]), file=sys.stderr
+    #     curl_for_refresh_data(user_data["token"], user_data["id_club"]), file=sys.stderr
-    )
+    # )
     with requests.post(
         "https://app.myice.hockey/api/mobilerest/refreshdata",
         headers=mobile_headers,
-        data=f"token={userdata['token']}&id_club={userdata['id_club']}&language=FR",
+        data=f"token={user_data['token']}&id_club={user_data['id_club']}&language=FR",
         # verify=False,
     ) as r:
         r.raise_for_status()

myice/webapi.py

@@ -140,6 +140,11 @@ def get_health() -> HealthCheck:
     return HealthCheck(status="OK")
 
 
+@app.get("/style.css")
+async def style_css():
+    return FileResponse("style.css")
+
+
 @app.get("/favicon.ico")
 async def favico():
     return FileResponse("favicon.ico")
@@ -177,9 +182,20 @@ async def login(request: Request):
 
     response = RedirectResponse(auth_url)
     # Store state and nonce in secure http-only cookies for validation on callback
-    response.set_cookie("oidc_state", state, httponly=True, max_age=300)
+    response.set_cookie(
-    response.set_cookie("oidc_nonce", nonce, httponly=True, max_age=300)
+        "oidc_state", state, httponly=True, secure=True, samesite="Lax", max_age=300
-    response.set_cookie("oidc_verifier", code_verifier, httponly=True, max_age=300)
+    )
+    response.set_cookie(
+        "oidc_nonce", nonce, httponly=True, secure=True, samesite="Lax", max_age=300
+    )
+    response.set_cookie(
+        "oidc_verifier",
+        code_verifier,
+        httponly=True,
+        secure=True,
+        samesite="Lax",
+        max_age=300,
+    )
     return response
 
 
@@ -252,6 +268,7 @@ async def callback(request: Request, code: str, state: str):
 
 @app.get("/exchange-token")
 async def exchange_token(
+    request: Request,
     code: str,
     headers: Annotated[AuthHeaders, Header()],
 ):
@@ -259,6 +276,7 @@ async def exchange_token(
     if not headers.authorized():
         raise HTTPException(401, detail="get out")
 
+    code_verifier = request.cookies.get("oidc_verifier")
     # Exchange authorization code for access token
     token_data = {
         "grant_type": "authorization_code",
@@ -266,6 +284,7 @@ async def exchange_token(
         "client_secret": CLIENT_SECRET,
         "code": code,
         "redirect_uri": REDIRECT_URI,
+        "code_verifier": code_verifier,
     }
 
     response = requests.post(TOKEN_ENDPOINT, data=token_data)
@@ -333,15 +352,15 @@ async def schedule(
 
     try:
         if existing_token:
-            myice.userdata = {
+            user_data = {
                 "id": userid,
                 "id_club": club_id or 186,
                 "token": existing_token,
             }
         else:
-            myice.userdata = myice.mobile_login(config_section=account)
+            user_data = myice.mobile_login(config_section=account)
 
-        data = myice.refresh_data()
+        data = myice.refresh_data(user_data=user_data)
         if "club_games" in data:
             return data["club_games"]
         else:
@@ -414,13 +433,13 @@ async def game(
         config_section=account
     )
     if existing_token:
-        myice.userdata = {
+        user_data = {
             "id": userid,
             "id_club": club_id or 186,
             "token": existing_token,
         }
     else:
-        myice.userdata = myice.mobile_login(config_section=account)
+        user_data = myice.mobile_login(config_section=account)
 
     # data = refresh_data()
     with requests.post(
@@ -428,11 +447,11 @@ async def game(
         headers=myice.mobile_headers,
         data="&".join(
             [
-                f"token={myice.userdata['token']}",
+                f"token={user_data['token']}",
                 f"id_event={game_id}",
                 "type=games",
-                f"id_player={myice.userdata['id']}",
+                f"id_player={user_data['id']}",
-                f"id_club={myice.userdata['id_club']}",
+                f"id_club={user_data['id_club']}",
                 "language=FR",
             ]
         ),

style-input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}