wrap email templates in standard layout to minimize duplicate code

backend/src/middleware/email/emailMiddleware.js

@@ -5,7 +5,8 @@ import {
   signupTemplate,
   resetPasswordTemplate,
   wrongAccountTemplate,
-} from './templates/templateBuilder'
+  emailVerificationTemplate,
+} from './templateBuilder'
 
 const hasEmailConfig = CONFIG.SMTP_HOST && CONFIG.SMTP_PORT
 const hasAuthData = CONFIG.SMTP_USERNAME && CONFIG.SMTP_PASSWORD
@@ -57,8 +58,18 @@ const sendPasswordResetMail = async (resolve, root, args, context, resolveInfo)
   return true
 }
 
+const sendEmailVerificationMail = async (resolve, root, args, context, resolveInfo) => {
+  const response = await resolve(root, args, context, resolveInfo)
+  // TODO: return name in response
+  const { email, nonce, name } = response
+  await sendMail(emailVerificationTemplate({ email, nonce, name }))
+  delete response.nonce
+  return response
+}
+
 export default {
   Mutation: {
+    AddEmailAddress: sendEmailVerificationMail,
     requestPasswordReset: sendPasswordResetMail,
     Signup: sendSignupMail,
     SignupByInvitation: sendSignupMail,

backend/src/middleware/email/templateBuilder.js

@@ -0,0 +1,77 @@
+import mustache from 'mustache'
+import CONFIG from '../../config'
+
+import * as templates from './templates'
+
+const from = '"Human Connection" <info@human-connection.org>'
+const supportUrl = 'https://human-connection.org/en/contact'
+
+export const signupTemplate = ({ email, nonce }) => {
+  const subject = 'Willkommen, Bienvenue, Welcome to Human Connection!'
+  const actionUrl = new URL('/registration/create-user-account', CONFIG.CLIENT_URI)
+  actionUrl.searchParams.set('nonce', nonce)
+  actionUrl.searchParams.set('email', email)
+
+  return {
+    from,
+    to: email,
+    subject,
+    html: mustache.render(
+      templates.layout,
+      { actionUrl, supportUrl, subject },
+      { content: templates.signup },
+    ),
+  }
+}
+
+export const emailVerificationTemplate = ({ email, nonce, name }) => {
+  const subject = 'Neue E-Mail Adresse | New E-Mail Address'
+  const actionUrl = new URL('/settings/my-email-address/verify', CONFIG.CLIENT_URI)
+  actionUrl.searchParams.set('nonce', nonce)
+  actionUrl.searchParams.set('email', email)
+
+  return {
+    from,
+    to: email,
+    subject,
+    html: mustache.render(
+      templates.layout,
+      { actionUrl, name, nonce, supportUrl, subject },
+      { content: templates.emailVerification },
+    ),
+  }
+}
+
+export const resetPasswordTemplate = ({ email, nonce, name }) => {
+  const subject = 'Neues Passwort | Reset Password'
+  const actionUrl = new URL('/password-reset/change-password', CONFIG.CLIENT_URI)
+  actionUrl.searchParams.set('nonce', nonce)
+  actionUrl.searchParams.set('email', email)
+
+  return {
+    from,
+    to: email,
+    subject,
+    html: mustache.render(
+      templates.layout,
+      { actionUrl, name, nonce, supportUrl, subject },
+      { content: templates.passwordReset },
+    ),
+  }
+}
+
+export const wrongAccountTemplate = ({ email }) => {
+  const subject = 'Falsche Mailadresse? | Wrong E-mail?'
+  const actionUrl = new URL('/password-reset/request', CONFIG.CLIENT_URI)
+
+  return {
+    from,
+    to: email,
+    subject,
+    html: mustache.render(
+      templates.layout,
+      { actionUrl, supportUrl },
+      { content: templates.wrongAccount },
+    ),
+  }
+}

backend/src/middleware/email/templates/emailVerification.html

@@ -0,0 +1,189 @@
+<!-- Email Body German : BEGIN -->
+<table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+  style="margin: auto;">
+  <tr>
+    <td style="padding: 20px 0; text-align: center">
+    </td>
+  </tr>
+
+  <!-- Hero Image, Flush : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff;">
+      <img
+        src="https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LcGvGRsW6DrZn7FWRzF%2F-LcGv6EiVcsjYLfQ_2YE%2F-LcGv8UtmAWc61fxGveg%2Flets_get_together.png?generation=1555078880410873&alt=media"
+        width="600" height="" alt="Human Connection community logo" border="0"
+        style="width: 100%; max-width: 600px; height: auto; background: #ffffff; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; color: #555555; margin: auto; display: block;"
+        class="g-img">
+    </td>
+  </tr>
+  <!-- Hero Image, Flush : END -->
+
+  <!-- 1 Column Text + Button : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td
+            style="padding: 20px; padding-top: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <h1
+              style="margin: 0 0 10px 0; font-family: Lato, sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
+              Hallo {{ name }}!</h1>
+            <p style="margin: 0;">Du hast also dein Passwort vergessen? Kein Problem! Mit Klick auf diesen Button
+              kannst Du innerhalb der nächsten 24 Stunden Dein Passwort zurücksetzen:</p>
+          </td>
+        </tr>
+        <tr>
+          <td style="padding: 0 20px;">
+            <!-- Button : BEGIN -->
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
+              <tr>
+                <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
+                  <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
+                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Passwort
+                    zurücksetzen</a>
+                </td>
+              </tr>
+            </table>
+            <!-- Button : END -->
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text + Button : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td
+            style="padding: 20px; padding-bottom: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0;">Falls Du kein neues Passwort angefordert hast, kannst Du diese E-Mail einfach
+              ignorieren. Wenn Du noch Fragen hast, melde Dich gerne <a href="{{{ supportUrl }}}"
+                style="color: #17b53e;">bei
+                unserem Support Team</a>!</p>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0;">Sollte der Button für Dich nicht funktionieren, kannst Du auch folgenden Code in
+              Dein Browserfenster kopieren: <span style="color: #17b53e;">{{{ nonce }}}</span></p>
+            <p style="margin: 0; margin-top: 10px;">Bis bald bei <a href="https://human-connection.org"
+                style="color: #17b53e;">Human Connection</a>!</p>
+            <p style="margin: 0; margin-bottom: 10px;">– Dein Human Connection Team</p>
+          </td>
+        </tr>
+        <tr>
+          <td style="display: none;">
+            <p>–––––––––––––––––––––––––––––––––––––––––––––––</p>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text : END -->
+
+</table>
+<!-- Email Body German : END -->
+
+<!-- Email Body English : BEGIN -->
+<table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+  style="margin: auto;">
+  <tr>
+    <td style="padding: 20px 0; text-align: center">
+    </td>
+  </tr>
+
+  <!-- Hero Image, Flush : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff;">
+      <img
+        src="https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LcGvGRsW6DrZn7FWRzF%2F-LcGv6EiVcsjYLfQ_2YE%2F-LcGv8UtmAWc61fxGveg%2Flets_get_together.png?generation=1555078880410873&alt=media"
+        width="600" height="" alt="Human Connection community logo" border="0"
+        style="width: 100%; max-width: 600px; height: auto; background: #ffffff; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; color: #555555; margin: auto; display: block;"
+        class="g-img">
+    </td>
+  </tr>
+  <!-- Hero Image, Flush : END -->
+
+  <!-- 1 Column Text + Button : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td
+            style="padding: 20px; padding-top: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <h1
+              style="margin: 0 0 10px 0; font-family: Lato, sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;">
+              Hello {{ name }}!</h1>
+            <p style="margin: 0;">So, you forgot your password? No problem! Just click the button below to reset
+              it within the next 24 hours:</p>
+          </td>
+        </tr>
+        <tr>
+          <td style="padding: 0 20px;">
+            <!-- Button : BEGIN -->
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
+              <tr>
+                <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
+                  <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
+                    style="background: #17b53e; font-family: Lato, sans-serif; font-size: 16px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Reset
+                    password</a>
+                </td>
+              </tr>
+            </table>
+            <!-- Button : END -->
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text + Button : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td
+            style="padding: 20px; padding-bottom: 0; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0;">If you didn't request a new password feel free to ignore this e-mail. You can
+              also <a href="{{{ supportUrl }}}" style="color: #17b53e;">contact our
+                support team</a> if you have any questions!</p>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text : END -->
+
+  <!-- 1 Column Text : BEGIN -->
+  <tr>
+    <td style="background-color: #ffffff; padding: 0 20px;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+        <tr>
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
+            <p style="margin: 0;">If the above button doesn't work you can also copy the following code into your
+              browser window: <span style="color: #17b53e;">{{{ nonce }}}</span></p>
+            <p style="margin: 0; margin-top: 10px;">See you soon on <a href="https://human-connection.org"
+                style="color: #17b53e;">Human Connection</a>!</p>
+            <p style="margin: 0; margin-bottom: 10px;">– The Human Connection Team</p>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+  <!-- 1 Column Text : END -->
+
+</table>
+<!-- Email Body English : END -->

backend/src/middleware/email/templates/index.js

@@ -0,0 +1,11 @@
+import fs from 'fs'
+import path from 'path'
+
+const readFile = fileName => fs.readFileSync(path.join(__dirname, fileName), 'utf-8')
+
+export const signup = readFile('./signup.html')
+export const passwordReset = readFile('./resetPassword.html')
+export const wrongAccount = readFile('./wrongAccount.html')
+export const emailVerification = readFile('./emailVerification.html')
+
+export const layout = readFile('./layout.html')

backend/src/middleware/email/templates/layout.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
+  <title>{{ subject }}</title>
+
+  <!--[if mso]>
+    <style>
+        * {
+          font-family: sans-serif !important;
+        }
+    </style>
+  <![endif]-->
+
+  <!--[if !mso]><!-->
+  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
+  <!--<![endif]-->
+
+  <!-- CSS RESETS -->
+  <style>
+    html,
+    body {
+      margin: 0 !important;
+      padding: 0 !important;
+      height: 100% !important;
+      width: 100% !important;
+    }
+
+    * {
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
+    }
+
+    div[style*="margin: 16px 0"] {
+      margin: 0 !important;
+    }
+
+    table,
+    td {
+      mso-table-lspace: 0pt !important;
+      mso-table-rspace: 0pt !important;
+    }
+
+    table {
+      border-spacing: 0 !important;
+      border-collapse: collapse !important;
+      table-layout: fixed !important;
+      margin: 0 auto !important;
+    }
+
+    img {
+      -ms-interpolation-mode: bicubic;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    a[x-apple-data-detectors],
+    .unstyle-auto-detected-links a,
+    .aBn {
+      border-bottom: 0 !important;
+      cursor: default !important;
+      color: inherit !important;
+      text-decoration: none !important;
+      font-size: inherit !important;
+      font-family: inherit !important;
+      font-weight: inherit !important;
+      line-height: inherit !important;
+    }
+
+    .a6S {
+      display: none !important;
+      opacity: 0.01 !important;
+    }
+
+    .im {
+      color: inherit !important;
+    }
+
+    img.g-img+div {
+      display: none !important;
+    }
+
+    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
+    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
+      u~div .email-container {
+        min-width: 320px !important;
+      }
+    }
+
+    /* iPhone 6, 6S, 7, 8, and X */
+    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
+      u~div .email-container {
+        min-width: 375px !important;
+      }
+    }
+
+    /* iPhone 6+, 7+, and 8+ */
+    @media only screen and (min-device-width: 414px) {
+      u~div .email-container {
+        min-width: 414px !important;
+      }
+    }
+  </style>
+
+  <!--[if gte mso 9]>
+    <xml>
+        <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
+
+  <!-- PROGRESSIVE ENHANCEMENTS -->
+  <style>
+    .button-td,
+    .button-a {
+      transition: all 100ms ease-in;
+    }
+
+    .button-td-primary:hover,
+    .button-a-primary:hover {
+      background: #19c243 !important;
+      border-color: #555555 !important;
+    }
+
+    @media screen and (max-width: 600px) {
+      .email-container p {
+        font-size: 17px !important;
+      }
+    }
+  </style>
+
+  <!-- LANGUAGE TOGGLE -->
+  <style>
+    .toggle+label {
+      display: inline-block;
+      height: 40px;
+      padding: 0 12px;
+      margin-top: 40px;
+      line-height: 38px;
+      font-family: Lato, sans-serif;
+      font-size: 16px;
+      border: 1px solid #cbc7d1;
+      cursor: pointer;
+    }
+
+    .toggle+label:hover {
+      background-color: #bee876;
+    }
+
+    .toggle:checked+label {
+      background-color: #19c243;
+      color: white;
+    }
+
+    .toggle-english+label {
+      border-bottom-right-radius: 50px;
+      border-top-right-radius: 50px;
+      border-left: none;
+      margin-left: -2px;
+    }
+
+    .toggle-german+label {
+      border-bottom-left-radius: 50px;
+      border-top-left-radius: 50px;
+      border-right: none;
+      margin-right: -2px;
+    }
+
+    .toggle-german:checked~table.email-german {
+      display: block;
+    }
+
+    .toggle-german:checked~table.email-english {
+      display: none;
+    }
+
+    .toggle-english:checked~table.email-english {
+      display: block;
+    }
+
+    .toggle-english:checked~table.email-german {
+      display: none;
+    }
+  </style>
+</head>
+
+<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
+  <center style="width: 100%; background-color: #f5f4f6;">
+    <!--[if mso | IE]>
+      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
+        <tr>
+          <td>
+    <![endif]-->
+
+    <div style="max-width: 600px; margin: 0 auto;" class="email-container">
+      <!--[if mso]>
+        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
+          <tr>
+            <td>
+      <![endif]-->
+
+      <!-- LANGUAGE TOGGLE -->
+      <input type="radio" name="language" class="toggle toggle-german" style="display: none;" id="toggle-german"
+        checked="checked">
+      <label for="toggle-german">Deutsch</label>
+      <input type="radio" name="language" class="toggle toggle-english" style="display:none;" id="toggle-english">
+      <label for="toggle-english">English</label>
+      <p style="margin: 0;"></p>
+
+      {{> content}}
+
+      <!-- Email Footer : BEGIN -->
+      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
+        style="margin: auto;">
+        <tr>
+          <td
+            style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
+            <br><br>
+            Human Connection gGmbH<br><span class="unstyle-auto-detected-links">Bahnhofstraße 11, 73235 Weilheim /
+              Teck<br>Germany</span>
+            <br><br>
+          </td>
+        </tr>
+      </table>
+      <!-- Email Footer : END -->
+
+      <!--[if mso]>
+            </td>
+          </tr>
+        </table>
+      <![endif]-->
+    </div>
+
+    <!--[if mso | IE]>
+          </td>
+        </tr>
+      </table>
+    <![endif]-->
+  </center>
+</body>
+
+</html>

backend/src/middleware/email/templates/resetPassword.html

@@ -1,229 +1,6 @@
-<!DOCTYPE html>
+<!-- Email Body German : BEGIN -->
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+<table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-  xmlns:o="urn:schemas-microsoft-com:office:office">
+  style="margin: auto;">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
-  <title>Neues Passwort | Reset Password</title>
-
-  <!--[if mso]>
-    <style>
-        * {
-          font-family: sans-serif !important;
-        }
-    </style>
-  <![endif]-->
-
-  <!--[if !mso]><!-->
-  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
-  <!--<![endif]-->
-
-  <!-- CSS RESETS -->
-  <style>
-    html,
-    body {
-      margin: 0 !important;
-      padding: 0 !important;
-      height: 100% !important;
-      width: 100% !important;
-    }
-
-    * {
-      -ms-text-size-adjust: 100%;
-      -webkit-text-size-adjust: 100%;
-    }
-
-    div[style*="margin: 16px 0"] {
-      margin: 0 !important;
-    }
-
-    table,
-    td {
-      mso-table-lspace: 0pt !important;
-      mso-table-rspace: 0pt !important;
-    }
-
-    table {
-      border-spacing: 0 !important;
-      border-collapse: collapse !important;
-      table-layout: fixed !important;
-      margin: 0 auto !important;
-    }
-
-    img {
-      -ms-interpolation-mode: bicubic;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    a[x-apple-data-detectors],
-    .unstyle-auto-detected-links a,
-    .aBn {
-      border-bottom: 0 !important;
-      cursor: default !important;
-      color: inherit !important;
-      text-decoration: none !important;
-      font-size: inherit !important;
-      font-family: inherit !important;
-      font-weight: inherit !important;
-      line-height: inherit !important;
-    }
-
-    .a6S {
-      display: none !important;
-      opacity: 0.01 !important;
-    }
-
-    .im {
-      color: inherit !important;
-    }
-
-    img.g-img+div {
-      display: none !important;
-    }
-
-    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
-    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
-      u~div .email-container {
-        min-width: 320px !important;
-      }
-    }
-
-    /* iPhone 6, 6S, 7, 8, and X */
-    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
-      u~div .email-container {
-        min-width: 375px !important;
-      }
-    }
-
-    /* iPhone 6+, 7+, and 8+ */
-    @media only screen and (min-device-width: 414px) {
-      u~div .email-container {
-        min-width: 414px !important;
-      }
-    }
-  </style>
-
-  <!--[if gte mso 9]>
-    <xml>
-        <o:OfficeDocumentSettings>
-            <o:AllowPNG/>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-    </xml>
-    <![endif]-->
-
-  <!-- PROGRESSIVE ENHANCEMENTS -->
-  <style>
-    .button-td,
-    .button-a {
-      transition: all 100ms ease-in;
-    }
-
-    .button-td-primary:hover,
-    .button-a-primary:hover {
-      background: #19c243 !important;
-      border-color: #555555 !important;
-    }
-
-    @media screen and (max-width: 600px) {
-      .email-container p {
-        font-size: 17px !important;
-      }
-    }
-  </style>
-
-  <!-- LANGUAGE TOGGLE -->
-  <style>
-    .toggle+label {
-      display: inline-block;
-      height: 40px;
-      padding: 0 12px;
-      margin-top: 40px;
-      line-height: 38px;
-      font-family: Lato, sans-serif;
-      font-size: 16px;
-      border: 1px solid #cbc7d1;
-      cursor: pointer;
-    }
-
-    .toggle+label:hover {
-      background-color: #bee876;
-    }
-
-    .toggle:checked+label {
-      background-color: #19c243;
-      color: white;
-    }
-
-    .toggle-english+label {
-      border-bottom-right-radius: 50px;
-      border-top-right-radius: 50px;
-      border-left: none;
-      margin-left: -2px;
-    }
-
-    .toggle-german+label {
-      border-bottom-left-radius: 50px;
-      border-top-left-radius: 50px;
-      border-right: none;
-      margin-right: -2px;
-    }
-
-    .toggle-german:checked~table.email-german {
-      display: block;
-    }
-
-    .toggle-german:checked~table.email-english {
-      display: none;
-    }
-
-    .toggle-english:checked~table.email-english {
-      display: block;
-    }
-
-    .toggle-english:checked~table.email-german {
-      display: none;
-    }
-  </style>
-</head>
-
-<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
-  <center style="width: 100%; background-color: #f5f4f6;">
-    <!--[if mso | IE]>
-      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
-        <tr>
-          <td>
-    <![endif]-->
-
-    <div style="max-width: 600px; margin: 0 auto;" class="email-container">
-      <!--[if mso]>
-        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
-          <tr>
-            <td>
-      <![endif]-->
-
-      <!-- LANGUAGE TOGGLE -->
-      <input type="radio" name="language" class="toggle toggle-german" style="display: none;" id="toggle-german"
-        checked="checked">
-      <label for="toggle-german">Deutsch</label>
-      <input type="radio" name="language" class="toggle toggle-english" style="display:none;" id="toggle-english">
-      <label for="toggle-english">English</label>
-      <p style="margin: 0;"></p>
-
-      <!-- Email Body German : BEGIN -->
-      <table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
-        width="100%" style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -258,8 +35,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -299,8 +75,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">Sollte der Button für Dich nicht funktionieren, kannst Du auch folgenden Code in
               Dein Browserfenster kopieren: <span style="color: #17b53e;">{{{ nonce }}}</span></p>
             <p style="margin: 0; margin-top: 10px;">Bis bald bei <a href="https://human-connection.org"
