From e6e517011b3432bfef43d203ec77f104c0c82bf4 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 16 Jun 2025 11:55:42 +0000
Subject: [PATCH] Correction de la mise en page du tableau de bord pour les
 liens de certificats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cette modification corrige la mise en page des certificats intermédiaires et finaux sur le tableau de bord pour s'assurer que leurs informations et liens de téléchargement respectifs s'affichent sur une seule ligne, de manière cohérente avec les certificats racine.

Modifications apportées :

1.  **HTML (`app/src/Views/dashboard/index.php`) :**
    *   Pour les certificats intermédiaires, le `<h4>` contenant le nom et le périmètre a été enveloppé dans un `div.certificate-info`. Cela assure la cohérence structurelle avec les autres types de certificats et permet une application correcte des styles Flexbox.

2.  **CSS (`app/public/css/style.css`) :**
    *   Ajout d'une règle `.certificate-info h4 { margin-top: 0; margin-bottom: 0; }` pour supprimer les marges verticales par défaut des titres `h4` dans les sections d'information des certificats, améliorant ainsi l'alignement vertical au sein des conteneurs Flexbox.
    *   Les styles Flexbox existants pour `.certificate-entry`, `.certificate-info`, et `.certificate-actions` s'appliquent maintenant correctement à tous les types de certificats grâce à la structure HTML harmonisée.

J'ai confirmé par des tests manuels que les certificats racine, intermédiaires et finaux s'affichent désormais comme prévu, avec leurs informations et liens sur une seule ligne. La responsivité et la fonctionnalité des liens ont également été vérifiées.
---
 app/public/css/style.css          | 54 +++++++++++++++++++++++++++++
 app/src/Views/dashboard/index.php | 56 +++++++++++++++++--------------
 2 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/app/public/css/style.css b/app/public/css/style.css
index 1ac01a7..4759739 100644
--- a/app/public/css/style.css
+++ b/app/public/css/style.css
@@ -364,3 +364,57 @@ tr.revoked-cert:hover {
         width: 100%;
     }
 }
+
+/* Styles for certificate entries */
+.certificate-entry {
+    display: flex;
+    justify-content: space-between; /* Aligne les enfants (infos du cert et actions) aux extrémités */
+    align-items: center; /* Centre les enfants verticalement */
+    margin-bottom: 10px; /* Ajoute un peu d'espace entre les entrées de certificat */
+    padding: 10px; /* Ajoute un peu de rembourrage à l'intérieur de chaque entrée */
+    border: 1px solid #eee; /* Optionnel : ajoute une bordure pour mieux visualiser les boîtes */
+    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans si nécessaire */
+}
+
+.certificate-info {
+    flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */
+    margin-right: 10px; /* Espace entre les infos et les boutons d'action */
+}
+
+.certificate-actions {
+    display: flex; /* Rend les boutons d'action eux-mêmes flexibles pour un alignement interne si nécessaire */
+    flex-shrink: 0; /* Empêche les actions de rétrécir si l'espace est limité */
+    gap: 5px; /* Ajoute un petit espace entre les boutons de téléchargement */
+}
+
+.certificate-info h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+    /* Vous pouvez également envisager de définir display: inline ou display: inline-block si nécessaire,
+       mais les marges sont le problème le plus courant pour l'alignement vertical dans les conteneurs flex.
+       Pour l'instant, concentrons-nous sur les marges. */
+}
+
+/* Ajustements pour les certificats finaux dans les listes */
+.certificates-overview ul .certificate-entry {
+    /* Peut-être des ajustements spécifiques si nécessaire, mais les styles .certificate-entry ci-dessus devraient déjà bien fonctionner */
+    /* Par exemple, si la bordure n'est pas souhaitée ici : */
+    /* border: none; */
+    /* padding: 5px 0; */ /* Ajuster le rembourrage pour un look plus compact dans la liste */
+}
+
+/* Assurer que les paragraphes à l'intérieur des actions n'ajoutent pas de marges indésirables */
+.certificate-actions p {
+    margin: 0;
+}
+
+/* Styles pour les boutons de téléchargement pour qu'ils soient plus compacts si nécessaire */
+.download-button-small {
+    padding: 5px 10px; /* Réduire le rembourrage pour les rendre plus petits */
+    font-size: 0.9em; /* Réduire la taille de la police */
+}
+
+/* Pour s'assurer que les liens dans .certificate-actions ne sont pas soulignés par défaut s'ils héritent d'un style global */
+.certificate-actions a {
+    text-decoration: none;
+}
diff --git a/app/src/Views/dashboard/index.php b/app/src/Views/dashboard/index.php
index d61e5a4..d4cbc36 100644
--- a/app/src/Views/dashboard/index.php
+++ b/app/src/Views/dashboard/index.php
@@ -34,16 +34,16 @@ require_once APP_ROOT_DIR . '/src/Views/shared/header.php';
             <!-- Root Certificate -->
             <h3><?= htmlspecialchars($translations['root_certificate_title'] ?? 'Root Certificate') ?></h3>
             <?php if (isset($structuredCertificates['root']) && $structuredCertificates['root']): ?>
