mise à jour de l'interface d'administration

assets/app.js

@@ -7,5 +7,7 @@ import './bootstrap.js';
  */
 import './styles/app.css';
 import './vendor/bulma/css/bulma.min.css';
+import './styles/datatables.min.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+

assets/controllers/bulma_burger_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
+    this.initNavbarBurger();
+    console.log("Stimulus: chargement du contrôleur Bulma Burger");
+  }
+
+  initNavbarBurger() {
+    const $navbarBurgers = Array.from(document.querySelectorAll('.navbar-burger'));
+    $navbarBurgers.forEach((el) => {
+      el.addEventListener('click', () => {
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+        el.classList.toggle('is-active');
+        $target?.classList.toggle('is-active');
+      });
+    });
+  }
+
+ 
+}

assets/controllers/bulma_switch_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
+    this.initThemeToggle();
+    console.log("Stimulus: chargement du contrôler du switch");
+  }
+
+
+  initThemeToggle() {
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    if (!themeToggleBtn) return;
+
+    let currentTheme = localStorage.getItem('theme') || 'auto';
+
+    const applyTheme = (theme) => {
+      if (theme === 'auto') {
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        theme = systemPrefersDark ? 'dark' : 'light';
+      }
+      document.documentElement.setAttribute('data-theme', theme);
+    };
+
+    const toggleTheme = () => {
+      if (currentTheme === 'dark') {
+        currentTheme = 'light';
+        console.log('Thème clair activé');
+      } else if (currentTheme === 'light') {
+        currentTheme = 'dark';
+        console.log('Thème sombre activé');
+      } else {
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        currentTheme = systemPrefersDark ? 'light' : 'dark';
+      }
+      localStorage.setItem('theme', currentTheme);
+      applyTheme(currentTheme);
+    };
+
+    applyTheme(currentTheme);
+
+    themeToggleBtn.addEventListener('click', toggleTheme);
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (currentTheme === 'auto') {
+        applyTheme(e.matches ? 'dark' : 'light');
+      }
+    });
+  }
+}

assets/controllers/datatables_controller.js

@@ -0,0 +1,24 @@
+import 'jquery';
+import 'datatables';
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  async connect() {
+    console.log('Stimulus: datatable détecté');
+
+
+    // Vérifie si DataTable a déjà été initialisé via un attribut
+    if (this.element.dataset.datatableInitialized === 'true') {
+      console.log('Déjà initialisé — on ne refait rien');
+      return;
+    }
+
+    // Initialise DataTables
+    $(this.element).DataTable();
+
+    // Marque comme initialisé pour les reconnections futures
+    this.element.dataset.datatableInitialized = 'true';
+    console.log('✅ DataTable initialisé');
+
+  }
+}

assets/styles/app.css

@@ -3,4 +3,8 @@
 .main-content {
     margin-top: 3.25rem;
     padding: 0.5rem;
-}
+}
+
+.icon-inner {
+    padding: 0.5rem;
+} 

get_bulma.sh

@@ -3,6 +3,6 @@
 
 rm -rf assets/vendor/bulma
 mkdir -p assets/vendor/bulma
-curl -L https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip -o bulma.zip
+curl -L https://github.com/jgthms/bulma/releases/download/1.0.4/bulma-1.0.4.zip -o bulma.zip
 unzip bulma.zip -d assets/vendor/
 rm bulma.zip

importmap.php

@@ -25,4 +25,10 @@ return [
     '@hotwired/turbo' => [
         'version' => '8.0.13',
     ],
+    'jquery' => [
+        'path' => './assets/js/jquery-3.7.1.min.js',
+    ],
+    'datatables' => [
+        'path' => './assets/js/datatables.min.js',
+    ],
 ];

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "orgasso",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package.json

@@ -0,0 +1 @@
+{}

src/Controller/SecurityController.php

@@ -18,9 +18,13 @@ class SecurityController extends AbstractController
         // last username entered by the user
         $lastUsername = $authenticationUtils->getLastUsername();
 
+        // Gestion des erreurs par flash messages
+        if ($error) {
+            $this->addFlash('danger', $error->getMessage());
+        }
+
         return $this->render('security/login.html.twig', [
             'last_username' => $lastUsername,
-            'error' => $error,
         ]);
     }
 

src/Twig/Components/Alert.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+class Alert
+{
+    public string $type = 'success';
+    public string $message;
+}

