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}}
+
+ {{#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}}
+
+ {{/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"}}Close
+
+
+ We have sent an email to confirm you own {{this.fromAddress}}.
+
+
+
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 @@
+
\ No newline at end of file