From 8ca5002de44618d780f3c7c573ed3002ec885691 Mon Sep 17 00:00:00 2001
From: Brunelie Lauret <brunelie@yaal.coop>
Date: Thu, 14 Mar 2024 16:34:50 +0100
Subject: [PATCH] Mise au DSFR de la modale d'invitation

---
 .../templates/meeting/modals/invite.html      | 114 ++++++++++--------
 web/b3desk/templates/meeting/row.html         |   8 +-
 2 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/web/b3desk/templates/meeting/modals/invite.html b/web/b3desk/templates/meeting/modals/invite.html
index f4206741..2455d116 100644
--- a/web/b3desk/templates/meeting/modals/invite.html
+++ b/web/b3desk/templates/meeting/modals/invite.html
@@ -1,52 +1,72 @@
 <!-- Inviter -->
-<div class="modal-template" id="share-{{ meeting.id }}">
-    <div class="modal-body">
-        <h2 class="fr-h4">Inviter les modérateurs</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-            <div class="fr-col-xs-9 fr-col-sm-10">
-                <code id="meeting-{{ meeting.id }}-moderator-url">{{ meeting.get_signin_url(Role.moderator) }}</code>
-            </div>
-            <div class="fr-col">
-                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.moderator) }}');" title="Copier le lien modérateur dans le presse-papiers">
-                    <span class="ri-clipboard-line"></span>
-                </button>
-            </div>
-        </div>
-        <p>
-        <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_role", meeting=meeting, role=Role.moderator) }}">Rejoindre {{ the_meeting }} en tant que modérateur principal</a>
-        </p>
-
-        <h2 class="fr-h4">Inviter les participants</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-            <div class="fr-col-xs-9 fr-col-sm-10">
-                <code id="meeting-{{ meeting.id }}-attendee-url">{{ meeting.get_signin_url(Role.attendee) }}</code>
-            </div>
-            <div class="fr-col">
-                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.attendee) }}');" title="Copier le lien participant dans le presse-papiers">
-                    <span class="ri-clipboard-line"></span>
-                </button>
-            </div>
-        </div>
-        <p>
-        <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_role", meeting=meeting, role=Role.attendee) }}">Rejoindre {{ the_meeting }} en tant que participant</a>
-        </p>
+<dialog id="share-{{ meeting.id }}" class="fr-modal" role="dialog" aria-labelledby="share-{{ meeting.id }}-title">
+    <div class="fr-container fr-container--fluid fr-container-md">
+        <div class="fr-grid-row fr-grid-row--center">
+            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
+                <div class="fr-modal__body">
+                    <div class="fr-modal__header">
+                        <button class="fr-btn--close fr-btn" aria-controls="share-{{ meeting.id }}" title="Fermer">
+                            Fermer
+                        </button>
+                    </div>
+                    <div class="fr-modal__content">
+                        <h2 id="share-{{ meeting.id }}-title" class="fr-modal__title">
+                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>
+                            Inviter les modérateurs
+                        </h2>
+                        <p>En leur envoyant l’adresse ci-dessous :</p>
+                        <div class="fr-grid-row fr-text--sm">
+                            <div class="fr-col-xs-9 fr-col-sm-10">
+                                <code id="meeting-{{ meeting.id }}-moderator-url">{{ meeting.get_signin_url(Role.moderator) }}</code>
+                            </div>
+                            <div class="fr-col">
+                                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.moderator) }}');" title="Copier le lien modérateur dans le presse-papiers">
+                                    <span class="ri-clipboard-line"></span>
+                                </button>
+                            </div>
+                        </div>
+                        <p>
+                            <br>
+                            <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_role", meeting=meeting, role=Role.moderator) }}">Rejoindre {{ the_meeting }} en tant que modérateur principal</a>
+                        </p>
+                        <h2 id="share-{{ meeting.id }}-title" class="fr-modal__title">
+                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Inviter les participants</h2>
+                        <p>En leur envoyant l’adresse ci-dessous :</p>
+                        <div class="fr-grid-row fr-text--sm">
+                            <div class="fr-col-xs-9 fr-col-sm-10">
+                                <code id="meeting-{{ meeting.id }}-attendee-url">{{ meeting.get_signin_url(Role.attendee) }}</code>
+                            </div>
+                            <div class="fr-col">
+                                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.attendee) }}');" title="Copier le lien participant dans le presse-papiers">
+                                    <span class="ri-clipboard-line"></span>
+                                </button>
+                            </div>
+                        </div>
+                        <p>
+                            <br>
+                            <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_role", meeting=meeting, role=Role.attendee) }}">Rejoindre {{ the_meeting }} en tant que participant</a>
+                        </p>
 