src/Twig/Components/Role.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+class Role
+{
+    public array $roles;
+
+    public function getRole(): string
+    {
+        if (in_array('ROLE_ADMIN', $this->roles, true)) {
+            return 'Administrateur';
+        } elseif (in_array('ROLE_MANAGER', $this->roles, true)) {
+            return 'Gestionnaire';
+        } elseif (in_array('ROLE_STAFF', $this->roles, true)) {
+            return 'Equipe';
+        } elseif (in_array('ROLE_USER', $this->roles, true)) {
+            return 'Participant';
+        }
+
+        return 'Inconnu';
+    }
+}
+

templates/admin/index.html.twig

@@ -1,22 +1,38 @@
 {% extends 'bulma.html.twig' %}
 
-{% block title %}Hello AdminController!{% endblock %}
+{% block title %}Administration{% endblock %}
 
 {% block content %}
 
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
+  <section class="section">
+    <div class="container">
+      <div class="columns">
+        <!-- Colonne 1 -->
+        <div class="column">
+          <div class="box">
+            <h2 class="title is-4">Utilisateurs</h2>
+            <p>Gérer les comptes utilisateurs et les droits.</p>
+            <p><a href="{{ path('app_admin_user') }}">Gérer les utilisateurs</a></p>
+          </div>
+        </div>
+        <!-- Colonne 2 -->
+        <div class="column">
+          <div class="box">
+            <h2 class="title is-4">Événements</h2>
+            <p>Gérer les événements, plannifier et organiser.</p>
+            <p><a href="#">Gérer les événements</a></p>
+          </div>
+        </div>
+        <!-- Colonne 3 -->
+        <div class="column">
+          <div class="box">
+            <h2 class="title is-4">Utilisateurs</h2>
+            <p>Gérer les comptes utilisateurs et les droits.</p>
+            <p><a href="{{ path('app_admin_user') }}">Gérer les utilisateurs</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code>/Users/garthh/Developpement/orgasso/src/Controller/AdminController.php</code></li>
-        <li>Your template at <code>/Users/garthh/Developpement/orgasso/templates/admin/index.html.twig</code></li>
-
-        
-    </ul>
-</div>
-<div class="container">
-    <h1 class="title is-2">Hello Bulma avec AssetMapper 👋</h1>
-    <p class="notification is-success">C'est simple, sans Webpack ni bundle !</p>
-</div>
 {% endblock %}

templates/admin/user/delete.html.twig

@@ -1,13 +1,13 @@
-{% extends 'base.html.twig' %}
+{% extends 'bulma.html.twig' %}
 
-{% block title %}Hello Admin/UserController!{% endblock %}
+{% block title %}Administration > Utilisateurs > Supprimer{% endblock %}
 
 {% block content %}
             
             {{ form_start(form) }}
             {{ form_widget(form) }}
-            <button type="submit">Supprimer l'utilisateur</button>
-            <a href="{{ path('app_admin_user') }}">Annuler</a>
+            <button class="button is-danger" type="submit">Supprimer l'utilisateur</button>
+            <a class="button" href="{{ path('app_admin_user') }}">Annuler</a>
             {{ form_end(form) }}
         </div>
     </div>

templates/admin/user/edit.html.twig

@@ -1,13 +1,16 @@
-{% extends 'base.html.twig' %}
+{% extends 'bulma.html.twig' %}
 
-{% block title %}Hello Admin/UserController!{% endblock %}
+{% block title %}Administration > Utilisateurs > Éditer{% endblock %}
 
 {% block content %}
 
     {{ form_errors(form) }}
     {{ form_start(form) }}
         {{ form_widget(form) }}
-        <button type="submit">Envoyer</button>
+        <div class="block">
+        <button class="button is-primary" type="submit">Envoyer</button>
+        <a href="{{ path('app_admin_user') }}" class="button">Annuler</a>
+        </div>
     {{ form_end(form) }}
 
 {% endblock %}

templates/admin/user/index.html.twig

@@ -1,22 +1,46 @@
-{% extends 'base.html.twig' %}
+{% extends 'bulma.html.twig' %}
 
-{% block title %}Hello Admin/UserController!{% endblock %}
+{% block title %}Administration > Utilisateurs{% endblock %}
 
 {% block content %}
 