@@ -318,12 +93,12 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body German : END -->
+<!-- Email Body German : END -->
 
-      <!-- Email Body English : BEGIN -->
+<!-- Email Body English : BEGIN -->
-      <table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+<table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        width="100%" style="margin: auto;">
+  style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -358,8 +133,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -398,8 +172,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">If the above button doesn't work you can also copy the following code into your
               browser window: <span style="color: #17b53e;">{{{ nonce }}}</span></p>
             <p style="margin: 0; margin-top: 10px;">See you soon on <a href="https://human-connection.org"
@@ -412,37 +185,5 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body English : END -->
+<!-- Email Body English : END -->
-
-      <!-- Email Footer : BEGIN -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        style="margin: auto;">
-        <tr>
-          <td
-            style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
-            <br><br>
-            Human Connection gGmbH<br><span class="unstyle-auto-detected-links">Bahnhofstraße 11, 73235 Weilheim /
-              Teck<br>Germany</span>
-            <br><br>
-          </td>
-        </tr>
-      </table>
-      <!-- Email Footer : END -->
-
-      <!--[if mso]>
-            </td>
-          </tr>
-        </table>
-      <![endif]-->
-    </div>
-
-    <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-    <![endif]-->
-  </center>
-</body>
-
-</html>

backend/src/middleware/email/templates/signup.html

