From 8a945632d09668e5ab660f7f11c114f403c934f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Reuiller?= <sebastien@reuiller.email>
Date: Tue, 30 Jul 2024 17:33:10 +0200
Subject: [PATCH] adapt login or signup modal

---
 .../auth/_login_or_signup_modal.html          | 101 ++++++++----------
 lemarche/templates/siaes/_card_detail.html    |  34 ++++--
 .../templates/siaes/_card_search_result.html  |  38 +++----
 3 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/lemarche/templates/auth/_login_or_signup_modal.html b/lemarche/templates/auth/_login_or_signup_modal.html
index 3a9eddd5f..13ddea31d 100644
--- a/lemarche/templates/auth/_login_or_signup_modal.html
+++ b/lemarche/templates/auth/_login_or_signup_modal.html
@@ -1,71 +1,62 @@
-{% load static %}
-{% load theme_inclusion %}
-
 {% if not user.is_authenticated %}
-    <style>
-    .remix {
-    width: 24px;
-    height: 24px;
-    fill: #333;
-    }
-    </style>
-    <div class="modal fade modal-siae" id="login_or_signup_modal" tabindex="-1" role="dialog" aria-modal="true" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h3 class="modal-title" id="exampleModalLabel">Profitez gratuitement du Marché</h3>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
-                        <i class="ri-close-line"></i>
-                    </button>
-                </div>
-                <div class="modal-body home-content-body">
-                    <p class="mb-4">
-                        Ce ne sera pas long ! Inscrivez-vous et accédez à toutes les fonctionnalités du marché.
-                    </p>
-                    <ul class="list-unstyled mb-5">
-                        <li class="d-flex mb-2">
-                            <i class="text-success ri-checkbox-circle-fill display-2"></i>
-                            <span class="font-weight-bold ml-2">Publiez vos besoins auprès des structures, et retrouvez celles qui sont intéressées.</span>
-                        </li>
-                        <li class="d-flex mb-2">
-                            <i class="text-success ri-checkbox-circle-fill display-2"></i>
-                            <span class="font-weight-bold ml-2">Téléchargez la liste complète des structures figurant sur le marché.</span>
-                        </li>
-                        <li class="d-flex mb-2">
-                            <i class="text-success ri-checkbox-circle-fill display-2"></i>
-                            <span class="font-weight-bold ml-2">Créez des listes d'achat et sauvegardez vos structures favorites.</span>
-                        </li>
-                        <li class="d-flex mb-2">
-                            <i class="text-success ri-checkbox-circle-fill display-2"></i>
-                            <span class="font-weight-bold ml-2">Accédez aux coordonnées des structures.</span>
-                        </li>
-                    </ul>
-                    <div class="text-center">
-                        <a href="{% url 'auth:signup' %}?next=next-params-to-replace" id="auth-link" class="btn btn-sm btn-primary">Créer un compte</a>
-                    </div>
-                    <hr class="my-5" data-text="ou" />
-                    <div class="text-center">
-                        <p class="mb-0">Vous avez déjà un compte ?</p>
-                        <a href="{% url 'auth:login' %}?next=next-params-to-replace" id="auth-link" class="btn btn-sm btn-link">Se connecter</a>
+    <dialog aria-labelledby="login_or_signup_modal_title" role="dialog" id="login_or_signup_modal" class="fr-modal">
+        <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" title="Fermer la fenêtre modale" aria-controls="login_or_signup_modal">Fermer</button>
+                        </div>
+                        <div class="fr-modal__content">
+                            <h3 id="login_or_signup_modal_title" class="fr-modal__title">Profitez gratuitement du Marché</h3>
+                            <p>
+                                Ce ne sera pas long ! Inscrivez-vous et accédez à toutes les fonctionnalités du marché.
+                            </p>
+                            <ul class="fr-text--bold">
+                                <li class="fr-icon-checkbox-circle-fill">
+                                    Publiez vos besoins auprès des structures, et retrouvez celles qui sont intéressées.
+                                </li>
+                                <li class="fr-icon-checkbox-circle-fill">
+                                    Téléchargez la liste complète des structures figurant sur le marché.
+                                </li>
+                                <li class="fr-icon-checkbox-circle-fill">
+                                    Créez des listes d'achat et sauvegardez vos structures favorites.
+                                </li>
+                                <li class="fr-icon-checkbox-circle-fill">
+                                    Accédez aux coordonnées des structures.
+                                </li>
+                            </ul>
+                            <ul class="fr-btns-group">
+                                <li>
+                                    <a href="{% url 'auth:signup' %}?next=next-params-to-replace" id="auth-link" class="fr-btn">Créer un compte</a>
+                                </li>
+                            </ul>
+                            <p class="fr-hr-or fr-my-4v">ou</p>
+                            <p>Vous avez déjà un compte ?</p>
+                            <ul class="fr-btns-group">
+                                <li>
+                                    <a href="{% url 'auth:login' %}?next=next-params-to-replace" id="auth-link" class="fr-btn fr-btn--tertiary">Se connecter</a>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </dialog>
 
     <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
