refactor(routes): delete verify-email-help route

numerique-gouv · Dec 18, 2024 · ad76c34 · ad76c34
1 parent afdfb04
commit ad76c34
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 83 deletions.
diff --git a/assets/js/disabled-with-countdown.js b/assets/js/disabled-with-countdown.js
@@ -10,25 +10,25 @@ document.addEventListener(
         const nowInSeconds = new Date().getTime() / 1000;
         let secondsToEndDate = Math.round(endDateInSeconds - nowInSeconds);
         let intervalId;
+
         element.disabled = true;
-        intervalId = setInterval(function () {
-          secondsToEndDate--;
 
-          const prefixText =
-            element.value.match(/(.*)( \(disponible dans \d+:\d+\))/)?.[1] ||
-            element.value;
-          let suffixText = "";
+        function updateButtonText() {
+          const minutes = Math.floor(secondsToEndDate / 60);
+          const seconds = String(secondsToEndDate % 60).padStart(2, "0");
+          element.textContent = `Recevoir un nouvel email (disponible dans ${minutes}:${seconds})`;
+        }
 
-          if (secondsToEndDate > 0) {
-            const minutes = Math.floor(secondsToEndDate / 60);
-            const seconds = String(secondsToEndDate % 60).padStart(2, "0");
-            suffixText = ` (disponible dans ${minutes}:${seconds})`;
-          }
+        updateButtonText();
 
-          element.value = prefixText + suffixText;
+        intervalId = setInterval(function () {
+          secondsToEndDate--;
 
-          if (secondsToEndDate <= 0) {
+          if (secondsToEndDate > 0) {
+            updateButtonText();
+          } else {
             element.disabled = false;
+            element.textContent = "Recevoir un nouvel email";
             clearInterval(intervalId);
           }
         }, 1000);

diff --git a/src/controllers/user/verify-email.ts b/src/controllers/user/verify-email.ts
@@ -35,8 +35,11 @@ export const getVerifyEmailController = async (
 
     const { new_code_sent } = await schema.parseAsync(req.query);
 
-    const { email, needs_inclusionconnect_onboarding_help } =
-      getUserFromAuthenticatedSession(req);
+    const {
+      email,
+      needs_inclusionconnect_onboarding_help,
+      verify_email_sent_at,
+    } = getUserFromAuthenticatedSession(req);
 
     const { codeSent, updatedUser } = await sendEmailAddressVerificationEmail({
       email,
@@ -49,7 +52,12 @@ export const getVerifyEmailController = async (
       pageTitle: "Vérifier votre email",
       notifications: await getNotificationsFromRequest(req),
       email,
-      csrfToken: csrfToken(req),
+      countdownEndDate: moment(verify_email_sent_at)
+        .add(MIN_DURATION_BETWEEN_TWO_VERIFICATION_CODE_SENDING_IN_SECONDS, "s")
+        .tz("Europe/Paris")
+        .locale("fr")
+        .format(),
+      csrfToken: email && csrfToken(req),
       newCodeSent: new_code_sent,
       codeSent,
       needs_inclusionconnect_onboarding_help,
@@ -136,28 +144,3 @@ export const postSendEmailVerificationController = async (
     next(error);
   }
 };
-
-export const getVerifyEmailHelpController = async (
-  req: Request,
-  res: Response,
-  next: NextFunction,
-) => {
-  try {
-    const { email, verify_email_sent_at } =
-      getUserFromAuthenticatedSession(req);
-
-    return res.render("user/verify-email-help", {
-      pageTitle: "Aide code de vérification",
-      email,
-      countdownEndDate: moment(verify_email_sent_at)
-        .add(MIN_DURATION_BETWEEN_TWO_VERIFICATION_CODE_SENDING_IN_SECONDS, "s")
-        .tz("Europe/Paris")
-        .locale("fr")
-        .format(),
-      csrfToken: email && csrfToken(req),
-      illustration: "illu-password.svg",
-    });
-  } catch (error) {
-    next(error);
-  }
-};
diff --git a/src/routers/user.ts b/src/routers/user.ts
@@ -52,7 +52,6 @@ import {
 } from "../controllers/user/update-personal-informations";
 import {
   getVerifyEmailController,
-  getVerifyEmailHelpController,
   postSendEmailVerificationController,
   postVerifyEmailController,
 } from "../controllers/user/verify-email";
@@ -191,13 +190,6 @@ export const userRouter = () => {
     issueSessionOrRedirectController,
   );
 
-  userRouter.get(
-    "/verify-email-help",
-    checkUserTwoFactorAuthMiddleware,
-    csrfProtectionMiddleware,
-    getVerifyEmailHelpController,
-  );
-
   userRouter.post(
     "/send-email-verification",
     rateLimiterMiddleware,

diff --git a/src/views/partials/card-button-container.ejs b/src/views/partials/card-button-container.ejs
@@ -1,16 +1,16 @@
 <div class="card-button-container">
-    <span>
-        <% if (locals.showGoBackButton) { %>
+    <% if (locals.showGoBackButton) { %>
+        <span>
             <button
                     type="button"
                     class="fr-btn fr-btn--tertiary fr-icon-arrow-go-back-line fr-btn--icon-left go-back-link"
             >
                 retour
             </button>
             <script type="module" src="<%= js('go-back.js') %>"></script>
-        <% } %>
-    </span>
-    <button class="fr-btn" type="submit" <% if (locals.ariaLabel) { %>aria-label="<%= locals.ariaLabel; %>"<% } %>>
+        </span>
+    <% } %>
+    <button class="fr-btn" <%- locals.button ? `style="${locals.button}"` : '' %>  type="submit" <% if (locals.ariaLabel) { %>aria-label="<%= locals.ariaLabel; %>"<% } %>>
         <%= label; %>
     </button>
 </div>
diff --git a/src/views/user/verify-email.ejs b/src/views/user/verify-email.ejs
@@ -1,7 +1,7 @@
 <div>
     <%- include('../partials/notifications.ejs', {notifications: notifications, noWrapperDiv: true}) %>
     <h1 class="fr-h3">
-        Vérifier votre email
+        Confirmer votre adresse
     </h1>
     <% if (locals.needs_inclusionconnect_onboarding_help) { %>
         <div class="fr-callout fr-callout--blue-ecume fr-icon-lightbulb-line">
@@ -11,24 +11,19 @@
         </div>
     <% } %>
     <div>
-        <form id="verify-email" action="/users/verify-email" method="post" class="fr-mb-5w">
+        <form id="verify-email" action="/users/verify-email" method="post" class="fr-mb-4w">
             <% if (codeSent || newCodeSent) { %>
-                <p>
-                    Un <% if (newCodeSent) { %>nouveau <% } %>code de vérification a été envoyé à
-                    <span id="email-badge-lowercase" class="fr-badge fr-badge--info fr-badge--no-icon">
-                        <%= email; %>
-                    </span>.
-                </p>
+                <div class="fr-alert fr-alert--success fr-mb-4w">
+                    <h3 class="fr-alert__title">Un <% if (newCodeSent) { %>nouveau <% } %>code de vérification a été envoyé à <%= email; %>.
+                    </h3>
+                </div>
             <% } %>
-
             <input type="hidden" name="_csrf" value="<%= csrfToken; %>" />
-
-
-            <div class="fr-input-group">
+            <div class="fr-input-group fr-mb-2w">
                 <label class="fr-label" for="verify_email_token">
-                    Code de vérification à 10 chiffres
+                    Vérifiez vos emails et insérez le code à 10 chiffres.
                     <span class="fr-hint-text">
-                        Copiez-collez ou saisissez le code reçu par email
+                        Code de confirmation
                     </span>
                 </label>
                 <input
@@ -38,21 +33,26 @@
                         name="verify_email_token"
                 >
             </div>
-            <%- include('../partials/card-button-container.ejs', {label: 'Vérifier', showGoBackButton: true}) %>
+            <%- include('../partials/card-button-container.ejs', {label: 'Valider', showGoBackButton: false, button:'width: 100%; justify-content: center;', margin: "fr-2w"}) %>
+        </form>
+        <form
+            class="inline-form" autocomplete="off"
+            action="/users/send-email-verification"
+            method="post"
+        >
+            <input type="hidden" name="_csrf" value="<%= csrfToken; %>">
+            <button class="fr-btn fr-btn--tertiary fr-mb-2w disabled-with-countdown" 
+            data-countdown-end-date="<%= countdownEndDate %>"
+            style="width: 100%; justify-content: center;">
+                Recevoir un nouvel email
+            </button>
         </form>
     </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/verify-email-help"
-                    >
-                        J'ai attendu <%= minDurationToWaitInMinutes %> et je ne reçois pas de code de vérification
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
+    <a
+        class="fr-link fr-icon-question-line fr-link--icon-right"
+        href="https://agentconnect.crisp.help/fr/article/pourquoi-je-ne-recois-pas-de-code-ou-lien-x1gf1t/"
+    >
+        Vous ne recevez rien ? Consulter la page d'aide
+    </a>
 </div>
+<script type="module" src="<%= js('disabled-with-countdown.js') %>"></script>