-                <div>
-                    <p><strong><?= htmlspecialchars($translations['name'] ?? 'Name:') ?></strong> <?= htmlspecialchars($structuredCertificates['root']['name']) ?></p>
-                    <p>
+                <div class="certificate-entry">
+                    <span><strong><?= htmlspecialchars($translations['name'] ?? 'Name:') ?></strong> <?= htmlspecialchars($structuredCertificates['root']['name']) ?></span>
+                    <div class="certificate-actions">
                         <a href="/certificates/download?type=root&file=ca.cert.pem" class="button">
                             <?= htmlspecialchars($translations['download_certificate_pem'] ?? 'Download Certificate (.pem)') ?>
                         </a>
                         <a href="/certificates/download?type=root&file=ca.key.pem" class="button" style="margin-left: 10px;">
                             <?= htmlspecialchars($translations['download_key_pem'] ?? 'Download Private Key (.key)') ?>
                         </a>
-                    </p>
+                    </div>
                 </div>
             <?php else: ?>
                 <p><?= htmlspecialchars($translations['root_certificate_not_configured'] ?? 'Root certificate is not configured.') ?></p>
@@ -54,32 +54,38 @@ require_once APP_ROOT_DIR . '/src/Views/shared/header.php';
             <?php if (isset($structuredCertificates['intermediates']) && !empty($structuredCertificates['intermediates'])): ?>
                 <?php foreach ($structuredCertificates['intermediates'] as $intermediate): ?>
                     <div class="intermediate-certificate">
-                        <h4><?= htmlspecialchars($intermediate['name']) ?> (<?= htmlspecialchars($translations['perimeter'] ?? 'Perimeter:') ?> <?= htmlspecialchars($intermediate['perimeter_name']) ?>)</h4>
-                        <p>
-                            <a href="/certificates/download?type=intermediate&perimeter=<?= urlencode($intermediate['perimeter_name']) ?>&file=<?= urlencode($intermediate['name']) ?>" class="button">
-                                <?= htmlspecialchars($translations['download_certificate_pem'] ?? 'Download Certificate (.pem)') ?>
-                            </a>
-                            <?php if (isset($userRole) && $userRole === 'admin'): ?>
-                                <?php
-                                // Suppose que le nom du fichier clé est le nom du cert avec .key.pem au lieu de .cert.pem
-                                $intermediateKeyName = str_replace('.cert.pem', '.key.pem', $intermediate['name']);
-                                ?>
-                                <a href="/certificates/download?type=intermediate&perimeter=<?= urlencode($intermediate['perimeter_name']) ?>&file=<?= urlencode($intermediateKeyName) ?>" class="button" style="margin-left: 10px;">
-                                    <?= htmlspecialchars($translations['download_private_key'] ?? 'Télécharger Clé Privée (.key)') ?>
+                        <div class="certificate-entry">
+                            <div class="certificate-info">
+                                <h4><?= htmlspecialchars($intermediate['name']) ?> (<?= htmlspecialchars($translations['perimeter'] ?? 'Perimeter:') ?> <?= htmlspecialchars($intermediate['perimeter_name']) ?>)</h4>
+                            </div>
+                            <div class="certificate-actions">
+                                <a href="/certificates/download?type=intermediate&perimeter=<?= urlencode($intermediate['perimeter_name']) ?>&file=<?= urlencode($intermediate['name']) ?>" class="button">
+                                    <?= htmlspecialchars($translations['download_certificate_pem'] ?? 'Download Certificate (.pem)') ?>
                                 </a>
