Html účty e-mailů v Meteor s mjml

Takže jste vytvořili pěkně vypadající aplikaci a jste připraveni dobýt svět, ale je tu jeden háček. Když e-maily odejdou, jsou pouze prostým textem. Nic ve zlém, ale e-maily dnes. Nyní existují dva velké způsoby, jak se s tím v Meteoru můžeme vypořádat.

Pokud k odesílání e-mailů používáte Mailgun nebo jiné podobné služby, možná budete chtít použít nový Email.hookSend háček z balíčku e-mailu k zachycení všech e-mailů uživatelských účtů, které jsou odesílány systémem účtů, a předání adresy URL a příjemce šabloně prostřednictvím jejich rozhraní API a návrh šablony prostřednictvím jejich platformy.

Nyní, pokud si chcete ponechat kontrolu nebo takový systém není k dispozici, můžete upravit e-maily v aplikaci Meteor přímo před jejich odesláním.

Nyní se podívejme, jak upravit věci kolem e-mailů účtů v Meteoru. Existují 3 e-maily, které Meteor Accounts rozesílají. Resetování hesla, ověření účtu a registrace účtu.

Začněme s úpravou výchozích e-mailových šablon Meteoru. Nejprve můžeme upravit adresu URL, na kterou se uživatel dostane. Můžete to upravit globálně (na serveru) takto:

import { Meteor } from 'meteor/meteor'
import { Accounts } from 'meteor/accounts-base'

Accounts.urls.resetPassword = token => Meteor.absoluteUrl(`user/reset-password/${token}`)
Accounts.urls.verifyEmail = token => Meteor.absoluteUrl(`user/verify-email/${token}`)
Accounts.urls.enrollAccount = token => Meteor.absoluteUrl(`user/enroll/${token}`)

Nyní, abychom změnili e-mailové šablony, musíme pracovat uvnitř Meteor.startup funkce.

Nejprve můžeme globálně změnit hlavičky e-mailů takto:

Accounts.emailTemplates.siteName = 'Awesome site'
Accounts.emailTemplates.from = 'Awesome site no-reply <[email protected]>'
Accounts.emailTemplates.headers = { tag: 'my-awesome-emails' }

Nyní, abychom upravili 3 různé šablony, můžeme nastavit Accounts.emailTemplates.enrollAccount , Accounts.emailTemplates.resetPassword a Accounts.emailTemplates.verifyEmail . V nich můžeme nastavit from , subject , text a html . Od té doby jsme již nastavili globální from dříve to můžeme přeskočit.

Takže základ by vypadal takto:

Accounts.emailTemplates.resetPassword = {
    subject (user) {
      return `Reset password for ${user.username}`
    },
    text (user, url) {
      return `Hello ${user.username}!\n\n We have received a request to reset your password for your account.
        Please follow the link below to reset your password:\n\n${url}`
    }
}

Nyní jsou to samozřejmé, ale co e-maily ve formátu HTML a jak fungují? U html e-mailů můžete předat řetězec, který je html, pokud je přítomen a e-mailový klient uživatele podporuje zobrazování html e-mailů, bude mít přednost a zobrazí html zprávu, jinak bude textová zpráva zobrazeno.

Problém s html zprávami je stejný jako u mobilního designu vaší aplikace. Proto se doporučuje použít nějaký rámec, který s tím pomůže, aby bylo zajištěno, že e-maily budou za všech okolností pěkně naformátovány. Jedním z nejběžnějších nástrojů je mjml a je k dispozici jako balíček npm.

Pro naše 3 e-maily je pravděpodobně dobrý nápad vytvořit šablonu, aby měly obecný vzhled. Moje osobní doporučení je přejít na oficiální webovou stránku, vybrat šablonu, ze které chcete začít, a upravit ji podle svých potřeb pomocí jejich editoru, abyste se ujistili, že váš mjml je platný.

Jakmile máte připravenou pěknou šablonu, je čas ji implementovat. Toto je funkce mé šablony:

import mjml2html from 'mjml'

export const htmlEmailTemplate = (title, message) => {
  return mjml2html(`
    <mjml>
      <mj-head>
        <mj-title>{title}</mj-title>
      </mj-head>
      <mj-body background-color="#efefef">
        <mj-section background-color="#fff" padding-bottom="0px" padding-top="0">
          <mj-column vertical-align="top" width="100%">
            <mj-image
                src="https://files.awesome.site/logo.png"
                alt="logo"
                align="center"
                border="none"
                width="600px"
                padding-left="0px"
                padding-right="0px"
                padding-bottom="0px"
                padding-top="0"
            ></mj-image>
          </mj-column>
        </mj-section>
        ${message}
      </mj-body>
    </mjml>
  `)?.html
}

Všimněte si prosím .html na konci funkce jako mjml vrátí objekt, který také obsahuje všechny chyby, které se vyskytly při generování e-mailu. Prozatím dostáváme pouze html bod bez kontroly chyb. Nakonec můžeme upravit naši šablonu pro resetování hesla přidáním pole html:

Accounts.emailTemplates.resetPassword = {
    subject (user) {
      return `Reset password for ${user.username}`
    },
    text (user, url) {
      return `Hello ${user.username}!\n\n We have received a request to reset your password for your account.
        Please follow the link below to reset your password:\n\n${url}`
    },
    html (user, url) {
      const title = `Reset password for ${user.username}`
      const message = `
        <mj-section background-color="#4a148c" padding-bottom="0px" padding-top="0">
          <mj-column vertical-align="top" width="100%">
            <mj-text align="left" color="#ffffff" font-size="45px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="30px" padding-top="50px">
              Reset password
            </mj-text>
          </mj-column>
        </mj-section>
        <mj-section background-color="#4a148c" padding-bottom="20px" padding-top="20px">
          <mj-column vertical-align="middle" width="100%">
            <mj-text align="left" color="#ffffff" font-size="22px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
              <span style="color:#FEEB35">Hello ${user.username}!</span>
            </mj-text>
            <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
              You dooped! But fear not reset your password by clicking on the button bellow:
            </mj-text>
            <mj-button
                align="left"
                font-size="22px"
                font-weight="bold"
                background-color="#ffffff"
                border-radius="10px"
                color="#1AA0E1"
                font-family="open Sans Helvetica, Arial, sans-serif"
                href="${url}"
            >
              Reset password
            </mj-button>
            <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
              Sincerely, the team
            </mj-text>
          </mj-column>
        </mj-section>
      `
      return htmlEmailTemplate(title, message)
    }
}

A nyní máme pěkně vypadající html e-maily, které odcházejí z našeho systému. Poté můžete použít htmlEmailTemplate funkce pro ostatní Email.send funkce.

Pokud se vám moje práce líbí, zvažte prosím podporu na GitHub Sponsors ❤️.