feat(messages): Add support for dismissable notifications

src/app/settings.py

@@ -4,6 +4,7 @@ Django settings for the DGSI project.
 
 from pathlib import Path
 
+from django.contrib.messages import constants as messages
 from loadcredential import Credentials
 
 credentials = Credentials(env_prefix="DGSI_")
@@ -201,6 +202,18 @@ SASS_PROCESSOR_ENABLED = True
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 
+##
+# Messages configuration
+
+MESSAGE_TAGS = {
+    messages.DEBUG: "is-dark",
+    messages.INFO: "is-primary",
+    messages.SUCCESS: "is-success",
+    messages.WARNING: "is-warning",
+    messages.ERROR: "is-danger",
+}
+
+
 ###
 # Extend settings when running in dev mode
 

src/dgsi/views.py

@@ -1,8 +1,10 @@
 from asgiref.sync import async_to_sync
 from django.contrib.auth.mixins import LoginRequiredMixin
+from django.contrib.messages.views import SuccessMessageMixin
 from django.core.mail import EmailMessage
 from django.template.loader import render_to_string
 from django.urls import reverse_lazy
+from django.utils.translation import gettext_lazy as _
 from django.views.generic import FormView, TemplateView
 
 from dgsi.forms import CreateKanidmAccountForm
@@ -24,9 +26,10 @@ class ProfileView(LoginRequiredMixin, TemplateView):
         )
 
 
-class CreateKanidmAccountView(StaffRequiredMixin, FormView):
+class CreateKanidmAccountView(StaffRequiredMixin, SuccessMessageMixin, FormView):
     form_class = CreateKanidmAccountForm
     template_name = "account/create_kanidm.html"
+    success_message = _("Compte DGNum pour %(displayname)s [%(name)s] créé.")
 
     success_url = reverse_lazy("dgsi:dgn-create_user")
 

src/shared/static/bulma/bulma.scss

@@ -16,3 +16,16 @@ body {
   flex-direction: column;
   justify-content: space-between;
 }
+
+#notifications {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  position: sticky;
+  display: block;
+  inset: 1.5rem;
+  z-index: 500;
+}
+
+.notification {
+  margin-bottom: var(--bulma-block-spacing);
+}

src/shared/static/js/dgsi.js

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+  (document.querySelectorAll(".notification .delete") || []).forEach(
+    ($delete) => {
+      const $notification = $delete.parentNode;
+      const dismiss = () => $notification.parentNode.removeChild($notification);
+
+      $delete.addEventListener("click", dismiss);
+      setTimeout(dismiss, 15000);
+    },
+  );
+});

src/shared/templates/_links.html

@@ -10,3 +10,6 @@
 <!-- CSS -->
 <link href="{% sass_src 'bulma/bulma.scss' %}" rel="stylesheet" type="text/css" />
 <link href="{% static 'tabler-icons/tabler-icons.min.css' %}" rel="stylesheet" type="text/css" />
+
+<!-- JS -->
+<script src="{% static 'js/dgsi.js' %}"></script>

src/shared/templates/base.html

@@ -7,7 +7,8 @@
     <meta name="description" content="Système d'information de la DGNum" />
     <title>DGNum</title>
 
-    {% block extra_head %}{% endblock extra_head %}
+    {% block extra_head %}
+    {% endblock extra_head %}
 
     {% include "_links.html" %}
   </head>
@@ -16,6 +17,15 @@
     {% include "_hero.html" %}
 
     <section class="section">
+      <div id="notifications">
+        {% for message in messages %}
+          <article class="notification is-light has-text-centered {{ message.tags }}">
+            <button class="delete"></button>
+            {{ message|safe }}
+          </article>
+        {% endfor %}
+      </div>
+
       {% block content %}
       {% endblock content %}
     </section>