-        <h2 class="fr-h4">Inviter les participants authentifiés {% if config.OIDC_ATTENDEE_SERVICE_NAME %}via {{ config.OIDC_ATTENDEE_SERVICE_NAME }} {% endif %}</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-            <div class="fr-col-xs-9 fr-col-sm-10">
-                <code id="meeting-{{ meeting.id }}-authenticated-attendee-url">{{ meeting.get_signin_url(Role.authenticated) }}</code>
-            </div>
-            <div class="fr-col">
-                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-authenticated-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.authenticated) }}');" title="Copier le lien participant authentifié dans le presse-papiers">
-                    <span class="ri-clipboard-line"></span>
-                </button>
+                        <h2 id="share-{{ meeting.id }}-title" class="fr-modal__title">
+                            <span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Inviter les participants authentifiés {% if config.OIDC_ATTENDEE_SERVICE_NAME %}via {{ config.OIDC_ATTENDEE_SERVICE_NAME }} {% endif %}</h2>
+                        <p>En leur envoyant l’adresse ci-dessous :</p>
+                        <div class="fr-grid-row fr-text--sm">
+                            <div class="fr-col-xs-9 fr-col-sm-10">
+                                <code id="meeting-{{ meeting.id }}-authenticated-attendee-url">{{ meeting.get_signin_url(Role.authenticated) }}</code>
+                            </div>
+                            <div class="fr-col">
+                                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-authenticated-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.get_signin_url(Role.authenticated) }}');" title="Copier le lien participant authentifié dans le presse-papiers">
+                                    <span class="ri-clipboard-line"></span>
+                                </button>
+                            </div>
+                        </div>
+                        <p>
+                            <br>
+                            <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_authenticated", meeting_id=meeting.id) }}">Rejoindre {{ the_meeting }} en tant que participant authentifié</a>
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
-        <p>
-        <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("join.join_meeting_as_authenticated", meeting_id=meeting.id) }}">Rejoindre {{ the_meeting }} en tant que participant authentifié</a>
-        </p>
     </div>
-</div>
+</dialog>
diff --git a/web/b3desk/templates/meeting/row.html b/web/b3desk/templates/meeting/row.html
index 889f15ec..b6e5307e 100644
--- a/web/b3desk/templates/meeting/row.html
+++ b/web/b3desk/templates/meeting/row.html
@@ -33,13 +33,7 @@
     {% else %}
     <div class="fr-col-xs-6 fr-col-sm-6 fr-col-lg-6">
         <a href="{{ url_for("join.join_meeting_as_role", meeting=meeting, role=Role.moderator) }}" target="_blank" rel="noopener" class="fr-btn fr-btn--primary" title="{% trans meeting_name=meeting.name %}Lancer {{ meeting_name }} - nouvelle fenêtre{% endtrans %}">{% trans %}Lancer{% endtrans %}</a>
-        <button
-            class="js-modal fr-btn fr-btn--secondary btn-invite"
-            title="{% trans meeting_name=meeting.name %}Inviter à {{ meeting_name }}{% endtrans %} "
-            data-modal-content-id="share-{{ meeting.id }}"
-            data-modal-title="{% trans meeting_name=meeting.name %}Inviter à {{ meeting_name }}{% endtrans %} "
-            data-modal-close-text="x"
-            data-modal-close-title="{% trans %}Fermer la fenêtre modale{% endtrans %}">
+        <button class="fr-btn fr-btn--secondary"  data-fr-opened="false" aria-controls="share-{{ meeting.id }}">
             {% trans %}Inviter{% endtrans %}
         </button>
     </div>