-{% for user in users %}
-    <div class="user">
-        <p>Identitié : {{ user.firstname }} {{ user.lastname }}</p>
-        <p>Email: {{ user.email }}</p>
-        <p>Roles: {{ user.roles|join(', ') }}</p>
-        <p>Last Login: {{ user.lastLogin ? user.lastLogin|date('d/m/Y H:i:s', app_timezone) : 'Never' }}</p>
-        <p>Last update: {{ user.lastUpdate ? user.lastUpdate|date('d/m/Y H:i:s', app_timezone) : 'Never' }}</p>
-        <a href="{{ path('app_admin_user_edit', {id: user.id}) }}">Edit</a> |
-        <a href="{{ path('app_admin_user_delete', {id: user.id}) }}">Delete</a> |
-        {% if not user.isVerified %}<a href="{{ path('app_resend_verification_email', {id: user.id}) }}">Resend Verification Email</a>{% endif %}
+    <div class="block">
+        <div class="is-grouped">
+            <a class="button is-primary" href="{{ path('app_admin_user_add') }}">Ajouter un utilisateur</a>
+            <a class="button" href="{{ path('app_admin') }}">Retour</a>
+        </div>
     </div>
 
+    <div class="block">
+        <table id="datatable" {{ stimulus_controller('datatables') }} class="table is-striped is-hoverable is-fullwidth">
+            <thead>
+            <tr>
+                <th>Identité</th>
+                <th>Email</th>
+                <th>Rôles</th>
+                <th>Dernière connexion</th>
+                <th>Dernière mise à jour</th>
+                <th>Actions</th>
+            </tr>
+            </thead>
+            <tbody>
+            {% for user in users %}
+                <tr>
+                    <td><a href="{{ path('app_admin_user_edit', {id: user.id}) }}">{{ user.firstname }} {{ user.lastname }}</a></td>
+                    <td><span class="icon-text">{{ user.email }}{% if user.isVerified %}<span class="icon"><twig:ux:icon name="bi:check2-circle" /></span>{% else %}<a href="{{ path('app_resend_verification_email', {id: user.id}) }}" title="Renvoyer l'email de confirmation"><span class="icon"><twig:ux:icon name="bi:arrow-clockwise" /></span></a>{% endif %}</span></td>
+                    <td>{{ component('Role', {roles: user.roles}) }}</td>
+                    <td>{{ user.lastLogin ? user.lastLogin|date('d/m/Y H:i:s', app_timezone) : 'Jamais' }}</td>
+                    <td>{{ user.lastUpdate ? user.lastUpdate|date('d/m/Y H:i:s', app_timezone) : 'Jamais' }}</td>
+                    <td>
+                        <a class="button" href="{{ path('app_admin_user_edit', {id: user.id}) }}">Éditer</a>
+                        <a class="button is-danger" href="{{ path('app_admin_user_delete', {id: user.id}) }}">Supprimer</a>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
+
+        </table>
+    </div>
 
-{% endfor %}
 
 {% endblock %}

templates/bulma.html.twig

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr" data-theme="light">
     <head>
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
@@ -16,118 +16,82 @@
         {% endblock %}
         <!-- /javascripts -->
     </head>
-    <body>
+    <body  {{ stimulus_controller('bulma-switch') }}>
           <!-- Navbar -->
-<nav class="navbar is-fixed-top is-dark has-shadow" role="navigation" aria-label="main navigation">
-  <div class="container ">
-    <div class="navbar-brand">
-      <a class="navbar-item" href="/">
-        <strong>Orgasso</strong>
-      </a>
+      <nav class="navbar is-fixed-top has-shadow" role="navigation" aria-label="main navigation">
+        <div class="container ">
+          <div class="navbar-brand">
+            <a class="navbar-item" href="/">
+              <strong>Orgasso</strong>
+            </a>
 
-      <!-- Mobile menu toggle -->
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </a>
-    </div>
-
-    <!-- Liens principaux -->
-    <div id="navbarMain" class="navbar-menu">
-      <div class="navbar-start">
-        <a class="navbar-item" href="#">Accueil</a>
-        <a class="navbar-item" href="#">Articles</a>
-        <a class="navbar-item" href="#">À propos</a>
-      </div>
-
-      <div class="navbar-end">
-        <a class="navbar-item">
-
-                <twig:ux:icon name="bi:moon-stars-fill" class="size-2" />
-
-        </a>
-        {% if app.user %}
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link">{{ app.user.firstName }}</a>
-          <div class="navbar-dropdown is-right">
-            <a class="navbar-item" href="#">Mon compte</a>
-            <a class="navbar-item" href="#">Mes réservations</a>
-            <hr class="navbar-divider" />
-            <a class="navbar-item" href="{{ path('app_admin') }}">Administration</a>
-            <hr class="navbar-divider" />
-            <a class="navbar-item" href="{{ path('app_logout') }}">Me déconnecter</a>
+            <!-- Mobile menu toggle -->
+            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMain"  {{ stimulus_controller('bulma-burger') }}>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </a>
           </div>
