Merge pull request #894 from numerique-gouv/rdumazert/delete-verify-e…

…mail-route refactor(routes): delete verify-email-help route
numerique-gouv · Jan 8, 2025 · 95c24c1 · 95c24c1
2 parents bb494f8 + 79ffeeb
commit 95c24c1
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 140 deletions.
diff --git a/assets/js/disabled-with-countdown.js b/assets/js/disabled-with-countdown.js
@@ -15,19 +15,19 @@ document.addEventListener(
           secondsToEndDate--;
 
           const prefixText =
-            element.value.match(/(.*)( \(disponible dans \d+:\d+\))/)?.[1] ||
-            element.value;
+            element.textContent.match(
+              /(.*)(\s+\(disponible dans \d+:\d+\))/,
+            )?.[1] || element.textContent;
           let suffixText = "";
 
           if (secondsToEndDate > 0) {
             const minutes = Math.floor(secondsToEndDate / 60);
             const seconds = String(secondsToEndDate % 60).padStart(2, "0");
             suffixText = ` (disponible dans ${minutes}:${seconds})`;
           }
+          element.textContent = prefixText + suffixText;
 
-          element.value = prefixText + suffixText;
-
-          if (secondsToEndDate <= 0) {
+          if (secondsToEndDate <= 0 || Number.isNaN(secondsToEndDate)) {
             element.disabled = false;
             clearInterval(intervalId);
           }

diff --git a/cypress/e2e/signin_with_email_verification/index.cy.ts b/cypress/e2e/signin_with_email_verification/index.cy.ts
@@ -6,7 +6,7 @@ describe("sign-in with email verification renewal", () => {
 
     cy.login("[email protected]");
 
-    cy.contains("Vérifier votre email");
+    cy.contains("Confirmer votre adresse");
 
     cy.contains(
       "Information : pour garantir la sécurité de votre compte, nous avons besoin d’authentifier votre navigateur.",
@@ -36,25 +36,17 @@ describe("sign-in with email verification renewal", () => {
 
     cy.login("[email protected]");
 
-    cy.get('a[href="/users/verify-email-help"]')
-      .contains(
-        "J'ai attendu quelques secondes et je ne reçois pas de code de vérification",
-      )
-      .click();
-
-    cy.contains("Vous ne recevez pas le code de vérification");
-
-    cy.get('[action="/users/send-email-verification"]  [type="submit"]')
-      .contains("Cliquez ici pour recevoir un nouveau code")
+    cy.get('[action="/users/send-email-verification"]')
+      .contains("Recevoir un nouvel email")
       .should("be.disabled");
 
     // Wait for countdown to last
     cy.wait(10 * 1000);
 
     cy.maildevDeleteAllMessages();
 
-    cy.get('[action="/users/send-email-verification"]  [type="submit"]')
-      .contains("Cliquez ici pour recevoir un nouveau code")
+    cy.get('[action="/users/send-email-verification"]')
+      .contains("Recevoir un nouvel email")
       .click();
 
     cy.contains(

diff --git a/cypress/e2e/signup_entreprise_unipersonnelle/index.cy.ts b/cypress/e2e/signup_entreprise_unipersonnelle/index.cy.ts
@@ -15,7 +15,9 @@ describe("Signup into new entreprise unipersonnelle", () => {
     cy.get('[action="/users/sign-up"]  [type="submit"]').click();
 
     // Check that the website is waiting for the user to verify their email
-    cy.get("#verify-email > p").contains("[email protected]");
+    cy.get("#verify-email > div > p").contains(
+      "[email protected]",
+    );
 
     cy.maildevGetMessageBySubject("Vérification de votre adresse email")
       .then((email) => {

diff --git a/src/controllers/user/verify-email.ts b/src/controllers/user/verify-email.ts
@@ -49,6 +49,11 @@ export const getVerifyEmailController = async (
       pageTitle: "Vérifier votre email",
       notifications: await getNotificationsFromRequest(req),
       email,
+      countdownEndDate: moment(updatedUser.verify_email_sent_at)
+        .add(MIN_DURATION_BETWEEN_TWO_VERIFICATION_CODE_SENDING_IN_SECONDS, "s")
+        .tz("Europe/Paris")
+        .locale("fr")
+        .format(),
       csrfToken: csrfToken(req),
       newCodeSent: new_code_sent,
       codeSent,
@@ -136,28 +141,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,18 @@
 <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="<%- locals.buttonFullWidth ? ' fr-btn btn--fullwidth' : '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-help.ejs b/src/views/user/verify-email-help.ejs
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">
+                    <p>Un <% if (newCodeSent) { %>nouveau <% } %>code de vérification a été envoyé à <%= email; %>.
+                    </p>
+                </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,37 @@
                         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, buttonFullWidth: true}) %>
+        </form>
+        <form
+            class="inline-form" autocomplete="off"
+            action="/users/send-email-verification"
+            method="post"
+        >
+            <input type="hidden" name="_csrf" value="<%= csrfToken; %>">
+            <button data-countdown-end-date="<%= countdownEndDate %>"
+            class="fr-btn fr-btn--tertiary fr-mb-2w disabled-with-countdown btn--fullwidth" 
+            >
+                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>
+    <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 class="card-button-container fr-mt-2w">
+        <span>
+          <button
+            class="fr-btn fr-btn--tertiary fr-icon-arrow-go-back-line fr-btn--icon-left go-back-link"
+          >
+            retour
+          </button>
+        </span>
+        <span></span>
     </div>
 </div>
+<script type="module" src="<%= js('disabled-with-countdown.js') %>"></script>
+<script type="module" src="<%= js('go-back.js') %>"></script>