Certificat Let's Encrypt obtenu et renouvelé par certbot (authentificateur nginx), expiration surveillée par Prometheus. TLS selon Mozilla v6.0 intermediate, HSTS, CSP stricte avec nonce sur l'application et adaptée sur la vitrine, xterm.js servi par le portail. Page de statut prévue sur status.syllabuslab.fr, administration de Grafana et Kuma par tunnel seul. Corrige aussi une faille XSS dans la page de classe, la page /cours en erreur depuis l'étape 8, et NodeSource relancé à chaque déploiement. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
2.9 KiB
PHP
47 lines
2.9 KiB
PHP
@extends('layouts.vitrine')
|
|
|
|
@section('titre', 'Console de ' . $labSession->eleve->nomAffiche())
|
|
|
|
@section('contenu')
|
|
<div class="mx-auto max-w-5xl px-5 py-14 lg:px-10">
|
|
<p class="font-mono text-sm font-semibold">{{ $seance->lab->titre }} · lecture seule</p>
|
|
<h1 class="mt-1 text-3xl font-extrabold tracking-tight">Console de {{ $labSession->eleve->nomAffiche() }}</h1>
|
|
|
|
@if ($labSession->machines->isEmpty())
|
|
<p class="mt-6 font-semibold">Les VM ne sont pas encore prêtes.</p>
|
|
@else
|
|
<div class="mt-4 flex gap-2" role="tablist">
|
|
@foreach ($labSession->machines as $i => $machine)
|
|
<button type="button" data-onglet="{{ $machine->id }}" class="onglet-machine rounded-lg border border-[#dadce0] px-4 py-2 font-mono font-bold {{ $i === 0 ? 'bg-[#0b57d0] text-white' : 'bg-white' }}">{{ $machine->nom }}</button>
|
|
@endforeach
|
|
</div>
|
|
@foreach ($labSession->machines as $i => $machine)
|
|
<div data-panneau="{{ $machine->id }}" @if ($i !== 0) hidden @endif class="mt-2 h-[480px] overflow-hidden rounded-2xl border border-[#e3e5e8]" style="background:#13233A">
|
|
<div id="terminal-{{ $machine->id }}" class="h-full"></div>
|
|
</div>
|
|
@endforeach
|
|
@vite('resources/js/console.js')
|
|
<script nonce="{{ Vite::cspNonce() }}" src="{{ asset('js/console-reelle.js') }}"></script>
|
|
<script nonce="{{ Vite::cspNonce() }}">
|
|
// Après les modules Vite (différés) : window.Terminal est défini.
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('.onglet-machine').forEach(function (bouton) {
|
|
bouton.addEventListener('click', function () {
|
|
var id = bouton.dataset.onglet;
|
|
document.querySelectorAll('.onglet-machine').forEach(function (b) { b.classList.toggle('bg-[#0b57d0]', b === bouton); b.classList.toggle('text-white', b === bouton); b.classList.toggle('bg-white', b !== bouton); });
|
|
document.querySelectorAll('[data-panneau]').forEach(function (p) { p.hidden = p.dataset.panneau !== id; });
|
|
});
|
|
});
|
|
@foreach ($labSession->machines as $machine)
|
|
fetch('{{ route('console.prof', [$seance, $labSession, $machine]) }}', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
|
}).then(function (r) { return r.json(); }).then(function (d) {
|
|
window.SyllabusConsoleReelle.mount(document.getElementById('terminal-{{ $machine->id }}'), { jeton: d.jeton, lectureSeule: true });
|
|
});
|
|
@endforeach
|
|
});
|
|
</script>
|
|
@endif
|
|
</div>
|
|
@endsection
|