diff --git a/app/components/gh-alert.hbs b/app/components/gh-alert.hbs index bbe2d848b..24b6f342d 100644 --- a/app/components/gh-alert.hbs +++ b/app/components/gh-alert.hbs @@ -2,5 +2,5 @@ {{message.message}} diff --git a/app/components/gh-members-lab-setting.hbs b/app/components/gh-members-lab-setting.hbs index 641d00859..3dbb1b276 100644 --- a/app/components/gh-members-lab-setting.hbs +++ b/app/components/gh-members-lab-setting.hbs @@ -219,74 +219,101 @@
-

Email settings

-

Customise signup, signin and subscription emails

+

From address

+

The email address your members receive newsletters from

- +
- {{#liquid-if this.membersEmailOpen}} -
- - -
- - @{{this.blogDomain}} -
-
Your members will receive system emails from this address
-
- - {{#unless this.hasBulkEmailConfig}} -
- - -
- - {{region.flag}} {{region.name}} - -
-
- - - - -
- + {{#liquid-if this.membersFromOpen}} +
- - - - Find your Mailgun API keys here » - +
+ + +
- {{/unless}} -
+ {{#if this.showFromAddressConfirmation}} +
+ {{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} Check your inbox and click the link to confirm +
+ {{/if}} +
{{/liquid-if}}
+ {{#unless this.hasBulkEmailConfig}} +
+
+
+

Mailgun settings

+

Customise signup, signin and subscription emails

+
+
+ +
+
+ + {{#liquid-if this.membersEmailOpen}} +
+
+ + +
+ + {{region.flag}} {{region.name}} + +
+
+ + + + +
+ + + + + + Find your Mailgun API keys here » + + +
+ {{/liquid-if}} +
+ {{/unless}} \ No newline at end of file diff --git a/app/components/gh-members-lab-setting.js b/app/components/gh-members-lab-setting.js index e6a82b788..13b5797be 100644 --- a/app/components/gh-members-lab-setting.js +++ b/app/components/gh-members-lab-setting.js @@ -3,6 +3,7 @@ import {computed} from '@ember/object'; import {reads} from '@ember/object/computed'; import {inject as service} from '@ember/service'; import {set} from '@ember/object'; +import {task} from 'ember-concurrency'; const US = {flag: '🇺🇸', name: 'US', baseUrl: 'https://api.mailgun.net/v3'}; const EU = {flag: '🇪🇺', name: 'EU', baseUrl: 'https://api.eu.mailgun.net/v3'}; @@ -30,8 +31,10 @@ export default Component.extend({ config: service(), mediaQueries: service(), ghostPaths: service(), + ajax: service(), currencies: null, + showFromAddressConfirmation: false, // passed in actions setMembersSubscriptionSettings() {}, @@ -45,6 +48,10 @@ export default Component.extend({ return CURRENCIES.findBy('value', this.get('subscriptionSettings.stripeConfig.plans.monthly.currency')); }), + disableUpdateFromAddressButton: computed('subscriptionSettings.fromAddress', function () { + return (this.originalFromAddress === this.get('subscriptionSettings.fromAddress')); + }), + mailgunRegion: computed('settings.bulkEmailSettings.baseUrl', function () { if (!this.settings.get('bulkEmailSettings.baseUrl')) { return US; @@ -103,6 +110,10 @@ export default Component.extend({ }, actions: { + toggleFromAddressConfirmation() { + this.toggleProperty('showFromAddressConfirmation'); + }, + setDefaultContentVisibility(value) { this.setDefaultContentVisibility(value); }, @@ -183,6 +194,22 @@ export default Component.extend({ } }, + updateFromAddress: task(function* () { + let url = this.get('ghostPaths.url').api('/settings/members/email'); + try { + const response = yield this.ajax.post(url, { + data: { + from_address: this.subscriptionSettings.fromAddress + } + }); + this.toggleProperty('showFromAddressConfirmation'); + return response; + } catch (e) { + // Failed to send email, retry + return false; + } + }).drop(), + get stripeConnectAuthUrl() { return this.ghostPaths.url.api('members/stripe_connect'); } diff --git a/app/components/modal-from-address-confirmation.hbs b/app/components/modal-from-address-confirmation.hbs new file mode 100644 index 000000000..7649e24b5 --- /dev/null +++ b/app/components/modal-from-address-confirmation.hbs @@ -0,0 +1,12 @@ + +{{svg-jar "close"}} + + + + diff --git a/app/components/modal-from-address-confirmation.js b/app/components/modal-from-address-confirmation.js new file mode 100644 index 000000000..3f004e206 --- /dev/null +++ b/app/components/modal-from-address-confirmation.js @@ -0,0 +1,8 @@ +import ModalComponent from 'ghost-admin/components/modal-base'; +import {alias} from '@ember/object/computed'; + +export default ModalComponent.extend({ + + confirm() {}, + fromAddress: alias('model.fromAddress') +}); diff --git a/app/controllers/settings/labs.js b/app/controllers/settings/labs.js index 65122f875..c6e0a5189 100644 --- a/app/controllers/settings/labs.js +++ b/app/controllers/settings/labs.js @@ -42,6 +42,8 @@ export default Controller.extend({ session: service(), settings: service(), + queryParams: ['fromAddressUpdate'], + fromAddressUpdate: null, importErrors: null, importSuccessful: false, showDeleteAllModal: false, @@ -250,5 +252,6 @@ export default Controller.extend({ reset() { this.set('importErrors', null); this.set('importSuccessful', false); + this.set('fromAddressUpdate', null); } }); diff --git a/app/routes/settings/labs.js b/app/routes/settings/labs.js index 8a305a2d5..81ad3fe3c 100644 --- a/app/routes/settings/labs.js +++ b/app/routes/settings/labs.js @@ -4,6 +4,12 @@ import {inject as service} from '@ember/service'; export default AuthenticatedRoute.extend(CurrentUserSettings, { settings: service(), + notifications: service(), + queryParams: { + fromAddressUpdate: { + replace: true + } + }, beforeModel() { this._super(...arguments); @@ -16,6 +22,15 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, { return this.settings.reload(); }, + setupController(controller) { + if (controller.fromAddressUpdate === 'success') { + this.notifications.showAlert( + `Done! Newsletter “From address” has been updated`.htmlSafe(), + {type: 'success', key: 'members.settings.from-address.updated'} + ); + } + }, + resetController(controller, isExiting) { if (isExiting) { controller.reset(); diff --git a/app/styles/components/notifications.css b/app/styles/components/notifications.css index e3dba4874..6a850f152 100644 --- a/app/styles/components/notifications.css +++ b/app/styles/components/notifications.css @@ -203,7 +203,7 @@ .gh-alert-content { font-size: 1.4rem; line-height: 1.3em; - font-weight: 300; + font-weight: 400; user-select: text; } @@ -216,14 +216,14 @@ .gh-alert-close { flex-shrink: 0; margin-left: 20px; - padding: 5px; + padding: 4px; font-size: 10px; line-height: 10px; } .gh-alert-close svg { - height: 10px; - width: 10px; + height: 12px; + width: 12px; } .gh-alert-close:hover { diff --git a/app/styles/patterns/buttons.css b/app/styles/patterns/buttons.css index a5d5386fb..8aa524d97 100644 --- a/app/styles/patterns/buttons.css +++ b/app/styles/patterns/buttons.css @@ -320,6 +320,10 @@ fieldset[disabled] .gh-btn { fill: color-mod(var(--midgrey) l(+15%)); } +.gh-btn:not(.gh-btn-blue):not(.gh-btn-green) svg.gh-icon-spinner rect { + fill: color-mod(var(--midgrey) l(-7%)); +} + .gh-btn-icon-right svg, svg.gh-btn-icon-right { margin-left: 0.5em; @@ -374,6 +378,11 @@ svg.gh-btn-icon-right { box-shadow: none; } +.gh-btn-textfield-group span { + height: 36px; + line-height: 36px; +} + /* /* Button Variations diff --git a/app/styles/spirit/_line-height.css b/app/styles/spirit/_line-height.css index 16af74b9b..d2bb5bffd 100644 --- a/app/styles/spirit/_line-height.css +++ b/app/styles/spirit/_line-height.css @@ -8,6 +8,7 @@ */ :root { + --lh-1-0: 1.0em; --lh-1-1: 1.1em; --lh-1-3: 1.333em; --lh-1-4: 1.4em; @@ -15,6 +16,7 @@ --lh-2-0: 2.0em; } +.lh-1 { line-height: var(--lh-1-0); } .lh-solid { line-height: var(--lh-1-1); } .lh-heading { line-height: var(--lh-1-3); } .lh-title { line-height: var(--lh-1-4); } @@ -24,6 +26,7 @@ .lh-zero { line-height: 0; } @media (--breakpoint-not-small) { + .lh-1-ns { line-height: var(--lh-1-0); } .lh-solid-ns { line-height: var(--lh-1-1); } .lh-heading-ns { line-height: var(--lh-1-3); } .lh-title-ns { line-height: var(--lh-1-4); } @@ -34,6 +37,7 @@ } @media (--breakpoint-medium) { + .lh-1-m { line-height: var(--lh-1-0); } .lh-solid-m { line-height: var(--lh-1-1); } .lh-heading-m { line-height: var(--lh-1-3); } .lh-title-m { line-height: var(--lh-1-4); } @@ -44,6 +48,7 @@ } @media (--breakpoint-large) { + .lh-1-l { line-height: var(--lh-1-0); } .lh-solid-l { line-height: var(--lh-1-1); } .lh-heading-l { line-height: var(--lh-1-3); } .lh-title-l { line-height: var(--lh-1-4); } diff --git a/public/assets/icons/close-stroke.svg b/public/assets/icons/close-stroke.svg new file mode 100644 index 000000000..63b8d5d6f --- /dev/null +++ b/public/assets/icons/close-stroke.svg @@ -0,0 +1 @@ +close \ No newline at end of file