Merge pull request #139 from yaal-coop/suite-numerique

Intégration du front la suite numérique
numerique-gouv · Jul 23, 2024 · b431ac7 · b431ac7
2 parents 043ec14 + 6c8eee2
commit b431ac7
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 1 deletion.
diff --git a/web.env.example b/web.env.example
@@ -83,6 +83,7 @@ REDIS_URL=broker:6379  # SHARED between worker and web services, used for backgr
 
 # Feature flags
 FILE_SHARING=on
+ENABLE_LASUITENUMERIQUE=off
 
 MATOMO_URL=
 MATOMO_SITE_ID=
diff --git a/web/b3desk/settings.py b/web/b3desk/settings.py
@@ -1048,3 +1048,6 @@ def get_email_whitelist(
 
     SENTRY_DSN: Optional[str] = None
     """Sentry DSN to catch exceptions."""
+
+    ENABLE_LASUITENUMERIQUE: Optional[bool] = False
+    """Enable LaSuite numerique homepage style."""
diff --git a/web/b3desk/static/css/global.css b/web/b3desk/static/css/global.css
@@ -196,6 +196,12 @@ form.delete {
 	opacity: 0;
   }
 
+/* homepage lasuite */
+
+.lasuite-homepage__content {
+  margin-bottom: calc(-7rem + 2px);
+}
+
 /* modal */
 .scampi-modal {
   left: 0;

diff --git a/web/b3desk/static/lasuite/homepage-gaufre.css b/web/b3desk/static/lasuite/homepage-gaufre.css
diff --git a/web/b3desk/templates/header-lasuite.html b/web/b3desk/templates/header-lasuite.html
@@ -0,0 +1,44 @@
+    <header role="banner" class="fr-header lasuite-header">
+        <div class="fr-header__body">
+            <div class="fr-container lasuite-container">
+                <div class="fr-header__body-row">
+                    <div class="fr-header__brand lasuite-header__brand fr-enlarge-link">
+                        <div class="fr-header__brand-top lasuite-header__brand-top">
+                            <div class="fr-header__logo"><p class="fr-logo">{{ service_title }}</p></div>
+                        </div>
+                        <div class="fr-header__service lasuite-header__service">
+                            <a
+                                class="lasuite-header__service-link"
+                                href="/"
+                                title="Accueil - {{ service_title }}"
+                                aria-label="Accueil - {{ service_title }}"
+                            >
+                                <img
+                                    class="lasuite-header__service-logo fr-responsive-img"
+                                    src="https://integration.lasuite.numerique.gouv.fr/_astro/webinaire.CkOyU_O8_Z1uyOw6.svg"
+                                    alt=""
+                                />
+                                <p class="fr-header__service-title lasuite-header__service-title">
+                                    {{ service_title }}
+                                </p>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="fr-header__tools">
+                        <div
+                            class="fr-header__tools-links lasuite-header__tools-links"
+                            data-fr-js-header-links="true"
+                        >
+                            <button
+                                type="button"
+                                class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
+                                title="Les services de La Suite numérique"
+                            >
+                                Les services de La Suite numérique
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
diff --git a/web/b3desk/templates/jumbotron.html b/web/b3desk/templates/jumbotron.html
@@ -25,7 +25,58 @@
         {% endif %}
     </div>
 </div>
+{% elif config.get("ENABLE_LASUITENUMERIQUE") %}
+<!-- Contenu de la homepage non connecté avec la suite -->
+<div class="lasuite-homepage__wrapper">
+    <div class="fr-container fr-p-0 lasuite-container">
+        <div class="lasuite-homepage__content">
+            <div class="fr-container--fluid">
+                <div class="fr-grid-row">
+                    <div class="lasuite-homepage__main-col">
+                        <div class="lasuite-homepage__tagline-container">
+                            <h1 class="lasuite-homepage__tagline">
+                                <strong class="lasuite-homepage__tagline-strong">
+                                    {{ service_title }}
+                                </strong>
+                                <br>
+                                {% trans %}{{ service_tagline }}{% endtrans %}
+                            </h1>
+                        </div>
+                    </div>
+                    <div class="lasuite-homepage__secondary-col">
+                        <div class="lasuite-homepage__form-container">
+                            <div class="lasuite-homepage__form">
+                                <div>
+                                    <h2>{% trans %}Vous organisez régulièrement des {{ some_meetings }}{% endtrans %}</h2>
+                                    <p>
+                                        {% trans %}Vous êtes agent de l’État, créez un compte pour organiser et conserver vos {{ some_meetings }}.{% endtrans %}<br><br>
+                                        <a class="fr-btn" target="_blank" rel="noopener" href="{{ url_for("public.welcome") }}">{% trans %}Se connecter ou créer un compte{% endtrans %}</a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <picture class="lasuite-homepage__bg">
+        <source
+            srcset="
+                https://integration.lasuite.numerique.gouv.fr/api/backgrounds/v1/default.avif
+            "
+            type="image/avif"
+        />
+        <img
+            src="https://integration.lasuite.numerique.gouv.fr/api/backgrounds/v1/default.jpg"
+            alt=""
+            width="1920"
+            height="1200"
+        />
+    </picture>
+</div>
 {% else %}
+<!-- Contenu de la homepage non connecté sans la suite -->
 <div class="highlight-background {% if mail_meeting %}primary-section{% endif %}{% if not mail_meeting %}secondary-section{% endif %}">
     <div class="fr-container">
         <div class="fr-grid-row">
@@ -57,6 +108,7 @@ <h1 class="fr-text--lead fr-text--bold">{% trans %}Vous organisez régulièremen
         </div>
     </div>
 </div>
+
 {% if mail_meeting %}
 <div class="fr-container fr-my-4w">
     <div class="fr-grid-row">

diff --git a/web/b3desk/templates/layout.html b/web/b3desk/templates/layout.html
@@ -17,6 +17,9 @@
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/remixicon/remixicon.css') }}">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/spinner.css') }}">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='presentation/css/all.css') }}">
+        {% if config.get("ENABLE_LASUITENUMERIQUE") %}
+            <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lasuite/homepage-gaufre.css') }}">
+        {% endif %}
         <script>
             function generatePassWord(n){
                 var result = '';
@@ -33,7 +36,11 @@
     <body>
         <div id="js-modal-page">
             {% block header %}
-            {% include 'header.html' %}
+            {% if config.get("ENABLE_LASUITENUMERIQUE") and not user %}
+                {% include 'header-lasuite.html' %}
+            {% else %}
+                {% include 'header.html' %}
+            {% endif %}
             {% endblock %}
             <main role="main" id="main" >
                 {% with messages = get_flashed_messages(with_categories=true, category_filter=["error","success", "message", "warning"]) %}
@@ -79,6 +86,9 @@
                 })();
             </script>
             {% endif %}
+            {% if config.get("ENABLE_LASUITENUMERIQUE") %}
+                <script id="lasuite-gaufre-script" async defer src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"></script>
+            {% endif %}
             {% block js %}{% endblock %}
         </div>
     </body>

diff --git a/web/b3desk/templates/tools.html b/web/b3desk/templates/tools.html
@@ -33,6 +33,17 @@
                         </div>
                     </a>
                 </li>
+                {% if config.get("ENABLE_LASUITENUMERIQUE") %}
+                <li class="fr-ml-2w">
+                    <button
+                        type="button"
+                        class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
+                        title="Les services de La Suite numérique"
+                        >
+                        Les services de La Suite numérique
+                    </button>
+                </li>
+                {% endif %}
                 {% else %}
                 <li>
                     <a class="fr-btn" href="{{ url_for("public.welcome") }}">