Skip to content

Commit

Permalink
feat(email-plugin): Create handler for email address change
Browse files Browse the repository at this point in the history
Relates to #87
  • Loading branch information
michaelbromley committed Apr 16, 2019
1 parent 8f0c6e7 commit 8a5907e
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 10 deletions.
1 change: 1 addition & 0 deletions packages/dev-server/dev-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
16 changes: 13 additions & 3 deletions packages/email-plugin/dev-mailbox.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
12 changes: 10 additions & 2 deletions packages/email-plugin/src/default-email-handlers.ts
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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,
];
2 changes: 1 addition & 1 deletion packages/email-plugin/src/event-listener.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 12 additions & 4 deletions packages/email-plugin/src/mock-events.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -111,3 +110,12 @@ export const mockPasswordResetEvent = new PasswordResetEvent(
passwordResetToken: 'MjAxOS0wNC0xNVQxMzozMDozOC43MjFa_MA2FR6HRZBW7JWD6',
}),
);

export const mockEmailAddressChangeEvent = new IdentifierChangeRequestEvent(
{} as any,
new User({
identifier: '[email protected]',
pendingIdentifier: '[email protected]',
identifierChangeToken: 'MjAxOS0wNC0xNVQxMzozMDozOC43MjFa_MA2FR6HRZBW7JWD6',
}),
);
20 changes: 20 additions & 0 deletions packages/email-plugin/templates/email-address-change/body.hbs
Original file line number Diff line number Diff line change
@@ -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 }}

0 comments on commit 8a5907e

Please sign in to comment.