-        </div>
-        {% else %}
-        <div class="navbar-item">
-          <div class="buttons">
-            <a class="button is-primary" href="{{ path('app_login') }}">Connexion</a>
-        </div>
-        </div>
-        {% endif %}
-      </div>
-    </div>
-  </div>
-</nav>
 
-<div class="main-content">
-{% block content %}
-  <!-- Section 1 - Introduction -->
-  <section class="section">
-    <div class="container">
-      <h1 class="title">Bienvenue sur notre site</h1>
-      <p class="subtitle">Une introduction rapide à notre contenu et à notre mission.</p>
-    </div>
-  </section>
+          <!-- Liens principaux -->
+          <div id="navbarMain" class="navbar-menu">
+            <div class="navbar-start">
+              <a class="navbar-item" href="{{ path('app_main') }}">Accueil</a>
+              <a class="navbar-item" href="#">Lien 1</a>
+              <a class="navbar-item" href="#">Lien 2</a>
+            </div>
 
-  <!-- Section 2 - Grille de Colonnes -->
-  <section class="section">
-    <div class="container">
-      <div class="columns">
-        <!-- Colonne 1 -->
-        <div class="column">
-          <div class="box">
-            <h2 class="title is-4">Colonne 1</h2>
-            <p>Voici du contenu pour la première colonne. Elle peut contenir des images, du texte ou des éléments divers.</p>
-          </div>
+            <div class="navbar-end">
+        <div class="navbar-item is-hoverable has-text-current is-clickable" id="theme-toggle">
+              <span class="icon is-small">
+                {{ ux_icon('bi:circle-half') }}
+              </span>
         </div>
-        <!-- Colonne 2 -->
-        <div class="column">
-          <div class="box">
-            <h2 class="title is-4">Colonne 2</h2>
-            <p>Voici du contenu pour la deuxième colonne. Utilisez les colonnes pour organiser l'affichage sur plusieurs sections.</p>
-          </div>
-        </div>
-        <!-- Colonne 3 -->
-        <div class="column">
-          <div class="box">
-            <h2 class="title is-4">Colonne 3</h2>
-            <p>Voici du contenu pour la troisième colonne. Les colonnes sont responsives et s'ajustent en fonction de la taille de l'écran.</p>
+              {% if app.user %}
+              <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link">{{ app.user.firstName }}</a>
+                <div class="navbar-dropdown is-right">
+                  <a class="navbar-item" href="#" class="">Mon compte</a>
+                  <a class="navbar-item" href="#">Mes réservations</a>
+                  <hr class="navbar-divider" />
+                  <a class="navbar-item" href="{{ path('app_admin') }}">Administration</a>
+                  <hr class="navbar-divider" />
+                  <a class="navbar-item" href="{{ path('app_logout') }}">Me déconnecter</a>
+                </div>
+              </div>
+              {% else %}
+              <div class="navbar-item">
+                <div class="buttons">
+                  <a class="button is-primary" href="{{ path('app_login') }}">Connexion</a>
+              </div>
+              </div>
+              {% endif %}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
-  </section>
+      </nav>
+
+      <!-- contenu principal -->
 
-  <!-- Section 3 - Contenu additionnel -->
-  <section class="section">
-    <div class="container">
-      <div class="content">
-        <h2>Titre de la section additionnelle</h2>
-        <p>Cette section contient du texte supplémentaire et peut inclure d'autres éléments comme des images, des listes ou des citations.</p>
-        <ul>
-          <li>Premier point de la liste</li>
-          <li>Deuxième point de la liste</li>
-          <li>Troisième point de la liste</li>
-        </ul>
+      <section class="main-content section">
+        <div class="container">
+          {% block messages %}
 
+          {% for type, message in app.flashes() %}
+          {{ component('Alert', {message: message[0], type: type}) }}
+          {% endfor %}
+          {% endblock %}
 