@@ -1,239 +1,6 @@
-<!DOCTYPE html>
+<!-- Email Body German : BEGIN -->
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+<table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-  xmlns:o="urn:schemas-microsoft-com:office:office">
+  style="margin: auto;">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
-  <title>Willkommen, Bienvenue, Welcome to Human Connection</title>
-
-  <!--[if mso]>
-    <style>
-        * {
-          font-family: sans-serif !important;
-        }
-    </style>
-  <![endif]-->
-
-  <!--[if !mso]><!-->
-  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
-  <!--<![endif]-->
-
-  <!-- CSS RESETS -->
-  <style>
-    html,
-    body {
-      margin: 0 !important;
-      padding: 0 !important;
-      height: 100% !important;
-      width: 100% !important;
-    }
-
-    * {
-      -ms-text-size-adjust: 100%;
-      -webkit-text-size-adjust: 100%;
-    }
-
-    div[style*="margin: 16px 0"] {
-      margin: 0 !important;
-    }
-
-    table,
-    td {
-      mso-table-lspace: 0pt !important;
-      mso-table-rspace: 0pt !important;
-    }
-
-    table {
-      border-spacing: 0 !important;
-      border-collapse: collapse !important;
-      table-layout: fixed !important;
-      margin: 0 auto !important;
-    }
-
-    img {
-      -ms-interpolation-mode: bicubic;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    a[x-apple-data-detectors],
-    .unstyle-auto-detected-links a,
-    .aBn {
-      border-bottom: 0 !important;
-      cursor: default !important;
-      color: inherit !important;
-      text-decoration: none !important;
-      font-size: inherit !important;
-      font-family: inherit !important;
-      font-weight: inherit !important;
-      line-height: inherit !important;
-    }
-
-    .a6S {
-      display: none !important;
-      opacity: 0.01 !important;
-    }
-
-    .im {
-      color: inherit !important;
-    }
-
-    img.g-img+div {
-      display: none !important;
-    }
-
-    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
-    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
-      u~div .email-container {
-        min-width: 320px !important;
-      }
-    }
-
-    /* iPhone 6, 6S, 7, 8, and X */
-    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
-      u~div .email-container {
-        min-width: 375px !important;
-      }
-    }
-
-    /* iPhone 6+, 7+, and 8+ */
-    @media only screen and (min-device-width: 414px) {
-      u~div .email-container {
-        min-width: 414px !important;
-      }
-    }
-  </style>
-
-  <!--[if gte mso 9]>
-    <xml>
-        <o:OfficeDocumentSettings>
-            <o:AllowPNG/>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-    </xml>
-    <![endif]-->
-
-  <!-- PROGRESSIVE ENHANCEMENTS -->
-  <style>
-    .button-td,
-    .button-a {
-      transition: all 100ms ease-in;
-    }
-
-    .button-td-primary:hover,
-    .button-a-primary:hover {
-      background: #19c243 !important;
-      border-color: #555555 !important;
-    }
-
-    @media screen and (max-width: 600px) {
-      .email-container p {
-        font-size: 17px !important;
-      }
-    }
-  </style>
-
-  <!-- LANGUAGE TOGGLE -->
-  <style>
-    .toggle+label {
-      display: inline-block;
-      height: 40px;
-      padding: 0 12px;
-      margin-top: 40px;
-      line-height: 38px;
-      font-family: Lato, sans-serif;
-      font-size: 16px;
-      border: 1px solid #cbc7d1;
-      cursor: pointer;
-    }
-
-    .toggle+label:hover {
-      background-color: #bee876;
-    }
-
-    .toggle:checked+label {
-      background-color: #19c243;
-      color: white;
-    }
-
-    .toggle-english+label {
-      border-bottom-right-radius: 50px;
-      border-top-right-radius: 50px;
-      border-left: none;
-      margin-left: -2px;
-    }
-
-    .toggle-german+label {
-      border-bottom-left-radius: 50px;
-      border-top-left-radius: 50px;
-      border-right: none;
-      margin-right: -2px;
-    }
-
-    .toggle-german:checked~table.email-german {
-      display: block;
-    }
-
-    .toggle-german:checked~table.email-english {
-      display: none;
-    }
-
-    .toggle-english:checked~table.email-english {
-      display: block;
-    }
-
-    .toggle-english:checked~table.email-german {
-      display: none;
-    }
-  </style>
-</head>
-
-<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
-  <center style="width: 100%; background-color: #f5f4f6;">
-    <!--[if mso | IE]>
-      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
-        <tr>
-          <td>
-    <![endif]-->
-
-    <!-- VISUALLY HIDDEN PRE-HEADER TEXT -->
-    <div
-      style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
-      Dein Anmeldelink. | Here is your signup link.
-    </div>
-    <div
-      style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
-      &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;<br>
-    </div>
-
-    <div style="max-width: 600px; margin: 0 auto;" class="email-container">
-      <!--[if mso]>
-        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
-          <tr>
-            <td>
-      <![endif]-->
-
-      <!-- LANGUAGE TOGGLE -->
-      <input type="radio" name="language" class="toggle toggle-german" style="display: none;" id="toggle-german"
-        checked="checked">
-      <label for="toggle-german">Deutsch</label>
-      <input type="radio" name="language" class="toggle toggle-english" style="display:none;" id="toggle-english">
-      <label for="toggle-english">English</label>
-      <p style="margin: 0;"></p>
-
-      <!-- Email Body German : BEGIN -->
-      <table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
-        width="100%" style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -269,8 +36,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -297,8 +63,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">Falls Du Dich nicht selbst bei <a href="https://human-connection.org"
                 style="color: #17b53e;">Human Connection</a> angemeldet hast, schau doch mal vorbei!
               Wir sind ein gemeinnütziges Aktionsnetzwerk – von Menschen für Menschen.</p>
