Add authentication system and admin dashboard

Security Features:
- Added User model with bcrypt password hashing
- Implemented Flask-Login for session management
- Protected all API write operations with @login_required decorator
- Added authentication routes (login/logout)

Admin Dashboard:
- Created comprehensive admin dashboard with statistics
- Profile management interface
- Skills management (add/edit/delete)
- Projects management with full CRUD operations
- Social links management
- Modern responsive UI with Bootstrap 5

New Files:
- models.py: Added User model with bcrypt
- routes/auth.py: Login/logout functionality
- routes/admin.py: Complete admin dashboard with CRUD operations
- templates/auth/login.html: Login page
- templates/admin/base.html: Admin base template
- templates/admin/dashboard.html: Main dashboard
- templates/admin/profile.html: Profile editor
- templates/admin/skills.html: Skills manager
- templates/admin/projects.html: Projects list
- templates/admin/project_form.html: Project editor
- templates/admin/social_links.html: Social links manager

Modified Files:
- app.py: Integrated Flask-Login and bcrypt, registered new blueprints
- requirements.txt: Added Flask-Login, Flask-Bcrypt, bcrypt
- init_db.py: Creates default admin user (admin/admin123)
- routes/api.py: Protected all write operations with authentication

Default Credentials:
- Username: admin
- Password: admin123
- ⚠️ MUST be changed after first login!

Benefits:
- Secure API access with session-based authentication
- User-friendly admin interface for content management
- No need to edit code or database directly
- Bcrypt password hashing for security
- Protected against unauthorized access
This commit is contained in:
Claude
2025-11-13 13:49:36 +00:00
parent c6425235a2
commit aa2c704bfb
15 changed files with 1159 additions and 4 deletions

140
templates/admin/base.html Normal file
View File

