From 8a5907e2f2303707118e858f7578adcc4965a94e Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Tue, 16 Apr 2019 11:49:39 +0200 Subject: [PATCH] feat(email-plugin): Create handler for email address change Relates to #87 --- packages/dev-server/dev-config.ts | 1 + packages/email-plugin/dev-mailbox.html | 16 ++++++++++++--- .../src/default-email-handlers.ts | 12 +++++++++-- packages/email-plugin/src/event-listener.ts | 2 +- packages/email-plugin/src/mock-events.ts | 16 +++++++++++---- .../templates/email-address-change/body.hbs | 20 +++++++++++++++++++ 6 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 packages/email-plugin/templates/email-address-change/body.hbs diff --git a/packages/dev-server/dev-config.ts b/packages/dev-server/dev-config.ts index 442076439e..ac5b4dda84 100644 --- a/packages/dev-server/dev-config.ts +++ b/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({ diff --git a/packages/email-plugin/dev-mailbox.html b/packages/email-plugin/dev-mailbox.html index 591581dd79..6c42e9ee49 100644 --- a/packages/email-plugin/dev-mailbox.html +++ b/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; } diff --git a/packages/email-plugin/src/default-email-handlers.ts b/packages/email-plugin/src/default-email-handlers.ts index b2ed37e184..2e1f6fae9e 100644 --- a/packages/email-plugin/src/default-email-handlers.ts +++ b/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, ]; diff --git a/packages/email-plugin/src/event-listener.ts b/packages/email-plugin/src/event-listener.ts index d46f6e5220..e26aae9434 100644 --- a/packages/email-plugin/src/event-listener.ts +++ b/packages/email-plugin/src/event-listener.ts @@ -206,7 +206,7 @@ export class EmailEventHandler): EmailEventHandler { this._mockEvent = event; diff --git a/packages/email-plugin/src/mock-events.ts b/packages/email-plugin/src/mock-events.ts index a61cccd906..9738adcce3 100644 --- a/packages/email-plugin/src/mock-events.ts +++ b/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', + }), +); diff --git a/packages/email-plugin/templates/email-address-change/body.hbs b/packages/email-plugin/templates/email-address-change/body.hbs new file mode 100644 index 0000000000..b9954b058a --- /dev/null +++ b/packages/email-plugin/templates/email-address-change/body.hbs @@ -0,0 +1,20 @@ +{{> header title="Verify Your New Email Address" }} + + + + + 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: + + + + Verify Me! + + + + + +{{> footer }}