@@ -321,8 +86,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">Melde Dich gerne <a href="{{{ supportUrl }}}" style="color: #17b53e;">bei
                 unserem Support Team</a>, wenn Du Fragen hast.</p>
             <p style="margin: 0; margin-top: 10px;">Bis bald bei <a href="https://human-connection.org"
@@ -340,12 +104,12 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body German : END -->
+<!-- Email Body German : END -->
 
-      <!-- Email Body English : BEGIN -->
+<!-- Email Body English : BEGIN -->
-      <table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+<table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        width="100%" style="margin: auto;">
+  style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -381,8 +145,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -409,8 +172,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">If you didn't sign up for <a href="https://human-connection.org"
                 style="color: #17b53e;">Human Connection</a> we recommend you to check it out!
               It's a social network from people for people who want to connect and change the world together.</p>
@@ -434,8 +196,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">Feel free to <a href="{{{ supportUrl }}}" style="color: #17b53e;">contact our
                 support team</a> with any
               questions you have.</p>
@@ -449,37 +210,5 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body English : END -->
+<!-- Email Body English : END -->
-
-      <!-- Email Footer : BEGIN -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        style="margin: auto;">
-        <tr>
-          <td
-            style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
-            <br><br>
-            Human Connection gGmbH<br><span class="unstyle-auto-detected-links">Bahnhofstraße 11, 73235 Weilheim /
-              Teck<br>Germany</span>
-            <br><br>
-          </td>
-        </tr>
-      </table>
-      <!-- Email Footer : END -->
-
-      <!--[if mso]>
-            </td>
-          </tr>
-        </table>
-      <![endif]-->
-    </div>
-
-    <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-    <![endif]-->
-  </center>
-</body>
-
-</html>