@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Admin Dashboard{% endblock %} - Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--sidebar-width: 250px;
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: var(--sidebar-width);
background: var(--primary-gradient);
color: white;
padding: 0;
overflow-y: auto;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-menu {
padding: 1rem 0;
}
.sidebar-menu a {
color: rgba(255,255,255,0.8);
text-decoration: none;
padding: 0.75rem 1.5rem;
display: block;
transition: all 0.3s;
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
background: rgba(255,255,255,0.1);
color: white;
}
.main-content {
margin-left: var(--sidebar-width);
padding: 2rem;
}
.top-bar {
background: white;
padding: 1rem 2rem;
margin: -2rem -2rem 2rem -2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.stat-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.btn-gradient {
background: var(--primary-gradient);
border: none;
color: white;
}
.btn-gradient:hover {
opacity: 0.9;
color: white;
}
</style>
{% block extra_css %}{% endblock %}
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h4 class="mb-0"><i class="fas fa-briefcase me-2"></i>Portfolio Admin</h4>
<small class="text-white-50">Ciao, {{ current_user.username }}</small>
</div>
<nav class="sidebar-menu">
<a href="{{ url_for('admin.dashboard') }}" class="{% if request.endpoint == 'admin.dashboard' %}active{% endif %}">
<i class="fas fa-th-large me-2"></i>Dashboard
</a>
<a href="{{ url_for('admin.profile_manage') }}" class="{% if 'profile' in request.endpoint %}active{% endif %}">
<i class="fas fa-user me-2"></i>Profilo
</a>
<a href="{{ url_for('admin.skills_manage') }}" class="{% if 'skills' in request.endpoint %}active{% endif %}">
<i class="fas fa-code me-2"></i>Competenze
</a>
<a href="{{ url_for('admin.projects_manage') }}" class="{% if 'projects' in request.endpoint %}active{% endif %}">
<i class="fas fa-folder-open me-2"></i>Progetti
</a>
<a href="{{ url_for('admin.social_links_manage') }}" class="{% if 'social' in request.endpoint %}active{% endif %}">
<i class="fas fa-share-alt me-2"></i>Link Social
</a>
<hr class="border-white my-3 mx-3">
<a href="{{ url_for('route_home.home') }}" target="_blank">
<i class="fas fa-external-link-alt me-2"></i>Visualizza Sito
</a>
<a href="{{ url_for('auth.logout') }}">
<i class="fas fa-sign-out-alt me-2"></i>Logout
</a>
</nav>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="top-bar">
<div class="d-flex justify-content-between align-items-center">
<h3 class="mb-0">{% block page_title %}Dashboard{% endblock %}</h3>
<div>
<span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>Online</span>
</div>
</div>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

View File

@@ -0,0 +1,126 @@
{% extends "admin/base.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block content %}
<div class="row g-4 mb-4">
<div class="col-md-3">
<div class="stat-card">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="text-muted mb-2">Progetti</h6>
<h2 class="mb-0">{{ stats.projects }}</h2>
</div>
<div class="fs-1 text-primary">
<i class="fas fa-folder-open"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="text-muted mb-2">Competenze</h6>
<h2 class="mb-0">{{ stats.skills }}</h2>
</div>
<div class="fs-1 text-success">
<i class="fas fa-code"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="text-muted mb-2">Link Social</h6>
<h2 class="mb-0">{{ stats.social_links }}</h2>
</div>
<div class="fs-1 text-info">
<i class="fas fa-share-alt"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="stat-card">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="text-muted mb-2">Pubblicati</h6>
<h2 class="mb-0">{{ stats.published_projects }}</h2>
</div>
<div class="fs-1 text-warning">
<i class="fas fa-eye"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-md-8">
<div class="card">
<div class="card-header bg-white">
<h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Panoramica</h5>
</div>
<div class="card-body">
<h6>Benvenuto nella Dashboard Admin</h6>
<p class="text-muted">
Da qui puoi gestire tutti i contenuti del tuo portfolio. Usa il menu a sinistra per navigare tra le diverse sezioni.
</p>
<div class="mt-4">
<h6>Azioni Rapide</h6>
<div class="d-flex gap-2 flex-wrap">
<a href="{{ url_for('admin.projects_manage') }}" class="btn btn-gradient">
<i class="fas fa-plus me-2"></i>Nuovo Progetto
</a>
<a href="{{ url_for('admin.skills_manage') }}" class="btn btn-outline-primary">
<i class="fas fa-plus me-2"></i>Nuova Skill
</a>
<a href="{{ url_for('route_home.home') }}" class="btn btn-outline-secondary" target="_blank">
<i class="fas fa-external-link-alt me-2"></i>Visualizza Sito
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header bg-white">
<h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Info Sistema</h5>
</div>
<div class="card-body">
<div class="mb-3">
<small class="text-muted">Utente</small>
<p class="mb-0"><strong>{{ current_user.username }}</strong></p>
</div>
<div class="mb-3">
<small class="text-muted">Email</small>
<p class="mb-0">{{ current_user.email }}</p>
</div>
<div class="mb-3">
<small class="text-muted">Ultimo Accesso</small>
<p class="mb-0">
{% if current_user.last_login %}
{{ current_user.last_login.strftime('%d/%m/%Y %H:%M') }}
{% else %}
Primo accesso
{% endif %}
</p>
</div>
<hr>
<div class="d-grid">
<a href="{{ url_for('auth.logout') }}" class="btn btn-outline-danger">
<i class="fas fa-sign-out-alt me-2"></i>Logout
</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,54 @@
{% extends "admin/base.html" %}
{% block title %}Gestione Profilo{% endblock %}
{% block page_title %}Gestione Profilo{% endblock %}
{% block content %}
<div class="card">
<div class="card-body">
<form method="POST" action="{{ url_for('admin.profile_edit') }}">
<div class="mb-3">
<label for="title" class="form-label">Titolo</label>
<input type="text" class="form-control" id="title" name="title"
value="{{ profile.title if profile else '' }}" required>
</div>
<div class="mb-3">
<label for="lead_text" class="form-label">Testo Principale</label>
<textarea class="form-control" id="lead_text" name="lead_text" rows="3" required>{{ profile.lead_text if profile else '' }}</textarea>
</div>
<div class="mb-3">
<label for="description_1" class="form-label">Descrizione 1</label>
<textarea class="form-control" id="description_1" name="description_1" rows="3">{{ profile.description_1 if profile else '' }}</textarea>
</div>
<div class="mb-3">
<label for="description_2" class="form-label">Descrizione 2</label>
<textarea class="form-control" id="description_2" name="description_2" rows="3">{{ profile.description_2 if profile else '' }}</textarea>
</div>
<div class="mb-3">
<label for="years_experience" class="form-label">Anni di Esperienza</label>
<input type="number" class="form-control" id="years_experience" name="years_experience"
value="{{ profile.years_experience if profile else 0 }}">
</div>
<div class="mb-3">
<label for="cv_url" class="form-label">URL CV (opzionale)</label>
<input type="url" class="form-control" id="cv_url" name="cv_url"
value="{{ profile.cv_url if profile else '' }}">
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-gradient">
<i class="fas fa-save me-2"></i>Salva Modifiche
</button>
<a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline-secondary">
<i class="fas fa-times me-2"></i>Annulla
</a>
</div>
</form>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,83 @@
{% extends "admin/base.html" %}
{% block title %}{{ 'Modifica' if project else 'Nuovo' }} Progetto{% endblock %}
{% block page_title %}{{ 'Modifica' if project else 'Nuovo' }} Progetto{% endblock %}
{% block content %}
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<label for="title" class="form-label">Titolo *</label>
<input type="text" class="form-control" id="title" name="title"
value="{{ project.title if project else '' }}" required>
</div>
<div class="mb-3">
<label for="description" class="form-label">Descrizione *</label>
<textarea class="form-control" id="description" name="description" rows="4" required>{{ project.description if project else '' }}</textarea>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="image_url" class="form-label">URL Immagine</label>
<input type="text" class="form-control" id="image_url" name="image_url"
value="{{ project.image_url if project else '' }}" placeholder="img/project.webp">
<small class="text-muted">Percorso relativo alla cartella static/</small>
</div>
<div class="col-md-6 mb-3">
<label for="github_url" class="form-label">URL GitHub</label>
<input type="url" class="form-control" id="github_url" name="github_url"
value="{{ project.github_url if project else '' }}">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="demo_url" class="form-label">URL Demo</label>
<input type="url" class="form-control" id="demo_url" name="demo_url"
value="{{ project.demo_url if project else '' }}">
</div>
<div class="col-md-3 mb-3">
<label for="display_order" class="form-label">Ordine Visualizzazione</label>
<input type="number" class="form-control" id="display_order" name="display_order"
value="{{ project.display_order if project else 0 }}">
</div>
<div class="col-md-3 mb-3">
<label for="animation_delay" class="form-label">Delay Animazione</label>
<input type="text" class="form-control" id="animation_delay" name="animation_delay"
value="{{ project.animation_delay if project else '0s' }}" placeholder="0.2s">
</div>
</div>
<div class="mb-3">
<label for="tags" class="form-label">Tags (separati da virgola)</label>
<input type="text" class="form-control" id="tags" name="tags"
value="{% if project %}{% for tag in project.tags|sort(attribute='display_order') %}{{ tag.name }}:{{ tag.color_class }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}"
placeholder="Python:bg-primary, Flask:bg-info, Docker:bg-success">
<small class="text-muted">Formato: Nome:colore, Nome:colore (es: Python:bg-primary, Flask:bg-info)</small>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="is_published" name="is_published"
{% if not project or project.is_published %}checked{% endif %}>
<label class="form-check-label" for="is_published">
Pubblica il progetto
</label>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-gradient">
<i class="fas fa-save me-2"></i>Salva
</button>
<a href="{{ url_for('admin.projects_manage') }}" class="btn btn-outline-secondary">
<i class="fas fa-times me-2"></i>Annulla
</a>
</div>
</form>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,52 @@
{% extends "admin/base.html" %}
{% block title %}Gestione Progetti{% endblock %}
{% block page_title %}Gestione Progetti{% endblock %}
{% block content %}
<div class="mb-3">
<a href="{{ url_for('admin.project_add') }}" class="btn btn-gradient">
<i class="fas fa-plus me-2"></i>Nuovo Progetto
</a>
</div>
<div class="row g-4">
{% for project in projects %}
<div class="col-md-4">
<div class="card h-100">
{% if project.image_url %}
<img src="{{ url_for('static', filename=project.image_url) }}" class="card-img-top" alt="{{ project.title }}">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ project.title }}</h5>
<p class="card-text text-muted small">{{ project.description[:100] }}...</p>
<div class="mb-2">
{% for tag in project.tags %}
<span class="badge {{ tag.color_class }} me-1">{{ tag.name }}</span>
{% endfor %}
</div>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
{% if project.is_published %}
<i class="fas fa-eye text-success"></i> Pubblicato
{% else %}
<i class="fas fa-eye-slash text-danger"></i> Bozza
{% endif %}
</small>
<div>
<a href="{{ url_for('admin.project_edit', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
<i class="fas fa-edit"></i>
</a>
<form method="POST" action="{{ url_for('admin.project_delete', project_id=project.id) }}" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
<i class="fas fa-trash"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@@ -0,0 +1,79 @@
{% extends "admin/base.html" %}
{% block title %}Gestione Competenze{% endblock %}
{% block page_title %}Gestione Competenze{% endblock %}
{% block content %}
<div class="card mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">Aggiungi Nuova Competenza</h5>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('admin.skill_add') }}" class="row g-3">
<div class="col-md-3">
<input type="text" class="form-control" name="name" placeholder="Nome (es. Python)" required>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="icon_class" placeholder="Icona (es. fab fa-python)" required>
</div>
<div class="col-md-2">
<input type="text" class="form-control" name="category" placeholder="Categoria">
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="display_order" placeholder="Ordine" value="0">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-gradient w-100">
<i class="fas fa-plus me-2"></i>Aggiungi
</button>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header bg-white">
<h5 class="mb-0">Lista Competenze</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Icona</th>
<th>Nome</th>
<th>Categoria</th>
<th>Ordine</th>
<th>Stato</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
{% for skill in skills %}
<tr>
<td><i class="{{ skill.icon_class }} fa-2x text-primary"></i></td>
<td>{{ skill.name }}</td>
<td><span class="badge bg-secondary">{{ skill.category or '-' }}</span></td>
<td>{{ skill.display_order }}</td>
<td>
{% if skill.is_active %}
<span class="badge bg-success">Attiva</span>
{% else %}
<span class="badge bg-danger">Disattiva</span>
{% endif %}
</td>
<td>
<form method="POST" action="{{ url_for('admin.skill_delete', skill_id=skill.id) }}" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,76 @@
{% extends "admin/base.html" %}
{% block title %}Gestione Link Social{% endblock %}
{% block page_title %}Gestione Link Social{% endblock %}
{% block content %}
<div class="card mb-4">
<div class="card-header bg-white">
<h5 class="mb-0">Aggiungi Nuovo Link</h5>
</div>
<div class="card-body">
<form method="POST" action="{{ url_for('admin.social_link_add') }}" class="row g-3">
<div class="col-md-3">
<input type="text" class="form-control" name="platform_name" placeholder="Nome (es. LinkedIn)" required>
</div>
<div class="col-md-4">
<input type="url" class="form-control" name="url" placeholder="URL completo" required>
</div>
<div class="col-md-2">
<input type="text" class="form-control" name="icon_class" placeholder="Icona" required>
</div>
<div class="col-md-1">
<input type="number" class="form-control" name="display_order" placeholder="Ordine" value="0">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-gradient w-100">
<i class="fas fa-plus me-2"></i>Aggiungi
</button>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Icona</th>
<th>Piattaforma</th>
<th>URL</th>
<th>Ordine</th>
<th>Stato</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
{% for link in social_links %}
<tr>
<td><i class="{{ link.icon_class }} fa-2x text-primary"></i></td>
<td>{{ link.platform_name }}</td>
<td><a href="{{ link.url }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 200px;">{{ link.url }}</a></td>
<td>{{ link.display_order }}</td>
<td>
{% if link.is_active %}
<span class="badge bg-success">Attivo</span>
{% else %}
<span class="badge bg-danger">Disattivo</span>
{% endif %}
</td>
<td>
<form method="POST" action="{{ url_for('admin.social_link_delete', link_id=link.id) }}" class="d-inline">
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}