[UI] SWAP V2: Bootstrap Italia ora UFFICIALE su 27 pagine app (kill della vecchia UI)
Promosse le pagine -bi a nomi ufficiali (contenuto BI), link -bi->plain, titoli '(BI)' rimossi.
La vecchia UI delle pagine app e sostituita. Backup: git (commit 36967f9) + /tmp/nis2-v1-backup.
Promosse (27): auth (login/register/onboarding/forgot/reset) + app (dashboard/assessment/
risks/incidents/policies/supply-chain/training/assets/reports/settings/isms/acn-gap/normative/
whistleblowing/kb/cross-analysis/service-continuity/guida/companies) + admin (index/orgs/users).
common-bi.js: sidebar BI ora linka le pagine ufficiali.
ESCLUSA: index.html (landing marketing 1298 righe) -> conversione dedicata a parte (la -bi
era 557 righe, rischio perdita contenuti). Pagine marketing/demo (presentation/simulate/
workflow/architecture/index-en) restano vecchio stile (fuori scope app autenticata).
Verifica produzione: 27/27 servite 200 con BI, 0 link -bi residui, 0 '(BI)' nei titoli,
auth intatta (401 su pwd errata), common-bi.js node --check OK.
Rollback: git revert HEAD (oppure ripristino da /tmp/nis2-v1-backup).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
36967f9452
commit
1c64211685
+67
-63
@@ -4,84 +4,86 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imposta nuova password - NIS2 Agile</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<!-- Bootstrap Italia v2.18.1 — self-hostato da /vendor (MAI CDN). Variante "-bi" della reset-password.html. -->
|
||||
<link rel="stylesheet" href="vendor/bootstrap-italia/dist/css/bootstrap-italia.min.css">
|
||||
<style>
|
||||
body { min-height: 100vh; display: flex; align-items: center; background: #f5f6f7; }
|
||||
.auth-wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 24px; }
|
||||
.auth-brand { text-align: center; margin-bottom: 24px; }
|
||||
.auth-brand .brand-name { font-weight: 700; font-size: 1.5rem; color: #06c; }
|
||||
.auth-brand .brand-name span { color: #17324d; }
|
||||
.auth-brand .brand-sub { color: #5a6772; font-size: .9rem; margin-top: 4px; }
|
||||
.pw-wrap { position: relative; }
|
||||
.pw-wrap .form-input { padding-right: 42px; }
|
||||
.pw-toggle {
|
||||
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: #9CA3AF; font-size: 15px; padding: 0;
|
||||
}
|
||||
.strength-bar { display:flex; gap:3px; margin-top:6px; }
|
||||
.strength-bar span { flex:1; height:4px; border-radius:2px; background:#E0E4E8; transition:background .2s; }
|
||||
.strength-text { font-size:.78rem; color:#6B7280; margin-top:6px; min-height:16px; }
|
||||
.auth-success { background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; padding:12px 16px; border-radius:6px; font-size:.9rem; margin-bottom:16px; display:none; }
|
||||
.auth-success.visible { display:block; }
|
||||
.pw-rules { font-size:.78rem; color:#6B7280; margin-top:8px; line-height:1.6; }
|
||||
.back-link { display:block; text-align:center; margin-top:14px; font-size:.85rem; color:#6B7280; text-decoration:none; }
|
||||
.back-link:hover { color: var(--color-primary, #2563eb); }
|
||||
.pw-wrap .form-control { padding-right: 44px; }
|
||||
.pw-toggle { position: absolute; right: 8px; top: 8px; background: none; border: none; color: #5a6772; cursor: pointer; padding: 6px; }
|
||||
.ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-page">
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<div class="auth-logo">
|
||||
<div class="auth-logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.83-3.23 9.36-7 10.57-3.77-1.21-7-5.74-7-10.57V6.3l7-3.12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="auth-logo-text">NIS2 <span>Agile</span></span>
|
||||
</div>
|
||||
<p class="auth-subtitle">Imposta una nuova password</p>
|
||||
</div>
|
||||
<main class="auth-wrap">
|
||||
<div class="auth-brand">
|
||||
<div class="brand-name">NIS2 <span>Agile</span></div>
|
||||
<div class="brand-sub">Imposta una nuova password</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-body">
|
||||
<div class="auth-error" id="err"></div>
|
||||
<div class="auth-success" id="ok"></div>
|
||||
<div class="card card-bg has-bkg-grey shadow">
|
||||
<div class="card-body">
|
||||
<h1 class="h4 mb-3">Nuova password</h1>
|
||||
|
||||
<div class="alert alert-danger d-none" id="err" role="alert"></div>
|
||||
<div class="alert alert-success d-none" id="ok" role="status"></div>
|
||||
|
||||
<form id="reset-form" novalidate>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="pw">Nuova password</label>
|
||||
<label for="pw" class="active">Nuova password</label>
|
||||
<div class="pw-wrap">
|
||||
<input type="password" id="pw" class="form-input"
|
||||
placeholder="Almeno 8 caratteri" autocomplete="new-password" required>
|
||||
<button type="button" class="pw-toggle" onclick="togglePw('pw',this)" aria-label="Mostra/nascondi password">
|
||||
<i class="fas fa-eye"></i>
|
||||
<input type="password" id="pw" class="form-control"
|
||||
placeholder="Almeno 8 caratteri" autocomplete="new-password" required
|
||||
aria-describedby="strength-text">
|
||||
<button type="button" class="pw-toggle" tabindex="-1" onclick="togglePw('pw',this)" aria-label="Mostra o nascondi la password">
|
||||
<svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="strength-bar"><span></span><span></span><span></span><span></span></div>
|
||||
<div class="strength-text" id="strength-text"></div>
|
||||
<div class="progress mt-2" style="height:4px;">
|
||||
<div class="progress-bar" id="strength-bar" role="progressbar" style="width:0%;" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="form-text" id="strength-text" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="pw2">Conferma password</label>
|
||||
<label for="pw2" class="active">Conferma password</label>
|
||||
<div class="pw-wrap">
|
||||
<input type="password" id="pw2" class="form-input"
|
||||
<input type="password" id="pw2" class="form-control"
|
||||
placeholder="Ripeti la password" autocomplete="new-password" required>
|
||||
<button type="button" class="pw-toggle" onclick="togglePw('pw2',this)" aria-label="Mostra/nascondi password">
|
||||
<i class="fas fa-eye"></i>
|
||||
<button type="button" class="pw-toggle" tabindex="-1" onclick="togglePw('pw2',this)" aria-label="Mostra o nascondi la password">
|
||||
<svg class="icon icon-sm" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="pw-rules">Minimo 8 caratteri, con almeno una maiuscola, una minuscola e un numero.</p>
|
||||
<p class="text-muted small mb-3">Minimo 8 caratteri, con almeno una maiuscola, una minuscola e un numero.</p>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg w-full" id="submit-btn" style="margin-top:12px;">
|
||||
<button type="submit" class="btn btn-primary w-100" id="submit-btn">
|
||||
Imposta password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="auth-footer">
|
||||
<a href="login.html" class="back-link"><i class="fas fa-arrow-left"></i> Torna al login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center mt-3 mb-0">
|
||||
<a href="login.html">
|
||||
<svg class="ico me-1" aria-hidden="true"><use href="vendor/bootstrap-italia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
|
||||
Torna al login
|
||||
</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="vendor/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js"></script>
|
||||
<script>
|
||||
if (window.bootstrap && bootstrap.loadFonts) { bootstrap.loadFonts('vendor/bootstrap-italia/dist/fonts'); }
|
||||
</script>
|
||||
|
||||
<!-- Stessa logica della reset-password.html: ZERO modifiche backend -->
|
||||
<script>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const token = urlParams.get('token') || '';
|
||||
@@ -90,19 +92,20 @@
|
||||
const form = document.getElementById('reset-form');
|
||||
const btn = document.getElementById('submit-btn');
|
||||
const pwInput = document.getElementById('pw');
|
||||
const pwBars = document.querySelectorAll('.strength-bar span');
|
||||
const pwBar = document.getElementById('strength-bar');
|
||||
const pwText = document.getElementById('strength-text');
|
||||
|
||||
if (!token) {
|
||||
err.textContent = 'Token mancante. Richiedi un nuovo link di reset.';
|
||||
err.classList.add('visible');
|
||||
err.classList.remove('d-none');
|
||||
form.style.display = 'none';
|
||||
}
|
||||
|
||||
function togglePw(id, button) {
|
||||
const i = document.getElementById(id);
|
||||
if (i.type === 'password') { i.type = 'text'; button.innerHTML = '<i class="fas fa-eye-slash"></i>'; }
|
||||
else { i.type = 'password'; button.innerHTML = '<i class="fas fa-eye"></i>'; }
|
||||
i.type = (i.type === 'password') ? 'text' : 'password';
|
||||
const use = button.querySelector('use');
|
||||
use.setAttribute('href', 'vendor/bootstrap-italia/dist/svg/sprites.svg#' + (i.type === 'text' ? 'it-password-invisible' : 'it-password-visible'));
|
||||
}
|
||||
|
||||
function computeStrength(pw) {
|
||||
@@ -116,27 +119,28 @@
|
||||
|
||||
pwInput.addEventListener('input', function() {
|
||||
const s = computeStrength(pwInput.value);
|
||||
const colors = ['#E0E4E8', '#EF4444', '#F59E0B', '#3B82F6', '#10B981'];
|
||||
const colors = ['#d4d8db', '#d9364f', '#e58a00', '#06c', '#008758'];
|
||||
const labels = ['', 'Debole', 'Media', 'Buona', 'Ottima'];
|
||||
pwBars.forEach(function(bar, i) { bar.style.background = (i < s) ? colors[s] : '#E0E4E8'; });
|
||||
pwBar.style.width = (pwInput.value.length > 0 ? (s * 25) : 0) + '%';
|
||||
pwBar.style.backgroundColor = colors[s];
|
||||
pwText.textContent = pwInput.value.length > 0 ? 'Sicurezza: ' + labels[s] : '';
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
err.classList.remove('visible');
|
||||
ok.classList.remove('visible');
|
||||
err.classList.add('d-none');
|
||||
ok.classList.add('d-none');
|
||||
|
||||
const pw = document.getElementById('pw').value;
|
||||
const pw2 = document.getElementById('pw2').value;
|
||||
if (pw !== pw2) {
|
||||
err.textContent = 'Le due password non coincidono.';
|
||||
err.classList.add('visible');
|
||||
err.classList.remove('d-none');
|
||||
return;
|
||||
}
|
||||
if (pw.length < 8) {
|
||||
err.textContent = 'La password deve essere di almeno 8 caratteri.';
|
||||
err.classList.add('visible');
|
||||
err.classList.remove('d-none');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -151,16 +155,16 @@
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
ok.textContent = data.message + ' Sarai reindirizzato al login.';
|
||||
ok.classList.add('visible');
|
||||
ok.classList.remove('d-none');
|
||||
form.style.display = 'none';
|
||||
setTimeout(function() { window.location.href = 'login.html'; }, 2500);
|
||||
} else {
|
||||
err.textContent = data.message || 'Errore. Token non valido o scaduto.';
|
||||
err.classList.add('visible');
|
||||
err.classList.remove('d-none');
|
||||
}
|
||||
} catch (e) {
|
||||
err.textContent = 'Errore di connessione al server.';
|
||||
err.classList.add('visible');
|
||||
err.classList.remove('d-none');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Imposta password';
|
||||
|
||||
Reference in New Issue
Block a user