Cristiano Benassati
ae78a2f7f4
Complete MVP implementation including: - PHP 8.4 backend with Front Controller pattern (80+ API endpoints) - Multi-tenant architecture with organization_id isolation - JWT authentication (HS256, 2h access + 7d refresh tokens) - 14 controllers: Auth, Organization, Assessment, Dashboard, Risk, Incident, Policy, SupplyChain, Training, Asset, Audit, Admin - AI Service integration (Anthropic Claude API) for gap analysis, risk suggestions, policy generation, incident classification - NIS2 gap analysis questionnaire (~80 questions, 10 categories) - MySQL schema (20 tables) with NIS2 Art. 21 compliance controls - NIS2 Art. 23 incident reporting workflow (24h/72h/30d) - Frontend: login, register, dashboard, assessment wizard, org setup - Docker configuration (PHP-FPM + Nginx + MySQL) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
180 lines
8.0 KiB
HTML
180 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Registrazione - NIS2 Agile</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</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"/>
|
|
<path d="M10 12.5l-2-2-1.41 1.41L10 15.32l5.41-5.41L14 8.5l-4 4z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="auth-logo-text">NIS2 <span>Agile</span></span>
|
|
</div>
|
|
<p class="auth-subtitle">Crea il tuo account</p>
|
|
</div>
|
|
|
|
<div class="auth-body">
|
|
<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>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="auth-footer">
|
|
<p>Hai gia' un account? <a href="login.html">Accedi</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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');
|
|
|
|
// ── Password Strength Indicator ──────────────────────────
|
|
passwordInput.addEventListener('input', () => {
|
|
const val = passwordInput.value;
|
|
const strength = calcPasswordStrength(val);
|
|
updateStrengthUI(strength);
|
|
});
|
|
|
|
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 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]);
|
|
}
|
|
}
|
|
|
|
textEl.textContent = passwordInput.value.length > 0 ? labels[level] : '';
|
|
}
|
|
|
|
// ── Form Submit ──────────────────────────────────────────
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
errorEl.classList.remove('visible');
|
|
|
|
const fullname = document.getElementById('fullname').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
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...';
|
|
|
|
try {
|
|
const result = await api.register(email, password, fullname);
|
|
|
|
if (result.success) {
|
|
showNotification('Account creato con successo!', 'success');
|
|
// Dopo la registrazione, porta al setup organizzazione
|
|
setTimeout(() => {
|
|
window.location.href = 'setup-org.html';
|
|
}, 500);
|
|
} else {
|
|
errorEl.textContent = result.message || 'Errore durante la registrazione.';
|
|
errorEl.classList.add('visible');
|
|
}
|
|
} catch (err) {
|
|
errorEl.textContent = 'Errore di connessione al server.';
|
|
errorEl.classList.add('visible');
|
|
} finally {
|
|
registerBtn.disabled = false;
|
|
registerBtn.textContent = 'Crea Account';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|