AdminGit2026/nis2-agile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Ruolo Consulente + Wizard Registrazione v2

Browse Source 
- register.html: step 0 scelta profilo (Azienda / Consulente)
- onboarding.html: wizard 4-step con P.IVA obbligatoria (auto-fetch CertiSource)
- companies.html: nuova dashboard consulente con cards aziende e compliance score
- common.js: org-switcher sidebar + role labels corretti per consulente
- login.html: routing post-login (consulente → companies.html)
- api.js: isConsultant(), setUserRole(), register con user_type
- AuthController: user_type=consultant → role=consultant in users table
- OnboardingController: multi-org per consulente, duplicate VAT check
- 005_consultant_support.sql: aggiunge 'consultant' a user_organizations.role ENUM

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
2026-02-20 08:53:30 +01:00
co-authored by Claude Sonnet 4.6
parent ba21534e6a
commit 7080695d06
9 changed files with 976 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/register.html
+139 -79
View File
@@ -5,6 +5,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrazione - NIS2 Agile</title>
<link rel="stylesheet" href="css/style.css">
<style>
.profile-choice { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.profile-card {
flex: 1; border: 2px solid var(--border-color, #e5e7eb); border-radius: 12px;
padding: 1.25rem 1rem; text-align: center; cursor: pointer;
transition: all .2s; background: var(--bg-card, #fff);
}
.profile-card:hover { border-color: var(--color-primary, #2563eb); background: #eff6ff; }
.profile-card.selected {
border-color: var(--color-primary, #2563eb); background: #eff6ff;
box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.profile-card-icon { font-size: 2rem; margin-bottom: .5rem; }
.profile-card-title { font-weight: 700; font-size: .95rem; color: var(--text-primary, #111); margin-bottom: .25rem; }
.profile-card-desc { font-size: .75rem; color: var(--text-secondary, #6b7280); line-height: 1.4; }
.step-indicator { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color, #e5e7eb); transition: background .2s; }
.step-dot.active { background: var(--color-primary, #2563eb); }
.step-dot.done { background: var(--color-success, #10b981); }
#step-0 { display: block; }
#step-1 { display: none; }
</style>
</head>
<body>
<div class="auth-page">
@@ -19,50 +41,82 @@
</div>
<span class="auth-logo-text">NIS2 <span>Agile</span></span>
</div>
<p class="auth-subtitle">Crea il tuo account</p>
<p class="auth-subtitle" id="auth-subtitle">Scegli il tuo profilo</p>
</div>
<div class="auth-body">
<div class="step-indicator">
<div class="step-dot active" id="dot-0"></div>
<div class="step-dot" id="dot-1"></div>
</div>
<div class="auth-error" id="register-error"></div>
<form id="register-form" novalidate>
<div class="form-group">
<label class="form-label" for="fullname">Nome Completo <span class="required">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-input"
placeholder="Mario Rossi" autocomplete="name" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Indirizzo Email <span class="required">*</span></label>
<input type="email" id="email" name="email" class="form-input"
placeholder="nome@azienda.it" autocomplete="email" required>
</div>
<div class="form-group">
<label class="form-label" for="password">Password <span class="required">*</span></label>
<input type="password" id="password" name="password" class="form-input"
placeholder="Minimo 8 caratteri" autocomplete="new-password" required>
<div class="password-strength" id="password-strength">
<div class="password-strength-bar">
<div class="password-strength-segment" id="ps-1"></div>
<div class="password-strength-segment" id="ps-2"></div>
<div class="password-strength-segment" id="ps-3"></div>
<div class="password-strength-segment" id="ps-4"></div>
</div>
<div class="password-strength-text" id="ps-text"></div>
<!-- STEP 0: Scelta profilo -->
<div id="step-0">
<div class="profile-choice">
<div class="profile-card" id="card-azienda" onclick="selectProfile('azienda')">
<div class="profile-card-icon">🏢</div>
<div class="profile-card-title">Azienda</div>
<div class="profile-card-desc">Porto la mia organizzazione in compliance NIS2</div>
</div>
<div class="profile-card" id="card-consultant" onclick="selectProfile('consultant')">
<div class="profile-card-icon">👤</div>
<div class="profile-card-title">Consulente / CISO</div>
<div class="profile-card-desc">Gestisco la compliance di più aziende clienti</div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="password-confirm">Conferma Password <span class="required">*</span></label>
<input type="password" id="password-confirm" name="password-confirm" class="form-input"
placeholder="Ripeti la password" autocomplete="new-password" required>
</div>
<button type="submit" class="btn btn-primary btn-lg w-full" id="register-btn">
Crea Account
<button class="btn btn-primary btn-lg w-full" id="btn-next" onclick="goToStep1()" disabled>
Continua →
</button>
</form>
</div>
<!-- STEP 1: Dati account -->
<div id="step-1">
<form id="register-form" novalidate>
<div class="form-group">
<label class="form-label" for="fullname">Nome Completo <span class="required">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-input"
placeholder="Mario Rossi" autocomplete="name" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Indirizzo Email <span class="required">*</span></label>
<input type="email" id="email" name="email" class="form-input"
placeholder="nome@azienda.it" autocomplete="email" required>
</div>
<div class="form-group">
<label class="form-label" for="password">Password <span class="required">*</span></label>
<input type="password" id="password" name="password" class="form-input"
placeholder="Minimo 8 caratteri" autocomplete="new-password" required>
<div class="password-strength" id="password-strength">
<div class="password-strength-bar">
<div class="password-strength-segment" id="ps-1"></div>
<div class="password-strength-segment" id="ps-2"></div>
<div class="password-strength-segment" id="ps-3"></div>
<div class="password-strength-segment" id="ps-4"></div>
</div>
<div class="password-strength-text" id="ps-text"></div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="password-confirm">Conferma Password <span class="required">*</span></label>
<input type="password" id="password-confirm" name="password-confirm" class="form-input"
placeholder="Ripeti la password" autocomplete="new-password" required>
</div>
<div style="display:flex; gap:.75rem;">
<button type="button" class="btn btn-secondary" onclick="goToStep0()" style="flex:0 0 auto;">
← Indietro
</button>
<button type="submit" class="btn btn-primary btn-lg" id="register-btn" style="flex:1;">
Crea Account
</button>
</div>
</form>
</div>
</div>
<div class="auth-footer">
@@ -74,56 +128,68 @@
<script src="js/api.js"></script>
<script src="js/common.js"></script>
<script>
// Se gia' autenticato, vai alla dashboard
if (api.isAuthenticated()) {
window.location.href = 'dashboard.html';
}
const form = document.getElementById('register-form');
const errorEl = document.getElementById('register-error');
const registerBtn = document.getElementById('register-btn');
const passwordInput = document.getElementById('password');
let selectedUserType = null;
// ── Password Strength Indicator ──────────────────────────
function selectProfile(type) {
selectedUserType = type;
document.querySelectorAll('.profile-card').forEach(c => c.classList.remove('selected'));
document.getElementById('card-' + type).classList.add('selected');
document.getElementById('btn-next').disabled = false;
}
function goToStep1() {
if (!selectedUserType) return;
document.getElementById('step-0').style.display = 'none';
document.getElementById('step-1').style.display = 'block';
document.getElementById('dot-0').classList.replace('active', 'done');
document.getElementById('dot-1').classList.add('active');
const labels = { azienda: 'Crea il tuo account aziendale', consultant: 'Crea il tuo account da Consulente' };
document.getElementById('auth-subtitle').textContent = labels[selectedUserType];
}
function goToStep0() {
document.getElementById('step-1').style.display = 'none';
document.getElementById('step-0').style.display = 'block';
document.getElementById('dot-1').classList.remove('active');
document.getElementById('dot-0').className = 'step-dot active';
document.getElementById('auth-subtitle').textContent = 'Scegli il tuo profilo';
}
// Password Strength
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('input', () => {
const val = passwordInput.value;
const strength = calcPasswordStrength(val);
updateStrengthUI(strength);
updateStrengthUI(calcPasswordStrength(passwordInput.value));
});
function calcPasswordStrength(password) {
let score = 0;
if (password.length >= 8) score++;
if (password.length >= 12) score++;
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
if (/\d/.test(password)) score++;
if (/[^a-zA-Z0-9]/.test(password)) score++;
// Normalize to 0-4
if (score <= 1) return 1;
if (score === 2) return 2;
if (score === 3) return 3;
return 4;
function calcPasswordStrength(pw) {
let s = 0;
if (pw.length >= 8) s++;
if (pw.length >= 12) s++;
if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s++;
if (/\d/.test(pw)) s++;
if (/[^a-zA-Z0-9]/.test(pw)) s++;
return Math.min(4, Math.max(1, s <= 1 ? 1 : s === 2 ? 2 : s === 3 ? 3 : 4));
}
function updateStrengthUI(level) {
const labels = { 1: 'Debole', 2: 'Sufficiente', 3: 'Buona', 4: 'Forte' };
const classes = { 1: 'weak', 2: 'fair', 3: 'good', 4: 'strong' };
const textEl = document.getElementById('ps-text');
for (let i = 1; i <= 4; i++) {
const seg = document.getElementById('ps-' + i);
seg.className = 'password-strength-segment';
if (i <= level && passwordInput.value.length > 0) {
seg.classList.add('active', classes[level]);
}
if (i <= level && passwordInput.value.length > 0) seg.classList.add('active', classes[level]);
}
textEl.textContent = passwordInput.value.length > 0 ? labels[level] : '';
document.getElementById('ps-text').textContent = passwordInput.value.length > 0 ? labels[level] : '';
}
// ── Form Submit ──────────────────────────────────────────
form.addEventListener('submit', async (e) => {
// Form Submit
document.getElementById('register-form').addEventListener('submit', async (e) => {
e.preventDefault();
const errorEl = document.getElementById('register-error');
errorEl.classList.remove('visible');
const fullname = document.getElementById('fullname').value.trim();
@@ -131,37 +197,31 @@
const password = document.getElementById('password').value;
const passwordConfirm = document.getElementById('password-confirm').value;
// Validazione
if (!fullname || !email || !password || !passwordConfirm) {
errorEl.textContent = 'Tutti i campi sono obbligatori.';
errorEl.classList.add('visible');
return;
}
if (password.length < 8) {
errorEl.textContent = 'La password deve avere almeno 8 caratteri.';
errorEl.classList.add('visible');
return;
}
if (password !== passwordConfirm) {
errorEl.textContent = 'Le password non coincidono.';
errorEl.classList.add('visible');
return;
}
registerBtn.disabled = true;
registerBtn.textContent = 'Registrazione in corso...';
const btn = document.getElementById('register-btn');
btn.disabled = true;
btn.textContent = 'Registrazione in corso...';
try {
const result = await api.register(email, password, fullname);
const result = await api.register(email, password, fullname, selectedUserType);
if (result.success) {
showNotification('Account creato con successo!', 'success');
// Dopo la registrazione, porta al setup organizzazione
setTimeout(() => {
window.location.href = 'onboarding.html';
}, 500);
setTimeout(() => { window.location.href = 'onboarding.html'; }, 500);
} else {
errorEl.textContent = result.message || 'Errore durante la registrazione.';
errorEl.classList.add('visible');
@@ -170,8 +230,8 @@
errorEl.textContent = 'Errore di connessione al server.';
errorEl.classList.add('visible');
} finally {
registerBtn.disabled = false;
registerBtn.textContent = 'Crea Account';
btn.disabled = false;
btn.textContent = 'Crea Account';
}
});
</script>