♻️ Refactor duplicate views for mfa settings

cypress/e2e/activate_totp/index.cy.ts

@@ -8,7 +8,7 @@ describe("add 2fa authentication", () => {
 
     cy.contains("Double authentification");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 

cypress/e2e/mfa_decision_helper_account/index.cy.ts

@@ -6,7 +6,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 
@@ -31,7 +31,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 
@@ -51,7 +51,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 
@@ -83,7 +83,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 
@@ -113,7 +113,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 
@@ -139,7 +139,7 @@ describe("mfa decision helper (account)", () => {
 
     cy.login("lion.eljonson@darkangels.world");
 
-    cy.get('[href="/double-authentication"]')
+    cy.get('[href="/double-authentication-choice"]')
       .contains("Configurer la double authentification")
       .click();
 

src/controllers/2fa.ts

@@ -20,7 +20,7 @@ export const getDoubleAuthenticationController = async (
   try {
     const { id: user_id } = getUserFromAuthenticatedSession(req);
 
-    return res.render("double-authentication", {
+    return res.render("double-authentication-choice", {
       pageTitle: "Double authentification",
       notifications: await getNotificationsFromRequest(req),
       isAuthenticatorConfigured: await isTotpConfiguredForUser(user_id),

src/controllers/user/two-factors-authentication-configuration.ts

@@ -120,8 +120,12 @@ export const postTotpConfigurationController = async (
     return res.redirect("/users/2fa-successfully-configured");
   } catch (error) {
     if (error instanceof InvalidTotpTokenError) {
+      const { "totp-tool-type": totpToolType } = req.body;
+      const totpToolTypeParam = totpToolType
+        ? `&totp-tool-type=${encodeURIComponent(totpToolType)}`
+        : "";
       return res.redirect(
-        "/users/totp-configuration?notification=invalid_totp_token",
+        `/users/totp-configuration?notification=invalid_totp_token${totpToolTypeParam}`,
       );
     }
 

src/routers/main.ts

@@ -57,7 +57,7 @@ export const mainRouter = (app: Express) => {
   );
 
   mainRouter.get(
-    "/double-authentication",
+    "/double-authentication-choice",
     nocache(),
     urlencoded({ extended: false }),
     ejsLayoutMiddlewareFactory(app, true),

src/views/connection-and-account.ejs

@@ -110,7 +110,7 @@
             <% if (isAuthenticatorConfigured || passkeys.length > 0){ %>
                 <a
                     class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-add-line"
-                    href="/double-authentication"
+                    href="/double-authentication-choice"
                 >
                     Ajouter une méthode de validation supplémentaire
                 </a>
@@ -120,7 +120,7 @@
                 <p>
                     Vous n'avez pas encore configuré la double authentification (2FA).
                 </p>
-                <a class="fr-btn fr-btn--secondary" href="/double-authentication">
+                <a class="fr-btn fr-btn--secondary" href="/double-authentication-choice">
                     Configurer la double authentification
                 </a>
             <% } %>

src/views/double-authentication-choice.ejs

@@ -0,0 +1,11 @@
+<div class="dashboard-container">
+  <%- include('partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
+  <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
+    <%- include('mfa-settings/double-authentication-choice-layout.ejs', {
+      withInfoAlert: false,
+      isTotpAppInstalledUrl: '/is-totp-app-installed',
+      verifyRegistrationAction: '/passkeys/verify-registration',
+      csrfToken: csrfToken,
+    }); %>
+  </div>
+</div>

src/views/is-totp-app-installed.ejs

@@ -1,73 +1,8 @@
 <div class="dashboard-container">
-    <%- include('partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
-
-    <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
-        <%- include('./partials/stepper.ejs', {currentStep: "1", stepsTitle: "Configurer votre outil TOTP", nextStepTitle:"Configurer votre application TOTP" }); %>
-
-        <form action="/totp-configuration" class="checkbox-container" method="get">
-            <fieldset
-              class="fr-fieldset fr-mb-0 fr-mx-0 fr-px-0"
-              aria-labelledby="totp-tool-type-legend"
-            >
-              <legend id="totp-tool-type-legend" class="fr-fieldset__legend fr-text--regular">
-                Quel outil utilisez-vous ?
-              </legend>
-
-              <div class="fr-radio-group fr-mb-2w">
-                <input
-                  type="radio"
-                  id="totp-tool-type-smartphone"
-                  name="totp-tool-type"
-                  value="smartphone"
-                  required
-                />
-                <label class="fr-label" for="totp-tool-type-smartphone">
-                  J'ai une application sur mon smartphone
-                </label>
-              </div>
-
-              <div class="fr-radio-group">
-                <input
-                  type="radio"
-                  id="totp-tool-type-computer"
-                  name="totp-tool-type"
-                  value="computer"
-                  required
-                />
-                <label class="fr-label" for="totp-tool-type-computer">
-                  J'ai un logiciel ou une extension sur mon ordinateur
-                </label>
-              </div>
-            </fieldset>
-
-            <div class="fr-p-2w fr-mt-2w fr-grid-row fr-background-alt--blue-france">
-              <div class="fr-col-1 fr-px-1w">
-                  <img class="fr-responsive-img" src="/dist/light.svg" alt="" />
-              </div>
-              <div class="fr-col">
-                <p class="fr-mb-1w">
-                    <b>Quelle application ou logiciel installer</b> pour générer les codes à chaque session ? 
-                </p>
-                <a
-                    class="fr-text-action-high--blue-france"
-                    href="https://proconnect.crisp.help/fr/article/quest-ce-que-la-double-authentification-1m5mpmj/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >Consulter notre guide</a
-                >
-              </div>
-            </div>
-
-            <button
-              type="submit"
-              class="fr-btn fr-mt-3w btn--fullwidth"
-              id="continue-button"
-              role="button"
-              aria-disabled="true"
-            >
-              Confirmer
-            </button>
-        </form>
-        <%- include('partials/go-back.ejs'); %>
-    </div>
+  <%- include('partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
+  <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
+    <%- include('mfa-settings/is-totp-app-installed-layout.ejs', {
+      totpConfigurationUrl: '/totp-configuration',
+    }); %>
+  </div>
 </div>

src/views/mfa-decision-helper/can-install-software/external-help-needed.ejs

@@ -1,17 +1,6 @@
 <div class="dashboard-container">
   <%- include('../../partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
   <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
-    <%- include('../../partials/mfa-decision-helper-header.ejs', { step: "three" }); %>
-
-    <div class="fr-grid-row fr-grid-row--middle fr-mb-2w">
-      <img src="/dist/error.svg" alt="" class="limited-width fr-mr-2w" />
-      <h2 class="fr-h6 fr-mb-0">Intervention extérieure nécessaire</h2>
-    </div>
-
-    <p>
-      Nous n’avons pas de solution dans l’immédiat : contactez votre service
-      informatique pour qu’ils vous fournissent des outils de 2FA.
-    </p>
-    <%- include('../../partials/mfa-helper-restart.ejs'); %>
+    <%- include('../../mfa-settings/external-help-needed-layout.ejs'); %>
   </div>
 </div>

src/views/mfa-decision-helper/can-install-software/index.ejs

@@ -1,51 +1,8 @@
 <div class="dashboard-container">
   <%- include('../../partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
   <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
-
-    <%- include('../../partials/mfa-decision-helper-header.ejs', { step: "two" }); %>
-
-    <form action="/mfa-decision-helper/can-install-software" method="get">
-      <fieldset
-        class="fr-fieldset fr-mb-0 fr-mx-0 fr-px-0"
-        aria-labelledby="can-install-software-legend"
-      >
-        <legend
-          id="can-install-software-legend"
-          class="fr-fieldset__legend fr-text--regular fr-h4 fr-mb-1w"
-        >
-          Avez-vous le droit d'installer des logiciels ou extensions de navigateur
-          sur votre poste ?
-        </legend>
-
-        <div class="fr-fieldset__element">
-          <div class="fr-radio-group">
-            <input
-              type="radio"
-              id="can-install-software-yes"
-              name="can-install-software"
-              value="yes"
-              required
-            />
-            <label class="fr-label" for="can-install-software-yes">Oui</label>
-          </div>
-        </div>
-
-        <div class="fr-fieldset__element">
-          <div class="fr-radio-group">
-            <input
-              type="radio"
-              id="can-install-software-no"
-              name="can-install-software"
-              value="no"
-              required
-            />
-            <label class="fr-label" for="can-install-software-no">Non</label>
-          </div>
-        </div>
-      </fieldset>
-
-      <button class="fr-btn btn--fullwidth" type="submit">Continuer</button>
-    </form>
-    <%- include('../../partials/mfa-helper-restart.ejs'); %>
+    <%- include('../../mfa-settings/can-install-software-layout.ejs', {
+      formAction: '/mfa-decision-helper/can-install-software',
+    }); %>
   </div>
 </div>

src/views/mfa-decision-helper/can-install-software/smartphone-app.ejs

@@ -1,19 +1,8 @@
 <div class="dashboard-container">
   <%- include('../../partials/sidemenu.ejs', {activeLink: 'connection-and-account'}) %>
   <div class="dashboard-content fr-col-12 fr-col-lg-10 fr-col-xl-9 fr-col-offset-lg-1">
-    <%- include('../../partials/mfa-decision-helper-header.ejs', { step: "three" }); %>
-
-    <%- include('../totp-recommendation.ejs', {
-      description: "Une application smartphone génère un code qui change toutes les 30 secondes.",
-      toolTypeLabel: "l'application",
-      tools: [
-        { name: "Proton Authenticator", url: "https://proton.me/fr/authenticator/download", details: ["Application opensource."] },
-        { name: "2FAS", url: "https://2fas.com/auth/", details: ["Application opensource."] },
-        { name: "FreeOTP", url: "https://freeotp.github.io/", details: ["Application opensource."] },
-      ]
-    }) %>
-
-    <%- include('../../partials/mfa-helper-restart.ejs'); %>
-
+    <%- include('../../mfa-settings/smartphone-app-layout.ejs', {
+      totpRecommendationPath: '../mfa-decision-helper/totp-recommendation.ejs',
+    }); %>
   </div>
 </div>