e4e7d94043
login.html: eye toggle, forgot password, auth-terms footer register.html: wizard 3-step, 5 ruoli NIS2, invite_token URL, P.IVA lookup onboarding.html: Font Awesome, brand color cyan (#06B6D4) test-runner.php: L1-L5 test levels, SIM-06 B2B, tab Coverage/Stats, DB row counts, run history (localStorage), 5 tabs totali Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
653 lines
32 KiB
HTML
653 lines
32 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">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
/* Step indicator */
|
|
.step-indicator {
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 0; margin-bottom: 1.75rem;
|
|
}
|
|
.step-item {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
position: relative;
|
|
}
|
|
.step-circle {
|
|
width: 32px; height: 32px; border-radius: 50%;
|
|
border: 2px solid var(--border-color, #e5e7eb);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: .8rem; font-weight: 700;
|
|
color: var(--text-secondary, #6b7280);
|
|
background: var(--bg-card, #fff);
|
|
transition: all .25s;
|
|
}
|
|
.step-item.active .step-circle {
|
|
border-color: var(--color-primary, #2563eb);
|
|
color: var(--color-primary, #2563eb);
|
|
background: #eff6ff;
|
|
}
|
|
.step-item.done .step-circle {
|
|
border-color: var(--color-success, #10b981);
|
|
background: var(--color-success, #10b981);
|
|
color: #fff;
|
|
}
|
|
.step-label {
|
|
font-size: .68rem; color: var(--text-secondary, #6b7280);
|
|
margin-top: 4px; white-space: nowrap;
|
|
}
|
|
.step-item.active .step-label { color: var(--color-primary, #2563eb); font-weight: 600; }
|
|
.step-connector {
|
|
width: 48px; height: 2px;
|
|
background: var(--border-color, #e5e7eb);
|
|
margin-bottom: 18px; transition: background .25s;
|
|
}
|
|
.step-connector.done { background: var(--color-success, #10b981); }
|
|
|
|
/* Role cards */
|
|
.role-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
|
gap: .75rem; margin-bottom: 1.25rem;
|
|
}
|
|
.role-card {
|
|
border: 2px solid var(--border-color, #e5e7eb);
|
|
border-radius: 12px; padding: 1rem .875rem;
|
|
cursor: pointer; transition: all .2s;
|
|
background: var(--bg-card, #fff);
|
|
text-align: left;
|
|
}
|
|
.role-card:hover { border-color: #06B6D4; background: #ecfeff; }
|
|
.role-card.selected {
|
|
border-color: #06B6D4; background: #ecfeff;
|
|
box-shadow: 0 0 0 3px rgba(6,182,212,.15);
|
|
}
|
|
.role-card-icon {
|
|
width: 36px; height: 36px; border-radius: 8px;
|
|
background: rgba(6,182,212,.12); color: #06B6D4;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1rem; margin-bottom: .6rem;
|
|
}
|
|
.role-card.selected .role-card-icon { background: rgba(6,182,212,.2); }
|
|
.role-card-title { font-weight: 700; font-size: .88rem; color: var(--text-primary, #111); margin-bottom: .2rem; }
|
|
.role-card-desc { font-size: .72rem; color: var(--text-secondary, #6b7280); line-height: 1.45; }
|
|
|
|
/* Invite code section */
|
|
.invite-section {
|
|
border: 1px dashed var(--border-color, #e5e7eb);
|
|
border-radius: 10px; padding: .875rem 1rem; margin-bottom: 1rem;
|
|
}
|
|
.invite-section summary {
|
|
cursor: pointer; font-size: .82rem; font-weight: 600;
|
|
color: var(--text-secondary, #6b7280); list-style: none;
|
|
display: flex; align-items: center; gap: .5rem;
|
|
}
|
|
.invite-section summary::-webkit-details-marker { display: none; }
|
|
.invite-section[open] summary { color: var(--color-primary, #2563eb); }
|
|
.invite-section .form-group { margin-top: .75rem; margin-bottom: 0; }
|
|
.invite-badge {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
font-size: .75rem; padding: .25rem .6rem; border-radius: 20px;
|
|
background: #dcfce7; color: #15803d; font-weight: 600;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
/* Password eye toggle */
|
|
.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; transition: color .2s;
|
|
}
|
|
.pw-toggle:hover { color: #06B6D4; }
|
|
|
|
/* Lookup status */
|
|
.lookup-status {
|
|
font-size: .75rem; margin-top: .35rem; min-height: 1.1rem;
|
|
display: flex; align-items: center; gap: .35rem;
|
|
}
|
|
.lookup-status.ok { color: #15803d; }
|
|
.lookup-status.err { color: var(--color-danger, #ef4444); }
|
|
.lookup-status.loading { color: #6b7280; }
|
|
|
|
/* Success step */
|
|
.success-body { text-align: center; padding: .5rem 0 1.5rem; }
|
|
.success-icon {
|
|
width: 64px; height: 64px; border-radius: 50%;
|
|
background: linear-gradient(135deg, #06B6D4, #0891b2);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 1.25rem; color: #fff; font-size: 1.75rem;
|
|
}
|
|
.success-title { font-size: 1.3rem; font-weight: 800; color: var(--text-primary, #111); margin-bottom: .5rem; }
|
|
.success-desc { font-size: .9rem; color: var(--text-secondary, #6b7280); line-height: 1.6; margin-bottom: 1.5rem; }
|
|
|
|
/* Auth terms */
|
|
.auth-terms {
|
|
margin-top: 14px; padding-top: 14px;
|
|
border-top: 1px solid var(--border-color, #e5e7eb);
|
|
text-align: center; font-size: .72rem; color: #9CA3AF; line-height: 1.8;
|
|
}
|
|
.auth-terms a { color: #6B7280; text-decoration: underline; }
|
|
|
|
/* Steps display */
|
|
#step-0, #step-1, #step-2 { display: none; }
|
|
#step-0 { display: block; }
|
|
</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"/>
|
|
<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" id="auth-subtitle">Crea il tuo account</p>
|
|
</div>
|
|
|
|
<div class="auth-body">
|
|
<!-- Step indicator -->
|
|
<div class="step-indicator" id="step-indicator">
|
|
<div class="step-item active" id="si-0">
|
|
<div class="step-circle">1</div>
|
|
<div class="step-label">Ruolo</div>
|
|
</div>
|
|
<div class="step-connector" id="conn-0"></div>
|
|
<div class="step-item" id="si-1">
|
|
<div class="step-circle">2</div>
|
|
<div class="step-label">Dati</div>
|
|
</div>
|
|
<div class="step-connector" id="conn-1"></div>
|
|
<div class="step-item" id="si-2">
|
|
<div class="step-circle">3</div>
|
|
<div class="step-label">Fatto</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-error" id="register-error"></div>
|
|
|
|
<!-- STEP 0: Ruolo + Codice Invito -->
|
|
<div id="step-0">
|
|
<div class="role-grid">
|
|
<div class="role-card" id="card-compliance_manager" onclick="selectRole('compliance_manager')">
|
|
<div class="role-card-icon"><i class="fas fa-shield-alt"></i></div>
|
|
<div class="role-card-title">CISO / Compliance Manager</div>
|
|
<div class="role-card-desc">Responsabile sicurezza e conformità NIS2 dell'organizzazione</div>
|
|
</div>
|
|
<div class="role-card" id="card-org_admin" onclick="selectRole('org_admin')">
|
|
<div class="role-card-icon"><i class="fas fa-building"></i></div>
|
|
<div class="role-card-title">Legale Rappresentante / Admin</div>
|
|
<div class="role-card-desc">Amministratore e legale rappresentante dell'organizzazione</div>
|
|
</div>
|
|
<div class="role-card" id="card-consultant" onclick="selectRole('consultant')">
|
|
<div class="role-card-icon"><i class="fas fa-user-tie"></i></div>
|
|
<div class="role-card-title">Consulente Cybersecurity</div>
|
|
<div class="role-card-desc">Gestisco la compliance NIS2 per più aziende clienti</div>
|
|
</div>
|
|
<div class="role-card" id="card-auditor" onclick="selectRole('auditor')">
|
|
<div class="role-card-icon"><i class="fas fa-search"></i></div>
|
|
<div class="role-card-title">Auditor / Revisore</div>
|
|
<div class="role-card-desc">Verifico e valuto l'implementazione dei controlli di sicurezza</div>
|
|
</div>
|
|
<div class="role-card" id="card-board_member" onclick="selectRole('board_member')" style="grid-column: span 2;">
|
|
<div class="role-card-icon"><i class="fas fa-chess-king"></i></div>
|
|
<div class="role-card-title">Board Member / DPO</div>
|
|
<div class="role-card-desc">Membro del consiglio o Responsabile della Protezione dei Dati con visibilità strategica</div>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="invite-section" id="invite-details">
|
|
<summary><i class="fas fa-ticket-alt"></i> Ho un codice di invito B2B</summary>
|
|
<div class="form-group">
|
|
<label class="form-label" for="invite-code">Codice Invito</label>
|
|
<input type="text" id="invite-code" class="form-input"
|
|
placeholder="es. NIS2-XXXX-YYYY" autocomplete="off"
|
|
oninput="validateInvite(this.value)">
|
|
<div class="lookup-status" id="invite-status"></div>
|
|
</div>
|
|
</details>
|
|
|
|
<button class="btn btn-primary btn-lg w-full" id="btn-next-0" onclick="goToStep1()" disabled>
|
|
Continua <i class="fas fa-arrow-right" style="margin-left:.4rem;"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- STEP 1: Dati account -->
|
|
<div id="step-1">
|
|
<form id="register-form" novalidate>
|
|
<div style="display:flex; gap:.75rem;">
|
|
<div class="form-group" style="flex:1;">
|
|
<label class="form-label" for="firstname">Nome <span class="required">*</span></label>
|
|
<input type="text" id="firstname" name="firstname" class="form-input"
|
|
placeholder="Mario" autocomplete="given-name" required>
|
|
</div>
|
|
<div class="form-group" style="flex:1;">
|
|
<label class="form-label" for="lastname">Cognome <span class="required">*</span></label>
|
|
<input type="text" id="lastname" name="lastname" class="form-input"
|
|
placeholder="Rossi" autocomplete="family-name" required>
|
|
</div>
|
|
</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" id="piva-group">
|
|
<label class="form-label" for="piva">Partita IVA Azienda <span class="required">*</span></label>
|
|
<input type="text" id="piva" name="piva" class="form-input"
|
|
placeholder="12345678901" maxlength="11"
|
|
oninput="lookupPiva(this.value)">
|
|
<div class="lookup-status" id="piva-status"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password <span class="required">*</span></label>
|
|
<div class="pw-wrap">
|
|
<input type="password" id="password" name="password" class="form-input"
|
|
placeholder="Minimo 8 caratteri" autocomplete="new-password" required>
|
|
<button type="button" class="pw-toggle" tabindex="-1"
|
|
onclick="togglePw('password', this)" aria-label="Mostra/nascondi password">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<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>
|
|
<div class="pw-wrap">
|
|
<input type="password" id="password-confirm" name="password-confirm" class="form-input"
|
|
placeholder="Ripeti la password" autocomplete="new-password" required>
|
|
<button type="button" class="pw-toggle" tabindex="-1"
|
|
onclick="togglePw('password-confirm', this)" aria-label="Mostra/nascondi password">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; gap:.75rem;">
|
|
<button type="button" class="btn btn-secondary" onclick="goToStep0()" style="flex:0 0 auto;">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-primary btn-lg" id="register-btn" style="flex:1;">
|
|
Crea Account
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- STEP 2: Successo -->
|
|
<div id="step-2">
|
|
<div class="success-body">
|
|
<div class="success-icon"><i class="fas fa-check"></i></div>
|
|
<div class="success-title" id="success-title">Account creato!</div>
|
|
<div class="success-desc" id="success-desc">
|
|
Il tuo account NIS2 Agile è pronto. Stai per essere reindirizzato...
|
|
</div>
|
|
<button class="btn btn-primary btn-lg w-full" id="success-btn" onclick="goToDashboard()">
|
|
Entra nella piattaforma <i class="fas fa-arrow-right" style="margin-left:.4rem;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-footer">
|
|
<p>Hai già un account? <a href="login.html">Accedi</a></p>
|
|
<div class="auth-terms">
|
|
Registrandoti accetti i nostri
|
|
<a href="https://agentai.agile.software/terms" target="_blank">Termini di Servizio</a>
|
|
e la <a href="https://agentai.agile.software/privacy" target="_blank">Privacy Policy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/api.js"></script>
|
|
<script src="js/common.js"></script>
|
|
<script>
|
|
if (api.isAuthenticated()) {
|
|
window.location.href = 'dashboard.html';
|
|
}
|
|
|
|
// --- State ---
|
|
let selectedRole = null;
|
|
let inviteValid = false;
|
|
let inviteToken = null;
|
|
let pivaData = null;
|
|
let pivaLookupTimer = null;
|
|
let successRedirect = 'onboarding.html';
|
|
|
|
// --- URL Params pre-fill ---
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.get('role')) {
|
|
// Will apply after DOM is ready (in DOMContentLoaded equivalent below)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const r = params.get('role');
|
|
if (document.getElementById('card-' + r)) selectRole(r);
|
|
});
|
|
}
|
|
if (params.get('invite_token')) {
|
|
inviteToken = params.get('invite_token');
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const details = document.getElementById('invite-details');
|
|
details.open = true;
|
|
const inp = document.getElementById('invite-code');
|
|
inp.value = inviteToken;
|
|
validateInvite(inviteToken);
|
|
});
|
|
}
|
|
|
|
// --- Role Selection ---
|
|
function selectRole(role) {
|
|
selectedRole = role;
|
|
document.querySelectorAll('.role-card').forEach(c => c.classList.remove('selected'));
|
|
const card = document.getElementById('card-' + role);
|
|
if (card) card.classList.add('selected');
|
|
document.getElementById('btn-next-0').disabled = false;
|
|
|
|
// Hide P.IVA for consultant role
|
|
const pivaGroup = document.getElementById('piva-group');
|
|
pivaGroup.style.display = (role === 'consultant') ? 'none' : 'block';
|
|
}
|
|
|
|
// Pre-fill from URL after DOM ready
|
|
(function() {
|
|
const r = params.get('role');
|
|
if (r && document.getElementById('card-' + r)) selectRole(r);
|
|
const tok = params.get('invite_token');
|
|
if (tok) {
|
|
inviteToken = tok;
|
|
document.getElementById('invite-details').open = true;
|
|
document.getElementById('invite-code').value = tok;
|
|
validateInvite(tok);
|
|
}
|
|
// Pre-fill name/email
|
|
if (params.get('nome')) document.getElementById('firstname').value = params.get('nome');
|
|
if (params.get('cognome')) document.getElementById('lastname').value = params.get('cognome');
|
|
if (params.get('email')) document.getElementById('email').value = params.get('email');
|
|
})();
|
|
|
|
// --- Invite Code Validation ---
|
|
let inviteTimer = null;
|
|
function validateInvite(val) {
|
|
const statusEl = document.getElementById('invite-status');
|
|
clearTimeout(inviteTimer);
|
|
val = val.trim();
|
|
if (!val) {
|
|
inviteValid = false;
|
|
inviteToken = null;
|
|
statusEl.innerHTML = '';
|
|
return;
|
|
}
|
|
statusEl.className = 'lookup-status loading';
|
|
statusEl.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifica codice...';
|
|
inviteTimer = setTimeout(async () => {
|
|
try {
|
|
const res = await fetch(api.baseUrl + '/auth/validate-invite', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ invite_token: val })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
inviteValid = true;
|
|
inviteToken = val;
|
|
statusEl.className = 'lookup-status ok';
|
|
statusEl.innerHTML = '<i class="fas fa-check-circle"></i> Codice valido — accesso B2B confermato';
|
|
// Pre-fill role if provided
|
|
if (data.role && document.getElementById('card-' + data.role)) {
|
|
selectRole(data.role);
|
|
}
|
|
// Pre-fill name/email from invite
|
|
if (data.nome) document.getElementById('firstname').value = data.nome;
|
|
if (data.cognome) document.getElementById('lastname').value = data.cognome;
|
|
if (data.email) document.getElementById('email').value = data.email;
|
|
} else {
|
|
inviteValid = false;
|
|
inviteToken = null;
|
|
statusEl.className = 'lookup-status err';
|
|
statusEl.innerHTML = '<i class="fas fa-times-circle"></i> Codice non valido';
|
|
}
|
|
} catch {
|
|
// Network error: accept token optimistically, validate on submit
|
|
inviteValid = false;
|
|
statusEl.className = 'lookup-status err';
|
|
statusEl.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Impossibile verificare';
|
|
}
|
|
}, 600);
|
|
}
|
|
|
|
// --- P.IVA Lookup ---
|
|
function lookupPiva(val) {
|
|
clearTimeout(pivaLookupTimer);
|
|
val = val.replace(/\s/g, '');
|
|
const statusEl = document.getElementById('piva-status');
|
|
if (val.length !== 11) {
|
|
pivaData = null;
|
|
statusEl.innerHTML = '';
|
|
return;
|
|
}
|
|
statusEl.className = 'lookup-status loading';
|
|
statusEl.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Ricerca azienda...';
|
|
pivaLookupTimer = setTimeout(async () => {
|
|
try {
|
|
const res = await fetch(api.baseUrl + '/onboarding/fetch-company', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': 'Bearer ' + (api.getToken ? api.getToken() : '')
|
|
},
|
|
body: JSON.stringify({ vat_number: val })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success && data.data && data.data.company_name) {
|
|
pivaData = data.data;
|
|
statusEl.className = 'lookup-status ok';
|
|
statusEl.innerHTML = '<i class="fas fa-building"></i> ' + data.data.company_name;
|
|
} else {
|
|
pivaData = null;
|
|
statusEl.className = 'lookup-status';
|
|
statusEl.innerHTML = '<i class="fas fa-info-circle" style="color:#6b7280;"></i> Azienda non trovata, potrai inserire i dati manualmente';
|
|
}
|
|
} catch {
|
|
pivaData = null;
|
|
statusEl.innerHTML = '';
|
|
}
|
|
}, 800);
|
|
}
|
|
|
|
// --- Step Navigation ---
|
|
function setStep(n) {
|
|
[0, 1, 2].forEach(i => {
|
|
document.getElementById('step-' + i).style.display = (i === n) ? 'block' : 'none';
|
|
const si = document.getElementById('si-' + i);
|
|
si.className = 'step-item' + (i < n ? ' done' : i === n ? ' active' : '');
|
|
if (i < n) si.querySelector('.step-circle').innerHTML = '<i class="fas fa-check" style="font-size:.75rem;"></i>';
|
|
else si.querySelector('.step-circle').textContent = i + 1;
|
|
});
|
|
document.getElementById('conn-0').className = 'step-connector' + (n > 0 ? ' done' : '');
|
|
document.getElementById('conn-1').className = 'step-connector' + (n > 1 ? ' done' : '');
|
|
if (n === 2) document.getElementById('step-indicator').style.display = 'none';
|
|
else document.getElementById('step-indicator').style.display = 'flex';
|
|
}
|
|
|
|
function goToStep1() {
|
|
if (!selectedRole) return;
|
|
document.getElementById('register-error').classList.remove('visible');
|
|
const labels = {
|
|
compliance_manager: 'Dati account — CISO / Compliance Manager',
|
|
org_admin: 'Dati account — Legale Rappresentante',
|
|
consultant: 'Dati account — Consulente Cybersecurity',
|
|
auditor: 'Dati account — Auditor / Revisore',
|
|
board_member: 'Dati account — Board Member / DPO'
|
|
};
|
|
document.getElementById('auth-subtitle').textContent = labels[selectedRole] || 'Dati account';
|
|
setStep(1);
|
|
document.getElementById('firstname').focus();
|
|
}
|
|
|
|
function goToStep0() {
|
|
document.getElementById('register-error').classList.remove('visible');
|
|
document.getElementById('auth-subtitle').textContent = 'Crea il tuo account';
|
|
setStep(0);
|
|
}
|
|
|
|
function goToDashboard() {
|
|
window.location.href = successRedirect;
|
|
}
|
|
|
|
// --- Password toggle ---
|
|
function togglePw(id, btn) {
|
|
const inp = document.getElementById(id);
|
|
if (inp.type === 'password') {
|
|
inp.type = 'text';
|
|
btn.innerHTML = '<i class="fas fa-eye-slash"></i>';
|
|
} else {
|
|
inp.type = 'password';
|
|
btn.innerHTML = '<i class="fas fa-eye"></i>';
|
|
}
|
|
}
|
|
|
|
// --- Password strength ---
|
|
document.getElementById('password').addEventListener('input', function() {
|
|
updateStrengthUI(calcPasswordStrength(this.value), this.value);
|
|
});
|
|
|
|
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, pw) {
|
|
const labels = { 1: 'Debole', 2: 'Sufficiente', 3: 'Buona', 4: 'Forte' };
|
|
const classes = { 1: 'weak', 2: 'fair', 3: 'good', 4: 'strong' };
|
|
for (let i = 1; i <= 4; i++) {
|
|
const seg = document.getElementById('ps-' + i);
|
|
seg.className = 'password-strength-segment';
|
|
if (i <= level && pw.length > 0) seg.classList.add('active', classes[level]);
|
|
}
|
|
document.getElementById('ps-text').textContent = pw.length > 0 ? labels[level] : '';
|
|
}
|
|
|
|
// --- Form Submit ---
|
|
document.getElementById('register-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errorEl = document.getElementById('register-error');
|
|
errorEl.classList.remove('visible');
|
|
|
|
const firstname = document.getElementById('firstname').value.trim();
|
|
const lastname = document.getElementById('lastname').value.trim();
|
|
const email = document.getElementById('email').value.trim();
|
|
const piva = document.getElementById('piva').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
const passwordConfirm = document.getElementById('password-confirm').value;
|
|
const fullname = firstname + ' ' + lastname;
|
|
|
|
if (!firstname || !lastname || !email || !password) {
|
|
errorEl.textContent = 'Nome, cognome, email e password sono obbligatori.';
|
|
errorEl.classList.add('visible');
|
|
return;
|
|
}
|
|
if (selectedRole !== 'consultant' && !piva) {
|
|
errorEl.textContent = 'Inserisci la Partita IVA della tua azienda.';
|
|
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;
|
|
}
|
|
|
|
const btn = document.getElementById('register-btn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Registrazione in corso...';
|
|
|
|
try {
|
|
let result;
|
|
|
|
if (inviteToken) {
|
|
// B2B provision flow
|
|
result = await fetch(api.baseUrl + '/auth/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email, password, full_name: fullname,
|
|
role: selectedRole,
|
|
invite_token: inviteToken,
|
|
vat_number: piva || undefined
|
|
})
|
|
}).then(r => r.json());
|
|
} else {
|
|
result = await api.register(email, password, fullname, selectedRole);
|
|
}
|
|
|
|
if (result.success) {
|
|
// Determine redirect
|
|
if (inviteToken) {
|
|
successRedirect = 'dashboard.html';
|
|
} else if (selectedRole === 'consultant') {
|
|
successRedirect = 'companies.html';
|
|
} else {
|
|
successRedirect = 'onboarding.html';
|
|
}
|
|
|
|
// Success step
|
|
const titles = {
|
|
consultant: 'Account Consulente creato!',
|
|
board_member: 'Account Board Member creato!',
|
|
};
|
|
const descs = {
|
|
consultant: 'Puoi ora gestire i tuoi clienti dalla sezione Aziende.',
|
|
org_admin: pivaData ? 'Abbiamo trovato ' + pivaData.company_name + '. Completa l\'onboarding per configurare la tua organizzazione.' : 'Completa l\'onboarding per configurare la tua organizzazione NIS2.',
|
|
};
|
|
document.getElementById('success-title').textContent = titles[selectedRole] || 'Account creato!';
|
|
document.getElementById('success-desc').textContent = descs[selectedRole] || 'Il tuo account NIS2 Agile è pronto. Stai per essere reindirizzato...';
|
|
document.getElementById('auth-subtitle').textContent = 'Registrazione completata';
|
|
|
|
setStep(2);
|
|
setTimeout(goToDashboard, 2500);
|
|
} 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 {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Crea Account';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|