feat(email-plugin): Create handler for email address change

Relates to #87

packages/dev-server/dev-config.ts

@@ -65,6 +65,7 @@ export const devConfig: VendureConfig = {
             globalTemplateVars: {
                 verifyEmailAddressUrl: 'http://localhost:8080/verify',
                 passwordResetUrl: 'http://localhost:8080/password-reset',
+                changeEmailAddressUrl: 'http://localhost:8080/verify-email-address-change'
             },
         }),
         new AdminUiPlugin({

packages/email-plugin/dev-mailbox.html

@@ -17,20 +17,20 @@
             align-items: center;
             background-color: #2a2929;
             color: #efefef;
+            height: 60px;
         }
         .heading {
             margin: 0;
+            font-size: 22px;
         }
         button#refresh {
             margin-left: 12px;
             border-radius: 3px;
-            padding: 3px 6px;
             display: flex;
             align-items: center;
         }
         button#refresh .label {
             margin-left: 6px;
-            font-size: 16px;
         }
         .generate-controls {
             flex: 1;
@@ -40,9 +40,19 @@
         input, select, button {
             padding: 6px;
             border-radius: 3px;
-            border: 1px solid #15a9df;
+            border: 1px solid #0b384b;
             margin-left: 3px;
         }
+        button {
+            text-transform: uppercase;
+            font-size: 12px;
+            transition: background-color 0.2s;
+            padding: 0 12px;
+            height: 32px;
+        }
+        button:hover {
+            background-color: #efefef;
+        }
         #language-code {
             width: 32px;
         }

packages/email-plugin/src/default-email-handlers.ts

@@ -1,8 +1,8 @@
 /* tslint:disable:no-non-null-assertion */
-import { AccountRegistrationEvent, OrderStateTransitionEvent, PasswordResetEvent } from '@vendure/core';
+import { AccountRegistrationEvent, IdentifierChangeRequestEvent, OrderStateTransitionEvent, PasswordResetEvent } from '@vendure/core';
 
 import { EmailEventListener } from './event-listener';
-import { mockAccountRegistrationEvent, mockOrderStateTransitionEvent, mockPasswordResetEvent } from './mock-events';
+import { mockAccountRegistrationEvent, mockEmailAddressChangeEvent, mockOrderStateTransitionEvent, mockPasswordResetEvent } from './mock-events';
 
 export const orderConfirmationHandler = new EmailEventListener('order-confirmation')
     .on(OrderStateTransitionEvent)
@@ -26,8 +26,16 @@ export const passwordResetHandler = new EmailEventListener('password-reset')
     .setTemplateVars(event => ({ user: event.user }))
     .setMockEvent(mockPasswordResetEvent);
 
+export const emailAddressChangeHandler = new EmailEventListener('email-address-change')
+    .on(IdentifierChangeRequestEvent)
+    .setRecipient(event => event.user.pendingIdentifier!)
+    .setSubject(`Please verify your change of email address`)
+    .setTemplateVars(event => ({ user: event.user }))
+    .setMockEvent(mockEmailAddressChangeEvent);
+
 export const defaultEmailHandlers = [
     orderConfirmationHandler,
     emailVerificationHandler,
     passwordResetHandler,
+    emailAddressChangeHandler,
 ];

packages/email-plugin/src/event-listener.ts

@@ -206,7 +206,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
     /**
      * @description
      * Optionally define a mock Event which is used by the dev mode mailbox app for generating mock emails
-     * from this handler.
+     * from this handler, which is useful when developing the email templates.
      */
     setMockEvent(event: Omit<Event, 'ctx'>): EmailEventHandler<T, Event> {
         this._mockEvent = event;

packages/email-plugin/src/mock-events.ts

@@ -1,14 +1,13 @@
-import { LanguageCode } from '@vendure/common/lib/generated-types';
 import {
     AccountRegistrationEvent,
-    Channel,
     Customer,
+    IdentifierChangeRequestEvent,
     Order,
     OrderItem,
     OrderLine,
-    OrderStateTransitionEvent, PasswordResetEvent,
+    OrderStateTransitionEvent,
+    PasswordResetEvent,
     ProductVariant,
-    RequestContext,
     User,
 } from '@vendure/core';
 
@@ -111,3 +110,12 @@ export const mockPasswordResetEvent = new PasswordResetEvent(
         passwordResetToken: 'MjAxOS0wNC0xNVQxMzozMDozOC43MjFa_MA2FR6HRZBW7JWD6',
     }),
 );
+
+export const mockEmailAddressChangeEvent = new IdentifierChangeRequestEvent(
+    {} as any,
+    new User({
+        identifier: 'old-address@test.com',
+        pendingIdentifier: 'new-address@test.com',
+        identifierChangeToken: 'MjAxOS0wNC0xNVQxMzozMDozOC43MjFa_MA2FR6HRZBW7JWD6',
+    }),
+);

packages/email-plugin/templates/email-address-change/body.hbs

@@ -0,0 +1,20 @@
+{{> header title="Verify Your New Email Address" }}
+
+<mj-section background-color="#fafafa">
+    <mj-column>
+        <mj-text color="#525252">
+            We received a request to change your registered email address to this one.
+            Click the button below to verify this address and complete the process:
+        </mj-text>
+
+        <mj-button font-family="Helvetica"
+                   background-color="#f45e43"
+                   color="white"
+                   href="{{ changeEmailAddressUrl }}?token={{ user.identifierChangeToken }}">
+            Verify Me!
+        </mj-button>
+    </mj-column>
+</mj-section>
+
+
+{{> footer }}