-        const MODAL_ID = '#login_or_signup_modal';
-        $(MODAL_ID).on('show.bs.modal', function (event) {
+        const MODAL_ID = 'login_or_signup_modal';
+        document.getElementById(MODAL_ID).addEventListener('dsfr.disclose', (event) => {
             // Button that triggered the modal
-            var button = $(event.relatedTarget);
-
+            var button = event.explicitOriginalTarget;
             // Extract info from data-* attributes
-            var nextParams = button.data('next-params');
+            var nextParams = button.dataset['nextParams'];
 
             // Update the modal's content
             // - replace next param for login & signup
-            var modal = document.querySelector(MODAL_ID);
+            var modal = document.querySelector('#' + MODAL_ID);
             modal.querySelectorAll('#auth-link').forEach(link => {
                 var linkUrl = link.getAttribute('href');
                 link.setAttribute('href', linkUrl.replace('next-params-to-replace', nextParams));
diff --git a/lemarche/templates/siaes/_card_detail.html b/lemarche/templates/siaes/_card_detail.html
index 38018c081..30022730f 100644
--- a/lemarche/templates/siaes/_card_detail.html
+++ b/lemarche/templates/siaes/_card_detail.html
@@ -27,18 +27,34 @@ <h1>
                             <p class="fr-text--sm"><i>(Dernière activité il y a {{ siae.latest_activity_at|timesince }})</i></p>
                             {% if user.is_authenticated %}
                                 {% if siae.in_user_favorite_list_count_annotated %}
-                                    <a href="#" id="favorite-remove-modal-btn" class="fr-btn fr-btn--tertiary-no-outline" data-fr-opened="false" aria-controls="favorite_item_remove_modal" title="Dans votre liste d'achat">
-                                        <span class="fr-icon-star-fill" aria-hidden="true"></span>
-                                    </a>
+                                    <button 
+                                        id="favorite-remove-modal-btn"
+                                        class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-fill"
+                                        data-fr-opened="false"
+                                        aria-controls="favorite_item_remove_modal"
+                                        title="Dans votre liste d'achat">
+                                        Supprimer de votre liste d'achat
+                                    </button>
                                 {% else %}
-                                    <a href="#" id="favorite-add-modal-btn" class="fr-btn fr-btn--tertiary-no-outline" data-fr-opened="false" aria-controls="favorite_item_add_modal" title="Ajouter à votre liste d'achat" >
-                                        <span class="fr-icon-star-line" aria-hidden="true"></span>
-                                    </a>
+                                    <button
+                                        id="favorite-add-modal-btn"
+                                        class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-line"
+                                        data-fr-opened="false"
+                                        aria-controls="favorite_item_add_modal"
+                                        title="Ajouter à votre liste d'achat">
+                                        Ajouter à votre liste d'achat
+                                    </button>
                                 {% endif %}
                             {% else %}
-                                <a href="#" id="favorite-modal-btn" class="fr-btn fr-btn--tertiary-no-outline" data-fr-opened="false" aria-controls="login_or_signup_modal" data-next-params="{% url 'siae:detail' siae.slug %}" title="Ajouter à votre liste d'achat">
-                                    <span class="fr-icon-star-line" aria-hidden="true"></span>
-                                </a>
+                                <button
+                                    id="favorite-modal-btn"
+                                    class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-line"
+                                    data-fr-opened="false"
+                                    aria-controls="login_or_signup_modal"
+                                    data-next-params="{% url 'siae:detail' siae.slug %}"
+                                    title="Ajouter à votre liste d'achat">
+                                    Se connecter pour Ajouter à votre liste d'achat
+                                </button>
                             {% endif %}
                         </div>
                     </div>
diff --git a/lemarche/templates/siaes/_card_search_result.html b/lemarche/templates/siaes/_card_search_result.html
index d456d41e1..33bb254e6 100644
--- a/lemarche/templates/siaes/_card_search_result.html
+++ b/lemarche/templates/siaes/_card_search_result.html
@@ -1,5 +1,5 @@
 {% load static siae_sectors_display %}
-<div class="fr-card fr-enlarge-link fr-card--horizontal fr-card--horizontal-tier">
+<div class="fr-card fr-card--horizontal fr-card--horizontal-tier">
     <div class="fr-card__body">
         <div class="fr-card__content">
             <h3 class="fr-card__title">
@@ -47,40 +47,40 @@ <h3 class="fr-card__title">
                     <li>
                         {% if user.is_authenticated %}
                             {% if from_profile or siae.in_user_favorite_list_count_annotated %}
-                                <a href="#"
+                                <button 
                                    id="favorite-remove-modal-btn"
-                                   class="btn btn-favorite"
-                                   data-toggle="modal"
-                                   data-target="#favorite_item_remove_modal"
+                                   class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-fill"
+                                   data-fr-opened="false"
+                                   aria-controls="favorite_item_remove_modal"
                                    data-siae-id="{{ siae.id }}"
                                    data-siae-slug="{{ siae.slug }}"
                                    data-siae-name-display="{{ siae.name_display }}"
                                    title="Dans votre liste d'achat">
-                                    <i class="ri-star-fill ri-xl"></i>
-                                </a>
+                                   Supprimer de votre liste d'achat
+                                </button>
                             {% else %}
-                                <a href="#"
+                                <button
                                    id="favorite-add-modal-btn"
-                                   class="btn btn-favorite"
-                                   data-toggle="modal"
-                                   data-target="#favorite_item_add_modal"
+                                   class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-line"
+                                   data-fr-opened="false"
+                                   aria-controls="favorite_item_add_modal"
                                    data-siae-id="{{ siae.id }}"
                                    data-siae-slug="{{ siae.slug }}"
                                    data-siae-name-display="{{ siae.name_display }}"
                                    title="Ajouter à votre liste d'achat">
-                                    <i class="ri-star-line ri-xl"></i>
-                                </a>
+                                   Ajouter à votre liste d'achat
+                                </button>
                             {% endif %}
                         {% else %}
-                            <a href="#"
+                            <button
                                id="favorite-modal-btn"
-                               class="btn btn-favorite"
-                               data-toggle="modal"
-                               data-target="#login_or_signup_modal"
+                               class="fr-btn fr-btn--tertiary-no-outline fr-icon-star-line"
+                               data-fr-opened="false"
+                               aria-controls="login_or_signup_modal"
                                data-next-params="{% url 'siae:search_results' %}?{{ current_search_query_escaped }}"
                                title="Ajouter à votre liste d'achat">
-                                <i class="ri-star-line ri-xl"></i>
-                            </a>
+                               Se connecter pour Ajouter à votre liste d'achat
+                            </button>
                         {% endif %}
                     </li>
                 </ul>