407 change your email address

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,17 @@ 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)
+  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,190 @@
+<!-- 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 möchtest also deine E-Mail ändern? Kein Problem! Mit Klick auf diesen Button
+              kannst Du Deine neue E-Mail Adresse bestätigen:</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;">E-Mail
+                    Adresse
+                    bestätigen</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 deine E-Mail Adresse doch nicht ändern möchtest, kannst du diese Nachricht
+              einfach ignorieren. Mlde Dich gerne <a href="{{{ supportUrl }}}" style="color: #17b53e;">bei
+                unserem Support Team</a>, wenn du noch Fragen hast!</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 want to change your e-mail? No problem! Just click the button below to verify
+              your new address:</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;">Verify
+                    e-mail address</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 don't want to change your e-mail address feel free to ignore this message. 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')