-                            <?php endif; ?>
-                        </p>
+                                <?php if (isset($userRole) && $userRole === 'admin'): ?>
+                                    <?php
+                                    // Suppose que le nom du fichier clé est le nom du cert avec .key.pem au lieu de .cert.pem
+                                    $intermediateKeyName = str_replace('.cert.pem', '.key.pem', $intermediate['name']);
+                                    ?>
+                                    <a href="/certificates/download?type=intermediate&perimeter=<?= urlencode($intermediate['perimeter_name']) ?>&file=<?= urlencode($intermediateKeyName) ?>" class="button" style="margin-left: 10px;">
+                                        <?= htmlspecialchars($translations['download_private_key'] ?? 'Télécharger Clé Privée (.key)') ?>
+                                    </a>
+                                <?php endif; ?>
+                            </div>
+                        </div>
 
                         <h5><?= htmlspecialchars($translations['associated_final_certificates_title'] ?? 'Associated Final Certificates') ?></h5>
                         <?php if (isset($intermediate['final_certificates']) && !empty($intermediate['final_certificates'])): ?>
                             <ul>
                                 <?php foreach ($intermediate['final_certificates'] as $finalCert): ?>
-                                    <li>
-                                        <?= htmlspecialchars($finalCert['name']) ?>
-                                        (<?= htmlspecialchars($translations['type'] ?? 'Type:') ?> <?= htmlspecialchars($finalCert['type']) ?>,
-                                        <?= htmlspecialchars($translations['expires'] ?? 'Expires:') ?> <?= htmlspecialchars($finalCert['expiration_date']) ?>,
-                                        <?= htmlspecialchars($translations['revoked'] ?? 'Revoked:') ?> <?= $finalCert['is_revoked'] ? htmlspecialchars($translations['yes'] ?? 'Yes') : htmlspecialchars($translations['no'] ?? 'No') ?>)
-                                        <p>
+                                    <li class="certificate-entry">
+                                        <div class="certificate-info">
+                                            <?= htmlspecialchars($finalCert['name']) ?>
+                                            (<?= htmlspecialchars($translations['type'] ?? 'Type:') ?> <?= htmlspecialchars($finalCert['type']) ?>,
+                                            <?= htmlspecialchars($translations['expires'] ?? 'Expires:') ?> <?= htmlspecialchars($finalCert['expiration_date']) ?>,
+                                            <?= htmlspecialchars($translations['revoked'] ?? 'Revoked:') ?> <?= $finalCert['is_revoked'] ? htmlspecialchars($translations['yes'] ?? 'Yes') : htmlspecialchars($translations['no'] ?? 'No') ?>)
+                                        </div>
+                                        <div class="certificate-actions">
                                             <a href="/certificates/download?type=simple&perimeter=<?= urlencode($intermediate['perimeter_name']) ?>&file=<?= urlencode($finalCert['name']) ?>" class="button download-button-small">
                                                 <?= htmlspecialchars($translations['download_certificate_pem'] ?? 'Download Certificate (.pem)') ?>
                                             </a>
@@ -92,7 +98,7 @@ require_once APP_ROOT_DIR . '/src/Views/shared/header.php';
                                                     <?= htmlspecialchars($translations['download_private_key'] ?? 'Télécharger Clé Privée (.key)') ?>
                                                 </a>
                                             <?php endif; ?>
-                                        </p>
+                                        </div>
                                     </li>
                                 <?php endforeach; ?>
                             </ul>