chore(front): new look for updating personal information

numerique-gouv · Jan 8, 2025 · d512771 · d512771
1 parent c406e75
commit d512771
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 20 deletions.
diff --git a/assets/css/imports/custom.css b/assets/css/imports/custom.css
@@ -14,6 +14,20 @@
   white-space: break-spaces;
 }
 
+.border-shadow {
+  border-radius: 4px;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
+  /* border: 0.5px solid #e0e0e0; */
+}
+
+.blue-france {
+  color: #00008f;
+}
+
+.centered-content {
+  justify-content: center !important;
+}
+
 /* magic link icon */
 #magic-link-icon-inline {
   padding: 0 1.5rem;

diff --git a/public/timer.svg b/public/timer.svg
diff --git a/src/controllers/organization.ts b/src/controllers/organization.ts
@@ -212,6 +212,9 @@ export const getUnableToAutoJoinOrganizationController = async (
       pageTitle: "Rattachement en cours",
       csrfToken: csrfToken(req),
       email: user.email,
+      given_name: user.given_name,
+      family_name: user.family_name,
+      job: user.job,
       organization_label: cached_libelle,
       moderation_id,
     });

diff --git a/src/views/user/unable-to-auto-join-organization.ejs b/src/views/user/unable-to-auto-join-organization.ejs
@@ -1,29 +1,49 @@
 <div>
-    <h1 class="fr-h3">Rattachement en cours</h1>
+    <div class="fr-mt-7w fr-mb-2w">
+        <img src="/dist/timer.svg" alt="" />
+    </div>
+    <h1 class="fr-h2">Demande en cours</h1>
     <div>
-        <p class="fr-mt-2w">
-            ⏱️ Notre équipe étudie votre demande de rattachement à l’organisation <%=
-            organization_label; %> avec l’adresse email <%= email; %>.
-        </p>
-        <p>
-            Vous recevrez un email pour accéder à votre démarche dès que nous aurons
-            terminé.
+        <p class="fr-bold">
+            <b>
+                Nous vérifions votre lien à l’organisation, vous recevrez un email de confirmation dès que votre compte sera validé.
+            </b>
         </p>
         <p>
-            <i>(délai moyen : 1 jour ouvré)</i>
+            <i>
+                (temps de traitement moyen : 1 jour ouvré)
+            </i>
         </p>
     </div>
-    <div class="fr-card">
-        <div class="fr-card__body">
-            <div class="fr-card__content">
-                <div>
-                    <a
-                        class="fr-link fr-icon-question-line fr-link--icon-left"
-                        href="/users/edit-moderation?moderation_id=<%= moderation_id; %>"
-                    >
-                        J’ai fait une erreur dans ma demande
-                    </a>
-                </div>
+    <div class="border-shadow fr-p-2w">
+        <h2 class="fr-h4">Récapitulatif de votre demande</h2>
+        <div class="fr-grid-row">
+            <p class="fr-mb-2w fr-badge fr-badge--info fr-badge--no-icon fr-col-4 centered-content fr-mr-2w">Prénom</p>
+            <div class="fr-col-7">
+                <span ><b><%= given_name; %></b></span>
+                <span class="fr-icon-edit-fill fr-ml-1w blue-france" aria-hidden="true"></span>
+            </div>
+            <p class="fr-mb-2w fr-badge fr-badge--info fr-badge--no-icon fr-col-4 centered-content fr-mr-2w">Nom</p>
+            <div class="fr-col-7">
+                <span >
+                    <b><%= family_name; %></b>
+                </span>
+                <span class="fr-icon-edit-fill fr-ml-1w blue-france" aria-hidden="true"></span>
+            </div>
+            <p class="fr-mb-2w fr-badge fr-badge--info fr-badge--no-icon fr-col-4 centered-content fr-mr-2w">Email</p>
+            <div class="fr-col-7">
+                <span ><b><%= email; %></b></span>
+                <span class="fr-icon-edit-fill fr-ml-1w blue-france" aria-hidden="true"></span>
+            </div>
+            <p class="fr-mb-2w fr-badge fr-badge--info fr-badge--no-icon fr-col-4 centered-content fr-mr-2w">Profession</p>
+            <div class="fr-col-7">
+                <span ><b><%= job; %></b></span>
+                <span class="fr-icon-edit-fill fr-ml-1w blue-france" aria-hidden="true"></span>
+            </div>
+            <p class="fr-mb-2w fr-badge fr-badge--info fr-badge--no-icon fr-col-4 centered-content fr-mr-2w fr-mr-2w">Organisation</p>
+            <div class="fr-col-7">
+                <span ><b><%= organization_label; %></b></span>
+                <span class="fr-icon-edit-fill fr-ml-1w blue-france" aria-hidden="true"></span>
             </div>
         </div>
     </div>