feat(email): add magic link smtp email

cypress/e2e/signin_with_magic_link/index.cy.ts

@@ -1,16 +1,6 @@
 //
 
-import { getMagicLinkFromEmail } from "#cypress/support/get-from-email";
-
 describe("sign-in with magic link", () => {
-  before(() => {
-    cy.mailslurp().then((mailslurp) =>
-      mailslurp.inboxController.deleteAllInboxEmails({
-        inboxId: "66ac0a4c-bd2d-490e-a277-1e7c2520100d",
-      }),
-    );
-  });
-
   it("should sign-up with magic link", function () {
     cy.visit("/users/start-sign-in");
 
@@ -25,20 +15,16 @@ describe("sign-in with magic link", () => {
 
     cy.contains("Votre lien vous attend à l’adresse...");
 
-    cy.mailslurp()
-      // use inbox id and a timeout of 30 seconds
-      .then((mailslurp) =>
-        mailslurp.waitForLatestEmail(
-          "66ac0a4c-bd2d-490e-a277-1e7c2520100d",
-          60000,
-          true,
-        ),
-      )
-      // extract the connection link from the email subject
-      .then(getMagicLinkFromEmail)
-      .then((link) => {
-        cy.visit(link);
-      });
+    cy.maildevGetMessageBySubject("Lien de connexion à ProConnect").then(
+      (email) => {
+        cy.maildevVisitMessageById(email.id);
+        cy.contains(
+          "Vous avez demandé un lien de connexion à ProConnect. Utilisez le bouton ci-dessous pour vous connecter instantanément.",
+        );
+        cy.contains("Se connecter").click();
+        cy.maildevDeleteMessageById(email.id);
+      },
+    );
 
     cy.contains("Renseigner son identité");
   });
@@ -61,20 +47,16 @@ describe("sign-in with magic link", () => {
 
     cy.contains("Votre lien vous attend à l’adresse...");
 
-    cy.mailslurp()
-      // use inbox id and a timeout of 30 seconds
-      .then((mailslurp) =>
-        mailslurp.waitForLatestEmail(
-          "66ac0a4c-bd2d-490e-a277-1e7c2520100d",
-          60000,
-          true,
-        ),
-      )
-      // extract the connection link from the email subject
-      .then(getMagicLinkFromEmail)
-      .then((link) => {
-        cy.visit(link);
-      });
+    cy.maildevGetMessageBySubject("Lien de connexion à ProConnect").then(
+      (email) => {
+        cy.maildevVisitMessageById(email.id);
+        cy.contains(
+          "Vous avez demandé un lien de connexion à ProConnect. Utilisez le bouton ci-dessous pour vous connecter instantanément.",
+        );
+        cy.contains("Se connecter").click();
+        cy.maildevDeleteMessageById(email.id);
+      },
+    );
 
     cy.contains("Renseigner son identité");
   });
@@ -125,21 +107,16 @@ describe("sign-in with magic link", () => {
 
     cy.contains("Votre lien vous attend à l’adresse...");
 
-    cy.mailslurp()
-      // use inbox id and a timeout of 30 seconds
-      .then((mailslurp) =>
-        mailslurp.waitForLatestEmail(
-          "66ac0a4c-bd2d-490e-a277-1e7c2520100d",
-          60000,
-          true,
-        ),
-      )
-      // extract the connection link from the email subject
-      .then(getMagicLinkFromEmail)
-      .then((link) => {
-        cy.visit(link);
-      });
-
+    cy.maildevGetMessageBySubject("Lien de connexion à ProConnect").then(
+      (email) => {
+        cy.maildevVisitMessageById(email.id);
+        cy.contains(
+          "Vous avez demandé un lien de connexion à ProConnect. Utilisez le bouton ci-dessous pour vous connecter instantanément.",
+        );
+        cy.contains("Se connecter").click();
+        cy.maildevDeleteMessageById(email.id);
+      },
+    );
     cy.contains("Renseigner son identité");
   });
 });

packages/email/src/MagicLink.stories.tsx

@@ -0,0 +1,15 @@
+//
+
+import type { ComponentAnnotations, Renderer } from "@storybook/csf";
+import MagicLink, { type Props } from "./MagicLink";
+
+//
+
+export default {
+  title: "Magic Link",
+  render: MagicLink,
+  args: {
+    baseurl: "http://localhost:3000",
+    magic_link: "#/../src/MagicLink.stories.tsx",
+  } as Props,
+} as ComponentAnnotations<Renderer, Props>;

packages/email/src/MagicLink.tsx

@@ -0,0 +1,32 @@
+//
+
+import { Layout, type LayoutProps } from "./_layout";
+import { Button, Em, Text } from "./components";
+
+//
+
+export default function MagicLink(props: Props) {
+  const { baseurl, magic_link } = props;
+  return (
+    <Layout baseurl={baseurl}>
+      <Text>Bonjour,</Text>
+      <br />
+      <Text>
+        Vous avez demandé un <b>lien de connexion</b> à ProConnect. Utilisez le
+        bouton ci-dessous pour vous connecter instantanément.
+        <br />
+        <Em>Il est valable 1 heure</Em>.
+      </Text>
+      <br />
+      <Button href={magic_link}>Se connecter</Button>
+      <br />
+      <Text>Ce lien a été généré pour vous. Merci de ne pas le partager.</Text>
+    </Layout>
+  );
+}
+
+//
+
+export type Props = LayoutProps & {
+  magic_link: string;
+};

packages/email/src/index.ts

@@ -6,6 +6,7 @@ export { default as Delete2faProtection } from "./Delete2faProtection";
 export { default as DeleteAccessKey } from "./DeleteAccessKey";
 export { default as DeleteAccount } from "./DeleteAccount";
 export { default as DeleteFreeTotpMail } from "./DeleteFreeTotpMail";
+export { default as MagicLink } from "./MagicLink";
 export { default as OfficialContactEmailVerification } from "./OfficialContactEmailVerification";
 export { default as ResetPassword } from "./ResetPassword";
 export { default as UpdatePersonalDataMail } from "./UpdatePersonalDataMail";

src/connectors/brevo.ts

@@ -6,7 +6,7 @@ import { BrevoApiError } from "../config/errors";
 import { logger } from "../services/log";
 import { render } from "../services/renderer";
 
-type RemoteTemplateSlug = "magic-link";
+type RemoteTemplateSlug = never;
 type LocalTemplateSlug = "moderation-processed";
 
 // active templates id are listed at https://app-smtp.brevo.com/templates

src/managers/user.ts

@@ -5,6 +5,7 @@ import {
   DeleteAccessKey,
   DeleteAccount,
   DeleteFreeTotpMail,
+  MagicLink,
   ResetPassword,
   UpdatePersonalDataMail,
   UpdateTotpApplication,
@@ -23,7 +24,6 @@ import {
   UserNotFoundError,
   WeakPasswordError,
 } from "../config/errors";
-import { sendMail as legacySendMail } from "../connectors/brevo";
 import { isEmailSafeToSendTransactional } from "../connectors/debounce";
 import { sendMail } from "../connectors/mail";
 
@@ -478,13 +478,13 @@ export const sendSendMagicLinkEmail = async (
     magic_link_sent_at: new Date(),
   });
 
-  await legacySendMail({
+  await sendMail({
     to: [user.email],
     subject: "Lien de connexion à ProConnect",
-    template: "magic-link",
-    params: {
+    html: MagicLink({
+      baseurl: host,
       magic_link: `${host}/users/sign-in-with-magic-link?magic_link_token=${magicLinkToken}`,
-    },
+    }).toString(),
   });
 
   return true;