add registration steps (#23892)

static/grandlyon-cut/_custom.scss

@@ -259,7 +259,56 @@ div#main-content {
             padding-bottom: 0;
         }
     }
-    div#registration_completion {
+	div.registration-steps {
+		position: relative;
+		ul {
+			padding: 0;
+			@media screen and (max-width: 800px) {
+				display: none;
+			}
+			li {
+				list-style-type: none;
+				display: inline-flex;
+				width: 24.5%;
+				box-sizing: border-box;
+				align-items: center;
+				flex-direction: column;
+				span {
+					&.marker {
+						border: 1px solid #000;
+						padding: 1em;
+						border-radius: 50%;
+						width: 1em;
+						display: inline-block;
+						text-align: center;
+						background: $body-background;
+						z-index: 10;
+					}
+					&.label {
+						margin-top: 0.5em;
+						display: block;
+						text-transform: uppercase;
+					}
+				}
+				&.current {
+					span.marker {
+						background: #000;
+						color: #fff;
+					}
+				}
+			}
+			&::before {
+				position: absolute;
+				top: calc(50% - 1em);
+				content: '';
+				border-top: 1px solid #000;
+				width: 74.5%;
+				left: 12.5%;
+				z-index: -1;
+			}
+		}
+	}
+    div#registration_completion, div.registration-steps {
         width: 60em;
         margin: 0 auto;
         h2 {

templates/authentic2_idp_oidc/authorization.html

@@ -1,5 +1,6 @@
 {% extends "authentic2/base-page.html" %}
 {% block content %}
+{% include "registration/registration_steps.html" with active_step="share" %}
   <form method="post" id="a2-oidc-authorization-form">
     <p class="highlight">Afin de poursuivre votre navigation <a href="{{ request.partner.url }}" style="color: {{ request.partner.color }}">{{ request.partner.name }}</a> souhaite accéder aux informations de votre {{ account_label }}.
     {% if scopes %}

templates/registration/registration_complete.html

@@ -2,6 +2,7 @@
 {% load i18n %}
 
 {% block content %}
+{% include "registration/registration_steps.html" with active_step="activation" %}
 <div id="registration_complete">
   <p class="hightlight">Un courriel a été envoyé à <strong>{{ request.session.registered_email }}</strong>.</p>
   <p>Suivez les instructions dans ce courriel pour poursuivre la création de votre compte.</p>

templates/registration/registration_completion_form.html

@@ -2,6 +2,7 @@
 {% load i18n %}
 
 {% block content %}
+{% include "registration/registration_steps.html" with active_step="completion" %}
 <div id="registration_completion">
   <h2>Finalisation de votre inscription</h2>
   <form method="post">

templates/registration/registration_form.html

@@ -2,6 +2,8 @@
 {% load i18n %}
 
 {% block content %}
+{% include "registration/registration_steps.html" with active_step="activation" %}
+
 <div id="registration">
   <h2>Créez votre {{ account_label }}</h2>
   <div id="methods">

templates/registration/registration_steps.html

@@ -0,0 +1,22 @@
+<div class="registration-steps">
+  <ul>
+    {% for step in registration_steps %}
+    {% endfor %}
+    <li {% if active_step == 'creation' %}class="current"{% endif %}>
+      <span class="marker">1</span>
+      <span class="label">Création de compte</span>
+    </li>
+    <li {% if active_step == 'activation' %}class="current"{% endif %}>
+      <span class="marker">2</span>
+      <span class="label">Activation de compte</span>
+    </li>
+    <li {% if active_step == 'completion' %}class="current"{% endif %}>
+      <span class="marker">3</span>
+      <span class="label">Complétion du profil</span>
+    </li>
+    <li {% if active_step == 'share' %}class="current"{% endif %}>
+      <span class="marker">4</span>
+      <span class="label">Partage des données</span>
+    </li>
+  </ul>
+</div>