211 lines
9.0 KiB
HTML
211 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Profile - Parking Manager</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>Gestione Parcheggi</h1>
|
|
</div>
|
|
<nav class="sidebar-nav"></nav>
|
|
<div class="sidebar-footer">
|
|
<div class="user-menu">
|
|
<button class="user-button" id="userMenuButton">
|
|
<div class="user-avatar">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="user-info">
|
|
<div class="user-name" id="userName">Caricamento...</div>
|
|
<div class="user-role" id="userRole">-</div>
|
|
</div>
|
|
</button>
|
|
<div class="user-dropdown" id="userDropdown" style="display: none;">
|
|
<a href="/profile" class="dropdown-item">Profilo</a>
|
|
<a href="/settings" class="dropdown-item">Impostazioni</a>
|
|
<hr class="dropdown-divider">
|
|
<button class="dropdown-item" id="logoutButton">Esci</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<header class="page-header">
|
|
<h2>Profilo</h2>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Informazioni Personali</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- LDAP Notice -->
|
|
<div id="ldapNotice" class="form-notice" style="display: none; margin-bottom: 1rem;">
|
|
<small>Il tuo account è gestito da LDAP. Alcune informazioni non possono essere modificate
|
|
qui.</small>
|
|
</div>
|
|
|
|
<form id="profileForm">
|
|
<div class="form-group">
|
|
<label for="name">Nome Completo</label>
|
|
<input type="text" id="name" required>
|
|
<small id="nameHelp" class="text-muted" style="display: none;">Gestito da LDAP</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email</label>
|
|
<input type="email" id="email" disabled>
|
|
<small class="text-muted">L'email non può essere modificata</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="role">Ruolo</label>
|
|
<input type="text" id="role" disabled>
|
|
<small class="text-muted">Il ruolo è assegnato dal tuo amministratore</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="manager">Manager</label>
|
|
<input type="text" id="manager" disabled>
|
|
<small class="text-muted">Il tuo manager è assegnato dall'amministratore</small>
|
|
</div>
|
|
<div class="form-actions" id="profileActions">
|
|
<button type="submit" class="btn btn-dark">Salva Modifiche</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password section - hidden for LDAP users -->
|
|
<div class="card" id="passwordCard">
|
|
<div class="card-header">
|
|
<h3>Cambia Password</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="passwordForm">
|
|
<div class="form-group">
|
|
<label for="currentPassword">Password Attuale</label>
|
|
<input type="password" id="currentPassword" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPassword">Nuova Password</label>
|
|
<input type="password" id="newPassword" required minlength="8">
|
|
<small>Minimo 8 caratteri</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Conferma Nuova Password</label>
|
|
<input type="password" id="confirmPassword" required>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-dark">Cambia Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/utils.js"></script>
|
|
<script src="/js/nav.js"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let isLdapUser = false;
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
currentUser = await api.requireAuth();
|
|
if (!currentUser) return;
|
|
|
|
await loadProfile();
|
|
setupEventListeners();
|
|
});
|
|
|
|
async function loadProfile() {
|
|
const response = await api.get('/api/users/me/profile');
|
|
if (response && response.ok) {
|
|
const profile = await response.json();
|
|
isLdapUser = profile.is_ldap_user;
|
|
|
|
// Populate form
|
|
document.getElementById('name').value = profile.name || '';
|
|
document.getElementById('email').value = profile.email;
|
|
document.getElementById('role').value = profile.role;
|
|
document.getElementById('manager').value = profile.manager_name || 'Nessuno';
|
|
|
|
// LDAP mode adjustments
|
|
if (isLdapUser) {
|
|
document.getElementById('ldapNotice').style.display = 'block';
|
|
document.getElementById('name').disabled = true;
|
|
document.getElementById('nameHelp').style.display = 'block';
|
|
document.getElementById('profileActions').style.display = 'none';
|
|
document.getElementById('passwordCard').style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupEventListeners() {
|
|
// Profile form
|
|
document.getElementById('profileForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (isLdapUser) {
|
|
utils.showMessage('Il profilo è gestito da LDAP', 'error');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
name: document.getElementById('name').value
|
|
};
|
|
|
|
const response = await api.put('/api/users/me/profile', data);
|
|
if (response && response.ok) {
|
|
utils.showMessage('Profilo aggiornato con successo', 'success');
|
|
// Update nav display
|
|
const nameEl = document.getElementById('userName');
|
|
if (nameEl) nameEl.textContent = data.name;
|
|
} else {
|
|
const error = await response.json();
|
|
utils.showMessage(error.detail || 'Impossibile aggiornare il profilo', 'error');
|
|
}
|
|
});
|
|
|
|
// Password form
|
|
document.getElementById('passwordForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
utils.showMessage('Le password non corrispondono', 'error');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
current_password: document.getElementById('currentPassword').value,
|
|
new_password: newPassword
|
|
};
|
|
|
|
const response = await api.post('/api/users/me/change-password', data);
|
|
if (response && response.ok) {
|
|
utils.showMessage('Password cambiata con successo', 'success');
|
|
document.getElementById('passwordForm').reset();
|
|
} else {
|
|
const error = await response.json();
|
|
utils.showMessage(error.detail || 'Impossibile cambiare la password', 'error');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |