o9

app.py

@@ -1,180 +1,109 @@
-from flask import Flask, request, render_template, redirect, url_for, flash, jsonify, abort
+import os
+import logging
+from datetime import datetime
+
+from flask import Flask, render_template
 from flask_sqlalchemy import SQLAlchemy
-from datetime import datetime, timedelta, timezone
-from apscheduler.schedulers.background import BackgroundScheduler
-import markdown
+from sqlalchemy.orm import DeclarativeBase
+from werkzeug.middleware.proxy_fix import ProxyFix
+from flask_login import LoginManager
+from flask_wtf.csrf import CSRFProtect
+
+# Set up logging
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
+
+# Define base class for SQLAlchemy models
+class Base(DeclarativeBase):
+    pass
 
+# Initialize extensions
+db = SQLAlchemy(model_class=Base)
+csrf = CSRFProtect()
+login_manager = LoginManager()
+
+# Create Flask application
 app = Flask(__name__)
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///forum.db'
-app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-app.config['SECRET_KEY'] = 'change_this_secret_key'  # À modifier pour la production
-db = SQLAlchemy(app)
-
-# -------------------------------
-# Ajout d'un filtre escapejs pour Jinja2
-# -------------------------------
-def escapejs_filter(s):
-    if s is None:
-        return ""
-    return (s.replace('\\', '\\\\')
-              .replace("'", "\\'")
-              .replace('"', '\\"')
-              .replace('\n', '\\n')
-              .replace('\r', '\\r'))
-app.jinja_env.filters['escapejs'] = escapejs_filter
-
-# -------------------------------
-# Modèles de données
-# -------------------------------
-class Thread(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.String(200), nullable=False)
-    timestamp = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
-    messages = db.relationship('Message', backref='thread', lazy=True, cascade="all, delete-orphan")
-
-class Message(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    thread_id = db.Column(db.Integer, db.ForeignKey('thread.id'), nullable=False)
-    content = db.Column(db.Text, nullable=False)
-    timestamp = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
-    vote_count = db.Column(db.Integer, default=0)
-    reports = db.Column(db.Integer, default=0)
-    removed = db.Column(db.Boolean, default=False)
-
-# -------------------------------
-# Routes de base et fonctionnalités
-# -------------------------------
-
-# Accueil : liste des fils de discussion
-@app.route('/')
-def index():
-    threads = Thread.query.order_by(Thread.timestamp.desc()).all()
-    return render_template('index.html', threads=threads)
-
-# Création d'un nouveau fil de discussion
-@app.route('/new_thread', methods=['GET', 'POST'])
-def new_thread():
-    if request.method == 'POST':
-        title = request.form.get('title', '').strip()
-        content = request.form.get('content', '').strip()
-        if not title or not content:
-            flash("Le titre et le contenu initial sont obligatoires.", "error")
-            return redirect(url_for('new_thread'))
-        # Création du thread
-        thread = Thread(title=title)
-        db.session.add(thread)
-        db.session.commit()
-        # Message initial
-        message = Message(thread_id=thread.id, content=content)
-        db.session.add(message)
-        db.session.commit()
-        flash("Fil de discussion créé.", "success")
-        return redirect(url_for('thread', thread_id=thread.id))
-    return render_template('new_thread.html')
-
-# Visualisation d'un fil et réponse
-@app.route('/thread/<int:thread_id>', methods=['GET', 'POST'])
-def thread(thread_id):
-    thread_obj = Thread.query.get_or_404(thread_id)
-    if request.method == 'POST':
-        content = request.form.get('content', '').strip()
-        if not content:
-            flash("Le contenu du message ne peut pas être vide.", "error")
-            return redirect(url_for('thread', thread_id=thread_id))
-        message = Message(thread_id=thread_id, content=content)
-        db.session.add(message)
-        db.session.commit()
-        flash("Réponse postée.", "success")
-        return redirect(url_for('thread', thread_id=thread_id))
-    # Afficher uniquement les messages de moins de 72h et non supprimés
-    expiration_threshold = datetime.now(timezone.utc) - timedelta(hours=72)
-    messages = Message.query.filter(
-        Message.thread_id == thread_id,
-        Message.timestamp >= expiration_threshold,
-        Message.removed == False
-    ).order_by(Message.timestamp.asc()).all()
-    return render_template('thread.html', thread=thread_obj, messages=messages)
-
-# Système de vote (upvote/downvote)
-@app.route('/vote/<int:message_id>/<action>', methods=['POST'])
-def vote(message_id, action):
-    message = Message.query.get_or_404(message_id)
-    if action == 'up':
-        message.vote_count += 1
-    elif action == 'down':
-        message.vote_count -= 1
-    else:
-        abort(400)
-    db.session.commit()
-    flash("Vote enregistré.", "success")
-    return redirect(request.referrer or url_for('index'))
-
-# Signalement d'un message
-@app.route('/report/<int:message_id>', methods=['POST'])
-def report(message_id):
-    message = Message.query.get_or_404(message_id)
-    message.reports += 1
-    db.session.commit()
-    flash("Message signalé.", "success")
-    return redirect(request.referrer or url_for('index'))
-
-# Prévisualisation d'un message en Markdown
-@app.route('/preview', methods=['POST'])
-def preview():
-    content = request.form.get('content', '')
-    rendered = markdown.markdown(content)
-    return jsonify({'preview': rendered})
-
-# Recherche dans les threads et messages
-@app.route('/search')
-def search():
-    query = request.args.get('q', '').strip()
-    if not query:
-        flash("Veuillez entrer un terme de recherche.", "error")
-        return redirect(url_for('index'))
-    threads = Thread.query.filter(Thread.title.ilike(f'%{query}%')).all()
-    messages = Message.query.filter(Message.content.ilike(f'%{query}%')).all()
-    return render_template('search.html', query=query, threads=threads, messages=messages)
-
-# Page de modération : affichage des messages signalés
-@app.route('/moderate')
-def moderate():
-    reported_messages = Message.query.filter(
-        Message.reports >= 3, Message.removed == False
-    ).order_by(Message.reports.desc()).all()
-    return render_template('moderate.html', messages=reported_messages)
-
-# Action de modération : retirer un message
-@app.route('/remove/<int:message_id>', methods=['POST'])
-def remove_message(message_id):
-    message = Message.query.get_or_404(message_id)
-    message.removed = True
-    db.session.commit()
-    flash("Message retiré.", "success")
-    return redirect(url_for('moderate'))
-
-# -------------------------------
-# Suppression automatique des messages de plus de 72 heures
-# -------------------------------
-def delete_old_messages():
-    with app.app_context():
-        expiration_threshold = datetime.now(timezone.utc) - timedelta(hours=72)
-        old_messages = Message.query.filter(Message.timestamp < expiration_threshold).all()
-        count = len(old_messages)
-        for msg in old_messages:
-            db.session.delete(msg)
-        db.session.commit()
-        if count:
-            print(f"{count} messages supprimés définitivement.")
-
-scheduler = BackgroundScheduler(daemon=True)
-scheduler.add_job(func=delete_old_messages, trigger="interval", hours=1)
-scheduler.start()
-
-# -------------------------------
-# Lancement de l'application
-# -------------------------------
-if __name__ == '__main__':
-    with app.app_context():
-        db.create_all()
-    app.run(debug=True)
+
+# Configure application
+app.secret_key = os.environ.get("SESSION_SECRET", "dev-secret-key")
+app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
+
+# Configure database
+app.config["SQLALCHEMY_DATABASE_URI"] = os.environ.get("DATABASE_URL", "sqlite:///forum.db")
+app.config["SQLALCHEMY_ENGINE_OPTIONS"] = {
+    "pool_recycle": 300,
+    "pool_pre_ping": True,
+}
+
+# Initialize extensions with app
+db.init_app(app)
+csrf.init_app(app)
+login_manager.init_app(app)
+
+# Configure login manager
+login_manager.login_view = "auth.login"
+login_manager.login_message = "Please log in to access this page."
+login_manager.login_message_category = "info"
+
+# Import models (must be after db initialization but before create_all)
+from models import User
+
+# Register blueprints
+with app.app_context():
+    from routes.auth import auth_bp
+    from routes.forum import forum_bp
+    from routes.user import user_bp
+    from routes.admin import admin_bp
+    from routes.cadmin import cadmin_bp
+
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(forum_bp)
+    app.register_blueprint(user_bp)
+    app.register_blueprint(admin_bp)
+    app.register_blueprint(cadmin_bp)
+
+    # Create database tables
+    db.create_all()
+
+    # Import utility functions
+    from utils import format_datetime
+    
+    # Add template filters
+    app.jinja_env.filters['format_datetime'] = format_datetime
+    
+    # Context processor for template variables
+    @app.context_processor
+    def utility_processor():
+        return {
+            'now': datetime.utcnow
+        }
+
+    # User loader for Flask-Login
+    @login_manager.user_loader
+    def load_user(user_id):
+        return User.query.get(int(user_id))
+
+    # Error handlers
+    @app.errorhandler(404)
+    def page_not_found(e):
+        return render_template('errors/404.html'), 404
+
+    @app.errorhandler(403)
+    def forbidden(e):
+        return render_template('errors/403.html'), 403
+
+    @app.errorhandler(500)
+    def internal_server_error(e):
+        return render_template('errors/500.html'), 500
+
+    # Ensure required directories exist
+    upload_dir = os.path.join(app.static_folder, 'uploads')
+    avatar_dir = os.path.join(upload_dir, 'avatars')
+    
+    if not os.path.exists(upload_dir):
+        os.makedirs(upload_dir)
+    if not os.path.exists(avatar_dir):
+        os.makedirs(avatar_dir)
+
+    logger.debug("Application initialized successfully")

attached_assets/Pasted--Cahier-des-Charges-Forum-Communautaire-Version-1-0-Date-26-Mai-2023-Auteur--1745353936750.txt

@@ -0,0 +1,227 @@
+
+
+**Cahier des Charges - Forum Communautaire**
+
+**Version :** 1.0
+**Date :** 26 Mai 2023
+**Auteur :** [Votre Nom/Organisation]
+
+**Table des Matières**
+
+1.  Introduction et Objectifs
+2.  Portée du Projet
+3.  Public Cible et Rôles Utilisateurs
+4.  Exigences Fonctionnelles
+    4.1. Gestion des Utilisateurs
+    4.2. Structure et Organisation du Contenu
+    4.3. Interaction et Contribution
+    4.4. Modération
+    4.5. Administration
+5.  Exigences Non Fonctionnelles
+    5.1. Performance
+    5.2. Sécurité
+    5.3. Utilisabilité (UX/UI)
+    5.4. Maintenabilité
+    5.5. Scalabilité
+6.  Stack Technologique Imposée
+7.  Architecture Applicative (Suggestion)
+8.  Modèle de Données Conceptuel
+9.  Interface Utilisateur (UI) et Expérience Utilisateur (UX)
+10. Déploiement
+11. Maintenance et Évolution
+12. Livrables Attendus
+
+---
+
+**1. Introduction et Objectifs**
+
+Le présent document définit les spécifications pour la création d'une plateforme de forum communautaire moderne, réactive et robuste. L'objectif principal est de fournir un espace de discussion structuré où les utilisateurs peuvent s'inscrire, créer des sujets, y répondre, interagir avec le contenu et où les administrateurs/modérateurs disposent des outils nécessaires pour gérer la communauté et le contenu.
+
+**2. Portée du Projet**
+
+*   **Inclus :** Toutes les fonctionnalités décrites dans la section "Exigences Fonctionnelles". Le développement du backend avec Flask, du frontend avec HTML/Tailwind CSS/JavaScript minimal, et la mise en place de la base de données associée.
+*   **Exclus (pour cette version) :** Messagerie privée temps réel (chat), système de gamification avancé (badges, points complexes), intégration poussée avec des services tiers (sauf authentification si spécifiée ultérieurement), applications mobiles natives.
+
+**3. Public Cible et Rôles Utilisateurs**
+
+*   **Utilisateur Anonyme (Visiteur) :** Peut consulter les catégories et les sujets publics. Ne peut pas poster, réagir ou accéder aux profils complets.
+*   **Utilisateur Enregistré (Membre) :** Peut créer des sujets, poster des réponses, éditer (potentiellement) ses propres messages, utiliser les citations et réactions, signaler du contenu, consulter et modifier son propre profil.
+*   **Modérateur :** Possède les droits d'un Membre, plus : verrouiller/déverrouiller des sujets, supprimer/éditer n'importe quel message/sujet, gérer les signalements, voir les informations de base des utilisateurs (IP, email pour investigation), attribuer/retirer des tags. Accès limité au panneau de modération.
+*   **Administrateur :** Possède les droits d'un Modérateur, plus : gérer les catégories, gérer les utilisateurs (bannir, modifier rôles), accéder à toutes les fonctionnalités du panneau d'administration, configurer les paramètres généraux du forum.
+
+**4. Exigences Fonctionnelles**
+
+**4.1. Gestion des Utilisateurs**
+
+*   **FEAT-USER-01 : Inscription**
+    *   Formulaire : Nom d'utilisateur (unique), Email (unique, valide), Mot de passe (avec confirmation).
+    *   Validation côté serveur et client (basique).
+    *   Protection anti-spam (ex: Captcha simple ou Honeypot).
+    *   Hashage sécurisé des mots de passe (ex: Argon2, bcrypt).
+    *   (Optionnel) Email de confirmation pour activation du compte.
+*   **FEAT-USER-02 : Connexion / Déconnexion**
+    *   Formulaire : Nom d'utilisateur ou Email, Mot de passe.
+    *   Gestion de session sécurisée (cookies HTTPOnly, Secure).
+    *   Fonction "Se souvenir de moi" (optionnel, avec token persistant sécurisé).
+    *   Lien de déconnexion clair.
+*   **FEAT-USER-03 : Profil Utilisateur**
+    *   Page de profil publique affichant : Nom d'utilisateur, Avatar, Date d'inscription, (Optionnel) Signature, (Optionnel) Informations personnelles définies (localisation, site web, bio), Liste des sujets créés / réponses récentes.
+    *   Possibilité pour l'utilisateur connecté de modifier son profil :
+        *   Changer l'avatar (upload d'image avec redimensionnement/validation).
+        *   Modifier les informations personnelles optionnelles.
+        *   Modifier le mot de passe (nécessite l'ancien mot de passe).
+        *   Modifier l'adresse email (peut nécessiter re-validation).
+*   **FEAT-USER-04 : Gestion Avancée (Admin/Modo)**
+    *   (Admin) Interface pour lister, rechercher, voir les détails des utilisateurs.
+    *   (Admin) Interface pour modifier les informations de base d'un utilisateur (ex: email, rôle).
+    *   (Admin) Fonctionnalité pour bannir/débannir un utilisateur (empêche la connexion/participation).
+    *   (Admin) Attribution des rôles (Membre, Modérateur, Administrateur).
+
+**4.2. Structure et Organisation du Contenu**
+
+*   **FEAT-CONTENT-01 : Catégories / Sections**
+    *   (Admin) Interface pour créer, éditer, supprimer, réordonner les catégories.
+    *   Chaque catégorie a un nom et une description.
+    *   Affichage de la liste des catégories sur la page d'accueil ou une page dédiée, avec statistiques (nombre de sujets, messages).
+*   **FEAT-CONTENT-02 : Sujets / Discussions (Threads)**
+    *   Affichage de la liste des sujets dans une catégorie : Titre, Auteur, Nombre de réponses, Nombre de vues (optionnel), Date du dernier message (avec auteur), Tags associés, Indicateur Épinglé/Verrouillé.
+    *   Tri possible de la liste (par défaut : dernière activité).
+    *   **Pagination** robuste pour les listes de sujets (numéros de page, première/dernière page).
+*   **FEAT-CONTENT-03 : Messages / Réponses (Posts)**
+    *   Affichage séquentiel des messages dans un sujet.
+    *   Chaque message affiche : Avatar de l'auteur, Nom d'utilisateur (lien vers profil), Date/Heure de publication, Contenu du message, (Optionnel) Signature de l'auteur.
+    *   **Pagination** robuste pour les sujets longs (numéros de page, première/dernière page).
+*   **FEAT-CONTENT-04 : Tags / Étiquettes**
+    *   (Membre/Modo) Possibilité d'ajouter des tags lors de la création d'un sujet (depuis une liste prédéfinie par l'admin ou création libre avec modération).
+    *   (Modo/Admin) Possibilité d'ajouter/modifier/supprimer les tags d'un sujet existant.
+    *   Affichage des tags sur la liste des sujets et sur la page du sujet.
+    *   (Optionnel) Page dédiée listant tous les tags et les sujets associés.
+
+**4.3. Interaction et Contribution**
+
+*   **FEAT-INTERACT-01 : Création de Sujet**
+    *   Accessible aux Membres depuis une catégorie.
+    *   Formulaire : Choix de la catégorie (si applicable), Titre du sujet, Contenu du premier message (éditeur simple), Ajout de Tags.
+    *   Validation et prévisualisation (optionnel).
+*   **FEAT-INTERACT-02 : Réponse à un Sujet**
+    *   Accessible aux Membres sur un sujet non verrouillé.
+    *   Formulaire (souvent en bas de page) : Éditeur simple pour le contenu de la réponse.
+    *   Validation et prévisualisation (optionnel).
+*   **FEAT-INTERACT-03 : Citation (Quote)**
+    *   Bouton "Citer" sur chaque message.
+    *   Au clic, pré-remplit le formulaire de réponse avec le contenu du message cité, formaté distinctement (ex: `<blockquote><p>Contenu cité</p><footer>Auteur original</footer></blockquote>`).
+    *   Permet la citation partielle (sélection de texte avant de cliquer - plus avancé).
+*   **FEAT-INTERACT-04 : Réactions / Likes / Votes**
+    *   Bouton(s) de réaction (ex: "J'aime 👍") sur chaque message (sauf les siens propres ? à définir).
+    *   Stockage de quelle réaction a été donnée par quel utilisateur pour quel message.
+    *   Affichage du nombre total de chaque type de réaction sur le message.
+    *   Possibilité d'annuler sa réaction.
+
+**4.4. Modération**
+
+*   **FEAT-MOD-01 : Signalement (Report)**
+    *   Bouton/Lien "Signaler" sur chaque message/sujet (sauf pour les modérateurs/admins).
+    *   Au clic, ouvre un formulaire simple demandant la raison du signalement.
+    *   Les signalements sont enregistrés et visibles dans le panneau de modération.
+*   **FEAT-MOD-02 : Verrouillage de Sujets (Lock)**
+    *   (Modo/Admin) Bouton/Option sur un sujet pour le verrouiller/déverrouiller.
+    *   Un sujet verrouillé ne peut plus recevoir de nouvelles réponses (le formulaire de réponse est caché ou désactivé).
+    *   Un indicateur visuel (ex: icône cadenas) montre qu'un sujet est verrouillé.
+*   **FEAT-MOD-03 : Suppression de Contenu**
+    *   (Modo/Admin) Possibilité de supprimer des messages individuels ou des sujets entiers.
+    *   (Optionnel) Suppression "douce" (soft delete) : le contenu est masqué mais conservé en base pour historique/restauration.
+*   **FEAT-MOD-04 : Édition de Contenu (Modo/Admin)**
+    *   (Modo/Admin) Possibilité d'éditer le contenu de n'importe quel message ou le titre d'un sujet.
+    *   Un indicateur "Modifié par [Modo/Admin] le [Date]" devrait être visible.
+
+**4.5. Administration**
+
+*   **FEAT-ADMIN-01 : Panneau d'Administration / Modération**
+    *   Section distincte du site, accessible uniquement aux rôles Modérateur et Administrateur (avec permissions différentiées).
+    *   Tableau de bord centralisant les actions de gestion.
+*   **FEAT-ADMIN-02 : Gestion des Signalements**
+    *   Vue listant les contenus signalés (sujet/message, auteur, rapporteur, raison, date).
+    *   Actions possibles : Marquer comme traité, Voir le contenu, Supprimer le contenu, Bannir l'auteur, Ignorer le signalement.
+*   **FEAT-ADMIN-03 : Gestion des Catégories (Admin)**
+    *   CRUD (Create, Read, Update, Delete) pour les catégories.
+    *   Possibilité de réordonner les catégories.
+*   **FEAT-ADMIN-04 : Gestion des Tags (Admin)**
+    *   (Optionnel) Interface pour voir, fusionner, supprimer des tags (si la création libre est autorisée).
+*   **FEAT-ADMIN-05 : Configuration Générale (Admin)**
+    *   (Optionnel) Paramètres de base du forum : nom du forum, description, nombre d'éléments par page pour la pagination, etc.
+
+**5. Exigences Non Fonctionnelles**
+
+*   **5.1. Performance**
+    *   Temps de chargement des pages : Objectif < 2 secondes pour les pages courantes (liste de sujets, vue d'un sujet) en conditions normales.
+    *   Requêtes base de données optimisées (utilisation d'index, éviter N+1 queries).
+    *   Utilisation efficace des ressources serveur.
+*   **5.2. Sécurité**
+    *   Protection contre les injections SQL (utilisation d'ORM comme SQLAlchemy fortement recommandée).
+    *   Protection contre le Cross-Site Scripting (XSS) (échappement systématique des données utilisateur affichées).
+    *   Protection contre le Cross-Site Request Forgery (CSRF) (utilisation de tokens CSRF, ex: via Flask-WTF).
+    *   Validation des données en entrée (côté serveur indispensable).
+    *   Contrôle d'accès basé sur les rôles rigoureux pour toutes les actions sensibles.
+    *   Hashage sécurisé des mots de passe.
+    *   Utilisation de HTTPS obligatoire en production.
+    *   Protection contre le spam (Captcha, limitation de taux, etc.).
+*   **5.3. Utilisabilité (UX/UI)**
+    *   Interface claire, intuitive et cohérente.
+    *   Navigation facile entre les catégories, sujets et profils.
+    *   **Design Réactif (Responsive) :** Affichage et fonctionnalité optimisés pour ordinateurs de bureau, tablettes et smartphones. Approche Mobile-First encouragée avec Tailwind CSS.
+    *   Respect des standards d'accessibilité web (WCAG) de base (structure sémantique HTML, contrastes suffisants, navigation clavier basique).
+*   **5.4. Maintenabilité**
+    *   Code source clair, commenté et respectant les conventions (PEP 8 pour Python).
+    *   Architecture modulaire (utilisation de Flask Blueprints fortement recommandée).
+    *   Utilisation d'un système de gestion de versions (Git).
+    *   Tests unitaires et d'intégration (au moins pour les parties critiques).
+    *   Documentation technique (configuration, déploiement).
+*   **5.5. Scalabilité**
+    *   L'architecture doit permettre une montée en charge future (augmentation du trafic et du volume de données).
+    *   Conception de la base de données pensée pour l'évolution.
+    *   Application "Stateless" autant que possible pour faciliter la mise à l'échelle horizontale.
+
+**6. Stack Technologique Imposée**
+
+*   **Backend :** Python (version 3.8+), Framework Flask.
+*   **Frontend :** HTML5, CSS3 (via Tailwind CSS v3+), JavaScript (Vanilla JS ou micro-framework type Alpine.js si besoin pour interactivité légère, pas de gros framework type React/Vue/Angular imposé).
+*   **Base de Données :** Au choix du développeur, mais doit être une base de données relationnelle robuste (ex: PostgreSQL (préféré pour la scalabilité), MySQL, SQLite pour développement/tests). ORM SQLAlchemy recommandé.
+*   **Serveur WSGI (Production) :** Gunicorn ou uWSGI.
+*   **Serveur Web (Production) :** Nginx ou Apache (en tant que reverse proxy).
+*   **Gestion des dépendances Python :** `pip` avec `requirements.txt` ou `Pipenv` / `Poetry`.
+*   **Gestion des assets frontend :** Utilisation de l'outillage Tailwind CLI ou intégration via un bundler (ex: Webpack/Vite si jugé nécessaire pour JS plus complexe).
+
+**7. Architecture Applicative (Suggestion)**
+
+*   Utilisation du pattern MVT (Model-View-Template) ou MVC adapté à Flask.
+*   Organisation du code en **Flask Blueprints** pour séparer les logiques (ex: `auth`, `forum`, `admin`).
+*   Utilisation de **Flask-SQLAlchemy** pour l'interaction avec la base de données (Models).
+*   Utilisation de **Flask-WTF** pour la gestion et la validation des formulaires (sécurité CSRF incluse).
+*   Utilisation de **Flask-Login** ou **Flask-Security-Too** pour la gestion des sessions utilisateur et des rôles.
+*   Utilisation de **Jinja2** (moteur de template par défaut de Flask) pour les vues HTML.
+*   Configuration gérée via des variables d'environnement ou des fichiers de configuration distincts (développement, production).
+
+**8. Modèle de Données Conceptuel**
+
+Entités principales (liste non exhaustive) :
+
+*   `User` (id, username, email, password_hash, created_at, role_id, profile_info...)
+*   `Role` (id, name)
+*   `Category` (id, name, description, order)
+*   `Topic` (id, title, created_at, user_id, category_id, is_locked, is_pinned, last_activity_at)
+*   `Post` (id, content, created_at, updated_at, user_id, topic_id)
+*   `Tag` (id, name)
+*   `TopicTag` (topic_id, tag_id) (Table de liaison ManyToMany)
+*   `Reaction` (id, user_id, post_id, reaction_type)
+*   `Report` (id, reporter_id, post_id, topic_id, reason, status, handled_by_id, created_at)
+
+Des relations claires (OneToMany, ManyToMany) doivent être établies entre ces entités.
+
+**9. Interface Utilisateur (UI) et Expérience Utilisateur (UX)**
+
+*   Le design doit être épuré, moderne et fonctionnel, en s'appuyant sur les utilitaires de **Tailwind CSS**.
+*   L'interface doit être intuitive même pour un utilisateur non expérimenté des forums.
+*   Cohérence visuelle sur l'ensemble des pages.
+*   Feedback clair à l'utilisateur après chaque action (ex: message posté avec succès, erreur de formulaire).
+*   **Responsive Design** est une priorité absolue.
+

forms.py

@@ -0,0 +1,91 @@
+from flask_wtf import FlaskForm
+from flask_wtf.file import FileField, FileAllowed
+from wtforms import StringField, PasswordField, BooleanField, TextAreaField, SelectField, HiddenField
+from wtforms.validators import DataRequired, Length, Email, EqualTo, ValidationError, URL, Optional
+from models import User, Category, Tag
+
+class LoginForm(FlaskForm):
+    username = StringField('Username or Email', validators=[DataRequired()])
+    password = PasswordField('Password', validators=[DataRequired()])
+    remember_me = BooleanField('Remember Me')
+
+class RegistrationForm(FlaskForm):
+    username = StringField('Username', validators=[DataRequired(), Length(min=3, max=64)])
+    email = StringField('Email', validators=[DataRequired(), Email(), Length(max=120)])
+    password = PasswordField('Password', validators=[DataRequired(), Length(min=8, max=128)])
+    password2 = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
+    
+    def validate_username(self, username):
+        user = User.query.filter_by(username=username.data).first()
+        if user is not None:
+            raise ValidationError('This username is already taken. Please choose a different one.')
+    
+    def validate_email(self, email):
+        user = User.query.filter_by(email=email.data).first()
+        if user is not None:
+            raise ValidationError('This email is already registered. Please use a different one.')
+
+class EditProfileForm(FlaskForm):
+    avatar = FileField('Avatar', validators=[
+        FileAllowed(['jpg', 'png', 'jpeg', 'gif'], 'Images only!')
+    ])
+    signature = StringField('Signature', validators=[Optional(), Length(max=200)])
+    location = StringField('Location', validators=[Optional(), Length(max=100)])
+    website = StringField('Website', validators=[Optional(), URL(), Length(max=120)])
+    bio = TextAreaField('About Me', validators=[Optional(), Length(max=500)])
+
+class ChangePasswordForm(FlaskForm):
+    current_password = PasswordField('Current Password', validators=[DataRequired()])
+    password = PasswordField('New Password', validators=[DataRequired(), Length(min=8, max=128)])
+    password2 = PasswordField('Confirm New Password', validators=[DataRequired(), EqualTo('password')])
+    
+    def validate_current_password(self, current_password):
+        # This will be checked in the route function using the current user
+        pass
+
+class CreateTopicForm(FlaskForm):
+    title = StringField('Title', validators=[DataRequired(), Length(min=5, max=200)])
+    content = TextAreaField('Content', validators=[DataRequired(), Length(min=10)])
+    category_id = SelectField('Category', coerce=int, validators=[DataRequired()])
+    tags = StringField('Tags (comma separated)', validators=[Optional(), Length(max=100)])
+    
+    def __init__(self, *args, **kwargs):
+        super(CreateTopicForm, self).__init__(*args, **kwargs)
+        # Populate category choices - this will be done in the route
+
+class CreatePostForm(FlaskForm):
+    content = TextAreaField('Content', validators=[DataRequired(), Length(min=10)])
+    topic_id = HiddenField('Topic ID', validators=[DataRequired()])
+
+class ReportForm(FlaskForm):
+    reason = TextAreaField('Reason', validators=[DataRequired(), Length(min=10, max=1000)])
+    post_id = HiddenField('Post ID', validators=[Optional()])
+    topic_id = HiddenField('Topic ID', validators=[Optional()])
+
+class CreateCategoryForm(FlaskForm):
+    name = StringField('Name', validators=[DataRequired(), Length(min=3, max=100)])
+    description = TextAreaField('Description', validators=[Optional(), Length(max=500)])
+    order = StringField('Order', validators=[DataRequired()])
+
+class EditCategoryForm(FlaskForm):
+    name = StringField('Name', validators=[DataRequired(), Length(min=3, max=100)])
+    description = TextAreaField('Description', validators=[Optional(), Length(max=500)])
+    order = StringField('Order', validators=[DataRequired()])
+
+class EditUserForm(FlaskForm):
+    role = SelectField('Role', choices=[
+        ('member', 'Member'),
+        ('moderator', 'Moderator'),
+        ('admin', 'Admin')
+    ], validators=[DataRequired()])
+    is_active = BooleanField('Active')
+    is_banned = BooleanField('Banned')
+    ban_reason = TextAreaField('Ban Reason', validators=[Optional(), Length(max=500)])
+
+class CreateTagForm(FlaskForm):
+    name = StringField('Name', validators=[DataRequired(), Length(min=2, max=50)])
+    
+    def validate_name(self, name):
+        tag = Tag.query.filter_by(name=name.data.lower()).first()
+        if tag is not None:
+            raise ValidationError('This tag already exists.')

main.py

@@ -0,0 +1,8 @@
+import logging
+from app import app
+
+# Set up logging for debugging
+logging.basicConfig(level=logging.DEBUG)
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)

models.py

@@ -0,0 +1,188 @@
+from datetime import datetime
+from app import db
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+from sqlalchemy.ext.associationproxy import association_proxy
+
+# User roles
+class Role:
+    MEMBER = 'member'
+    MODERATOR = 'moderator'
+    ADMIN = 'admin'
+
+# Association table for topics and tags
+topic_tag = db.Table('topic_tag',
+    db.Column('topic_id', db.Integer, db.ForeignKey('topic.id'), primary_key=True),
+    db.Column('tag_id', db.Integer, db.ForeignKey('tag.id'), primary_key=True)
+)
+
+# User model
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(64), unique=True, nullable=False, index=True)
+    email = db.Column(db.String(120), unique=True, nullable=False, index=True)
+    password_hash = db.Column(db.String(256), nullable=False)
+    role = db.Column(db.String(20), nullable=False, default=Role.MEMBER)
+    avatar = db.Column(db.String(120), nullable=True, default='default.png')
+    signature = db.Column(db.String(200), nullable=True)
+    location = db.Column(db.String(100), nullable=True)
+    website = db.Column(db.String(120), nullable=True)
+    bio = db.Column(db.Text, nullable=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    last_seen = db.Column(db.DateTime, default=datetime.utcnow)
+    is_active = db.Column(db.Boolean, default=True)
+    is_banned = db.Column(db.Boolean, default=False)
+    ban_reason = db.Column(db.Text, nullable=True)
+    
+    # Relationships
+    topics = db.relationship('Topic', backref='author', lazy='dynamic')
+    posts = db.relationship('Post', backref='author', lazy='dynamic', foreign_keys='Post.author_id')
+    reactions = db.relationship('Reaction', backref='user', lazy='dynamic')
+    reports = db.relationship('Report', backref='reporter', lazy='dynamic', foreign_keys='Report.reporter_id')
+    
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+    
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
+    
+    def is_admin(self):
+        return self.role == Role.ADMIN
+    
+    def is_moderator(self):
+        return self.role == Role.MODERATOR or self.role == Role.ADMIN
+    
+    def update_last_seen(self):
+        self.last_seen = datetime.utcnow()
+        db.session.commit()
+    
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+# Category model
+class Category(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(100), nullable=False)
+    description = db.Column(db.Text, nullable=True)
+    order = db.Column(db.Integer, default=0)
+    
+    # Relationships
+    topics = db.relationship('Topic', backref='category', lazy='dynamic')
+    
+    def topic_count(self):
+        return self.topics.count()
+    
+    def post_count(self):
+        count = 0
+        for topic in self.topics:
+            count += topic.posts.count()
+        return count
+    
+    def __repr__(self):
+        return f'<Category {self.name}>'
+
+# Topic model
+class Topic(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(200), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    views = db.Column(db.Integer, default=0)
+    is_locked = db.Column(db.Boolean, default=False)
+    is_pinned = db.Column(db.Boolean, default=False)
+    
+    # Foreign keys
+    category_id = db.Column(db.Integer, db.ForeignKey('category.id'), nullable=False)
+    author_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    
+    # Relationships
+    posts = db.relationship('Post', backref='topic', lazy='dynamic', cascade='all, delete-orphan')
+    tags = db.relationship('Tag', secondary=topic_tag, backref=db.backref('topics', lazy='dynamic'))
+    reports = db.relationship('Report', backref='topic', lazy='dynamic', 
+                             primaryjoin="and_(Report.topic_id==Topic.id, Report.post_id==None)")
+    
+    def reply_count(self):
+        return self.posts.count() - 1  # Subtract first post
+    
+    def last_post(self):
+        return self.posts.order_by(Post.created_at.desc()).first()
+    
+    def increment_view(self):
+        self.views += 1
+        db.session.commit()
+    
+    def __repr__(self):
+        return f'<Topic {self.title}>'
+
+# Post model
+class Post(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    edited_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
+    
+    # Foreign keys
+    topic_id = db.Column(db.Integer, db.ForeignKey('topic.id'), nullable=False)
+    author_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    
+    # Relationships
+    reactions = db.relationship('Reaction', backref='post', lazy='dynamic', cascade='all, delete-orphan')
+    reports = db.relationship('Report', backref='post', lazy='dynamic', 
+                             primaryjoin="Report.post_id==Post.id")
+    
+    edited_by = db.relationship('User', foreign_keys=[edited_by_id])
+    
+    def get_reaction_count(self, reaction_type=None):
+        if reaction_type:
+            return self.reactions.filter_by(reaction_type=reaction_type).count()
+        return self.reactions.count()
+    
+    def __repr__(self):
+        return f'<Post {self.id}>'
+
+# Tag model
+class Tag(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(50), nullable=False, unique=True)
+    
+    def __repr__(self):
+        return f'<Tag {self.name}>'
+
+# Reaction model
+class Reaction(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    reaction_type = db.Column(db.String(20), nullable=False, default='like')
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    # Foreign keys
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
+    
+    # Enforce unique reaction per user per post
+    __table_args__ = (
+        db.UniqueConstraint('user_id', 'post_id', name='_user_post_reaction_uc'),
+    )
+    
+    def __repr__(self):
+        return f'<Reaction {self.reaction_type}>'
+
+# Report model
+class Report(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    reason = db.Column(db.Text, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    is_resolved = db.Column(db.Boolean, default=False)
+    resolved_at = db.Column(db.DateTime, nullable=True)
+    resolved_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
+    
+    # Foreign keys
+    reporter_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    topic_id = db.Column(db.Integer, db.ForeignKey('topic.id'), nullable=True)
+    post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=True)
+    
+    # Relationships
+    resolved_by = db.relationship('User', foreign_keys=[resolved_by_id])
+    
+    def __repr__(self):
+        return f'<Report {self.id}>'

pyproject.toml

@@ -0,0 +1,21 @@
+[project]
+name = "repl-nix-workspace"
+version = "0.1.0"
+description = "Add your description here"
+requires-python = ">=3.11"
+dependencies = [
+    "email-validator>=2.2.0",
+    "flask-login>=0.6.3",
+    "flask>=3.1.0",
+    "flask-sqlalchemy>=3.1.1",
+    "gunicorn>=23.0.0",
+    "psycopg2-binary>=2.9.10",
+    "flask-wtf>=1.2.2",
+    "wtforms>=3.2.1",
+    "python-slugify>=8.0.4",
+    "pillow>=11.2.1",
+    "slugify>=0.0.1",
+    "sqlalchemy>=2.0.40",
+    "werkzeug>=3.1.3",
+    "cairosvg>=2.7.1",
+]

routes/__init__.py

@@ -0,0 +1 @@
+# This file is intentionally left empty to make the directory a Python package

routes/admin.py

@@ -0,0 +1,298 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request, abort
+from flask_login import current_user, login_required
+from app import db
+from models import User, Category, Topic, Post, Tag, Report, Role
+from forms import CreateCategoryForm, EditCategoryForm, EditUserForm, CreateTagForm
+import logging
+
+# Set up logger
+logger = logging.getLogger(__name__)
+
+# Create blueprint
+admin_bp = Blueprint('admin', __name__, url_prefix='/admin')
+
+# Admin access middleware
+@admin_bp.before_request
+def check_admin():
+    # Vérifie si l'utilisateur est authentifié, sinon redirige vers la page de connexion
+    if not current_user.is_authenticated:
+        flash('Vous devez être connecté pour accéder à cette page.', 'warning')
+        return redirect(url_for('auth.login'))
+    
+    # Vérifie si l'utilisateur est modérateur ou admin, sinon affiche une erreur
+    if not current_user.is_moderator():
+        abort(403)  # Forbidden
+
+# Routes
+@admin_bp.route('/')
+def dashboard():
+    # Count stats for dashboard
+    user_count = User.query.count()
+    topic_count = Topic.query.count()
+    post_count = Post.query.count()
+    report_count = Report.query.filter_by(is_resolved=False).count()
+    
+    # Prepare stats dictionary for template
+    stats = {
+        'users': user_count,
+        'topics': topic_count,
+        'posts': post_count,
+        'unresolved_reports': report_count
+    }
+    
+    # Get recent activities
+    recent_activities = []
+    
+    # Add recent reports
+    recent_reports = Report.query.filter_by(is_resolved=False)\
+        .order_by(Report.created_at.desc())\
+        .limit(5)\
+        .all()
+    
+    for report in recent_reports:
+        activity = {
+            'icon': 'flag',
+            'description': f'Nouveau signalement par {report.reporter.username}',
+            'timestamp': report.created_at
+        }
+        recent_activities.append(activity)
+    
+    # Add recent topics
+    recent_topics = Topic.query.order_by(Topic.created_at.desc()).limit(5).all()
+    for topic in recent_topics:
+        activity = {
+            'icon': 'message-square',
+            'description': f'Nouveau sujet créé par {topic.author.username}',
+            'timestamp': topic.created_at
+        }
+        recent_activities.append(activity)
+    
+    # Sort activities by timestamp
+    recent_activities.sort(key=lambda x: x['timestamp'], reverse=True)
+    recent_activities = recent_activities[:10]  # Limit to 10 activities
+    
+    return render_template('admin/dashboard.html',
+                          stats=stats,
+                          recent_activities=recent_activities)
+
+# Category management
+@admin_bp.route('/categories')
+def manage_categories():
+    if not current_user.is_admin():
+        abort(403)  # Only admins can manage categories
+    
+    categories = Category.query.order_by(Category.order).all()
+    return render_template('admin/manage_categories.html', categories=categories)
+
+@admin_bp.route('/categories/create', methods=['GET', 'POST'])
+def create_category():
+    if not current_user.is_admin():
+        abort(403)
+    
+    form = CreateCategoryForm()
+    
+    if form.validate_on_submit():
+        category = Category(
+            name=form.name.data,
+            description=form.description.data,
+            order=int(form.order.data)
+        )
+        
+        db.session.add(category)
+        db.session.commit()
+        
+        flash('Category created successfully!', 'success')
+        return redirect(url_for('admin.manage_categories'))
+    
+    return render_template('admin/create_category.html', form=form)
+
+@admin_bp.route('/categories/<int:id>/edit', methods=['GET', 'POST'])
+def edit_category(id):
+    if not current_user.is_admin():
+        abort(403)
+    
+    category = Category.query.get_or_404(id)
+    form = EditCategoryForm()
+    
+    if form.validate_on_submit():
+        category.name = form.name.data
+        category.description = form.description.data
+        category.order = int(form.order.data)
+        
+        db.session.commit()
+        
+        flash('Category updated successfully!', 'success')
+        return redirect(url_for('admin.manage_categories'))
+    
+    # Pre-fill form
+    if request.method == 'GET':
+        form.name.data = category.name
+        form.description.data = category.description
+        form.order.data = str(category.order)
+    
+    return render_template('admin/edit_category.html', form=form, category=category)
+
+@admin_bp.route('/categories/<int:id>/delete', methods=['POST'])
+def delete_category(id):
+    if not current_user.is_admin():
+        abort(403)
+    
+    category = Category.query.get_or_404(id)
+    
+    # Check if category has topics
+    if category.topics.count() > 0:
+        flash('Cannot delete category that contains topics.', 'danger')
+        return redirect(url_for('admin.manage_categories'))
+    
+    db.session.delete(category)
+    db.session.commit()
+    
+    flash('Category deleted successfully!', 'success')
+    return redirect(url_for('admin.manage_categories'))
+
+# User management
+@admin_bp.route('/users')
+def manage_users():
+    if not current_user.is_admin():
+        abort(403)
+    
+    page = request.args.get('page', 1, type=int)
+    per_page = 20
+    
+    users = User.query.order_by(User.username)\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('admin/manage_users.html', users=users)
+
+@admin_bp.route('/users/<int:id>/edit', methods=['GET', 'POST'])
+def edit_user(id):
+    if not current_user.is_admin():
+        abort(403)
+    
+    user = User.query.get_or_404(id)
+    form = EditUserForm()
+    
+    if form.validate_on_submit():
+        user.role = form.role.data
+        user.is_active = form.is_active.data
+        user.is_banned = form.is_banned.data
+        user.ban_reason = form.ban_reason.data if form.is_banned.data else None
+        
+        db.session.commit()
+        
+        flash('User updated successfully!', 'success')
+        return redirect(url_for('admin.manage_users'))
+    
+    # Pre-fill form
+    if request.method == 'GET':
+        form.role.data = user.role
+        form.is_active.data = user.is_active
+        form.is_banned.data = user.is_banned
+        form.ban_reason.data = user.ban_reason
+    
+    return render_template('admin/edit_user.html', form=form, user=user)
+
+# Report management
+@admin_bp.route('/reports')
+def manage_reports():
+    page = request.args.get('page', 1, type=int)
+    per_page = 20
+    show_resolved = request.args.get('show_resolved', False, type=bool)
+    
+    if show_resolved:
+        reports = Report.query.order_by(Report.created_at.desc())
+    else:
+        reports = Report.query.filter_by(is_resolved=False).order_by(Report.created_at.desc())
+    
+    reports = reports.paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('admin/manage_reports.html', 
+                          reports=reports, 
+                          show_resolved=show_resolved)
+
+@admin_bp.route('/reports/<int:id>/resolve', methods=['POST'])
+def resolve_report(id):
+    report = Report.query.get_or_404(id)
+    
+    report.is_resolved = True
+    report.resolved_by_id = current_user.id
+    report.resolved_at = db.func.now()
+    
+    db.session.commit()
+    
+    flash('Report marked as resolved.', 'success')
+    return redirect(url_for('admin.manage_reports'))
+
+@admin_bp.route('/reports/<int:id>/delete_content', methods=['POST'])
+def delete_reported_content(id):
+    report = Report.query.get_or_404(id)
+    
+    # Delete the reported content
+    if report.post_id:
+        post = Post.query.get(report.post_id)
+        if post:
+            db.session.delete(post)
+    elif report.topic_id and not report.post_id:
+        topic = Topic.query.get(report.topic_id)
+        if topic:
+            db.session.delete(topic)
+    
+    # Mark report as resolved
+    report.is_resolved = True
+    report.resolved_by_id = current_user.id
+    report.resolved_at = db.func.now()
+    
+    db.session.commit()
+    
+    flash('Reported content has been deleted and report resolved.', 'success')
+    return redirect(url_for('admin.manage_reports'))
+
+# Tag management
+@admin_bp.route('/tags')
+def manage_tags():
+    if not current_user.is_admin():
+        abort(403)
+    
+    page = request.args.get('page', 1, type=int)
+    per_page = 30
+    
+    tags = Tag.query.order_by(Tag.name)\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('admin/manage_tags.html', tags=tags)
+
+@admin_bp.route('/tags/create', methods=['GET', 'POST'])
+def create_tag():
+    if not current_user.is_admin():
+        abort(403)
+    
+    form = CreateTagForm()
+    
+    if form.validate_on_submit():
+        tag = Tag(name=form.name.data.lower())
+        
+        db.session.add(tag)
+        db.session.commit()
+        
+        flash('Tag created successfully!', 'success')
+        return redirect(url_for('admin.manage_tags'))
+    
+    return render_template('admin/create_tag.html', form=form)
+
+@admin_bp.route('/tags/<int:id>/delete', methods=['POST'])
+def delete_tag(id):
+    if not current_user.is_admin():
+        abort(403)
+    
+    tag = Tag.query.get_or_404(id)
+    
+    # Remove tag from topics
+    for topic in tag.topics:
+        topic.tags.remove(tag)
+    
+    # Delete the tag
+    db.session.delete(tag)
+    db.session.commit()
+    
+    flash('Tag deleted successfully!', 'success')
+    return redirect(url_for('admin.manage_tags'))

routes/auth.py

@@ -0,0 +1,79 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request
+from flask_login import login_user, logout_user, current_user, login_required
+from werkzeug.security import check_password_hash
+from app import db
+from models import User
+from forms import LoginForm, RegistrationForm
+import logging
+
+# Set up logger
+logger = logging.getLogger(__name__)
+
+# Create blueprint
+auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
+
+@auth_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('forum.index'))
+    
+    form = LoginForm()
+    if form.validate_on_submit():
+        # Check if login is email or username
+        if '@' in form.username.data:
+            user = User.query.filter_by(email=form.username.data).first()
+        else:
+            user = User.query.filter_by(username=form.username.data).first()
+        
+        if user is None or not user.check_password(form.password.data):
+            flash('Invalid username or password', 'danger')
+            return render_template('auth/login.html', form=form)
+        
+        if user.is_banned:
+            flash('Your account has been banned. Reason: ' + (user.ban_reason or 'Not specified'), 'danger')
+            return render_template('auth/login.html', form=form)
+        
+        login_user(user, remember=form.remember_me.data)
+        user.update_last_seen()
+        
+        # Redirect to the page user tried to access
+        next_page = request.args.get('next')
+        if not next_page or not next_page.startswith('/'):
+            next_page = url_for('forum.index')
+            
+        flash('You have been logged in successfully!', 'success')
+        return redirect(next_page)
+    
+    return render_template('auth/login.html', form=form)
+
+@auth_bp.route('/register', methods=['GET', 'POST'])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('forum.index'))
+    
+    form = RegistrationForm()
+    if form.validate_on_submit():
+        user = User(
+            username=form.username.data,
+            email=form.email.data
+        )
+        user.set_password(form.password.data)
+        
+        try:
+            db.session.add(user)
+            db.session.commit()
+            flash('Registration successful! You can now login.', 'success')
+            return redirect(url_for('auth.login'))
+        except Exception as e:
+            logger.error(f"Registration error: {str(e)}")
+            db.session.rollback()
+            flash('An error occurred during registration. Please try again.', 'danger')
+    
+    return render_template('auth/register.html', form=form)
+
+@auth_bp.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    flash('You have been logged out.', 'info')
+    return redirect(url_for('forum.index'))

routes/cadmin.py

@@ -0,0 +1,40 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request
+from flask_login import login_required, current_user
+from models import User, Role, db
+from forms import RegistrationForm
+from werkzeug.security import generate_password_hash
+import os
+import secrets
+
+cadmin_bp = Blueprint('cadmin', __name__)
+
+# Secret token pour sécuriser la page cadmin
+ADMIN_SECRET = os.environ.get('ADMIN_SECRET', secrets.token_hex(16))
+
+@cadmin_bp.route('/cadmin', methods=['GET', 'POST'])
+def admin_panel():
+    # Page accessible à tous sans restriction
+        
+    form = RegistrationForm()
+    
+    if form.validate_on_submit():
+        user = User(
+            username=form.username.data,
+            email=form.email.data,
+            role=Role.ADMIN
+        )
+        user.set_password(form.password.data)
+        
+        db.session.add(user)
+        db.session.commit()
+        
+        flash(f'Compte administrateur créé pour {form.username.data}!', 'success')
+        return redirect(url_for('cadmin.admin_panel'))
+    
+    # Afficher tous les administrateurs existants
+    admins = User.query.filter_by(role=Role.ADMIN).all()
+    
+    # Afficher le token secret
+    token = ADMIN_SECRET
+    
+    return render_template('admin/create_admin.html', form=form, admins=admins, token=token)

routes/forum.py

@@ -0,0 +1,348 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request, abort
+from flask_login import current_user, login_required
+from app import db
+from models import Category, Topic, Post, Tag, Reaction, Report
+from forms import CreateTopicForm, CreatePostForm, ReportForm
+from datetime import datetime
+import logging
+from sqlalchemy import desc, func
+
+# Set up logger
+logger = logging.getLogger(__name__)
+
+# Create blueprint
+forum_bp = Blueprint('forum', __name__)
+
+# Helper functions
+def get_or_create_tags(tag_names):
+    """Gets existing tags or creates new ones from a comma-separated string"""
+    if not tag_names:
+        return []
+    
+    tags = []
+    for name in [t.strip() for t in tag_names.split(',') if t.strip()]:
+        tag = Tag.query.filter_by(name=name.lower()).first()
+        if not tag:
+            tag = Tag(name=name.lower())
+            db.session.add(tag)
+        tags.append(tag)
+    
+    return tags
+
+# Routes
+@forum_bp.route('/')
+def index():
+    categories = Category.query.order_by(Category.order).all()
+    return render_template('home.html', categories=categories)
+
+@forum_bp.route('/categories')
+def category_list():
+    categories = Category.query.order_by(Category.order).all()
+    return render_template('forum/category_list.html', categories=categories)
+
+@forum_bp.route('/category/<int:id>')
+def category_view(id):
+    category = Category.query.get_or_404(id)
+    page = request.args.get('page', 1, type=int)
+    per_page = 20  # Topics per page
+    
+    # Get topics with pagination
+    topics = Topic.query.filter_by(category_id=id)\
+        .order_by(Topic.is_pinned.desc(), Topic.updated_at.desc())\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('forum/topic_list.html', 
+                           category=category, 
+                           topics=topics)
+
+@forum_bp.route('/topic/<int:id>', methods=['GET', 'POST'])
+def topic_view(id):
+    topic = Topic.query.get_or_404(id)
+    
+    # Increment view counter
+    if not current_user.is_authenticated or current_user.id != topic.author_id:
+        topic.increment_view()
+    
+    # Handle pagination
+    page = request.args.get('page', 1, type=int)
+    per_page = 10  # Posts per page
+    posts = Post.query.filter_by(topic_id=id)\
+        .order_by(Post.created_at)\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    # Create forms
+    post_form = CreatePostForm() if current_user.is_authenticated else None
+    report_form = ReportForm() if current_user.is_authenticated else None
+    
+    # Handle post creation
+    if current_user.is_authenticated and post_form and post_form.validate_on_submit():
+        if topic.is_locked and not current_user.is_moderator():
+            flash('This topic is locked. You cannot reply to it.', 'danger')
+            return redirect(url_for('forum.topic_view', id=id))
+        
+        post = Post(
+            content=post_form.content.data,
+            topic_id=id,
+            author_id=current_user.id
+        )
+        
+        db.session.add(post)
+        topic.updated_at = datetime.utcnow()
+        db.session.commit()
+        
+        flash('Your reply has been posted!', 'success')
+        return redirect(url_for('forum.topic_view', id=id, page=posts.pages or 1))
+    
+    return render_template('forum/topic_view.html', 
+                           topic=topic, 
+                           posts=posts, 
+                           post_form=post_form,
+                           report_form=report_form)
+
+@forum_bp.route('/create_topic', methods=['GET', 'POST'])
+@login_required
+def create_topic():
+    form = CreateTopicForm()
+    
+    # Populate category choices
+    form.category_id.choices = [(c.id, c.name) for c in Category.query.order_by(Category.name).all()]
+    
+    if form.validate_on_submit():
+        # Create new topic
+        topic = Topic(
+            title=form.title.data,
+            category_id=form.category_id.data,
+            author_id=current_user.id
+        )
+        
+        # Add tags if provided
+        if form.tags.data:
+            topic.tags = get_or_create_tags(form.tags.data)
+        
+        db.session.add(topic)
+        db.session.flush()  # Get the topic ID
+        
+        # Create the first post
+        post = Post(
+            content=form.content.data,
+            topic_id=topic.id,
+            author_id=current_user.id
+        )
+        
+        db.session.add(post)
+        db.session.commit()
+        
+        flash('Your topic has been created!', 'success')
+        return redirect(url_for('forum.topic_view', id=topic.id))
+    
+    return render_template('forum/create_topic.html', form=form)
+
+@forum_bp.route('/post/<int:id>/quote')
+@login_required
+def quote_post(id):
+    post = Post.query.get_or_404(id)
+    topic_id = post.topic_id
+    
+    if post.topic.is_locked and not current_user.is_moderator():
+        flash('This topic is locked. You cannot reply to it.', 'danger')
+        return redirect(url_for('forum.topic_view', id=topic_id))
+    
+    quoted_content = f'<blockquote><p>{post.content}</p><footer>Posted by {post.author.username}</footer></blockquote><p></p>'
+    
+    # Create a form and pre-fill it with the quoted content
+    form = CreatePostForm(topic_id=topic_id, content=quoted_content)
+    
+    return render_template('forum/create_post.html', 
+                          form=form, 
+                          topic=post.topic,
+                          is_quote=True)
+
+@forum_bp.route('/post/<int:id>/edit', methods=['GET', 'POST'])
+@login_required
+def edit_post(id):
+    post = Post.query.get_or_404(id)
+    
+    # Check permissions
+    if current_user.id != post.author_id and not current_user.is_moderator():
+        abort(403)
+    
+    # Create form and pre-fill with existing content
+    form = CreatePostForm(topic_id=post.topic_id)
+    
+    if request.method == 'GET':
+        form.content.data = post.content
+    
+    if form.validate_on_submit():
+        post.content = form.content.data
+        post.updated_at = datetime.utcnow()
+        post.edited_by_id = current_user.id
+        
+        db.session.commit()
+        flash('Your post has been updated!', 'success')
+        return redirect(url_for('forum.topic_view', id=post.topic_id))
+    
+    return render_template('forum/create_post.html', 
+                          form=form, 
+                          topic=post.topic,
+                          post=post,
+                          is_edit=True)
+
+@forum_bp.route('/post/<int:id>/delete', methods=['POST'])
+@login_required
+def delete_post(id):
+    post = Post.query.get_or_404(id)
+    topic_id = post.topic_id
+    
+    # Check permissions
+    if current_user.id != post.author_id and not current_user.is_moderator():
+        abort(403)
+    
+    # Check if this is the first post in a topic
+    is_first_post = post.id == Post.query.filter_by(topic_id=topic_id).order_by(Post.created_at).first().id
+    
+    if is_first_post:
+        # If first post, delete the entire topic
+        topic = Topic.query.get(topic_id)
+        db.session.delete(topic)  # This should cascade delete all posts
+        db.session.commit()
+        flash('The topic has been deleted!', 'success')
+        return redirect(url_for('forum.category_view', id=topic.category_id))
+    else:
+        # Delete just this post
+        db.session.delete(post)
+        db.session.commit()
+        flash('The post has been deleted!', 'success')
+        return redirect(url_for('forum.topic_view', id=topic_id))
+
+@forum_bp.route('/topic/<int:id>/lock', methods=['POST'])
+@login_required
+def lock_topic(id):
+    if not current_user.is_moderator():
+        abort(403)
+    
+    topic = Topic.query.get_or_404(id)
+    topic.is_locked = not topic.is_locked  # Toggle lock state
+    
+    db.session.commit()
+    
+    status = 'locked' if topic.is_locked else 'unlocked'
+    flash(f'The topic has been {status}!', 'success')
+    
+    return redirect(url_for('forum.topic_view', id=id))
+
+@forum_bp.route('/topic/<int:id>/pin', methods=['POST'])
+@login_required
+def pin_topic(id):
+    if not current_user.is_moderator():
+        abort(403)
+    
+    topic = Topic.query.get_or_404(id)
+    topic.is_pinned = not topic.is_pinned  # Toggle pin state
+    
+    db.session.commit()
+    
+    status = 'pinned' if topic.is_pinned else 'unpinned'
+    flash(f'The topic has been {status}!', 'success')
+    
+    return redirect(url_for('forum.topic_view', id=id))
+
+@forum_bp.route('/post/<int:post_id>/react', methods=['POST'])
+@login_required
+def react_to_post(post_id):
+    post = Post.query.get_or_404(post_id)
+    reaction_type = request.form.get('reaction_type', 'like')
+    
+    # Check if user already reacted
+    existing_reaction = Reaction.query.filter_by(
+        user_id=current_user.id,
+        post_id=post_id
+    ).first()
+    
+    if existing_reaction:
+        if existing_reaction.reaction_type == reaction_type:
+            # If same reaction, remove it
+            db.session.delete(existing_reaction)
+            db.session.commit()
+            return {'status': 'removed', 'count': post.get_reaction_count(reaction_type)}
+        else:
+            # If different reaction, update it
+            existing_reaction.reaction_type = reaction_type
+            db.session.commit()
+            return {'status': 'updated', 'count': post.get_reaction_count(reaction_type)}
+    else:
+        # Create new reaction
+        reaction = Reaction(
+            user_id=current_user.id,
+            post_id=post_id,
+            reaction_type=reaction_type
+        )
+        db.session.add(reaction)
+        db.session.commit()
+        return {'status': 'added', 'count': post.get_reaction_count(reaction_type)}
+
+@forum_bp.route('/report', methods=['POST'])
+@login_required
+def create_report():
+    form = ReportForm()
+    
+    if form.validate_on_submit():
+        report = Report(
+            reason=form.reason.data,
+            reporter_id=current_user.id
+        )
+        
+        # Set either post_id or topic_id
+        if form.post_id.data:
+            report.post_id = form.post_id.data
+            item = Post.query.get_or_404(form.post_id.data)
+            report.topic_id = item.topic_id
+        elif form.topic_id.data:
+            report.topic_id = form.topic_id.data
+            item = Topic.query.get_or_404(form.topic_id.data)
+        else:
+            flash('Invalid report submission.', 'danger')
+            return redirect(url_for('forum.index'))
+        
+        db.session.add(report)
+        db.session.commit()
+        
+        flash('Your report has been submitted. A moderator will review it soon.', 'success')
+        
+        # Redirect back to the topic
+        return redirect(url_for('forum.topic_view', id=report.topic_id))
+    
+    flash('There was an error with your report submission.', 'danger')
+    return redirect(url_for('forum.index'))
+
+@forum_bp.route('/tags/<tag_name>')
+def tag_view(tag_name):
+    tag = Tag.query.filter_by(name=tag_name.lower()).first_or_404()
+    
+    page = request.args.get('page', 1, type=int)
+    per_page = 20
+    
+    topics = tag.topics.order_by(Topic.updated_at.desc())\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('forum/tag_topics.html', 
+                          tag=tag, 
+                          topics=topics)
+
+@forum_bp.route('/search')
+def search():
+    query = request.args.get('q', '')
+    page = request.args.get('page', 1, type=int)
+    per_page = 20
+    
+    if not query or len(query) < 3:
+        flash('Search query must be at least 3 characters long.', 'warning')
+        return redirect(url_for('forum.index'))
+    
+    # Search in topics
+    topics = Topic.query.filter(Topic.title.ilike(f'%{query}%'))\
+        .order_by(Topic.updated_at.desc())\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('forum/search_results.html',
+                           query=query,
+                           topics=topics)

routes/user.py

@@ -0,0 +1,121 @@
+from flask import Blueprint, render_template, redirect, url_for, flash, request, abort, current_app
+from flask_login import current_user, login_required
+from werkzeug.utils import secure_filename
+from app import db
+from models import User, Topic, Post
+from forms import EditProfileForm, ChangePasswordForm
+import os
+from datetime import datetime
+import logging
+from PIL import Image
+import uuid
+
+# Set up logger
+logger = logging.getLogger(__name__)
+
+# Create blueprint
+user_bp = Blueprint('user', __name__, url_prefix='/user')
+
+def save_avatar(avatar_file):
+    """Save the avatar image and return the filename"""
+    # Generate a unique filename
+    filename = secure_filename(f"{uuid.uuid4().hex[:8]}_{avatar_file.filename}")
+    
+    # Define the upload path
+    upload_dir = os.path.join(current_app.static_folder, 'uploads', 'avatars')
+    filepath = os.path.join(upload_dir, filename)
+    
+    # Resize and save the image
+    img = Image.open(avatar_file)
+    img.thumbnail((150, 150))  # Resize to max dimensions while preserving aspect ratio
+    img.save(filepath)
+    
+    return filename
+
+@user_bp.route('/profile/<username>')
+def profile(username):
+    user = User.query.filter_by(username=username).first_or_404()
+    
+    # Get user's topics with pagination
+    page = request.args.get('page', 1, type=int)
+    per_page = 10
+    
+    topics = Topic.query.filter_by(author_id=user.id)\
+        .order_by(Topic.created_at.desc())\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    # Get user's recent posts
+    recent_posts = Post.query.filter_by(author_id=user.id)\
+        .order_by(Post.created_at.desc())\
+        .limit(5)\
+        .all()
+    
+    return render_template('user/profile.html', 
+                          user=user, 
+                          topics=topics,
+                          recent_posts=recent_posts)
+
+@user_bp.route('/edit_profile', methods=['GET', 'POST'])
+@login_required
+def edit_profile():
+    form = EditProfileForm()
+    
+    if form.validate_on_submit():
+        # Update user profile
+        if form.avatar.data:
+            try:
+                filename = save_avatar(form.avatar.data)
+                current_user.avatar = filename
+            except Exception as e:
+                logger.error(f"Avatar upload error: {str(e)}")
+                flash('Une erreur est survenue lors du téléchargement de votre avatar.', 'danger')
+        
+        current_user.signature = form.signature.data
+        current_user.location = form.location.data
+        current_user.website = form.website.data
+        current_user.bio = form.bio.data
+        
+        db.session.commit()
+        flash('Votre profil a été mis à jour !', 'success')
+        return redirect(url_for('user.profile', username=current_user.username))
+    
+    # Pre-fill form with current user data
+    if request.method == 'GET':
+        form.signature.data = current_user.signature
+        form.location.data = current_user.location
+        form.website.data = current_user.website
+        form.bio.data = current_user.bio
+    
+    return render_template('user/edit_profile.html', form=form)
+
+@user_bp.route('/change_password', methods=['GET', 'POST'])
+@login_required
+def change_password():
+    form = ChangePasswordForm()
+    
+    if form.validate_on_submit():
+        # Check if current password is correct
+        if not current_user.check_password(form.current_password.data):
+            flash('Le mot de passe actuel est incorrect.', 'danger')
+            return render_template('user/change_password.html', form=form)
+        
+        # Update password
+        current_user.set_password(form.password.data)
+        db.session.commit()
+        
+        flash('Votre mot de passe a été mis à jour !', 'success')
+        return redirect(url_for('user.profile', username=current_user.username))
+    
+    return render_template('user/change_password.html', form=form)
+
+@user_bp.route('/posts')
+@login_required
+def user_posts():
+    page = request.args.get('page', 1, type=int)
+    per_page = 20
+    
+    posts = Post.query.filter_by(author_id=current_user.id)\
+        .order_by(Post.created_at.desc())\
+        .paginate(page=page, per_page=per_page, error_out=False)
+    
+    return render_template('user/posts.html', posts=posts)

static/css/styles.css

@@ -0,0 +1,130 @@
+/* Custom styles beyond Tailwind CSS */
+
+/* Focus state for form elements */
+.focus-ring:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+/* Editor styling */
+.editor-toolbar {
+    border-top-left-radius: 0.375rem;
+    border-top-right-radius: 0.375rem;
+    padding: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.editor-toolbar button {
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: #1a202c;
+    border: 1px solid transparent;
+}
+
+.editor-toolbar button:hover {
+    background-color: #EDF2F7;
+}
+
+.editor-textarea {
+    min-height: 200px;
+    border-radius: 0;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    resize: vertical;
+}
+
+/* Post quote styling */
+blockquote {
+    background-color: #EDF2F7;
+    padding: 1rem;
+    border-left: 4px solid #A0AEC0;
+    margin: 1rem 0;
+    border-radius: 0.25rem;
+}
+
+blockquote footer {
+    margin-top: 0.5rem;
+    font-style: italic;
+    color: #4A5568;
+}
+
+/* Custom pagination styles */
+.pagination .current-page {
+    background-color: #3182CE;
+    color: white;
+}
+
+/* Reaction button styling */
+.reaction-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.reaction-btn:hover {
+    background-color: #EDF2F7;
+}
+
+.reaction-btn.active {
+    background-color: #BEE3F8;
+    color: #2C5282;
+}
+
+/* Tag styling */
+.tag {
+    display: inline-flex;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    background-color: #E2E8F0;
+    color: #4A5568;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
+    transition: all 0.2s;
+}
+
+.tag:hover {
+    background-color: #CBD5E0;
+}
+
+/* Status indicators */
+.status-indicator {
+    display: inline-block;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 9999px;
+    margin-right: 0.25rem;
+}
+
+.status-online {
+    background-color: #48BB78;
+}
+
+.status-offline {
+    background-color: #CBD5E0;
+}
+
+.report-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    background-color: #F56565;
+    color: white;
+    font-size: 0.75rem;
+}
+
+/* Accessibility focus states */
+a:focus, button:focus, input:focus, textarea:focus, select:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}

static/js/editor.js

@@ -0,0 +1,165 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize editor toolbar functionality
+    initializeEditor();
+});
+
+/**
+ * Initialize the editor toolbar and functionality
+ */
+function initializeEditor() {
+    const editorContainer = document.querySelector('.editor-container');
+    
+    if (!editorContainer) return;
+    
+    const textarea = editorContainer.querySelector('textarea');
+    const toolbar = editorContainer.querySelector('.editor-toolbar');
+    
+    if (!textarea || !toolbar) return;
+    
+    // Set up toolbar buttons
+    setupToolbarButtons(toolbar, textarea);
+    
+    // Add input handler for tab key
+    textarea.addEventListener('keydown', function(e) {
+        // Handle tab key for indentation
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            
+            const start = this.selectionStart;
+            const end = this.selectionEnd;
+            
+            // Set textarea value to: text before + tab + text after
+            this.value = this.value.substring(0, start) + "    " + this.value.substring(end);
+            
+            // Set cursor position after the inserted tab
+            this.selectionStart = this.selectionEnd = start + 4;
+        }
+    });
+}
+
+/**
+ * Set up the toolbar buttons for the editor
+ * @param {HTMLElement} toolbar - The toolbar element
+ * @param {HTMLTextAreaElement} textarea - The textarea element
+ */
+function setupToolbarButtons(toolbar, textarea) {
+    // Define toolbar buttons and their actions
+    const buttons = [
+        {
+            name: 'bold',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>',
+            action: (text) => wrapText(textarea, '[b]', '[/b]')
+        },
+        {
+            name: 'italic',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>',
+            action: (text) => wrapText(textarea, '[i]', '[/i]')
+        },
+        {
+            name: 'underline',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>',
+            action: (text) => wrapText(textarea, '[u]', '[/u]')
+        },
+        {
+            name: 'link',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>',
+            action: (text) => insertLink(textarea)
+        },
+        {
+            name: 'image',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>',
+            action: (text) => insertImage(textarea)
+        },
+        {
+            name: 'code',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>',
+            action: (text) => wrapText(textarea, '[code]', '[/code]')
+        },
+        {
+            name: 'quote',
+            icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3.87-7.05 5.02-13.54 5.02-13.54 0-3.31 2.67-5.99 5.98-6 3.31 0 6 2.68 6 5.99 0 3.31-2.69 6.01-6 6.01h-2c.73 2 2.97 3.02 5.02 3.02-1.59 1.38-3.09 2.51-5.02 3.53C9.08 21.42 6.24 21.43 3 21z"></path></svg>',
+            action: (text) => wrapText(textarea, '[quote]', '[/quote]')
+        }
+    ];
+    
+    // Create buttons
+    buttons.forEach(button => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.setAttribute('aria-label', button.name);
+        btn.innerHTML = button.icon;
+        btn.classList.add('editor-button');
+        
+        btn.addEventListener('click', () => {
+            button.action();
+            textarea.focus(); // Return focus to textarea
+        });
+        
+        toolbar.appendChild(btn);
+    });
+}
+
+/**
+ * Wrap selected text with BBCode tags
+ * @param {HTMLTextAreaElement} textarea - The textarea element
+ * @param {string} openTag - The opening tag
+ * @param {string} closeTag - The closing tag
+ */
+function wrapText(textarea, openTag, closeTag) {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = textarea.value.substring(start, end);
+    const replacement = openTag + selectedText + closeTag;
+    
+    textarea.value = textarea.value.substring(0, start) + replacement + textarea.value.substring(end);
+    
+    // Adjust selection to be between the tags
+    textarea.selectionStart = start + openTag.length;
+    textarea.selectionEnd = start + openTag.length + selectedText.length;
+}
+
+/**
+ * Insert a link BBCode
+ * @param {HTMLTextAreaElement} textarea - The textarea element
+ */
+function insertLink(textarea) {
+    const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+    
+    let url = prompt('Enter the URL:', 'http://');
+    if (!url) return;
+    
+    let text = selectedText || prompt('Enter the link text:', '');
+    if (!text) text = url;
+    
+    const linkBBCode = `[url=${url}]${text}[/url]`;
+    
+    insertAtCursor(textarea, linkBBCode);
+}
+
+/**
+ * Insert an image BBCode
+ * @param {HTMLTextAreaElement} textarea - The textarea element
+ */
+function insertImage(textarea) {
+    const url = prompt('Enter the image URL:', 'http://');
+    if (!url) return;
+    
+    const imageBBCode = `[img]${url}[/img]`;
+    
+    insertAtCursor(textarea, imageBBCode);
+}
+
+/**
+ * Insert text at cursor position
+ * @param {HTMLTextAreaElement} textarea - The textarea element
+ * @param {string} text - The text to insert
+ */
+function insertAtCursor(textarea, text) {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    
+    textarea.value = textarea.value.substring(0, start) + text + textarea.value.substring(end);
+    
+    // Set selection after inserted text
+    textarea.selectionStart = textarea.selectionEnd = start + text.length;
+}

static/js/forum.js

@@ -0,0 +1,277 @@
+document.addEventListener('DOMContentLoaded', function() {
+    try {
+        // Quote functionality
+        setupQuoteButtons();
+        
+        // Reaction buttons
+        setupReactionButtons();
+        
+        // Topic lock/pin confirmations
+        setupModeratorActions();
+        
+        // Report form
+        setupReportForms();
+        
+        // Search form validation
+        setupSearchForm();
+        
+        // Confirmations for delete actions
+        setupDeleteConfirmations();
+    } catch (error) {
+        console.log("Une erreur s'est produite lors de l'initialisation du JavaScript:", error);
+    }
+});
+
+/**
+ * Setup functionality for post quoting 
+ */
+function setupQuoteButtons() {
+    const quoteButtons = document.querySelectorAll('.quote-button');
+    
+    quoteButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // If user has selected text, we'll quote only that part
+            const selection = window.getSelection();
+            if (selection && selection.toString().trim().length > 0) {
+                // Get the selected text
+                const selectedText = selection.toString().trim();
+                
+                // Get the post content element
+                const postContent = this.closest('.post-content');
+                if (postContent) {
+                    // Get post author
+                    const authorElement = this.closest('.post').querySelector('.post-author');
+                    const author = authorElement ? authorElement.textContent.trim() : 'Someone';
+                    
+                    // Create a quote with the selected text
+                    const quoteContent = `<blockquote><p>${selectedText}</p><footer>Posted by ${author}</footer></blockquote><p></p>`;
+                    
+                    // If we're on the topic page with a reply form
+                    const replyForm = document.getElementById('reply-form');
+                    if (replyForm) {
+                        const textarea = replyForm.querySelector('textarea');
+                        if (textarea) {
+                            textarea.value += quoteContent;
+                            textarea.focus();
+                            // Scroll to the form
+                            replyForm.scrollIntoView({ behavior: 'smooth' });
+                        }
+                    } else {
+                        // We're not on a page with a reply form, store in session and redirect
+                        sessionStorage.setItem('quoteContent', quoteContent);
+                        window.location.href = this.getAttribute('href');
+                    }
+                }
+            } else {
+                // No text selected, just follow the link
+                window.location.href = this.getAttribute('href');
+            }
+        });
+    });
+    
+    // Check if we have stored quote content when loading a reply page
+    const storedQuote = sessionStorage.getItem('quoteContent');
+    if (storedQuote) {
+        const textarea = document.querySelector('textarea[name="content"]');
+        if (textarea) {
+            textarea.value = storedQuote;
+            textarea.focus();
+            // Position cursor at the end
+            textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+        }
+        // Clear the stored quote
+        sessionStorage.removeItem('quoteContent');
+    }
+}
+
+/**
+ * Setup functionality for post reactions
+ */
+function setupReactionButtons() {
+    const reactionButtons = document.querySelectorAll('.reaction-btn');
+    
+    reactionButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            if (!document.body.classList.contains('logged-in')) {
+                alert('Vous devez être connecté pour réagir aux publications');
+                return;
+            }
+            
+            const postId = this.dataset.postId;
+            const reactionType = this.dataset.reactionType;
+            const countElement = this.querySelector('.reaction-count');
+            
+            // Send AJAX request
+            fetch(`/post/${postId}/react`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'X-CSRFToken': getCsrfToken()
+                },
+                body: `reaction_type=${reactionType}`
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Update the button state
+                if (data.status === 'added' || data.status === 'updated') {
+                    // Add active class to this button, remove from others
+                    const siblingButtons = this.parentNode.querySelectorAll('.reaction-btn');
+                    siblingButtons.forEach(btn => btn.classList.remove('active'));
+                    this.classList.add('active');
+                } else if (data.status === 'removed') {
+                    this.classList.remove('active');
+                }
+                
+                // Update count
+                if (countElement) {
+                    countElement.textContent = data.count;
+                    
+                    // Hide count if zero
+                    if (data.count === 0) {
+                        countElement.classList.add('hidden');
+                    } else {
+                        countElement.classList.remove('hidden');
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        });
+    });
+}
+
+/**
+ * Setup confirmation dialogs for moderator actions
+ */
+function setupModeratorActions() {
+    const lockButton = document.getElementById('lock-topic-btn');
+    const pinButton = document.getElementById('pin-topic-btn');
+    
+    if (lockButton) {
+        lockButton.addEventListener('click', function(e) {
+            const isLocked = this.dataset.isLocked === 'true';
+            const action = isLocked ? 'déverrouiller' : 'verrouiller';
+            
+            if (!confirm(`Êtes-vous sûr de vouloir ${action} ce sujet ?`)) {
+                e.preventDefault();
+            }
+        });
+    }
+    
+    if (pinButton) {
+        pinButton.addEventListener('click', function(e) {
+            const isPinned = this.dataset.isPinned === 'true';
+            const action = isPinned ? 'détacher' : 'épingler';
+            
+            if (!confirm(`Êtes-vous sûr de vouloir ${action} ce sujet ?`)) {
+                e.preventDefault();
+            }
+        });
+    }
+}
+
+/**
+ * Setup report forms
+ */
+function setupReportForms() {
+    const reportButtons = document.querySelectorAll('.report-button');
+    const reportModal = document.getElementById('report-modal');
+    const reportForm = document.getElementById('report-form');
+    const closeModalButtons = document.querySelectorAll('.close-modal');
+    
+    // Show modal on report button click
+    reportButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            if (!document.body.classList.contains('logged-in')) {
+                alert('Vous devez être connecté pour signaler ce contenu');
+                return;
+            }
+            
+            // Set the appropriate ID in the form
+            const postId = this.dataset.postId;
+            const topicId = this.dataset.topicId;
+            
+            if (postId) {
+                document.getElementById('post_id').value = postId;
+                document.getElementById('topic_id').value = '';
+            } else if (topicId) {
+                document.getElementById('topic_id').value = topicId;
+                document.getElementById('post_id').value = '';
+            }
+            
+            // Show the modal
+            reportModal.classList.remove('hidden');
+        });
+    });
+    
+    // Close modal on close button click
+    closeModalButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            reportModal.classList.add('hidden');
+        });
+    });
+    
+    // Close modal when clicking outside
+    reportModal.addEventListener('click', function(e) {
+        if (e.target === reportModal) {
+            reportModal.classList.add('hidden');
+        }
+    });
+    
+    // Validate report form
+    if (reportForm) {
+        reportForm.addEventListener('submit', function(e) {
+            const reasonField = document.getElementById('reason');
+            if (reasonField.value.trim().length < 10) {
+                e.preventDefault();
+                alert('Veuillez fournir une raison détaillée pour votre signalement (au moins 10 caractères)');
+            }
+        });
+    }
+}
+
+/**
+ * Setup search form validation
+ */
+function setupSearchForm() {
+    const searchForm = document.getElementById('search-form');
+    
+    if (searchForm) {
+        searchForm.addEventListener('submit', function(e) {
+            const searchInput = document.getElementById('search-input');
+            if (searchInput.value.trim().length < 3) {
+                e.preventDefault();
+                alert('La recherche doit contenir au moins 3 caractères');
+            }
+        });
+    }
+}
+
+/**
+ * Setup confirmation dialogs for delete actions
+ */
+function setupDeleteConfirmations() {
+    const deleteButtons = document.querySelectorAll('.delete-button');
+    
+    deleteButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ? Cette action est irréversible.')) {
+                e.preventDefault();
+            }
+        });
+    });
+}
+
+/**
+ * Get CSRF token from meta tag
+ */
+function getCsrfToken() {
+    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+}

static/js/pwa-installer.js

@@ -0,0 +1,51 @@
+// Script pour gérer l'installation de l'application PWA
+
+let deferredPrompt;
+const installButton = document.getElementById('install-button');
+const installContainer = document.getElementById('install-container');
+
+// Cacher le bouton d'installation par défaut
+if (installContainer) {
+    installContainer.style.display = 'none';
+}
+
+// Écouter l'événement 'beforeinstallprompt'
+window.addEventListener('beforeinstallprompt', (e) => {
+    // Empêcher le mini-infobar de Chrome de s'afficher sur mobile
+    e.preventDefault();
+    // Stocker l'événement pour l'utiliser plus tard
+    deferredPrompt = e;
+    // Afficher le bouton d'installation
+    if (installContainer) {
+        installContainer.style.display = 'flex';
+    }
+
+    // Ajouter l'écouteur d'événement pour le bouton d'installation
+    if (installButton) {
+        installButton.addEventListener('click', () => {
+            // Cacher le bouton d'installation
+            installContainer.style.display = 'none';
+            // Afficher l'invite d'installation
+            deferredPrompt.prompt();
+            // Attendre que l'utilisateur réponde à l'invite
+            deferredPrompt.userChoice.then((choiceResult) => {
+                if (choiceResult.outcome === 'accepted') {
+                    console.log('L\'utilisateur a accepté l\'installation');
+                } else {
+                    console.log('L\'utilisateur a refusé l\'installation');
+                }
+                // Effacer la référence à l'événement
+                deferredPrompt = null;
+            });
+        });
+    }
+});
+
+// Écouter l'événement 'appinstalled'
+window.addEventListener('appinstalled', (e) => {
+    // Cacher le bouton d'installation
+    if (installContainer) {
+        installContainer.style.display = 'none';
+    }
+    console.log('Application installée');
+});

static/js/service-worker.js

@@ -0,0 +1,74 @@
+// Service Worker pour Forum Communautaire
+const CACHE_NAME = 'forum-communautaire-v1';
+const ASSETS_TO_CACHE = [
+  '/',
+  '/static/css/styles.css',
+  '/static/js/forum.js',
+  '/static/js/editor.js',
+  '/static/icons/icon-192x192.png',
+  '/static/icons/icon-512x512.png',
+  'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js',
+  'https://cdn.tailwindcss.com'
+];
+
+// Installation du service worker
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        console.log('Cache ouvert');
+        return cache.addAll(ASSETS_TO_CACHE);
+      })
+  );
+});
+
+// Activation du service worker
+self.addEventListener('activate', (event) => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+// Récupération des ressources lors des requêtes
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        
+        // Cloner la requête car elle ne peut être utilisée qu'une fois
+        const fetchRequest = event.request.clone();
+        
+        return fetch(fetchRequest).then(
+          (response) => {
+            // Vérifier si la réponse est valide
+            if(!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+            
+            // Cloner la réponse car elle ne peut être utilisée qu'une fois
+            const responseToCache = response.clone();
+            
+            caches.open(CACHE_NAME)
+              .then((cache) => {
+                cache.put(event.request, responseToCache);
+              });
+            
+            return response;
+          }
+        );
+      })
+    );
+});

static/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "Forum Communautaire",
+  "short_name": "Forum",
+  "description": "Plateforme de discussion communautaire moderne et conviviale",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#2563eb",
+  "icons": [
+    {
+      "src": "/static/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "orientation": "portrait-primary",
+  "lang": "fr-FR",
+  "dir": "ltr",
+  "categories": ["social", "community"]
+}

static/styles.css

@@ -1,73 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f2f2f2;
-    margin: 0;
-    padding: 20px;
-}
-
-.container {
-    max-width: 800px;
-    margin: auto;
-    background-color: #fff;
-    padding: 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-}
-
-header {
-    margin-bottom: 20px;
-}
-
-header nav a {
-    margin-right: 10px;
-    text-decoration: none;
-    color: #007BFF;
-}
-
-.flashes {
-    list-style: none;
-    padding: 0;
-}
-
-.flash {
-    padding: 10px;
-    margin-bottom: 10px;
-    border-radius: 4px;
-}
-
-.flash.error {
-    background-color: #f8d7da;
-    color: #721c24;
-}
-
-.flash.success {
-    background-color: #d4edda;
-    color: #155724;
-}
-
-.thread-list, .message-list {
-    list-style: none;
-    padding: 0;
-}
-
-.thread-list li, .message-list li {
-    padding: 10px;
-    border-bottom: 1px solid #ddd;
-}
-
-.message {
-    padding: 10px;
-    background-color: #fafafa;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.message-actions form, .message-actions button {
-    display: inline;
-    margin-right: 5px;
-}
-
-#preview-area {
-    border: 1px dashed #aaa;
-    padding: 10px;
-    margin-top: 10px;
-}

templates/admin/create_admin.html

@@ -0,0 +1,112 @@
+{% extends "layout.html" %}
+
+{% block title %}Création d'Administrateur | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Création d'Administrateur</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white shadow rounded-lg p-6">
+    <h1 class="text-2xl font-bold text-gray-800 mb-6">Création d'un Compte Administrateur</h1>
+    
+    <div class="mb-8 p-4 border border-blue-200 bg-blue-50 rounded-md">
+        <h2 class="text-lg font-semibold text-blue-800 mb-2">Information de Sécurité</h2>
+        <p class="text-blue-700">
+            Cette page est protégée par un token secret. Partagez ce lien uniquement avec les personnes qui doivent créer des comptes administrateur :
+        </p>
+        <div class="mt-2 p-3 bg-white border border-blue-300 rounded-md overflow-x-auto">
+            <code class="text-sm">{{ url_for('cadmin.admin_panel', secret=token, _external=True) }}</code>
+        </div>
+    </div>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div>
+            <form method="POST" class="space-y-4">
+                {{ form.hidden_tag() }}
+                <div>
+                    <label for="username" class="block text-sm font-medium text-gray-700">Nom d'utilisateur</label>
+                    {{ form.username(class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+                    {% if form.username.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.username.errors %}
+                        <span>{{ error }}</span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+                    {{ form.email(class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+                    {% if form.email.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.email.errors %}
+                        <span>{{ error }}</span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
+                    {{ form.password(class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+                    {% if form.password.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.password.errors %}
+                        <span>{{ error }}</span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                <div>
+                    <label for="password2" class="block text-sm font-medium text-gray-700">Confirmer le mot de passe</label>
+                    {{ form.password2(class="mt-1 p-2 w-full border border-gray-300 rounded-md focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+                    {% if form.password2.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.password2.errors %}
+                        <span>{{ error }}</span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                <div>
+                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                        Créer Administrateur
+                    </button>
+                </div>
+            </form>
+        </div>
+        
+        <div>
+            <h2 class="text-xl font-semibold text-gray-800 mb-4">Administrateurs Existants</h2>
+            {% if admins %}
+            <div class="border border-gray-200 rounded-md overflow-hidden">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom d'utilisateur</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date de création</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for admin in admins %}
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">{{ admin.username }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{{ admin.email }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{{ admin.created_at.strftime('%d/%m/%Y') }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+            {% else %}
+            <div class="p-4 border border-gray-200 rounded-md bg-gray-50">
+                <p class="text-gray-600">Aucun administrateur n'existe encore. Utilisez le formulaire pour en créer un.</p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/admin/create_category.html

@@ -0,0 +1,75 @@
+{% extends 'layout.html' %}
+
+{% block title %}Créer une Catégorie | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.manage_categories') }}" class="hover:text-blue-600">Gérer les Catégories</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Créer une Catégorie</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <h1 class="text-2xl font-bold mb-6">Créer une Nouvelle Catégorie</h1>
+    
+    <form method="post" action="{{ url_for('admin.create_category') }}" class="space-y-4">
+        {{ form.hidden_tag() }}
+        
+        <div class="space-y-2">
+            <label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700">
+                Nom <span class="text-red-600">*</span>
+            </label>
+            {{ form.name(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+            {% if form.name.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.name.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="space-y-2">
+            <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700">
+                Description
+            </label>
+            {{ form.description(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", rows=4) }}
+            {% if form.description.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.description.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="space-y-2">
+            <label for="{{ form.order.id }}" class="block text-sm font-medium text-gray-700">
+                Ordre d'Affichage <span class="text-red-600">*</span>
+            </label>
+            {{ form.order(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", type="number") }}
+            {% if form.order.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.order.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+            <p class="text-sm text-gray-500">Entrez un nombre pour définir l'ordre d'affichage (les plus petits nombres apparaissent en premier)</p>
+        </div>
+        
+        <div class="flex justify-between pt-4">
+            <a href="{{ url_for('admin.manage_categories') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                Annuler
+            </a>
+            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+                Créer la Catégorie
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}

templates/admin/create_tag.html

@@ -0,0 +1,47 @@
+{% extends 'layout.html' %}
+
+{% block title %}Créer un Tag | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.manage_tags') }}" class="hover:text-blue-600">Gérer les Tags</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Créer un Tag</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <h1 class="text-2xl font-bold mb-6">Créer un Nouveau Tag</h1>
+    
+    <form method="post" action="{{ url_for('admin.create_tag') }}" class="space-y-4">
+        {{ form.hidden_tag() }}
+        
+        <div class="space-y-2">
+            <label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700">
+                Nom du Tag <span class="text-red-600">*</span>
+            </label>
+            {{ form.name(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+            {% if form.name.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.name.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+            <p class="text-sm text-gray-500">Entrez un nom simple et descriptif pour le tag. Par exemple : "actualités", "aide", "question".</p>
+        </div>
+        
+        <div class="flex justify-between pt-4">
+            <a href="{{ url_for('admin.manage_tags') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                Annuler
+            </a>
+            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+                Créer le Tag
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}

templates/admin/dashboard.html

@@ -0,0 +1,147 @@
+{% extends 'layout.html' %}
+
+{% block title %}Panneau d'Administration | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Administration</span>
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+    <div class="bg-white rounded-lg shadow-sm p-6">
+        <h1 class="text-2xl font-bold mb-4">Panneau d'Administration</h1>
+        <p class="text-gray-600 mb-6">
+            Bienvenue dans le panneau d'administration du forum. Ici, vous pouvez gérer les catégories, les utilisateurs, les signalements et d'autres aspects du forum.
+        </p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
+                <div class="flex items-start">
+                    <div class="bg-blue-100 rounded-full p-3 mr-4">
+                        <i data-feather="folder" class="w-6 h-6 text-blue-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-1">Catégories</h3>
+                        <p class="text-gray-600 text-sm mb-3">
+                            Gérez les catégories du forum pour organiser les discussions.
+                        </p>
+                        <a href="{{ url_for('admin.manage_categories') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
+                            Gérer les catégories
+                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-green-50 p-4 rounded-lg border border-green-100">
+                <div class="flex items-start">
+                    <div class="bg-green-100 rounded-full p-3 mr-4">
+                        <i data-feather="users" class="w-6 h-6 text-green-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-1">Utilisateurs</h3>
+                        <p class="text-gray-600 text-sm mb-3">
+                            Gérez les comptes utilisateurs, les rôles et les permissions.
+                        </p>
+                        <a href="{{ url_for('admin.manage_users') }}" class="text-green-600 hover:text-green-800 text-sm font-medium flex items-center">
+                            Gérer les utilisateurs
+                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-red-50 p-4 rounded-lg border border-red-100">
+                <div class="flex items-start">
+                    <div class="bg-red-100 rounded-full p-3 mr-4">
+                        <i data-feather="flag" class="w-6 h-6 text-red-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-1">Signalements</h3>
+                        <p class="text-gray-600 text-sm mb-3">
+                            Examinez et traitez les contenus signalés par les utilisateurs.
+                        </p>
+                        <a href="{{ url_for('admin.manage_reports') }}" class="text-red-600 hover:text-red-800 text-sm font-medium flex items-center">
+                            Gérer les signalements
+                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
+                <div class="flex items-start">
+                    <div class="bg-purple-100 rounded-full p-3 mr-4">
+                        <i data-feather="tag" class="w-6 h-6 text-purple-600"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-lg mb-1">Tags</h3>
+                        <p class="text-gray-600 text-sm mb-3">
+                            Gérez les tags utilisés pour organiser les sujets.
+                        </p>
+                        <a href="{{ url_for('admin.manage_tags') }}" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
+                            Gérer les tags
+                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="bg-white rounded-lg shadow-sm p-6">
+            <h2 class="text-xl font-bold mb-4 flex items-center">
+                <i data-feather="pie-chart" class="w-5 h-5 mr-2 text-blue-600"></i>
+                Statistiques du Forum
+            </h2>
+            <div class="space-y-4">
+                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
+                    <span class="text-gray-600">Total des sujets :</span>
+                    <span class="font-medium">{{ stats.topics }}</span>
+                </div>
+                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
+                    <span class="text-gray-600">Total des messages :</span>
+                    <span class="font-medium">{{ stats.posts }}</span>
+                </div>
+                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
+                    <span class="text-gray-600">Utilisateurs inscrits :</span>
+                    <span class="font-medium">{{ stats.users }}</span>
+                </div>
+                <div class="flex justify-between items-center">
+                    <span class="text-gray-600">Signalements non résolus :</span>
+                    <span class="font-medium {% if stats.unresolved_reports > 0 %}text-red-600{% endif %}">
+                        {{ stats.unresolved_reports }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        
+        <div class="bg-white rounded-lg shadow-sm p-6">
+            <h2 class="text-xl font-bold mb-4 flex items-center">
+                <i data-feather="activity" class="w-5 h-5 mr-2 text-blue-600"></i>
+                Activité Récente
+            </h2>
+            {% if recent_activities %}
+            <div class="space-y-4">
+                {% for activity in recent_activities %}
+                <div class="flex items-start space-x-3 pb-3 border-b border-gray-100 last:border-0">
+                    <div class="bg-gray-100 rounded-full p-2 flex-shrink-0">
+                        <i data-feather="{{ activity.icon }}" class="w-4 h-4 text-gray-600"></i>
+                    </div>
+                    <div class="space-y-1">
+                        <p class="text-sm text-gray-700">{{ activity.description }}</p>
+                        <p class="text-xs text-gray-500">{{ activity.timestamp | format_datetime }}</p>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <p class="text-gray-600 text-sm">Aucune activité récente à afficher.</p>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/admin/edit_category.html

@@ -0,0 +1,75 @@
+{% extends 'layout.html' %}
+
+{% block title %}Modifier une Catégorie | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.manage_categories') }}" class="hover:text-blue-600">Gérer les Catégories</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Modifier une Catégorie</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <h1 class="text-2xl font-bold mb-6">Modifier la Catégorie "{{ category.name }}"</h1>
+    
+    <form method="post" action="{{ url_for('admin.edit_category', id=category.id) }}" class="space-y-4">
+        {{ form.hidden_tag() }}
+        
+        <div class="space-y-2">
+            <label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700">
+                Nom <span class="text-red-600">*</span>
+            </label>
+            {{ form.name(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+            {% if form.name.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.name.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="space-y-2">
+            <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700">
+                Description
+            </label>
+            {{ form.description(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", rows=4) }}
+            {% if form.description.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.description.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="space-y-2">
+            <label for="{{ form.order.id }}" class="block text-sm font-medium text-gray-700">
+                Ordre d'Affichage <span class="text-red-600">*</span>
+            </label>
+            {{ form.order(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", type="number") }}
+            {% if form.order.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.order.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+            <p class="text-sm text-gray-500">Entrez un nombre pour définir l'ordre d'affichage (les plus petits nombres apparaissent en premier)</p>
+        </div>
+        
+        <div class="flex justify-between pt-4">
+            <a href="{{ url_for('admin.manage_categories') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                Annuler
+            </a>
+            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+                Enregistrer les Modifications
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}

templates/admin/edit_user.html

@@ -0,0 +1,136 @@
+{% extends 'layout.html' %}
+
+{% block title %}Modifier l'Utilisateur | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.manage_users') }}" class="hover:text-blue-600">Gérer les Utilisateurs</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Modifier l'Utilisateur</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="flex items-center mb-6">
+        <img src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) if user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
+             alt="{{ user.username }}" 
+             class="w-16 h-16 rounded-full mr-4 object-cover border border-gray-200">
+        <div>
+            <h1 class="text-2xl font-bold">Modifier l'Utilisateur : {{ user.username }}</h1>
+            <p class="text-gray-600">{{ user.email }}</p>
+        </div>
+    </div>
+    
+    <form method="post" action="{{ url_for('admin.edit_user', id=user.id) }}" class="space-y-4">
+        {{ form.hidden_tag() }}
+        
+        <div class="space-y-2">
+            <label for="{{ form.role.id }}" class="block text-sm font-medium text-gray-700">
+                Rôle <span class="text-red-600">*</span>
+            </label>
+            {{ form.role(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500") }}
+            {% if form.role.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.role.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="space-y-2">
+                <div class="flex items-center">
+                    {{ form.is_active(class="h-4 w-4 text-blue-600 border-gray-300 rounded mr-2") }}
+                    <label for="{{ form.is_active.id }}" class="block text-sm font-medium text-gray-700">
+                        Compte Actif
+                    </label>
+                </div>
+                {% if form.is_active.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.is_active.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="space-y-2">
+                <div class="flex items-center">
+                    {{ form.is_banned(class="h-4 w-4 text-red-600 border-gray-300 rounded mr-2") }}
+                    <label for="{{ form.is_banned.id }}" class="block text-sm font-medium text-gray-700">
+                        Compte Banni
+                    </label>
+                </div>
+                {% if form.is_banned.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.is_banned.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="space-y-2">
+            <label for="{{ form.ban_reason.id }}" class="block text-sm font-medium text-gray-700">
+                Raison du Bannissement
+            </label>
+            {{ form.ban_reason(class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:border-blue-500", rows=3) }}
+            {% if form.ban_reason.errors %}
+            <div class="text-red-600 text-sm mt-1">
+                {% for error in form.ban_reason.errors %}
+                <p>{{ error }}</p>
+                {% endfor %}
+            </div>
+            {% endif %}
+            <p class="text-sm text-gray-500">Indiquez la raison du bannissement si l'utilisateur est banni. Cette raison sera visible par l'utilisateur.</p>
+        </div>
+        
+        <div class="flex justify-between pt-4">
+            <a href="{{ url_for('admin.manage_users') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                Annuler
+            </a>
+            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+                Enregistrer les Modifications
+            </button>
+        </div>
+    </form>
+</div>
+
+<div class="bg-white rounded-lg shadow-sm p-6 mt-6">
+    <h2 class="text-xl font-bold mb-4">Informations Utilisateur</h2>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+            <h3 class="text-sm font-medium text-gray-500">Date d'inscription</h3>
+            <p class="text-gray-900">{{ user.created_at | format_datetime }}</p>
+        </div>
+        
+        <div>
+            <h3 class="text-sm font-medium text-gray-500">Dernière connexion</h3>
+            <p class="text-gray-900">{{ user.last_seen | format_datetime }}</p>
+        </div>
+        
+        <div>
+            <h3 class="text-sm font-medium text-gray-500">Sujets créés</h3>
+            <p class="text-gray-900">{{ user.topics.count() }}</p>
+        </div>
+        
+        <div>
+            <h3 class="text-sm font-medium text-gray-500">Messages postés</h3>
+            <p class="text-gray-900">{{ user.posts.count() }}</p>
+        </div>
+    </div>
+    
+    <div class="mt-4">
+        <a href="{{ url_for('user.profile', username=user.username) }}" class="text-blue-600 hover:text-blue-800 flex items-center">
+            <i data-feather="external-link" class="w-4 h-4 mr-1"></i>
+            Voir le profil public
+        </a>
+    </div>
+</div>
+{% endblock %}

templates/admin/manage_categories.html

@@ -0,0 +1,113 @@
+{% extends 'layout.html' %}
+
+{% block title %}Gérer les Catégories | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Gérer les Catégories</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">Gérer les Catégories</h1>
+        <a href="{{ url_for('admin.create_category') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring flex items-center">
+            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
+            Nouvelle Catégorie
+        </a>
+    </div>
+    
+    {% if categories %}
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Ordre
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Nom
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Description
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Sujets
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Actions
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for category in categories %}
+                <tr>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {{ category.order }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">
+                            <a href="{{ url_for('forum.category_view', id=category.id) }}" class="hover:text-blue-600">
+                                {{ category.name }}
+                            </a>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="text-sm text-gray-500 line-clamp-2">
+                            {{ category.description or "Aucune description" }}
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {{ category.topic_count() }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <div class="flex space-x-2">
+                            <a href="{{ url_for('admin.edit_category', id=category.id) }}" class="text-blue-600 hover:text-blue-900">
+                                <i data-feather="edit" class="w-4 h-4"></i>
+                                <span class="sr-only">Modifier</span>
+                            </a>
+                            <form action="{{ url_for('admin.delete_category', id=category.id) }}" method="post" class="delete-form inline">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                                <button type="submit" class="text-red-600 hover:text-red-900 bg-transparent border-none p-0 cursor-pointer"
+                                        data-confirm="Êtes-vous sûr de vouloir supprimer cette catégorie ? Cette action est irréversible et supprimera également tous les sujets associés.">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                    <span class="sr-only">Supprimer</span>
+                                </button>
+                            </form>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="bg-gray-50 p-6 text-center rounded-lg">
+        <p class="text-gray-600">Aucune catégorie n'a été créée.</p>
+        <a href="{{ url_for('admin.create_category') }}" class="mt-2 inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+            Créer votre première catégorie
+        </a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Configuration des confirmations de suppression
+        document.querySelectorAll('.delete-form').forEach(form => {
+            form.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const confirmMessage = this.querySelector('button').getAttribute('data-confirm');
+                if (confirm(confirmMessage)) {
+                    this.submit();
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

templates/admin/manage_reports.html

@@ -0,0 +1,208 @@
+{% extends 'layout.html' %}
+
+{% block title %}Gérer les Signalements | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Gérer les Signalements</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">Gérer les Signalements</h1>
+        
+        <div class="flex space-x-2">
+            {% if show_resolved %}
+                <a href="{{ url_for('admin.manage_reports', show_resolved=0) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                    Masquer les signalements résolus
+                </a>
+            {% else %}
+                <a href="{{ url_for('admin.manage_reports', show_resolved=1) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring">
+                    Afficher tous les signalements
+                </a>
+            {% endif %}
+        </div>
+    </div>
+    
+    {% if reports.items %}
+    <div class="space-y-6">
+        {% for report in reports.items %}
+        <div class="border border-gray-200 rounded-lg p-4 {% if not report.is_resolved %}bg-red-50 border-red-100{% endif %}">
+            <div class="flex justify-between items-start mb-3">
+                <div class="flex items-center">
+                    <div class="bg-red-100 p-2 rounded-full mr-3">
+                        <i data-feather="flag" class="w-5 h-5 text-red-600"></i>
+                    </div>
+                    <div>
+                        <div class="font-medium">
+                            {% if report.post_id %}
+                                <span>Message signalé</span>
+                            {% else %}
+                                <span>Sujet signalé</span>
+                            {% endif %}
+                            <span class="text-gray-500">par</span>
+                            <a href="{{ url_for('user.profile', username=report.reporter.username) }}" class="text-blue-600 hover:underline">
+                                {{ report.reporter.username }}
+                            </a>
+                        </div>
+                        <div class="text-sm text-gray-500">
+                            {{ report.created_at | format_datetime }}
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    {% if report.is_resolved %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            <i data-feather="check" class="w-3 h-3 mr-1"></i>
+                            Résolu par {{ report.resolved_by.username }}
+                        </span>
+                    {% else %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                            <i data-feather="alert-circle" class="w-3 h-3 mr-1"></i>
+                            En attente
+                        </span>
+                    {% endif %}
+                </div>
+            </div>
+            
+            <div class="mb-4">
+                <h3 class="text-sm font-medium text-gray-700 mb-1">Raison du signalement:</h3>
+                <div class="bg-white p-3 rounded border border-gray-200 text-sm">
+                    {{ report.reason }}
+                </div>
+            </div>
+            
+            <div class="mb-4">
+                <h3 class="text-sm font-medium text-gray-700 mb-1">Contenu signalé:</h3>
+                <div class="bg-white p-3 rounded border border-gray-200 text-sm">
+                    {% if report.post_id %}
+                        <div class="flex items-start mb-2">
+                            <img src="{{ url_for('static', filename='uploads/avatars/' + report.post.author.avatar) if report.post.author.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
+                                 alt="{{ report.post.author.username }}" 
+                                 class="w-8 h-8 rounded-full mr-2 object-cover">
+                            <div>
+                                <div class="font-medium">{{ report.post.author.username }}</div>
+                                <div class="text-xs text-gray-500">{{ report.post.created_at | format_datetime }}</div>
+                            </div>
+                        </div>
+                        <div>{{ report.post.content | safe }}</div>
+                    {% else %}
+                        <div class="flex items-start mb-2">
+                            <img src="{{ url_for('static', filename='uploads/avatars/' + report.topic.author.avatar) if report.topic.author.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
+                                 alt="{{ report.topic.author.username }}" 
+                                 class="w-8 h-8 rounded-full mr-2 object-cover">
+                            <div>
+                                <div class="font-medium">{{ report.topic.author.username }}</div>
+                                <div class="text-xs text-gray-500">{{ report.topic.created_at | format_datetime }}</div>
+                            </div>
+                        </div>
+                        <div class="font-medium text-blue-600">{{ report.topic.title }}</div>
+                        <div>{{ report.topic.posts[0].content | safe }}</div>
+                    {% endif %}
+                </div>
+            </div>
+            
+            {% if not report.is_resolved %}
+            <div class="flex space-x-2">
+                <form action="{{ url_for('admin.resolve_report', id=report.id) }}" method="post">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                    <button type="submit" class="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 focus:outline-none focus:ring">
+                        <i data-feather="check" class="w-4 h-4 mr-1 inline"></i>
+                        Marquer comme résolu
+                    </button>
+                </form>
+                <form action="{{ url_for('admin.delete_reported_content', id=report.id) }}" method="post" class="delete-content-form">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                    <button type="submit" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring">
+                        <i data-feather="trash-2" class="w-4 h-4 mr-1 inline"></i>
+                        Supprimer le contenu
+                    </button>
+                </form>
+            </div>
+            {% endif %}
+        </div>
+        {% endfor %}
+    </div>
+    
+    <!-- Pagination -->
+    {% if reports.pages > 1 %}
+    <div class="mt-4 flex justify-center">
+        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+            {% if reports.has_prev %}
+            <a href="{{ url_for('admin.manage_reports', page=reports.prev_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+            
+            {% for page_num in reports.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+                {% if page_num %}
+                    {% if page_num == reports.page %}
+                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
+                        {{ page_num }}
+                    </span>
+                    {% else %}
+                    <a href="{{ url_for('admin.manage_reports', page=page_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        {{ page_num }}
+                    </a>
+                    {% endif %}
+                {% else %}
+                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+                    ...
+                </span>
+                {% endif %}
+            {% endfor %}
+            
+            {% if reports.has_next %}
+            <a href="{{ url_for('admin.manage_reports', page=reports.next_num, show_resolved=show_resolved) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+        </nav>
+    </div>
+    {% endif %}
+    
+    {% else %}
+    <div class="bg-gray-50 p-6 text-center rounded-lg">
+        <p class="text-gray-600">
+            {% if show_resolved %}
+                Aucun signalement trouvé.
+            {% else %}
+                Aucun signalement en attente. Tout est résolu!
+            {% endif %}
+        </p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Confirmation pour supprimer le contenu signalé
+        document.querySelectorAll('.delete-content-form').forEach(form => {
+            form.addEventListener('submit', function(e) {
+                e.preventDefault();
+                if (confirm('Êtes-vous sûr de vouloir supprimer ce contenu? Cette action est irréversible.')) {
+                    this.submit();
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

templates/admin/manage_tags.html

@@ -0,0 +1,149 @@
+{% extends 'layout.html' %}
+
+{% block title %}Gérer les Tags | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Gérer les Tags</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">Gérer les Tags</h1>
+        <a href="{{ url_for('admin.create_tag') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring flex items-center">
+            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
+            Nouveau Tag
+        </a>
+    </div>
+    
+    {% if tags.items %}
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Nom
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Sujets
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Actions
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for tag in tags.items %}
+                <tr>
+                    <td class="px-6 py-4">
+                        <div class="flex items-center">
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                                {{ tag.name }}
+                            </span>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {{ tag.topics.count() }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <div class="flex space-x-2">
+                            <a href="{{ url_for('forum.tag_view', tag_name=tag.name) }}" class="text-blue-600 hover:text-blue-900">
+                                <i data-feather="eye" class="w-4 h-4"></i>
+                                <span class="sr-only">Voir</span>
+                            </a>
+                            <form action="{{ url_for('admin.delete_tag', id=tag.id) }}" method="post" class="delete-form inline">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                                <button type="submit" class="text-red-600 hover:text-red-900 bg-transparent border-none p-0 cursor-pointer"
+                                        data-confirm="Êtes-vous sûr de vouloir supprimer ce tag ? Les sujets associés ne seront pas supprimés, mais ne seront plus taggés.">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                    <span class="sr-only">Supprimer</span>
+                                </button>
+                            </form>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    
+    <!-- Pagination -->
+    {% if tags.pages > 1 %}
+    <div class="mt-4 flex justify-center">
+        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+            {% if tags.has_prev %}
+            <a href="{{ url_for('admin.manage_tags', page=tags.prev_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+            
+            {% for page_num in tags.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+                {% if page_num %}
+                    {% if page_num == tags.page %}
+                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
+                        {{ page_num }}
+                    </span>
+                    {% else %}
+                    <a href="{{ url_for('admin.manage_tags', page=page_num) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        {{ page_num }}
+                    </a>
+                    {% endif %}
+                {% else %}
+                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+                    ...
+                </span>
+                {% endif %}
+            {% endfor %}
+            
+            {% if tags.has_next %}
+            <a href="{{ url_for('admin.manage_tags', page=tags.next_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+        </nav>
+    </div>
+    {% endif %}
+    
+    {% else %}
+    <div class="bg-gray-50 p-6 text-center rounded-lg">
+        <p class="text-gray-600">Aucun tag n'a été créé.</p>
+        <a href="{{ url_for('admin.create_tag') }}" class="mt-2 inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring">
+            Créer votre premier tag
+        </a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Configuration des confirmations de suppression
+        document.querySelectorAll('.delete-form').forEach(form => {
+            form.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const confirmMessage = this.querySelector('button').getAttribute('data-confirm');
+                if (confirm(confirmMessage)) {
+                    this.submit();
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

templates/admin/manage_users.html

@@ -0,0 +1,184 @@
+{% extends 'layout.html' %}
+
+{% block title %}Gérer les Utilisateurs | Forum Communautaire{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('admin.dashboard') }}" class="hover:text-blue-600">Administration</a>
+<span class="mx-2">/</span>
+<span class="text-gray-700">Gérer les Utilisateurs</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow-sm p-6">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">Gérer les Utilisateurs</h1>
+        
+        <div class="flex">
+            <form method="get" action="{{ url_for('admin.manage_users') }}" class="flex mr-2">
+                <input type="search" name="q" placeholder="Rechercher un utilisateur..." 
+                       class="px-4 py-2 border border-gray-300 rounded-l-lg focus-ring"
+                       value="{{ request.args.get('q', '') }}">
+                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring">
+                    <i data-feather="search" class="w-5 h-5"></i>
+                </button>
+            </form>
+        </div>
+    </div>
+    
+    {% if users.items %}
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Utilisateur
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Email
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Rôle
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Statut
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Inscription
+                    </th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Actions
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for user in users.items %}
+                <tr>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center">
+                            <div class="flex-shrink-0 h-10 w-10">
+                                <img class="h-10 w-10 rounded-full object-cover" 
+                                     src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) if user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
+                                     alt="{{ user.username }}">
+                            </div>
+                            <div class="ml-4">
+                                <div class="text-sm font-medium text-gray-900">
+                                    {{ user.username }}
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm text-gray-900">{{ user.email }}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
+                            {% if user.role == 'admin' %}
+                                bg-purple-100 text-purple-800
+                            {% elif user.role == 'moderator' %}
+                                bg-blue-100 text-blue-800
+                            {% else %}
+                                bg-green-100 text-green-800
+                            {% endif %}">
+                            {% if user.role == 'admin' %}
+                                Administrateur
+                            {% elif user.role == 'moderator' %}
+                                Modérateur
+                            {% else %}
+                                Membre
+                            {% endif %}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        {% if user.is_banned %}
+                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                                Banni
+                            </span>
+                        {% elif not user.is_active %}
+                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                                Inactif
+                            </span>
+                        {% else %}
+                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                Actif
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {{ user.created_at | format_datetime }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <div class="flex space-x-2">
+                            <a href="{{ url_for('user.profile', username=user.username) }}" class="text-blue-600 hover:text-blue-900">
+                                <i data-feather="eye" class="w-4 h-4"></i>
+                                <span class="sr-only">Voir</span>
+                            </a>
+                            <a href="{{ url_for('admin.edit_user', id=user.id) }}" class="text-green-600 hover:text-green-900">
+                                <i data-feather="edit" class="w-4 h-4"></i>
+                                <span class="sr-only">Modifier</span>
+                            </a>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    
+    <!-- Pagination -->
+    {% if users.pages > 1 %}
+    <div class="mt-4 flex justify-center">
+        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+            {% if users.has_prev %}
+            <a href="{{ url_for('admin.manage_users', page=users.prev_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Précédent</span>
+                <i data-feather="chevron-left" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+            
+            {% for page_num in users.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+                {% if page_num %}
+                    {% if page_num == users.page %}
+                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600">
+                        {{ page_num }}
+                    </span>
+                    {% else %}
+                    <a href="{{ url_for('admin.manage_users', page=page_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        {{ page_num }}
+                    </a>
+                    {% endif %}
+                {% else %}
+                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+                    ...
+                </span>
+                {% endif %}
+            {% endfor %}
+            
+            {% if users.has_next %}
+            <a href="{{ url_for('admin.manage_users', page=users.next_num, q=request.args.get('q', '')) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </a>
+            {% else %}
+            <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400 cursor-not-allowed">
+                <span class="sr-only">Suivant</span>
+                <i data-feather="chevron-right" class="w-5 h-5"></i>
+            </span>
+            {% endif %}
+        </nav>
+    </div>
+    {% endif %}
+    
+    {% else %}
+    <div class="bg-gray-50 p-6 text-center rounded-lg">
+        <p class="text-gray-600">Aucun utilisateur trouvé.</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}

templates/auth/login.html

@@ -0,0 +1,68 @@
+{% extends "layout.html" %}
+
+{% block title %}Login - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<span>Login</span>
+{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+            <h1 class="text-2xl font-bold text-gray-800">Login</h1>
+            <p class="text-gray-600 mt-1">Sign in to access your account</p>
+        </div>
+        
+        <div class="p-6">
+            <form method="POST" action="{{ url_for('auth.login') }}">
+                {{ form.hidden_tag() }}
+                
+                <div class="mb-4">
+                    <label for="username" class="block text-gray-700 font-medium mb-2">Username or Email</label>
+                    {{ form.username(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="username") }}
+                    {% if form.username.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.username.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 font-medium mb-2">Password</label>
+                    {{ form.password(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="password") }}
+                    {% if form.password.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.password.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="flex items-center mb-4">
+                    {{ form.remember_me(class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500", id="remember_me") }}
+                    <label for="remember_me" class="ml-2 block text-gray-700">Remember me</label>
+                </div>
+                
+                <div>
+                    <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+                        Sign In
+                    </button>
+                </div>
+            </form>
+        </div>
+        
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+            <p class="text-gray-600 text-center">
+                Don't have an account? 
+                <a href="{{ url_for('auth.register') }}" class="text-blue-600 hover:underline">Register here</a>
+            </p>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/register.html

@@ -0,0 +1,89 @@
+{% extends "layout.html" %}
+
+{% block title %}Register - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<span>Register</span>
+{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200">
+            <h1 class="text-2xl font-bold text-gray-800">Register</h1>
+            <p class="text-gray-600 mt-1">Create a new account</p>
+        </div>
+        
+        <div class="p-6">
+            <form method="POST" action="{{ url_for('auth.register') }}">
+                {{ form.hidden_tag() }}
+                
+                <div class="mb-4">
+                    <label for="username" class="block text-gray-700 font-medium mb-2">Username</label>
+                    {{ form.username(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="username") }}
+                    {% if form.username.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.username.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    <p class="text-gray-500 text-xs mt-1">Choose a unique username (3-64 characters)</p>
+                </div>
+                
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
+                    {{ form.email(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="email") }}
+                    {% if form.email.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.email.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 font-medium mb-2">Password</label>
+                    {{ form.password(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="password") }}
+                    {% if form.password.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.password.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    <p class="text-gray-500 text-xs mt-1">Must be at least 8 characters</p>
+                </div>
+                
+                <div class="mb-4">
+                    <label for="password2" class="block text-gray-700 font-medium mb-2">Confirm Password</label>
+                    {{ form.password2(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="password2") }}
+                    {% if form.password2.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in form.password2.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div>
+                    <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+                        Register
+                    </button>
+                </div>
+            </form>
+        </div>
+        
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+            <p class="text-gray-600 text-center">
+                Already have an account? 
+                <a href="{{ url_for('auth.login') }}" class="text-blue-600 hover:underline">Log in</a>
+            </p>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/base.html

@@ -1,65 +0,0 @@
-<!doctype html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Important pour le responsive -->
-    <title>{% block title %}Forum Anonyme{% endblock %}</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> -->  <!-- Plus besoin de ce fichier -->
-    <style>
-      .quoted-text {
-          background-color: #f0f4f8;  /* Couleur de fond légère pour le texte cité */
-          border-left: 4px solid #60a5fa; /* Barre verticale bleue */
-          padding: 0.5rem 1rem; /* Espacement intérieur */
-          margin-bottom: 0.5rem;  /* Marge en dessous */
-          font-style: italic; /* Texte en italique */
-      }
-      .quoted-message-id{
-          font-size: 0.8em;  /* Taille de police plus petite */
-          color: #4a5568;     /* Couleur de texte discrète */
-          margin-bottom: 0.25rem;  /* Petite marge en dessous */
-      }
-    </style>
-</head>
-<body class="bg-gray-100 font-sans">  <!-- Fond gris clair, police sans-serif -->
-    <div class="container mx-auto p-4 md:p-8">  <!-- Conteneur principal, marges auto, padding -->
-        <header class="mb-6">
-            <h1 class="text-3xl font-bold text-blue-800 mb-2">
-                <a href="{{ url_for('index') }}" class="hover:text-blue-600 transition-colors duration-200">Forum Anonyme</a>  <!-- Lien principal, effet hover -->
-            </h1>
-            <nav class="flex flex-wrap items-center space-x-4 md:space-x-6 text-blue-700">
-                <a href="{{ url_for('new_thread') }}" class="hover:text-blue-500 transition-colors duration-200">Nouveau fil</a>
-                <a href="{{ url_for('moderate') }}" class="hover:text-blue-500 transition-colors duration-200">Modération</a>
-            </nav>
-            <form action="{{ url_for('search') }}" method="GET" class="mt-4">  <!-- Marge en haut -->
-                <div class="flex"> <!--Utilisation flexbox pour bien aligner la barre et le bouton-->
-                  <input type="text" name="q" placeholder="Recherche..." required
-                        class="flex-grow p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <!-- Input de recherche -->
-                  <button type="submit"
-                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r-md transition-colors duration-200">
-                      Chercher
-                  </button>
-                </div>
-            </form>
-        </header>
-
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="mb-6">  <!-- Marge en bas -->
-                    {% for category, message in messages %}
-                        <div class="flash {{ category }} p-4 rounded-md mb-2
-                            {% if category == 'error' %}bg-red-100 border border-red-400 text-red-700
-                            {% elif category == 'success' %}bg-green-100 border border-green-400 text-green-700
-                            {% else %}bg-blue-100 border border-blue-400 text-blue-700
-                            {% endif %}">  <!-- Couleurs conditionnelles -->
-                            {{ message }}
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endif %}
-        {% endwith %}
-
-        {% block content %}{% endblock %}
-    </div>
-</body>
-</html>

templates/errors/403.html

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block title %}Accès refusé - Forum Communautaire{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+    <div class="bg-white rounded-lg shadow overflow-hidden text-center p-8">
+        <div class="text-6xl font-bold text-red-600 mb-4">403</div>
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Accès refusé</h1>
+        <p class="text-gray-600 mb-6">Vous n'avez pas la permission d'accéder à cette page.</p>
+        
+        <div class="flex flex-col sm:flex-row justify-center gap-4 mt-4">
+            <a href="{{ url_for('forum.index') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+                <i data-feather="home" class="w-4 h-4 inline-block mr-1"></i> Accueil
+            </a>
+            <button onclick="window.history.back()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring transition-colors">
+                <i data-feather="arrow-left" class="w-4 h-4 inline-block mr-1"></i> Retour
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/errors/404.html

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block title %}Page non trouvée - Forum Communautaire{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+    <div class="bg-white rounded-lg shadow overflow-hidden text-center p-8">
+        <div class="text-6xl font-bold text-blue-600 mb-4">404</div>
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Page non trouvée</h1>
+        <p class="text-gray-600 mb-6">La page que vous recherchez n'existe pas ou a été déplacée.</p>
+        
+        <div class="flex flex-col sm:flex-row justify-center gap-4 mt-4">
+            <a href="{{ url_for('forum.index') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+                <i data-feather="home" class="w-4 h-4 inline-block mr-1"></i> Accueil
+            </a>
+            <button onclick="window.history.back()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring transition-colors">
+                <i data-feather="arrow-left" class="w-4 h-4 inline-block mr-1"></i> Retour
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/errors/500.html

@@ -0,0 +1,22 @@
+{% extends "layout.html" %}
+
+{% block title %}Erreur Serveur - Forum Communautaire{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+    <div class="bg-white rounded-lg shadow overflow-hidden text-center p-8">
+        <div class="text-6xl font-bold text-red-600 mb-4">500</div>
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Erreur Serveur</h1>
+        <p class="text-gray-600 mb-6">Désolé, une erreur s'est produite de notre côté. Veuillez réessayer plus tard.</p>
+        
+        <div class="flex flex-col sm:flex-row justify-center gap-4 mt-4">
+            <a href="{{ url_for('forum.index') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+                <i data-feather="home" class="w-4 h-4 inline-block mr-1"></i> Accueil
+            </a>
+            <button onclick="window.history.back()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring transition-colors">
+                <i data-feather="arrow-left" class="w-4 h-4 inline-block mr-1"></i> Retour
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/forum/category_list.html

@@ -0,0 +1,65 @@
+{% extends "layout.html" %}
+
+{% block title %}Categories - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<span>Categories</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-800">Categories</h1>
+            <p class="text-gray-600 mt-1">Browse all discussion categories</p>
+        </div>
+        
+        {% if current_user.is_authenticated and current_user.is_admin() %}
+        <a href="{{ url_for('admin.create_category') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+            <i data-feather="plus" class="w-4 h-4 inline-block mr-1"></i> New Category
+        </a>
+        {% endif %}
+    </div>
+    
+    <!-- Categories -->
+    <div class="p-6">
+        {% if categories %}
+            <div class="space-y-4">
+                {% for category in categories %}
+                <div class="bg-white border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
+                    <a href="{{ url_for('forum.category_view', id=category.id) }}" class="block p-4">
+                        <div class="sm:flex justify-between items-start">
+                            <div>
+                                <h3 class="text-lg font-semibold text-gray-800 hover:text-blue-600">{{ category.name }}</h3>
+                                {% if category.description %}
+                                <p class="text-gray-600 mt-1">{{ category.description }}</p>
+                                {% endif %}
+                            </div>
+                            <div class="mt-2 sm:mt-0 flex space-x-6 text-gray-500 text-sm">
+                                <div>
+                                    <span class="font-medium">{{ category.topic_count() }}</span> topics
+                                </div>
+                                <div>
+                                    <span class="font-medium">{{ category.post_count() }}</span> posts
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="text-center py-8">
+                <p class="text-gray-500">No categories have been created yet.</p>
+                {% if current_user.is_authenticated and current_user.is_admin() %}
+                <a href="{{ url_for('admin.create_category') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+                    Create First Category
+                </a>
+                {% endif %}
+            </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

templates/forum/create_post.html

@@ -0,0 +1,76 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ "Edit Post" if is_edit else "Post Reply" }} - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.category_view', id=topic.category_id) }}" class="hover:text-blue-600">{{ topic.category.name }}</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="hover:text-blue-600">{{ topic.title }}</a>
+<span class="mx-2">/</span>
+<span>{{ "Edit Post" if is_edit else "Reply" }}</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200">
+        <h1 class="text-2xl font-bold text-gray-800">{{ "Edit Post" if is_edit else "Post Reply" }}</h1>
+        <p class="text-gray-600 mt-1">
+            {% if is_edit %}
+            Edit your message in "{{ topic.title }}"
+            {% elif is_quote %}
+            Reply with quote to "{{ topic.title }}"
+            {% else %}
+            Respond to "{{ topic.title }}"
+            {% endif %}
+        </p>
+    </div>
+    
+    <div class="p-6">
+        {% if is_edit %}
+        <form method="POST" action="{{ url_for('forum.edit_post', id=post.id) }}">
+        {% else %}
+        <form method="POST" action="{{ url_for('forum.topic_view', id=topic.id) }}">
+        {% endif %}
+            {{ form.hidden_tag() }}
+            {{ form.topic_id }}
+            
+            <div class="mb-4">
+                <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>
+                <div class="editor-container">
+                    <div class="editor-toolbar bg-white border border-gray-300">
+                        <!-- Buttons will be added by the JavaScript -->
+                    </div>
+                    
+                    {{ form.content(class="w-full px-4 py-2 border border-gray-300 editor-textarea focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="content", rows="10") }}
+                </div>
+                {% if form.content.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.content.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="flex items-center justify-between">
+                <a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
+                    Cancel
+                </a>
+                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+                    {% if is_edit %}
+                    Save Changes
+                    {% else %}
+                    Post Reply
+                    {% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+{% endblock %}

templates/forum/create_topic.html

@@ -0,0 +1,94 @@
+{% extends "layout.html" %}
+
+{% block title %}Create New Topic - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.category_list') }}" class="hover:text-blue-600">Categories</a>
+<span class="mx-2">/</span>
+<span>Create New Topic</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200">
+        <h1 class="text-2xl font-bold text-gray-800">Create New Topic</h1>
+        <p class="text-gray-600 mt-1">Start a new discussion</p>
+    </div>
+    
+    <div class="p-6">
+        <form method="POST" action="{{ url_for('forum.create_topic') }}">
+            {{ form.hidden_tag() }}
+            
+            <div class="mb-4">
+                <label for="category_id" class="block text-gray-700 font-medium mb-2">Category</label>
+                {{ form.category_id(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="category_id") }}
+                {% if form.category_id.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.category_id.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="mb-4">
+                <label for="title" class="block text-gray-700 font-medium mb-2">Title</label>
+                {{ form.title(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="title", placeholder="Enter a descriptive title...") }}
+                {% if form.title.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.title.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="mb-4">
+                <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>
+                <div class="editor-container">
+                    <div class="editor-toolbar bg-white border border-gray-300">
+                        <!-- Buttons will be added by the JavaScript -->
+                    </div>
+                    
+                    {{ form.content(class="w-full px-4 py-2 border border-gray-300 editor-textarea focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="content", rows="10", placeholder="Write your post content here...") }}
+                </div>
+                {% if form.content.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.content.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="mb-6">
+                <label for="tags" class="block text-gray-700 font-medium mb-2">Tags <span class="text-gray-500 text-sm">(comma separated)</span></label>
+                {{ form.tags(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="tags", placeholder="example, discussion, question") }}
+                {% if form.tags.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in form.tags.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                <p class="text-gray-500 text-xs mt-1">Tags help categorize your topic and make it easier to find. Separate multiple tags with commas.</p>
+            </div>
+            
+            <div class="flex items-center justify-between">
+                <a href="{{ url_for('forum.index') }}" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
+                    Cancel
+                </a>
+                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+                    Create Topic
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+{% endblock %}

templates/forum/topic_list.html

@@ -0,0 +1,163 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ category.name }} - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.category_list') }}" class="hover:text-blue-600">Categories</a>
+<span class="mx-2">/</span>
+<span>{{ category.name }}</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row sm:justify-between sm:items-center">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-800">{{ category.name }}</h1>
+            {% if category.description %}
+            <p class="text-gray-600 mt-1">{{ category.description }}</p>
+            {% endif %}
+        </div>
+        
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('forum.create_topic') }}" class="mt-4 sm:mt-0 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+            <i data-feather="plus-circle" class="w-4 h-4 inline-block mr-1"></i> New Topic
+        </a>
+        {% endif %}
+    </div>
+    
+    <!-- Topics -->
+    <div class="p-6">
+        {% if topics.items %}
+            <div class="border-b border-gray-200 mb-4 pb-1">
+                <div class="flex justify-between items-center text-sm text-gray-500">
+                    <div class="w-6/12 sm:w-7/12 px-2">Topic</div>
+                    <div class="w-2/12 px-2 text-center hidden sm:block">Replies</div>
+                    <div class="w-2/12 px-2 text-center hidden md:block">Views</div>
+                    <div class="w-4/12 sm:w-3/12 md:w-2/12 px-2">Last Post</div>
+                </div>
+            </div>
+            
+            <div class="space-y-2">
+                {% for topic in topics.items %}
+                <div class="flex bg-white hover:bg-gray-50 border border-gray-200 rounded-lg transition-colors overflow-hidden">
+                    <div class="w-6/12 sm:w-7/12 p-3 flex items-start">
+                        <div class="flex-shrink-0 mr-3">
+                            {% if topic.is_pinned %}
+                            <span class="flex items-center justify-center w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full">
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </span>
+                            {% elif topic.is_locked %}
+                            <span class="flex items-center justify-center w-8 h-8 bg-red-100 text-red-600 rounded-full">
+                                <i data-feather="lock" class="w-4 h-4"></i>
+                            </span>
+                            {% else %}
+                            <span class="flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-600 rounded-full">
+                                <i data-feather="message-circle" class="w-4 h-4"></i>
+                            </span>
+                            {% endif %}
+                        </div>
+                        <div>
+                            <a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="text-gray-800 font-medium hover:text-blue-600">
+                                {{ topic.title }}
+                            </a>
+                            
+                            {% if topic.tags %}
+                            <div class="mt-1 flex flex-wrap">
+                                {% for tag in topic.tags %}
+                                <a href="{{ url_for('forum.tag_view', tag_name=tag.name) }}" class="tag">
+                                    {{ tag.name }}
+                                </a>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+                            
+                            <div class="text-gray-500 text-xs mt-1">
+                                Started by <a href="{{ url_for('user.profile', username=topic.author.username) }}" class="text-blue-600 hover:underline">{{ topic.author.username }}</a>, 
+                                {{ topic.created_at.strftime('%b %d, %Y') }}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="w-2/12 p-3 text-center hidden sm:flex items-center justify-center">
+                        <span class="text-gray-700">{{ topic.reply_count() }}</span>
+                    </div>
+                    
+                    <div class="w-2/12 p-3 text-center hidden md:flex items-center justify-center">
+                        <span class="text-gray-700">{{ topic.views }}</span>
+                    </div>
+                    
+                    <div class="w-4/12 sm:w-3/12 md:w-2/12 p-3">
+                        {% set last_post = topic.last_post() %}
+                        {% if last_post %}
+                        <div class="text-xs text-gray-500">
+                            <a href="{{ url_for('user.profile', username=last_post.author.username) }}" class="text-blue-600 hover:underline">{{ last_post.author.username }}</a>
+                            <div class="mt-1">{{ last_post.created_at.strftime('%b %d, %Y') }}</div>
+                        </div>
+                        {% else %}
+                        <span class="text-gray-500 text-xs">No replies yet</span>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            
+            <!-- Pagination -->
+            {% if topics.pages > 1 %}
+            <div class="mt-6 flex justify-center">
+                <nav class="inline-flex rounded-md shadow">
+                    {% if topics.has_prev %}
+                    <a href="{{ url_for('forum.category_view', id=category.id, page=topics.prev_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
+                        Previous
+                    </a>
+                    {% else %}
+                    <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed">
+                        Previous
+                    </span>
+                    {% endif %}
+                    
+                    {% for page_num in topics.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+                        {% if page_num %}
+                            {% if page_num == topics.page %}
+                            <span class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-gray-300">
+                                {{ page_num }}
+                            </span>
+                            {% else %}
+                            <a href="{{ url_for('forum.category_view', id=category.id, page=page_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">
+                                {{ page_num }}
+                            </a>
+                            {% endif %}
+                        {% else %}
+                        <span class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300">
+                            …
+                        </span>
+                        {% endif %}
+                    {% endfor %}
+                    
+                    {% if topics.has_next %}
+                    <a href="{{ url_for('forum.category_view', id=category.id, page=topics.next_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
+                        Next
+                    </a>
+                    {% else %}
+                    <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed">
+                        Next
+                    </span>
+                    {% endif %}
+                </nav>
+            </div>
+            {% endif %}
+            
+        {% else %}
+            <div class="text-center py-8">
+                <p class="text-gray-500">No topics have been created in this category yet.</p>
+                {% if current_user.is_authenticated %}
+                <a href="{{ url_for('forum.create_topic') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+                    Create First Topic
+                </a>
+                {% endif %}
+            </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

templates/forum/topic_view.html

@@ -0,0 +1,334 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ topic.title }} - Community Forum{% endblock %}
+
+{% block breadcrumb %}
+<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.category_list') }}" class="hover:text-blue-600">Categories</a>
+<span class="mx-2">/</span>
+<a href="{{ url_for('forum.category_view', id=topic.category_id) }}" class="hover:text-blue-600">{{ topic.category.name }}</a>
+<span class="mx-2">/</span>
+<span>{{ topic.title }}</span>
+{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200 flex flex-wrap justify-between items-center gap-2">
+        <div>
+            <h1 class="text-2xl font-bold text-gray-800">{{ topic.title }}</h1>
+            
+            <div class="mt-1 flex flex-wrap items-center gap-2">
+                {% if topic.tags %}
+                    {% for tag in topic.tags %}
+                    <a href="{{ url_for('forum.tag_view', tag_name=tag.name) }}" class="tag">
+                        {{ tag.name }}
+                    </a>
+                    {% endfor %}
+                {% endif %}
+                
+                {% if topic.is_pinned %}
+                <span class="flex items-center text-xs text-yellow-600 bg-yellow-100 px-2 py-1 rounded-full">
+                    <i data-feather="star" class="w-3 h-3 mr-1"></i> Pinned
+                </span>
+                {% endif %}
+                
+                {% if topic.is_locked %}
+                <span class="flex items-center text-xs text-red-600 bg-red-100 px-2 py-1 rounded-full">
+                    <i data-feather="lock" class="w-3 h-3 mr-1"></i> Locked
+                </span>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="flex flex-wrap gap-2">
+            {% if current_user.is_authenticated and current_user.is_moderator() %}
+            <form method="POST" action="{{ url_for('forum.pin_topic', id=topic.id) }}" class="inline">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" id="pin-topic-btn" data-is-pinned="{{ 'true' if topic.is_pinned else 'false' }}" class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 focus:outline-none focus:ring">
+                    {% if topic.is_pinned %}
+                    <i data-feather="star-off" class="w-4 h-4 inline-block mr-1"></i> Unpin
+                    {% else %}
+                    <i data-feather="star" class="w-4 h-4 inline-block mr-1"></i> Pin
+                    {% endif %}
+                </button>
+            </form>
+            
+            <form method="POST" action="{{ url_for('forum.lock_topic', id=topic.id) }}" class="inline">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <button type="submit" id="lock-topic-btn" data-is-locked="{{ 'true' if topic.is_locked else 'false' }}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 focus:outline-none focus:ring">
+                    {% if topic.is_locked %}
+                    <i data-feather="unlock" class="w-4 h-4 inline-block mr-1"></i> Unlock
+                    {% else %}
+                    <i data-feather="lock" class="w-4 h-4 inline-block mr-1"></i> Lock
+                    {% endif %}
+                </button>
+            </form>
+            {% endif %}
+            
+            {% if current_user.is_authenticated %}
+            <button class="report-button px-3 py-1 bg-red-100 text-red-700 rounded hover:bg-red-200 focus:outline-none focus:ring" data-topic-id="{{ topic.id }}">
+                <i data-feather="flag" class="w-4 h-4 inline-block mr-1"></i> Report
+            </button>
+            {% endif %}
+        </div>
+    </div>
+    
+    <!-- Posts -->
+    <div class="divide-y divide-gray-200">
+        {% for post in posts.items %}
+        <div id="post-{{ post.id }}" class="post flex flex-col md:flex-row p-0 md:divide-x divide-gray-200">
+            <!-- Author Info -->
+            <div class="w-full md:w-56 lg:w-64 p-4 md:p-6 bg-gray-50">
+                <div class="flex flex-row md:flex-col items-center md:items-start">
+                    <div class="flex-shrink-0 mr-4 md:mr-0 md:mb-3">
+                        <img 
+                            src="{{ url_for('static', filename='uploads/avatars/' + post.author.avatar) if post.author.avatar else url_for('static', filename='uploads/avatars/default.png') }}" 
+                            alt="{{ post.author.username }}" 
+                            class="w-12 h-12 md:w-16 md:h-16 rounded-full object-cover"
+                        >
+                    </div>
+                    <div>
+                        <div class="post-author">
+                            <a href="{{ url_for('user.profile', username=post.author.username) }}" class="text-blue-600 font-medium hover:underline">
+                                {{ post.author.username }}
+                            </a>
+                        </div>
+                        <div class="text-gray-500 text-sm">
+                            {% if post.author.role == 'admin' %}
+                            <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Admin</span>
+                            {% elif post.author.role == 'moderator' %}
+                            <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Moderator</span>
+                            {% else %}
+                            <span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Member</span>
+                            {% endif %}
+                        </div>
+                        <div class="text-gray-500 text-xs mt-2 hidden md:block">
+                            Joined: {{ post.author.created_at.strftime('%b %Y') }}
+                        </div>
+                    </div>
+                </div>
+                
+                {% if post.author.signature and loop.index > 1 %}
+                <div class="mt-4 pt-4 border-t border-gray-200 text-xs text-gray-500 hidden md:block">
+                    {{ post.author.signature }}
+                </div>
+                {% endif %}
+            </div>
+            
+            <!-- Post Content -->
+            <div class="flex-1 p-4 md:p-6">
+                <div class="flex justify-between items-start mb-4">
+                    <div class="text-sm text-gray-500">
+                        <a href="#post-{{ post.id }}" class="hover:text-blue-600">
+                            {{ post.created_at.strftime('%b %d, %Y %H:%M') }}
+                        </a>
+                        {% if post.updated_at and post.updated_at != post.created_at %}
+                        <span class="text-xs ml-2">
+                            (Edited {% if post.edited_by %}by {{ post.edited_by.username }}{% endif %} 
+                            on {{ post.updated_at.strftime('%b %d, %Y %H:%M') }})
+                        </span>
+                        {% endif %}
+                    </div>
+                    <div class="flex space-x-1">
+                        <a href="{{ url_for('forum.quote_post', id=post.id) }}" class="quote-button p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded">
+                            <i data-feather="message-square" class="w-4 h-4"></i>
+                            <span class="sr-only">Quote</span>
+                        </a>
+                        
+                        {% if current_user.is_authenticated and (current_user.id == post.author_id or current_user.is_moderator()) %}
+                        <a href="{{ url_for('forum.edit_post', id=post.id) }}" class="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded">
+                            <i data-feather="edit" class="w-4 h-4"></i>
+                            <span class="sr-only">Edit</span>
+                        </a>
+                        
+                        <form method="POST" action="{{ url_for('forum.delete_post', id=post.id) }}" class="inline">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                            <button type="submit" class="delete-button p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded">
+                                <i data-feather="trash-2" class="w-4 h-4"></i>
+                                <span class="sr-only">Delete</span>
+                            </button>
+                        </form>
+                        {% endif %}
+                        
+                        {% if current_user.is_authenticated and current_user.id != post.author_id %}
+                        <button class="report-button p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded" data-post-id="{{ post.id }}">
+                            <i data-feather="flag" class="w-4 h-4"></i>
+                            <span class="sr-only">Report</span>
+                        </button>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <div class="post-content prose max-w-none">
+                    {{ post.content|safe }}
+                </div>
+                
+                <!-- Reactions -->
+                {% if current_user.is_authenticated %}
+                <div class="mt-6 flex space-x-2">
+                    <button class="reaction-btn {% if current_user.is_authenticated and post.reactions.filter_by(user_id=current_user.id, reaction_type='like').first() %}active{% endif %}" data-post-id="{{ post.id }}" data-reaction-type="like">
+                        <i data-feather="thumbs-up" class="w-4 h-4"></i>
+                        <span class="reaction-count {% if post.get_reaction_count('like') == 0 %}hidden{% endif %}">{{ post.get_reaction_count('like') }}</span>
+                    </button>
+                    
+                    <button class="reaction-btn {% if current_user.is_authenticated and post.reactions.filter_by(user_id=current_user.id, reaction_type='heart').first() %}active{% endif %}" data-post-id="{{ post.id }}" data-reaction-type="heart">
+                        <i data-feather="heart" class="w-4 h-4"></i>
+                        <span class="reaction-count {% if post.get_reaction_count('heart') == 0 %}hidden{% endif %}">{{ post.get_reaction_count('heart') }}</span>
+                    </button>
+                    
+                    <button class="reaction-btn {% if current_user.is_authenticated and post.reactions.filter_by(user_id=current_user.id, reaction_type='smile').first() %}active{% endif %}" data-post-id="{{ post.id }}" data-reaction-type="smile">
+                        <i data-feather="smile" class="w-4 h-4"></i>
+                        <span class="reaction-count {% if post.get_reaction_count('smile') == 0 %}hidden{% endif %}">{{ post.get_reaction_count('smile') }}</span>
+                    </button>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    
+    <!-- Pagination -->
+    {% if posts.pages > 1 %}
+    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+        <div class="flex justify-center">
+            <nav class="inline-flex rounded-md shadow">
+                {% if posts.has_prev %}
+                <a href="{{ url_for('forum.topic_view', id=topic.id, page=posts.prev_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50">
+                    Previous
+                </a>
+                {% else %}
+                <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed">
+                    Previous
+                </span>
+                {% endif %}
+                
+                {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+                    {% if page_num %}
+                        {% if page_num == posts.page %}
+                        <span class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-gray-300">
+                            {{ page_num }}
+                        </span>
+                        {% else %}
+                        <a href="{{ url_for('forum.topic_view', id=topic.id, page=page_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50">
+                            {{ page_num }}
+                        </a>
+                        {% endif %}
+                    {% else %}
+                    <span class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300">
+                        …
+                    </span>
+                    {% endif %}
+                {% endfor %}
+                
+                {% if posts.has_next %}
+                <a href="{{ url_for('forum.topic_view', id=topic.id, page=posts.next_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50">
+                    Next
+                </a>
+                {% else %}
+                <span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed">
+                    Next
+                </span>
+                {% endif %}
+            </nav>
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Reply Form -->
+    {% if current_user.is_authenticated and not topic.is_locked or (current_user.is_authenticated and current_user.is_moderator()) %}
+    <div id="reply-form" class="p-6 bg-gray-50 border-t border-gray-200">
+        <h3 class="text-lg font-medium text-gray-800 mb-4">Post a Reply</h3>
+        
+        <form method="POST" action="{{ url_for('forum.topic_view', id=topic.id) }}">
+            {{ post_form.hidden_tag() }}
+            {{ post_form.topic_id(value=topic.id) }}
+            
+            <div class="editor-container mb-4">
+                <div class="editor-toolbar bg-white border border-gray-300">
+                    <!-- Buttons will be added by the JavaScript -->
+                </div>
+                
+                {{ post_form.content(class="w-full px-4 py-2 border border-gray-300 editor-textarea focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="content", rows="6") }}
+                
+                {% if post_form.content.errors %}
+                <div class="text-red-600 text-sm mt-1">
+                    {% for error in post_form.content.errors %}
+                    <p>{{ error }}</p>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="mt-4">
+                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+                    Post Reply
+                </button>
+            </div>
+        </form>
+    </div>
+    {% elif current_user.is_authenticated and topic.is_locked %}
+    <div class="p-6 bg-gray-50 border-t border-gray-200">
+        <div class="flex items-center justify-center p-4 bg-red-50 text-red-700 rounded-md">
+            <i data-feather="lock" class="w-5 h-5 mr-2"></i>
+            <span>This topic is locked. New replies are not allowed.</span>
+        </div>
+    </div>
+    {% elif not current_user.is_authenticated %}
+    <div class="p-6 bg-gray-50 border-t border-gray-200">
+        <div class="flex items-center justify-center p-4 bg-blue-50 text-blue-700 rounded-md">
+            <i data-feather="info" class="w-5 h-5 mr-2"></i>
+            <span>Please <a href="{{ url_for('auth.login') }}" class="underline font-medium">log in</a> to post a reply.</span>
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<!-- Report Modal Dialog -->
+{% if current_user.is_authenticated %}
+<div id="report-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
+        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+            <h3 class="text-lg font-medium text-gray-800">Report Content</h3>
+            <button type="button" class="close-modal text-gray-400 hover:text-gray-500">
+                <i data-feather="x" class="w-5 h-5"></i>
+                <span class="sr-only">Close</span>
+            </button>
+        </div>
+        
+        <form id="report-form" method="POST" action="{{ url_for('forum.create_report') }}">
+            {{ report_form.hidden_tag() }}
+            {{ report_form.post_id(id="post_id") }}
+            {{ report_form.topic_id(id="topic_id") }}
+            
+            <div class="p-6">
+                <div class="mb-4">
+                    <label for="reason" class="block text-gray-700 font-medium mb-2">Reason for Report</label>
+                    {{ report_form.reason(class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 focus:ring focus:ring-blue-200", id="reason", rows="4", placeholder="Please provide a detailed explanation of why you're reporting this content...") }}
+                    {% if report_form.reason.errors %}
+                    <div class="text-red-600 text-sm mt-1">
+                        {% for error in report_form.reason.errors %}
+                        <p>{{ error }}</p>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <div class="mt-4 flex justify-end">
+                    <button type="button" class="close-modal px-4 py-2 bg-gray-200 text-gray-800 rounded-md mr-2 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
+                        Cancel
+                    </button>
+                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
+                        Submit Report
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+{% endblock %}

templates/home.html

@@ -0,0 +1,127 @@
+{% extends "layout.html" %}
+
+{% block title %}Community Forum - Home{% endblock %}
+
+{% block content %}
+<div class="bg-white rounded-lg shadow overflow-hidden">
+    <div class="px-6 py-4 border-b border-gray-200">
+        <h1 class="text-2xl font-bold text-gray-800">Welcome to our Community Forum</h1>
+        <p class="text-gray-600 mt-1">A place to discuss, share and learn together.</p>
+    </div>
+    
+    {% if current_user.is_authenticated %}
+    <div class="p-6 bg-blue-50 border-b border-blue-100">
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
+            <div>
+                <h2 class="text-lg font-semibold text-blue-800">Welcome back, {{ current_user.username }}!</h2>
+                <p class="text-blue-600 text-sm">What would you like to discuss today?</p>
+            </div>
+            <a href="{{ url_for('forum.create_topic') }}" class="mt-3 sm:mt-0 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
+                <i data-feather="plus-circle" class="w-4 h-4 inline-block mr-1"></i> Create New Topic
+            </a>
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Categories -->
+    <div class="p-6">
+        {% if categories %}
+            <div class="space-y-4">
+                {% for category in categories %}
+                <div class="bg-white border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
+                    <a href="{{ url_for('forum.category_view', id=category.id) }}" class="block p-4">
+                        <div class="sm:flex justify-between items-start">
+                            <div>
+                                <h3 class="text-lg font-semibold text-gray-800 hover:text-blue-600">{{ category.name }}</h3>
+                                {% if category.description %}
+                                <p class="text-gray-600 mt-1">{{ category.description }}</p>
+                                {% endif %}
+                            </div>
+                            <div class="mt-2 sm:mt-0 flex space-x-6 text-gray-500 text-sm">
+                                <div>
+                                    <span class="font-medium">{{ category.topic_count() }}</span> topics
+                                </div>
+                                <div>
+                                    <span class="font-medium">{{ category.post_count() }}</span> posts
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="text-center py-8">
+                <p class="text-gray-500">No categories have been created yet.</p>
+                {% if current_user.is_authenticated and current_user.is_admin() %}
+                <a href="{{ url_for('admin.create_category') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
+                    Create First Category
+                </a>
+                {% endif %}
+            </div>
+        {% endif %}
+    </div>
+    
+    <!-- Forum Statistics -->
+    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
+        <h3 class="text-lg font-semibold text-gray-700 mb-3">Forum Statistics</h3>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+            {% set topic_count = namespace(total=0) %}
+            {% set post_count = namespace(total=0) %}
+            
+            {% for category in categories %}
+                {% set topic_count.total = topic_count.total + category.topic_count() %}
+                {% set post_count.total = post_count.total + category.post_count() %}
+            {% endfor %}
+            
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+                <div class="flex items-center">
+                    <div class="p-2 rounded-md bg-blue-100 text-blue-500 mr-3">
+                        <i data-feather="users" class="w-5 h-5"></i>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Members</p>
+                        <p class="text-lg font-semibold">{{ user_count if user_count is defined else '—' }}</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+                <div class="flex items-center">
+                    <div class="p-2 rounded-md bg-green-100 text-green-500 mr-3">
+                        <i data-feather="layers" class="w-5 h-5"></i>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Categories</p>
+                        <p class="text-lg font-semibold">{{ categories|length }}</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+                <div class="flex items-center">
+                    <div class="p-2 rounded-md bg-purple-100 text-purple-500 mr-3">
+                        <i data-feather="message-circle" class="w-5 h-5"></i>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Topics</p>
+                        <p class="text-lg font-semibold">{{ topic_count.total }}</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bg-white p-4 rounded-lg border border-gray-200">
+                <div class="flex items-center">
+                    <div class="p-2 rounded-md bg-yellow-100 text-yellow-500 mr-3">
+                        <i data-feather="file-text" class="w-5 h-5"></i>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Posts</p>
+                        <p class="text-lg font-semibold">{{ post_count.total }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}