implement mjml email templates

Co-authored-by: Lukas Hauenstein <[email protected]>
codeanker · Sep 7, 2024 · 93300c2 · 93300c2
1 parent 70149cd
commit 93300c2
Show file tree

Hide file tree

Showing 27 changed files with 1,658 additions and 77 deletions.
diff --git a/api/config/custom-environment-variables.json b/api/config/custom-environment-variables.json
@@ -25,5 +25,11 @@
   },
   "tomtom": {
     "apiKey": "TOMTOM_APIKEY"
+  },
+  "public": {
+    "legal": {
+      "imprint": "PUBLIC_LEGAL_IMPRINT",
+      "privacy": "PUBLIC_LEGAL_PRIVACY"
+    }
   }
 }
diff --git a/api/config/default.json b/api/config/default.json
@@ -4,7 +4,7 @@
     "port": 3030
   },
 
-  "clientUrl": "https://localhost:8080",
+  "clientUrl": "http://localhost:8080",
 
   "authentication": {
     "secret": "secret",
@@ -33,5 +33,11 @@
   },
   "tomtom": {
     "apiKey": ""
+  },
+  "public": {
+    "legal": {
+      "imprint": "",
+      "privacy": ""
+    }
   }
 }
diff --git a/api/email/_layout.mjml b/api/email/_layout.mjml
@@ -0,0 +1,73 @@
+<mjml>
+  <mj-head>
+    <mj-attributes>
+      <mj-all font-family="sans-serif" />
+    </mj-attributes>
+
+    <mj-style>
+      .footer {
+        padding: 10px 0;
+      }
+
+    	.footer a,
+      .footer p {
+      	color: #696969;
+      }
+    </mj-style>
+  </mj-head>
+
+  <mj-body background-color="#f1f5f9">
+    <mj-wrapper background-color="#fff" border-radius="32px">
+      <mj-section>
+        <mj-column vertical-align="middle">
+          <mj-text align="left" font-size="24px">Brahmsee {{ year }}</mj-text>
+        </mj-column>
+        <mj-column vertical-align="middle">
+          <mj-text align="right" font-size="18px">DLRG {{ gliederung }} e.V.</mj-text>
+        </mj-column>
+      </mj-section>
+
+      <mj-section>
+        <mj-column>
+          <mj-text font-size="30px" font-weight="500">
+            {{ subject }}
+          </mj-text>
+
+          <mj-text font-size="16px">
+            Moin {{ name }},
+          </mj-text>
+
+          {{> @partial-block }}
+        </mj-column>
+      </mj-section>
+
+      <mj-section>
+        <mj-column>
+          <mj-text>
+            Mit freundlichen Grüßen
+          </mj-text>
+          <mj-text>
+            Dein Orga-Team
+          </mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+
+    <mj-section css-class="footer" padding="10px 0 0 0">
+      <mj-column>
+        <!-- Logo von LV -->
+        <mj-image width="192px" src="{{ url 'img/gliederung_sh.png' }}"></mj-image>
+      </mj-column>
+    </mj-section>
+
+    <mj-section css-class="footer" padding="0">
+      <mj-column>
+        <mj-text align="center" font-size="12px">
+          <a href="{{ config 'public.legal.imprint' }}">Impressum</a>
+          <span> - </span>
+          <a href="{{ config 'public.legal.privacy' }}">Datenschutz</a>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/api/email/account-activated.mjml b/api/email/account-activated.mjml
@@ -0,0 +1,17 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Dein <b>brahmsee.digital</b> Account wurde aktiviert. Du kannst dich jetzt anmelden.
+</mj-text>
+
+<mj-button
+  align="left"
+  background-color="#16a34a"
+  border-radius="8px"
+  font-size="16px"
+  href="{{ config 'clientUrl' }}/login"
+>
+  Zur Anmeldung
+</mj-button>
+
+{{/layout}}
diff --git a/api/email/account-email-confirm.mjml b/api/email/account-email-confirm.mjml
@@ -0,0 +1,23 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Dein <b>brahmsee.digital</b> Account wurde erstellt. Um den Registrierungsprozess
+  abzuschließen, bestätige deine E-Mail Adresse bitte mit dem nachfolgenden Link.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  Solltest du <b>keine</b> solche Anfrage gestellt haben, solltest du den Zugang zu deinem E-Mail Konto
+  überprüfen.
+</mj-text>
+
+<mj-button
+  align="left"
+  background-color="#16a34a"
+  border-radius="8px"
+  font-size="16px"
+  href="{{ activationUrl }}"
+>
+  Account bestätigen
+</mj-button>
+
+{{/layout}}
diff --git a/api/email/account-password-reset.mjml b/api/email/account-password-reset.mjml
@@ -0,0 +1,23 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Wir haben eine Anfrage erhalten, das Passwort für deinen <b>brahmsee.digital</b> zurückzusetzen.
+  Nutze den nachfolgenden Link, um das zu tun.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  Solltest du <b>keine</b> solche Anfrage gestellt haben, solltest du den Zugang zu deinem E-Mail Konto
+  überprüfen.
+</mj-text>
+
+<mj-button
+  align="left"
+  background-color="#16a34a"
+  border-radius="8px"
+  font-size="16px"
+  href="{{ resetUrl }}"
+>
+  Passwort zurücksetzen
+</mj-button>
+
+{{/layout}}
diff --git a/api/email/account-status-changed.mjml b/api/email/account-status-changed.mjml
@@ -0,0 +1,7 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Der Status deines <b>brahmsee.digital</b> Account wurde auf <b>{{ status }}</b> geändert.
+</mj-text>
+
+{{/layout}}
diff --git a/api/email/registration-canceled.mjml b/api/email/registration-canceled.mjml
@@ -0,0 +1,11 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Deine Anmeldung zur Veranstaltung {{ veranstaltung }} <b>wurde storniert</b>.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  Für Fragen wende dich bitte an deine Gliederung.
+</mj-text>
+
+{{/layout}}
diff --git a/api/email/registration-confirmed.mjml b/api/email/registration-confirmed.mjml
@@ -0,0 +1,11 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Deine Anmeldung zur Veranstaltung {{ veranstaltung }} <b>wurde bestätigt</b>.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  Für Fragen wende dich bitte an deine Gliederung.
+</mj-text>
+
+{{/layout}}
diff --git a/api/email/registration-rejected.mjml b/api/email/registration-rejected.mjml
@@ -0,0 +1,11 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Deine Anmeldung zur Veranstaltung {{ veranstaltung }} <b>wurde abgelehnt</b>.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  Für Fragen wende dich bitte an deine Gliederung.
+</mj-text>
+
+{{/layout}}
diff --git a/api/email/registration-successful.mjml b/api/email/registration-successful.mjml
@@ -0,0 +1,12 @@
+{{#> layout }}
+
+<mj-text font-size="16px" line-height="1.5">
+  Vielen Dank für deine Anmeldung zur Veranstaltung {{ veranstaltung }}.
+</mj-text>
+
+<mj-text font-size="16px" line-height="1.5">
+  <b>Wichtig</b>: Deine Anmeldung ist noch nicht bestätigt. Sobald sich der Status
+  ändert, erhältst du eine weiter E-Mail.
+</mj-text>
+
+{{/layout}}
diff --git a/api/package.json b/api/package.json
@@ -34,15 +34,18 @@
     "axios": "^1.7.7",
     "config": "^3.3.9",
     "dayjs": "^1.11.10",
+    "dot-prop": "^9.0.0",
     "fast-csv": "^5.0.1",
     "grant": "^5.4.22",
+    "handlebars": "^4.7.8",
     "koa": "^2.14.2",
     "koa-body": "^6.0.1",
     "koa-helmet": "^7.0.2",
     "koa-router": "^12.0.1",
     "koa-session": "^6.4.0",
     "koa-static": "^5.0.0",
     "meilisearch": "^0.37.0",
+    "mjml": "^4.15.3",
     "prom-client": "^15.0.0",
     "superjson": "^2.2.1",
     "trpc-koa-adapter": "^1.1.3",
@@ -60,6 +63,7 @@
     "@types/koa": "^2.14.0",
     "@types/koa-bodyparser": "^4.3.12",
     "@types/koa-router": "^7.4.8",
+    "@types/mjml": "^4.7.4",
     "@types/node": "^20.11.1",
     "edge-runtime": "^2.5.8",
     "prisma": "^5.6.0",

diff --git a/api/src/config.ts b/api/src/config.ts
@@ -46,6 +46,12 @@ export const configSchema = z.strictObject({
   tomtom: z.strictObject({
     apiKey: z.string(),
   }),
+  public: z.strictObject({
+    legal: z.strictObject({
+      imprint: z.string().url(),
+      privacy: z.string().url(),
+    }),
+  }),
 })
 
 export default configSchema.parse(baseConfig)
diff --git a/api/src/services/account/accountActivate.ts b/api/src/services/account/accountActivate.ts
@@ -21,6 +21,20 @@ export const accountActivateProcedure = defineProcedure({
       data: {
         activatedAt: new Date(),
       },
+      select: {
+        email: true,
+        person: {
+          select: {
+            firstname: true,
+            lastname: true,
+            gliederung: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+      },
     })
 
     await logActivity({
@@ -33,9 +47,13 @@ export const accountActivateProcedure = defineProcedure({
 
     await sendMail({
       to: account.email,
-      subject: 'brahmsee.digital Account aktiviert',
+      subject: 'Account aktiviert',
       categories: ['account', 'activate'],
-      html: 'Dein brahmsee.digital Account wurde aktiviert.',
+      template: 'account-activated',
+      variables: {
+        gliederung: account.person.gliederung!.name,
+        name: `${account.person.firstname} ${account.person.lastname}`,
+      },
     })
 
     return 'activated'

diff --git a/api/src/services/account/accountEmailConfirmRequest.ts b/api/src/services/account/accountEmailConfirmRequest.ts
@@ -45,10 +45,7 @@ export const accountEmailConfirmRequestProcedure = defineProcedure({
       description: 'email confirmation requested',
     })
 
-    await sendMailConfirmEmailRequest({
-      email: account.email,
-      activationToken: account.activationToken,
-    })
+    await sendMailConfirmEmailRequest(account.email, account.activationToken)
 
     return {
       success: true,

diff --git a/api/src/services/account/accountGliederungAdminCreate.ts b/api/src/services/account/accountGliederungAdminCreate.ts
@@ -69,10 +69,7 @@ export const accountGliederungAdminCreateProcedure = defineProcedure({
       },
     })
 
-    await sendMailConfirmEmailRequest({
-      email: accountData.email,
-      activationToken: accountData.activationToken,
-    })
+    await sendMailConfirmEmailRequest(accountData.email, accountData.activationToken)
 
     return res
   },

diff --git a/api/src/services/account/accountPasswordReset.ts b/api/src/services/account/accountPasswordReset.ts
@@ -27,14 +27,26 @@ export const accountPasswordResetProcedure = defineProcedure({
         select: {
           email: true,
           passwordResetToken: true,
+          person: {
+            select: {
+              firstname: true,
+              lastname: true,
+              gliederung: {
+                select: {
+                  name: true,
+                },
+              },
+            },
+          },
         },
       })
-      if (findRes == null)
+      if (findRes === null) {
         return {
           status: true,
         }
+      }
 
-      let resetToken
+      let resetToken: string | null = null
       const email = findRes.email
 
       if (findRes.passwordResetToken != null) {
@@ -51,13 +63,18 @@ export const accountPasswordResetProcedure = defineProcedure({
         resetToken = res.passwordResetToken
       }
 
-      if (resetToken) {
+      if (resetToken !== null) {
         const resetUrl = `${config.clientUrl}/password-reset/${resetToken}`
-        sendMail({
+        await sendMail({
           to: email,
-          subject: 'Passwort vergessen',
+          subject: 'Passwort zurücksetzen',
           categories: ['account', 'passwordReset'],
-          html: `Du kannst dein Passwort mit folgendem Link zurück setzen <a href="${resetUrl}">${resetUrl}</a>`,
+          template: 'account-password-reset',
+          variables: {
+            gliederung: findRes.person.gliederung!.name,
+            name: `${findRes.person.firstname} ${findRes.person.lastname}`,
+            resetUrl,
+          },
         })
       }
       return {

diff --git a/api/src/services/account/accountVerwaltungCreate.ts b/api/src/services/account/accountVerwaltungCreate.ts
@@ -23,10 +23,7 @@ export const accountVerwaltungCreateProcedure = defineProcedure({
       },
     })
 
-    await sendMailConfirmEmailRequest({
-      email: accountData.email,
-      activationToken: accountData.activationToken,
-    })
+    await sendMailConfirmEmailRequest(accountData.email, accountData.activationToken)
 
     return res
   },