Skip to content

Commit

Permalink
adapt login or signup modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@SebastienReuiller
SebastienReuiller committed Jul 30, 2024
1 parent 6c94c07 commit 8a94563
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 83 deletions.
101 changes: 46 additions & 55 deletions lemarche/templates/auth/_login_or_signup_modal.html
View file
Original file line number Diff line number Diff line change
@@ -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));
Expand Down
34 changes: 25 additions & 9 deletions lemarche/templates/siaes/_card_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
38 changes: 19 additions & 19 deletions lemarche/templates/siaes/_card_search_result.html
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 8a94563

Please sign in to comment.