-      </div>
-    </div>
-  </section>
-{% endblock %}
-</div>
+        {% block content %}
+          <!-- Section 1 - Introduction -->
+
+              <h1 class="title">Bienvenue sur notre site</h1>
+              <p class="subtitle">Une introduction rapide à notre contenu et à notre mission.</p>
+
+  
+        {% endblock %}
+        </div>
+      </section>
 
         <footer class="footer">
             <div class="content has-text-centered">

templates/components/Alert.html.twig

@@ -0,0 +1,9 @@
+<article class="message is-{{ type }}">
+    {#<div class="message-header">
+        <p>{{ type|capitalize }}</p>
+        <button class="delete" aria-label="delete"></button>
+    </div>#}
+    <div class="message-body">
+        {{ message|raw}}
+    </div>
+</article>

templates/components/Role.html.twig

@@ -0,0 +1 @@
+<span class="tag is-info is-light">{{ this.getRole }}</span>

templates/main/markdown.html.twig

@@ -3,11 +3,11 @@
 {% block title %}Charte animation{% endblock %}
 
 {% block content %}
-  <section class="section">
-    <div class="container">
-      <div class="content">
+
+{{ component('Alert', {title: '', message: 'Cette page est en cours de rédaction.', type: 'info'}) }}
+
+<div class="content">
 {{ codeContent|markdown_to_html }}
 </div>
-</div>
-</section>
+
 {% endblock %}

templates/security/login.html.twig

@@ -3,42 +3,71 @@
 {% block title %}Connexion{% endblock %}
 
 {% block content %}
-    {% if app.user %}
-Vous êtes connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">se déconnecter</a>.
-            {% else %}
+    <div class="content">
+        {% if app.user %}
+        <p>Vous êtes connecté en tant que {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">se déconnecter</a>.</p>
+        {% else %}
+        
+<div class="container">
+  <div class="columns is-centered">
+    <div class="column is-5">
+      <div class="box">
         <form method="post">
-        {% if error %}
-            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}<br/>{{ error.message }}</div>
-        {% endif %}
+          <h1 class="title is-4 has-text-centered">Connexion</h1>
 
+          <!-- Champ eMail -->
+          <div class="field">
+            <label class="label" for="username">eMail</label>
+            <div class="control has-icons-left">
+              <input class="input" type="email" value="{{ last_username }}" name="_username" id="username" autocomplete="email" required autofocus>
+              <span class="icon is-small is-left icon-inner">
+                {{ ux_icon('bi:envelope') }}
+              </span>
+            </div>
+          </div>
 
-        <h1 class="h3 mb-3 font-weight-normal">Connexion</h1>
-        <label for="username">eMail</label>
-        <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="email" required autofocus>
-        <label for="password">Mot de passe</label>
-        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
-        <input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">
+          <!-- Champ mot de passe -->
+          <div class="field">
+            <label class="label" for="password">Mot de passe</label>
+            <div class="control has-icons-left">
+              <input class="input" type="password" name="_password" id="password" autocomplete="current-password" required>
+              <span class="icon is-small is-left icon-inner">
+                {{ ux_icon('bi:lock') }}
+              </span>
+            </div>
+          </div>
 
-        {#
-            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
-            See https://symfony.com/doc/current/security/remember_me.html
-            #}
+          <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
-            <div class="checkbox mb-3">
+          <div class="field">
+            <div class="control">
+              <label class="checkbox">
                 <input type="checkbox" name="_remember_me" id="_remember_me">
-                <label for="_remember_me">Se souvenir de moi</label>
+                Se souvenir de moi
+              </label>
             </div>
+          </div>
 
-            <div>
-                <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié</a> | <a href="{{ path('app_register') }}">Créer un compte</a>
+          <div class="field is-grouped is-grouped-centered">
+            <div class="control">
+              <button class="button is-primary" type="submit">Se connecter</button>
             </div>
-        {# #}
+          </div>
+
+          <p class="has-text-centered mt-3">
+            <a href="{{ path('app_forgot_password_request') }}">Mot de passe oublié</a> |
+            <a href="{{ path('app_register') }}">Créer un compte</a>
+          </p>
 
-        <button class="btn btn-lg btn-primary" type="submit">
-            Se connecter
-        </button>
-    </form>
+          <p class="has-text-centered mt-4">
+            <a href="{{ path('app_main') }}">Retour à l'accueil</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
 
         {% endif %}
-    
+    </div>
 {% endblock %}