Refactored members email settings screen

no issue

- simplified query params as they are only used to display a notification
  - removed all controller knowledge and associated reset behaviour for query params
  - moved notification display from `setupController` to `beforeModel` so the raw query params can be pulled off of the transition object
- removed unused service injections from `<GhMembersEmailSetting>`
- removed unused service injections and properties from members-email controller that were left over from a copy/paste
- converted members-email controller to a native class
- fixed "leave settings" confirmation modal behaviour that wasn't moved across in the the settings screen re-org

ghost/admin/app/components/gh-members-email-setting.hbs

@@ -194,13 +194,6 @@
     </section>
 </div>
 
-{{#if this.showLeaveSettingsModal}}
-    <GhFullscreenModal @modal="leave-settings"
-        @confirm={{action "leavePortalSettings"}}
-        @close={{action "closeLeaveSettingsModal"}}
-        @modifier="action wide" />
-{{/if}}
-
 {{#if this.showEmailDesignSettings}}
     <GhFullscreenModal @modifier="full-overlay portal-settings">
         <ModalEmailDesignSettings

ghost/admin/app/components/gh-members-email-setting.js

@@ -19,9 +19,7 @@ const REPLY_ADDRESSES = [
 ];
 
 export default Component.extend({
-    feature: service(),
     config: service(),
-    mediaQueries: service(),
     ghostPaths: service(),
     ajax: service(),
     settings: service(),
@@ -30,9 +28,7 @@ export default Component.extend({
     showFromAddressConfirmation: false,
     showSupportAddressConfirmation: false,
     showEmailDesignSettings: false,
-    showLeaveSettingsModal: false,
 
-    // passed in actions
     mailgunIsConfigured: reads('config.mailgunIsConfigured'),
     emailTrackOpens: reads('settings.emailTrackOpens'),
 
@@ -136,10 +132,6 @@ export default Component.extend({
             const newReplyAddress = event.value;
 
             this.set('settings.membersReplyAddress', newReplyAddress);
-        },
-
-        closeLeaveSettingsModal() {
-            this.set('showLeaveSettingsModal', false);
         }
     },
 

ghost/admin/app/controllers/settings/members-email.js

@@ -1,44 +1,48 @@
-/* eslint-disable ghost/ember/alias-model-in-controller */
 import Controller from '@ember/controller';
-import {computed} from '@ember/object';
+import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
-import {task} from 'ember-concurrency';
+import {task} from 'ember-concurrency-decorators';
+import {tracked} from '@glimmer/tracking';
 
-export default Controller.extend({
-    ajax: service(),
-    config: service(),
-    feature: service(),
-    ghostPaths: service(),
-    notifications: service(),
-    session: service(),
-    settings: service(),
+export default class MembersEmailController extends Controller {
+    @service config;
+    @service session;
+    @service settings;
 
-    queryParams: ['fromAddressUpdate', 'supportAddressUpdate'],
-    fromAddressUpdate: null,
-    supportAddressUpdate: null,
-    importErrors: null,
-    importSuccessful: false,
-    showDeleteAllModal: false,
-    submitting: false,
-    uploadButtonText: 'Import',
+    // from/supportAddress are set here so that they can be reset to saved values on save
+    // to avoid it looking like they've been saved when they have a separate update process
+    @tracked fromAddress = '';
+    @tracked supportAddress = '';
 
-    importMimeType: null,
-    jsonExtension: null,
-    jsonMimeType: null,
-    yamlExtension: null,
-    yamlMimeType: null,
+    @tracked showLeaveSettingsModal = false;
 
-    yamlAccept: null,
+    @action
+    setEmailAddress(property, email) {
+        this[property] = email;
+    }
 
-    fromAddress: computed(function () {
-        return this.parseEmailAddress(this.settings.get('membersFromAddress'));
-    }),
+    leaveRoute(transition) {
+        if (this.settings.get('hasDirtyAttributes')) {
+            transition.abort();
+            this.leaveSettingsTransition = transition;
+            this.showLeaveSettingsModal = true;
+        }
+    }
 
-    supportAddress: computed(function () {
-        return this.parseEmailAddress(this.settings.get('membersSupportAddress'));
-    }),
+    @action
+    async confirmLeave() {
+        this.settings.rollbackAttributes();
+        this.showLeaveSettingsModal = false;
+        this.leaveSettingsTransition.retry();
+    }
 
-    blogDomain: computed('config.blogDomain', function () {
+    @action
+    cancelLeave() {
+        this.showLeaveSettingsModal = false;
+        this.leaveSettingsTransition = null;
+    }
+
+    get blogDomain() {
         let blogDomain = this.config.blogDomain || '';
         const domainExp = blogDomain.replace('https://', '').replace('http://', '').match(new RegExp('^([^/:?#]+)(?:[/:?#]|$)', 'i'));
         const domain = (domainExp && domainExp[1]) || '';
@@ -46,13 +50,7 @@ export default Controller.extend({
             return domain.replace(/^(www)\.(?=[^/]*\..{2,5})/, '');
         }
         return domain;
-    }),
-
-    actions: {
-        setEmailAddress(type, emailAddress) {
-            this.set(type, emailAddress);
     }
-    },
 
     parseEmailAddress(address) {
         const emailAddress = address || 'noreply';
@@ -61,18 +59,17 @@ export default Controller.extend({
             return `${emailAddress}@${this.blogDomain}`;
         }
         return emailAddress;
-    },
-
-    saveSettings: task(function* () {
-        const response = yield this.settings.save();
-        // Reset from address value on save
-        this.set('fromAddress', this.parseEmailAddress(this.settings.get('membersFromAddress')));
-        this.set('supportAddress', this.parseEmailAddress(this.settings.get('membersSupportAddress')));
-        return response;
-    }).drop(),
-
-    reset() {
-        this.set('fromAddressUpdate', null);
-        this.set('supportAddressUpdate', null);
     }
-});
+
+    resetEmailAddresses() {
+        this.fromAddress = this.parseEmailAddress(this.settings.get('membersFromAddress'));
+        this.supportAddress = this.parseEmailAddress(this.settings.get('membersSupportAddress'));
+    }
+
+    @task({drop: true})
+    *saveSettings() {
+        const response = yield this.settings.save();
+        this.resetEmailAddresses();
+        return response;
+    }
+}

ghost/admin/app/routes/settings/members-email.js

@@ -3,22 +3,27 @@ import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
 import {inject as service} from '@ember/service';
 
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
-    settings: service(),
     notifications: service(),
-    queryParams: {
-        fromAddressUpdate: {
-            replace: true
-        },
-        supportAddressUpdate: {
-            replace: true
-        }
-    },
+    settings: service(),
 
-    beforeModel() {
+    beforeModel(transition) {
         this._super(...arguments);
         return this.get('session.user')
             .then(this.transitionAuthor())
-            .then(this.transitionEditor());
+            .then(this.transitionEditor())
+            .then(() => {
+                if (transition.to.queryParams?.fromAddressUpdate === 'success') {
+                    this.notifications.showAlert(
+                        `Newsletter email address has been updated`.htmlSafe(),
+                        {type: 'success', key: 'members.settings.from-address.updated'}
+                    );
+                } else if (transition.to.queryParams?.supportAddressUpdate === 'success') {
+                    this.notifications.showAlert(
+                        `Support email address has been updated`.htmlSafe(),
+                        {type: 'success', key: 'members.settings.support-address.updated'}
+                    );
+                }
+            });
     },
 
     model() {
@@ -26,22 +31,12 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
     },
 
     setupController(controller) {
-        if (controller.fromAddressUpdate === 'success') {
-            this.notifications.showAlert(
-                `Newsletter email address has been updated`.htmlSafe(),
-                {type: 'success', key: 'members.settings.from-address.updated'}
-            );
-        } else if (controller.supportAddressUpdate === 'success') {
-            this.notifications.showAlert(
-                `Support email address has been updated`.htmlSafe(),
-                {type: 'success', key: 'members.settings.support-address.updated'}
-            );
-        }
+        controller.resetEmailAddresses();
     },
 
-    resetController(controller, isExiting) {
-        if (isExiting) {
-            controller.reset();
+    actions: {
+        willTransition(transition) {
+            return this.controller.leaveRoute(transition);
         }
     },
 

ghost/admin/app/templates/settings/members-email.hbs

@@ -24,10 +24,19 @@
                 @settings={{this.settings}}
                 @fromAddress={{this.fromAddress}}
                 @supportAddress={{this.supportAddress}}
-                @setEmailAddress={{action "setEmailAddress"}}
+                @setEmailAddress={{this.setEmailAddress}}
             />
         </div>
         {{/if}}
 
     </section>
+
+    {{#if this.showLeaveSettingsModal}}
+        <GhFullscreenModal
+            @modal="leave-settings"
+            @confirm={{this.confirmLeave}}
+            @close={{this.cancelLeave}}
+            @modifier="action wide"
+        />
+    {{/if}}
 </section>