Cristiano Benassati
52fd45fac9
- i18n.js: sistema traduzioni IT/EN con ~150 chiavi, localStorage, data-i18n - help.js: help contestuale per 10 pagine con riferimenti NIS2 - architecture.html: descrizione architettura sistema completa - common.js: language toggle sidebar (IT/EN), link Architettura, icone - Integrato i18n + help in tutte le 14 pagine app + 3 admin Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
339 lines
13 KiB
HTML
339 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gestione Utenti - NIS2 Agile</title>
|
|
<link rel="stylesheet" href="/nis2/css/style.css">
|
|
<style>
|
|
.role-badge {
|
|
display: inline-flex;
|
|
padding: 3px 10px;
|
|
border-radius: 100px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.role-badge.super_admin { background: var(--danger-bg); color: var(--danger); }
|
|
.role-badge.org_admin { background: var(--primary-bg); color: var(--primary); }
|
|
.role-badge.compliance_manager { background: var(--secondary-bg); color: #15803d; }
|
|
.role-badge.board_member { background: #f3e8ff; color: #7c3aed; }
|
|
.role-badge.auditor { background: var(--info-bg); color: var(--primary); }
|
|
.role-badge.employee { background: var(--gray-100); color: var(--gray-600); }
|
|
.active-toggle {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.active-toggle input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.toggle-slider {
|
|
width: 36px;
|
|
height: 20px;
|
|
background: var(--gray-300);
|
|
border-radius: 10px;
|
|
transition: background var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
.toggle-slider::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: transform var(--transition-fast);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
.active-toggle input:checked + .toggle-slider {
|
|
background: var(--secondary);
|
|
}
|
|
.active-toggle input:checked + .toggle-slider::after {
|
|
transform: translateX(16px);
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--gray-100);
|
|
background: var(--gray-50);
|
|
}
|
|
.pagination-info {
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
}
|
|
.pagination-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.org-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
.org-tag {
|
|
display: inline-flex;
|
|
padding: 2px 8px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
background: var(--gray-100);
|
|
color: var(--gray-600);
|
|
border-radius: var(--border-radius-sm);
|
|
max-width: 120px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.admin-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.8125rem;
|
|
color: var(--gray-500);
|
|
margin-bottom: 20px;
|
|
}
|
|
.admin-breadcrumb a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
.admin-breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.admin-breadcrumb svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
color: var(--gray-400);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|
|
|
<main class="main-content">
|
|
<header class="content-header">
|
|
<h2>Gestione Utenti</h2>
|
|
<div class="content-header-actions">
|
|
<span class="badge badge-danger">Super Admin</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-body">
|
|
<!-- Breadcrumb -->
|
|
<div class="admin-breadcrumb">
|
|
<a href="/nis2/admin/index.html">Amministrazione</a>
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
|
|
<span>Utenti</span>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="card">
|
|
<div class="card-body" style="padding:0;">
|
|
<div id="users-container">
|
|
<div class="spinner" style="margin:60px auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/nis2/js/api.js"></script>
|
|
<script src="/nis2/js/common.js"></script>
|
|
<script src="/nis2/js/i18n.js"></script>
|
|
<script>
|
|
// ── Auth check ───────────────────────────────────────────
|
|
if (!checkAuth()) throw new Error('Not authenticated');
|
|
loadSidebar();
|
|
I18n.init();
|
|
|
|
let currentPage = 1;
|
|
|
|
// ── Admin check ──────────────────────────────────────────
|
|
(async function checkAdmin() {
|
|
try {
|
|
const me = await api.getMe();
|
|
if (!me.success || !me.data || me.data.role !== 'super_admin') {
|
|
showNotification('Accesso non autorizzato.', 'error');
|
|
setTimeout(() => { window.location.href = '/nis2/dashboard.html'; }, 1500);
|
|
return;
|
|
}
|
|
loadUsers(1);
|
|
} catch (e) {
|
|
window.location.href = '/nis2/dashboard.html';
|
|
}
|
|
})();
|
|
|
|
// ── Mappature ────────────────────────────────────────────
|
|
const roleLabels = {
|
|
super_admin: 'Super Admin',
|
|
org_admin: 'Amministratore',
|
|
compliance_manager: 'Compliance Manager',
|
|
board_member: 'Membro CDA',
|
|
auditor: 'Auditor',
|
|
employee: 'Dipendente'
|
|
};
|
|
|
|
// ── Caricamento ──────────────────────────────────────────
|
|
async function loadUsers(page) {
|
|
const container = document.getElementById('users-container');
|
|
container.innerHTML = '<div class="spinner" style="margin:60px auto;"></div>';
|
|
currentPage = page;
|
|
|
|
try {
|
|
const result = await api.request('GET', '/admin/users?page=' + page);
|
|
if (result.success) {
|
|
renderUsers(result.data || [], result.pagination || {});
|
|
} else {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h4>Errore nel caricamento</h4>
|
|
<p>${escapeHtml(result.message || 'Errore sconosciuto')}</p>
|
|
</div>`;
|
|
}
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="empty-state"><h4>Errore di connessione</h4></div>';
|
|
}
|
|
}
|
|
|
|
function renderUsers(users, pagination) {
|
|
const container = document.getElementById('users-container');
|
|
|
|
if (!users || users.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/></svg>
|
|
<h4>Nessun utente trovato</h4>
|
|
<p>Gli utenti registrati appariranno qui.</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
let html = `
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nome</th>
|
|
<th>Email</th>
|
|
<th>Ruolo</th>
|
|
<th>Organizzazioni</th>
|
|
<th>Ultimo Login</th>
|
|
<th>Attivo</th>
|
|
<th>Data Creazione</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>`;
|
|
|
|
users.forEach(user => {
|
|
const role = user.role || 'employee';
|
|
const roleLabel = roleLabels[role] || role;
|
|
const isActive = user.is_active == 1 || user.is_active === true;
|
|
|
|
// Organizzazioni
|
|
let orgsHtml = '<span class="text-muted">-</span>';
|
|
if (user.organizations) {
|
|
const orgNames = user.organizations.split(',').filter(n => n.trim());
|
|
if (orgNames.length > 0) {
|
|
orgsHtml = '<div class="org-tags">';
|
|
orgNames.forEach(name => {
|
|
orgsHtml += `<span class="org-tag" title="${escapeHtml(name.trim())}">${escapeHtml(name.trim())}</span>`;
|
|
});
|
|
orgsHtml += '</div>';
|
|
}
|
|
}
|
|
|
|
// Ultimo login
|
|
const lastLogin = user.last_login_at ? formatDateTime(user.last_login_at) : '<span class="text-muted">Mai</span>';
|
|
|
|
html += `
|
|
<tr>
|
|
<td><strong>${escapeHtml(user.full_name || '-')}</strong></td>
|
|
<td>${escapeHtml(user.email || '-')}</td>
|
|
<td><span class="role-badge ${role}">${escapeHtml(roleLabel)}</span></td>
|
|
<td>${orgsHtml}</td>
|
|
<td>${lastLogin}</td>
|
|
<td>
|
|
<label class="active-toggle" title="${isActive ? 'Attivo' : 'Inattivo'}">
|
|
<input type="checkbox" ${isActive ? 'checked' : ''} onchange="toggleUserActive(${user.id}, this.checked)" ${role === 'super_admin' ? 'disabled' : ''}>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>${formatDate(user.created_at)}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
|
|
// Paginazione
|
|
const total = pagination.total || users.length;
|
|
const perPage = pagination.per_page || 20;
|
|
const page = pagination.page || currentPage;
|
|
const totalPages = Math.ceil(total / perPage);
|
|
const start = ((page - 1) * perPage) + 1;
|
|
const end = Math.min(page * perPage, total);
|
|
|
|
if (totalPages > 1) {
|
|
html += `
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Visualizzati ${start}-${end} di ${total} utenti
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<button class="btn btn-secondary btn-sm" onclick="loadUsers(${page - 1})" ${page <= 1 ? 'disabled' : ''}>
|
|
« Precedente
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm" onclick="loadUsers(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>
|
|
Successivo »
|
|
</button>
|
|
</div>
|
|
</div>`;
|
|
} else if (total > 0) {
|
|
html += `
|
|
<div class="pagination">
|
|
<div class="pagination-info">
|
|
Totale: ${total} utent${total === 1 ? 'e' : 'i'}
|
|
</div>
|
|
<div></div>
|
|
</div>`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// ── Toggle Attivo/Inattivo ───────────────────────────────
|
|
async function toggleUserActive(userId, isActive) {
|
|
try {
|
|
const result = await api.request('PUT', '/admin/users/' + userId, {
|
|
is_active: isActive ? 1 : 0
|
|
});
|
|
|
|
if (result.success) {
|
|
showNotification(
|
|
isActive ? 'Utente attivato con successo.' : 'Utente disattivato con successo.',
|
|
'success'
|
|
);
|
|
} else {
|
|
showNotification(result.message || 'Errore nell\'aggiornamento.', 'error');
|
|
// Ricarica per resettare lo stato
|
|
loadUsers(currentPage);
|
|
}
|
|
} catch (e) {
|
|
showNotification('Errore di connessione.', 'error');
|
|
loadUsers(currentPage);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|