backend/src/middleware/email/templates/templateBuilder.js

@@ -1,48 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import mustache from 'mustache'
-import CONFIG from '../../../config'
-
-const from = '"Human Connection" <info@human-connection.org>'
-const supportUrl = 'https://human-connection.org/en/contact'
-
-const signupHtml = fs.readFileSync(path.join(__dirname, './signup.html'), 'utf-8')
-const passwordResetHtml = fs.readFileSync(path.join(__dirname, './resetPassword.html'), 'utf-8')
-const wrongAccountHtml = fs.readFileSync(path.join(__dirname, './wrongAccount.html'), 'utf-8')
-
-export const signupTemplate = ({ email, nonce }) => {
-  const actionUrl = new URL('/registration/create-user-account', CONFIG.CLIENT_URI)
-  actionUrl.searchParams.set('nonce', nonce)
-  actionUrl.searchParams.set('email', email)
-
-  return {
-    from,
-    to: email,
-    subject: 'Willkommen, Bienvenue, Welcome to Human Connection!',
-    html: mustache.render(signupHtml, { actionUrl, supportUrl }),
-  }
-}
-
-export const resetPasswordTemplate = ({ email, nonce, name }) => {
-  const actionUrl = new URL('/password-reset/change-password', CONFIG.CLIENT_URI)
-  actionUrl.searchParams.set('nonce', nonce)
-  actionUrl.searchParams.set('email', email)
-
-  return {
-    from,
-    to: email,
-    subject: 'Neues Passwort | Reset Password',
-    html: mustache.render(passwordResetHtml, { actionUrl, name, nonce, supportUrl }),
-  }
-}
-
-export const wrongAccountTemplate = ({ email }) => {
-  const actionUrl = new URL('/password-reset/request', CONFIG.CLIENT_URI)
-
-  return {
-    from,
-    to: email,
-    subject: 'Falsche Mailadresse? | Wrong E-mail?',
-    html: mustache.render(wrongAccountHtml, { actionUrl, supportUrl }),
-  }
-}

