DevEnv nis2-agileandClaude Opus 4.8
06c94b3c05
Progetto di revisione unificato (docs/PROGETTO_REVISIONE_NIS2.md) che fonde: - docs/PRINCIPI_AI_E_CONFORMITA_NORMATIVA.md (cyber + AI Act/GDPR/L.132 + principi AI) - docs/VERIFICA_GAP_UI_AGID_BOOTSTRAP_ITALIA.md (gap UI vs AGID/Bootstrap Italia) Agenti esperti: .claude/agents/nis2-expert.md + iso-27001-expert.md (read-only/advisory). Audit R1 (NIS2) + R2 (ISO SGSI) = conformi, riserve minori. Correzioni R3 applicate (lint + login reale OK, app su container TLS): - IncidentController: final_report_due +30gg fissi -> +1 mese calendario, ancorato alla notifica reale in sendNotification (Art.23.4 lett.d). - AIService prompt "report 30d" -> "1 mese dalla notifica 72h". - help.js: GV.SC Allegato 2 -> Allegati 1 e 2 (Art.21.2(d)). - nis2_sources.php: esplicitato Allegato 3=importanti / 4=essenziali. - IsmsModelController export: nota PII.* = codifica interna (non numeri ufficiali 27018). A4 (label whistleblowing "Art.32") DEFERITO: cita Art.32 D.Lgs.138/2024, da verificare sul testo. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
117 lines
8.6 KiB
Markdown
117 lines
8.6 KiB
Markdown
# NIS2 Agile — Verifica & Gap UI vs Standard AGID / Bootstrap Italia
|
|
|
|
> **Decisione (utente, 2026-06-11)**: NIS2 deve allinearsi allo standard **AGID / Bootstrap Italia**, lo stesso adottato dalla **Console V2 di AgileHub** (NON allo standard "AGI SaaS dark" Inter/#3B82F6 del piano `MIGRATION_UI_V2.md`, che resta superato da questa scelta).
|
|
> **Regola (fonti certe)**: i token NIS2 attuali sono letti da `public/css/style.css`; i token AGID/Bootstrap Italia da fonti documentate (impl. AgileHub V2 + design system ufficiale). Ciò che non è verificato sul sorgente ufficiale è marcato `[da verificare]`. Nessun valore inventato.
|
|
> Stato: v1 · 2026-06-11 · Tipo: realizzativo (audit + piano).
|
|
|
|
---
|
|
|
|
## 0. TL;DR
|
|
- **Verificato?** Sì, ora: **NIS2 (UI V1) NON è conforme ad AGID/Bootstrap Italia.** Gap su 5 assi: palette, font, forme (radius/ombre), accessibilità WCAG AA, struttura header/footer PA.
|
|
- **Distanza**: media-alta. La UI attuale usa palette **Material/Google** (#1a73e8) + **system font**; AGID richiede **Blu Italia #0066CC + Titillium Web + WCAG 2.1 AA + radius 4px**.
|
|
- **Strada consigliata**: **allineamento a livello di token** in `style.css` (come ha fatto AgileHub con `globals.css`), NON riscrittura su framework — NIS2 è vanilla HTML/CSS/JS con ~20 pagine + sidebar JS-injected.
|
|
- ⚠️ **Conflitto da chiudere**: esiste un piano UI V2 alternativo (`docs/MIGRATION_UI_V2.md`, "AGI dark") **incompatibile** con questa scelta → va archiviato o esplicitamente sostituito.
|
|
|
|
---
|
|
|
|
## 1. Lo standard target — AGID / Bootstrap Italia
|
|
|
|
### 1.1 Cos'è (fonte: Designers Italia / AGID)
|
|
**Bootstrap Italia** è il design system ufficiale per i servizi digitali della PA italiana (Designers Italia, AGID), basato su Bootstrap. Obbligatorio l'aspetto coerente + **accessibilità WCAG 2.1 AA** per la PA.
|
|
|
|
### 1.2 Token chiave (impl. AgileHub V2 — verificati nei doc; ufficiali `[da verificare]` sul sorgente)
|
|
| Aspetto | Valore target | Fonte |
|
|
|---|---|---|
|
|
| Primary | **Blu Italia `#0066CC`** | AgileHub V2 (`agid_redesign`) + BI ufficiale |
|
|
| Font testo | **Titillium Web** | AgileHub V2 + BI ufficiale |
|
|
| Font headings/serif | Lora `[da verificare]` | BI ufficiale (opzionale) |
|
|
| Font monospace | Roboto Mono `[da verificare]` | BI ufficiale |
|
|
| Radius | **4px** (flat, poche ombre) | AgileHub V2 |
|
|
| Accessibilità | **WCAG 2.1 AA** (contrasto testo ≥4.5:1, UI/large ≥3:1) | obbligo PA |
|
|
| Componenti | header slim+main, footer istituzionale, card, `.btn-primary`, form BI | BI ufficiale `[da verificare]` esatti |
|
|
|
|
> Riferimento interno: AgileHub Console V2 = **167 schermate** su `/v2`, build verde, `globals.css` + design token. LG231 ha il branch pilota `feat/v2-pilot-bootstrap-italia`. (Quindi esiste già un'implementazione suite da cui copiare i token.)
|
|
|
|
---
|
|
|
|
## 2. Stato attuale NIS2 (UI V1) — token reali (`public/css/style.css`, 2399 righe)
|
|
|
|
| Token | Valore attuale | Famiglia |
|
|
|---|---|---|
|
|
| `--primary` | `#1a73e8` | **Google/Material blue** (≠ Blu Italia) |
|
|
| `--secondary` | `#34a853` | Google green |
|
|
| `--warning` | `#fbbc04` | Google yellow |
|
|
| `--danger` | `#ea4335` | Google red |
|
|
| `--info` | `#4285f4` | Google blue |
|
|
| `--font-family` | `-apple-system, Segoe UI, Roboto…` | **system font** (no Titillium, no Google Fonts caricati) |
|
|
| `--sidebar-bg` | `#1e293b` | dark slate |
|
|
| `--content-bg` | `#f1f5f9` | light |
|
|
| `--card-shadow` | ombre morbide multiple | **non** stile flat AGID |
|
|
| Neutrals | `--gray-50…900` (Slate/Tailwind) | ok come scala, ma non i grigi BI |
|
|
|
|
**Struttura**: ~20 pagine app, ognuna con **un blocco `<style>` inline** specifico; **sidebar/topbar iniettate via JS** (`public/js/common.js` → `loadSidebar()`); pagine standalone (login/register/onboarding/landing) senza sidebar. Nessun framework CSS.
|
|
|
|
---
|
|
|
|
## 3. Gap analysis (V1 → AGID/Bootstrap Italia)
|
|
|
|
| # | Asse | Stato V1 | Target AGID | Gap | Sforzo |
|
|
|---|---|---|---|---|---|
|
|
| 1 | **Palette** | Material (#1a73e8 + Google status) | Blu Italia #0066CC + palette BI | 🔴 Alto — cambio primario + tutti gli stati | M |
|
|
| 2 | **Tipografia** | system font | **Titillium Web** (+ Lora/Roboto Mono) | 🔴 Alto — caricare font + applicarlo globalmente | S |
|
|
| 3 | **Forme** | radius vari + ombre morbide | radius 4px, flat | 🟠 Medio — normalizzare radius/ombre | S |
|
|
| 4 | **Accessibilità WCAG 2.1 AA** | non verificata (contrasti misti, es. testo grigio su bg) | obbligatoria | 🔴 Alto — audit contrasti + focus visibili + alt/aria | M |
|
|
| 5 | **Struttura PA** | header/sidebar custom | header slim+main, footer istituzionale, componenti BI | 🟠 Medio — opzionale se si resta token-level | M |
|
|
| 6 | **CSS inline per-pagina** | ~20 blocchi `<style>` | token centralizzati | 🟠 Medio — i colori hardcoded nelle pagine vanno ricondotti ai token | M |
|
|
|
|
> ⚠️ Nota: il gap su **WCAG AA non è solo estetico** — è un **requisito** (PA + coerente coi principi di `docs/PRINCIPI_AI_E_CONFORMITA_NORMATIVA.md`). Va misurato, non assunto.
|
|
|
|
---
|
|
|
|
## 4. Strategia di adeguamento — 2 opzioni
|
|
|
|
### Opzione A — Allineamento a livello di TOKEN (consigliata)
|
|
Riscrivere `:root` di `style.css` con i token AGID (Blu Italia, Titillium, radius 4px, grigi BI) + caricare Titillium Web, **senza** introdurre la libreria Bootstrap Italia. La maggior parte delle pagine usa già le `var(--…)` → cambiando il `:root` si propaga.
|
|
- ✅ Pro: rischio basso, zero backend (come `MIGRATION_UI_V2`), riusa l'impianto esistente, copiabile dai token AgileHub V2.
|
|
- ⚠️ Contro: NON è "Bootstrap Italia certificato" al 100% (componenti/markup restano custom); è "look AGID-compliant a token". I colori **hardcoded** nei `<style>` inline (#1a73e8 ecc.) vanno bonificati uno per uno.
|
|
|
|
### Opzione B — Adozione libreria **bootstrap-italia**
|
|
Integrare il pacchetto ufficiale `bootstrap-italia` (CSS/JS) e rifare i markup con i componenti BI.
|
|
- ✅ Pro: conformità piena (componenti, accessibilità, header/footer istituzionali).
|
|
- ⚠️ Contro: **riscrittura UI estesa** (~20 pagine + sidebar JS), rischio regressioni, effort alto. Coerente solo se NIS2 si rivolge davvero a PA che esigono BI "vero".
|
|
|
|
**Raccomandazione**: partire da **A** (rapido, riallinea il 80% percepito), poi valutare **B** mirata sulle pagine pubbliche (landing/login) se serve la conformità formale PA.
|
|
|
|
---
|
|
|
|
## 5. Piano realizzativo (Opzione A)
|
|
|
|
| Fase | Attività | Verifica |
|
|
|---|---|---|
|
|
| 0 | **Recuperare i token AGID da AgileHub V2** (`globals.css`/tailwind) o dal branch `feat/v2-pilot-bootstrap-italia` di LG231 → single source of truth | token elencati |
|
|
| 1 | **Font**: caricare Titillium Web (self-host o Google Fonts), `--font-family: 'Titillium Web', system-ui…` | render su 3 pagine |
|
|
| 2 | **Palette**: `:root` → `--primary:#0066CC` + stati BI + grigi BI; mappare i vecchi nomi (`--secondary/--info/--danger/--warning`) | diff visivo |
|
|
| 3 | **Forme**: normalizzare radius→4px, ridurre ombre (flat) | componenti chiave |
|
|
| 4 | **Bonifica inline**: grep dei colori hardcoded (`#1a73e8`, `#4285f4`, `#34a853`…) nelle ~20 pagine → sostituire con `var(--…)` | `grep` = 0 hardcoded |
|
|
| 5 | **WCAG 2.1 AA**: audit contrasti (testo/grigi su bg), focus ring visibili, `aria-*`/alt mancanti → fix | report contrasti ≥ soglie |
|
|
| 6 | **Verifica**: build/serve, screenshot prima/dopo, check su login + 1 dashboard + 1 form; **NO modifiche backend** | pagine OK, 0 regressioni |
|
|
|
|
> **Disciplina**: zero backend (solo CSS/HTML/font/markup), commit incrementali, verifica visiva su pagina reale (non a memoria). Possibile farlo in **worktree isolato** (come il piano UI V2 esistente in `/tmp/nis2-ui-v2`) per non toccare la produzione finché non approvato.
|
|
|
|
---
|
|
|
|
## 6. Cosa serve da te / decisioni aperte
|
|
1. **Opzione A o B?** (consiglio A per iniziare).
|
|
2. **Sorgente token**: confermi che prendo i token AGID **dall'implementazione AgileHub V2** (così NIS2 è identico alla suite) anziché dal Bootstrap Italia "vergine"? Se sì mi serve l'accesso al loro `globals.css`/tailwind (path o repo).
|
|
3. **Archiviare `MIGRATION_UI_V2.md`** (piano "AGI dark") che ora è in conflitto con questa scelta?
|
|
4. **Scope**: tutte le ~20 pagine o partire dalle pubbliche (landing/login/onboarding) + dashboard?
|
|
|
|
---
|
|
|
|
## 7. Riferimenti
|
|
- UI attuale: `public/css/style.css`, `public/js/common.js` (`loadSidebar`)
|
|
- Piano UI alternativo (in conflitto): `docs/MIGRATION_UI_V2.md`
|
|
- Impl. AGID suite: `agile-services/docs/` (`project_dashboard_v2_agid_redesign_2026_06_06`), branch LG231 `feat/v2-pilot-bootstrap-italia`
|
|
- Design system ufficiale: Bootstrap Italia / Designers Italia (italia.it/designers) `[da verificare]` per token esatti
|
|
- Conformità/accessibilità: `docs/PRINCIPI_AI_E_CONFORMITA_NORMATIVA.md` (WCAG come requisito)
|