forked from TryGhost/Ghost
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added sender email verification flow for newsletters
refs TryGhost/Product#584 refs TryGhost/Product#1498 - updated newsletter save routine in `edit-newsletter` modal to open an email confirmation modal if the API indicates one was sent - modal indicates that the previously set or default email will continue to be used until verified - response from API when saving looks like `{newsletters: [{...}], meta: {sent_email_verification: ['sender_name]}}` - added custom newsletter serializer and updated model so that the `meta` property returned in the response when saving posts is exposed - Ember Data only exposes meta on array-response find/query methods - emberjs/data#2905 - added `/settings/members-email-labs/?verifyEmail=xyz` query param handling - opens email verification modal if param is set and instantly clears the query param to avoid problems with sticky params - when the modal opens it makes a `PUT /newsletters/verify-email/` request with the token in the body params, on the API side this works the same as a newsletter update request returning the fully updated newsletter record which is then pushed into the store - removed unused from/reply address code from `<Settings::MembersEmailLabs>` component and controller - setting the values now handled per-newsletter in the edit-newsletter modal - verifying email change is handled in the members-email-labs controller - fixed mirage not outputting pluralized root for "singular" endpoints such as POST/PUT requests to better match our API behaviour
- Loading branch information
1 parent
cc6c0ac
commit e398557
Showing
13 changed files
with
272 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
ghost/admin/app/components/modals/edit-newsletter/confirm-newsletter-email.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <div class="modal-content"> | ||
| <header class="modal-header" data-test-modal="confirm-newsletter-email"> | ||
| <h1>Confirm newsletter email address</h1> | ||
| </header> | ||
| <button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button> | ||
|
|
||
| <div class="modal-body"> | ||
| <p> | ||
| We've sent a confirmation email to <strong>{{@data.newEmail}}</strong>. | ||
| Until the address has been verified newsletters will be sent from the | ||
| {{if @data.currentEmail "previous" "default"}} email address | ||
| ({{full-email-address (or @data.currentEmail "noreply")}}). | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <button | ||
| type="button" | ||
| class="gh-btn" | ||
| {{on "click" @close}} | ||
| {{on-key "Enter"}} | ||
| > | ||
| <span>Ok</span> | ||
| </button> | ||
| </div> | ||
| </div> |
34 changes: 34 additions & 0 deletions
34
ghost/admin/app/components/modals/edit-newsletter/verify-newsletter-email.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <div class="modal-content"> | ||
| <header class="modal-header" data-test-modal="verify-newsletter-email"> | ||
| <h1>Verifying newsletter email address</h1> | ||
| </header> | ||
| <button type="button" class="close" role="button" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button> | ||
|
|
||
| <div class="modal-body"> | ||
| {{#if this.verifyEmailTask.isRunning}} | ||
| <div class="flex justify-center flex-auto"> | ||
| <div class="gh-loading-spinner"></div> | ||
| </div> | ||
| {{else if this.newsletter}} | ||
| <p> | ||
| Success! From address for newsletter | ||
| "<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{this.newsletter.id}}>{{this.newsletter.name}}</LinkTo>" | ||
| changed to <strong>{{this.newsletter.senderEmail}}</strong> | ||
| </p> | ||
| {{else if this.error}} | ||
| <p>Verification failed:</p> | ||
| <p>{{this.error}}</p> | ||
| {{/if}} | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <button | ||
| type="button" | ||
| class="gh-btn" | ||
| {{on "click" @close}} | ||
| {{on-key "Enter"}} | ||
| > | ||
| <span>Ok</span> | ||
| </button> | ||
| </div> | ||
| </div> |
49 changes: 49 additions & 0 deletions
49
ghost/admin/app/components/modals/edit-newsletter/verify-newsletter-email.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import Component from '@glimmer/component'; | ||
| import {action} from '@ember/object'; | ||
| import {inject as service} from '@ember/service'; | ||
| import {task} from 'ember-concurrency'; | ||
| import {tracked} from '@glimmer/tracking'; | ||
|
|
||
| export default class VerifyNewsletterEmail extends Component { | ||
| @service ajax; | ||
| @service ghostPaths; | ||
| @service router; | ||
| @service store; | ||
|
|
||
| @tracked error = null; | ||
| @tracked newsletter = null; | ||
|
|
||
| constructor() { | ||
| super(...arguments); | ||
| this.verifyEmailTask.perform(this.args.data.token); | ||
|
|
||
| this.router.on('routeDidChange', this.handleRouteChange); | ||
| } | ||
|
|
||
| willDestroy() { | ||
| super.willDestroy(...arguments); | ||
| this.router.off('routeDidChange', this.handleRouteChange); | ||
| } | ||
|
|
||
| @task | ||
| *verifyEmailTask(token) { | ||
| try { | ||
| const url = this.ghostPaths.url.api('newsletters', 'verify-email'); | ||
|
|
||
| const response = yield this.ajax.put(url, {data: {token}}); | ||
|
|
||
| if (response.newsletters) { | ||
| this.store.pushPayload('newsletter', response); | ||
| const newsletter = this.store.peekRecord('newsletter', response.newsletters[0].id); | ||
| this.newsletter = newsletter; | ||
| } | ||
| } catch (e) { | ||
| this.error = e.message; | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| handleRouteChange() { | ||
| this.args.close(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 2 additions & 25 deletions
27
ghost/admin/app/controllers/settings/members-email-labs.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /* eslint-disable camelcase */ | ||
| import ApplicationSerializer from './application'; | ||
|
|
||
| export default class MemberSerializer extends ApplicationSerializer { | ||
| // HACK: Ember Data doesn't expose `meta` properties consistently | ||
| // - https://github.com/emberjs/data/issues/2905 | ||
| // | ||
| // We need the `meta` data returned when saving so we extract it and dump | ||
| // it onto the model as an attribute then delete it again when serializing. | ||
| normalizeResponse() { | ||
| const json = super.normalizeResponse(...arguments); | ||
|
|
||
| if (json.meta && json.data.attributes) { | ||
| json.data.attributes._meta = json.meta; | ||
| } | ||
|
|
||
| return json; | ||
| } | ||
|
|
||
| serialize() { | ||
| const json = super.serialize(...arguments); | ||
|
|
||
| delete json._meta; | ||
|
|
||
| return json; | ||
| } | ||
| } |
Oops, something went wrong.