backend/src/middleware/email/templates/wrongAccount.html

@@ -1,229 +1,6 @@
-<!DOCTYPE html>
+<!-- Email Body German : BEGIN -->
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
+<table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-  xmlns:o="urn:schemas-microsoft-com:office:office">
+  style="margin: auto;">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
-  <title>Falsche Mailadresse? | Wrong E-mail?</title>
-
-  <!--[if mso]>
-    <style>
-        * {
-          font-family: sans-serif !important;
-        }
-    </style>
-  <![endif]-->
-
-  <!--[if !mso]><!-->
-  <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
-  <!--<![endif]-->
-
-  <!-- CSS RESETS -->
-  <style>
-    html,
-    body {
-      margin: 0 !important;
-      padding: 0 !important;
-      height: 100% !important;
-      width: 100% !important;
-    }
-
-    * {
-      -ms-text-size-adjust: 100%;
-      -webkit-text-size-adjust: 100%;
-    }
-
-    div[style*="margin: 16px 0"] {
-      margin: 0 !important;
-    }
-
-    table,
-    td {
-      mso-table-lspace: 0pt !important;
-      mso-table-rspace: 0pt !important;
-    }
-
-    table {
-      border-spacing: 0 !important;
-      border-collapse: collapse !important;
-      table-layout: fixed !important;
-      margin: 0 auto !important;
-    }
-
-    img {
-      -ms-interpolation-mode: bicubic;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    a[x-apple-data-detectors],
-    .unstyle-auto-detected-links a,
-    .aBn {
-      border-bottom: 0 !important;
-      cursor: default !important;
-      color: inherit !important;
-      text-decoration: none !important;
-      font-size: inherit !important;
-      font-family: inherit !important;
-      font-weight: inherit !important;
-      line-height: inherit !important;
-    }
-
-    .a6S {
-      display: none !important;
-      opacity: 0.01 !important;
-    }
-
-    .im {
-      color: inherit !important;
-    }
-
-    img.g-img+div {
-      display: none !important;
-    }
-
-    /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
-    @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
-      u~div .email-container {
-        min-width: 320px !important;
-      }
-    }
-
-    /* iPhone 6, 6S, 7, 8, and X */
-    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
-      u~div .email-container {
-        min-width: 375px !important;
-      }
-    }
-
-    /* iPhone 6+, 7+, and 8+ */
-    @media only screen and (min-device-width: 414px) {
-      u~div .email-container {
-        min-width: 414px !important;
-      }
-    }
-  </style>
-
-  <!--[if gte mso 9]>
-    <xml>
-        <o:OfficeDocumentSettings>
-            <o:AllowPNG/>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-    </xml>
-    <![endif]-->
-
-  <!-- PROGRESSIVE ENHANCEMENTS -->
-  <style>
-    .button-td,
-    .button-a {
-      transition: all 100ms ease-in;
-    }
-
-    .button-td-primary:hover,
-    .button-a-primary:hover {
-      background: #19c243 !important;
-      border-color: #555555 !important;
-    }
-
-    @media screen and (max-width: 600px) {
-      .email-container p {
-        font-size: 17px !important;
-      }
-    }
-  </style>
-
-  <!-- LANGUAGE TOGGLE -->
-  <style>
-    .toggle+label {
-      display: inline-block;
-      height: 40px;
-      padding: 0 12px;
-      margin-top: 40px;
-      line-height: 38px;
-      font-family: Lato, sans-serif;
-      font-size: 16px;
-      border: 1px solid #cbc7d1;
-      cursor: pointer;
-    }
-
-    .toggle+label:hover {
-      background-color: #bee876;
-    }
-
-    .toggle:checked+label {
-      background-color: #19c243;
-      color: white;
-    }
-
-    .toggle-english+label {
-      border-bottom-right-radius: 50px;
-      border-top-right-radius: 50px;
-      border-left: none;
-      margin-left: -2px;
-    }
-
-    .toggle-german+label {
-      border-bottom-left-radius: 50px;
-      border-top-left-radius: 50px;
-      border-right: none;
-      margin-right: -2px;
-    }
-
-    .toggle-german:checked~table.email-german {
-      display: block;
-    }
-
-    .toggle-german:checked~table.email-english {
-      display: none;
-    }
-
-    .toggle-english:checked~table.email-english {
-      display: block;
-    }
-
-    .toggle-english:checked~table.email-german {
-      display: none;
-    }
-  </style>
-</head>
-
-<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f5f4f6;">
-  <center style="width: 100%; background-color: #f5f4f6;">
-    <!--[if mso | IE]>
-      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f5f4f6;">
-        <tr>
-          <td>
-    <![endif]-->
-
-    <div style="max-width: 600px; margin: 0 auto;" class="email-container">
-      <!--[if mso]>
-        <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
-          <tr>
-            <td>
-      <![endif]-->
-
-      <!-- LANGUAGE TOGGLE -->
-      <input type="radio" name="language" class="toggle toggle-german" style="display: none;" id="toggle-german"
-        checked="checked">
-      <label for="toggle-german">Deutsch</label>
-      <input type="radio" name="language" class="toggle toggle-english" style="display:none;" id="toggle-english">
-      <label for="toggle-english">English</label>
-      <p style="margin: 0;"></p>
-
-      <!-- Email Body German : BEGIN -->
-      <table class="email-german" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
-        width="100%" style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -259,8 +36,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -282,8 +58,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">Wenn Du noch keinen Account bei <a href="https://human-connection.org"
                 style="color: #17b53e;">Human Connection</a> hast oder Dein Password gar nicht ändern willst,
               kannst Du diese E-Mail einfach ignorieren!</p>
@@ -318,12 +93,12 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body German : END -->
+<!-- Email Body German : END -->
 
-      <!-- Email Body English : BEGIN -->
+<!-- Email Body English : BEGIN -->
-      <table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+<table class="email-english" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        width="100%" style="margin: auto;">
+  style="margin: auto;">
   <tr>
     <td style="padding: 20px 0; text-align: center">
     </td>
@@ -358,8 +133,7 @@
         <tr>
           <td style="padding: 0 20px;">
             <!-- Button : BEGIN -->
-                  <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0"
+            <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
-                    style="margin: auto;">
               <tr>
                 <td class="button-td button-td-primary" style="border-radius: 4px; background: #17b53e;">
                   <a class="button-a button-a-primary" href="{{{ actionUrl }}}"
@@ -381,8 +155,7 @@
     <td style="background-color: #ffffff; padding: 0 20px;">
       <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
         <tr>
-                <td
+          <td style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
-                  style="padding: 20px; font-family: Lato, sans-serif; font-size: 16px; line-height: 22px; color: #555555;">
             <p style="margin: 0;">If you don't have an account at <a href="https://human-connection.org"
                 style="color: #17b53e;">Human Connection</a> yet or if you didn't want to reset your password,
               please ignore this e-mail.</p>
@@ -412,37 +185,5 @@
   </tr>
   <!-- 1 Column Text : END -->
 
-      </table>
+</table>
-      <!-- Email Body English : END -->
+<!-- Email Body English : END -->
-
-      <!-- Email Footer : BEGIN -->
-      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"
-        style="margin: auto;">
-        <tr>
-          <td
-            style="padding: 20px; font-family: Lato, sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;">
-            <br><br>
-            Human Connection gGmbH<br><span class="unstyle-auto-detected-links">Bahnhofstraße 11, 73235 Weilheim /
-              Teck<br>Germany</span>
-            <br><br>
-          </td>
-        </tr>
-      </table>
-      <!-- Email Footer : END -->
-
-      <!--[if mso]>
-            </td>
-          </tr>
-        </table>
-      <![endif]-->
-    </div>
-
-    <!--[if mso | IE]>
-          </td>
-        </tr>
-      </table>
-    <![endif]-->
-  </center>
-</body>
-
-</html>