Refactored styleBody mixin

no issue
- removed `styleBody` mixin in favour of using Ember's `buildRouteInfoMetadata` hook and router events in the `ui` service
- refactored separate CSS classes for each unauthenticated route into a single `.unauthenticated-route` class because hiding mobile nav whilst unauthenticated was the only use for body classes

app/routes/reset.js

@@ -1,14 +1,11 @@
 import Route from '@ember/routing/route';
 import UnauthenticatedRouteMixin from 'ghost-admin/mixins/unauthenticated-route-mixin';
-import styleBody from 'ghost-admin/mixins/style-body';
 import {inject as service} from '@ember/service';
 
-export default Route.extend(styleBody, UnauthenticatedRouteMixin, {
+export default Route.extend(UnauthenticatedRouteMixin, {
     notifications: service(),
     session: service(),
 
-    classNames: ['ghost-reset'],
-
     beforeModel() {
         if (this.get('session.isAuthenticated')) {
             this.notifications.showAlert('You can\'t reset your password while you\'re signed in.', {type: 'warn', delayed: true, key: 'password.reset.signed-in'});
@@ -25,5 +22,11 @@ export default Route.extend(styleBody, UnauthenticatedRouteMixin, {
     deactivate() {
         this._super(...arguments);
         this.controller.clearData();
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            bodyClasses: ['unauthenticated-route']
+        };
     }
 });

app/routes/settings/general.js

@@ -1,15 +1,13 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
 import RSVP from 'rsvp';
-import styleBody from 'ghost-admin/mixins/style-body';
 import {inject as service} from '@ember/service';
 
-export default AuthenticatedRoute.extend(styleBody, CurrentUserSettings, {
+export default AuthenticatedRoute.extend(CurrentUserSettings, {
     config: service(),
     settings: service(),
 
     titleToken: 'Settings - General',
-    classNames: ['settings-view-general'],
 
     beforeModel() {
         this._super(...arguments);

app/routes/setup.js

@@ -1,17 +1,14 @@
 import Route from '@ember/routing/route';
-import styleBody from 'ghost-admin/mixins/style-body';
 import {inject as service} from '@ember/service';
 
-export default Route.extend(styleBody, {
+export default Route.extend({
     ghostPaths: service(),
     session: service(),
     ajax: service(),
     config: service(),
 
     titleToken: 'Setup',
 
-    classNames: ['ghost-setup'],
-
     // use the beforeModel hook to check to see whether or not setup has been
     // previously completed.  If it has, stop the transition into the setup page.
     beforeModel() {
@@ -50,5 +47,11 @@ export default Route.extend(styleBody, {
     deactivate() {
         this._super(...arguments);
         this.controllerFor('setup/two').set('password', '');
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            bodyClasses: ['unauthenticated-route']
+        };
     }
 });

app/routes/signin.js

@@ -2,7 +2,6 @@ import DS from 'ember-data';
 import EmberObject from '@ember/object';
 import Route from '@ember/routing/route';
 import UnauthenticatedRouteMixin from 'ghost-admin/mixins/unauthenticated-route-mixin';
-import styleBody from 'ghost-admin/mixins/style-body';
 
 const {Errors} = DS;
 
@@ -14,11 +13,9 @@ const defaultModel = function defaultModel() {
     });
 };
 
-export default Route.extend(UnauthenticatedRouteMixin, styleBody, {
+export default Route.extend(UnauthenticatedRouteMixin, {
     titleToken: 'Sign In',
 
-    classNames: ['ghost-login'],
-
     model() {
         return defaultModel();
     },
@@ -31,5 +28,11 @@ export default Route.extend(UnauthenticatedRouteMixin, styleBody, {
 
         // clear the properties that hold the credentials when we're no longer on the signin screen
         controller.set('signin', defaultModel());
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            bodyClasses: ['unauthenticated-route']
+        };
     }
 });

app/routes/signup.js

@@ -4,21 +4,18 @@ import RSVP from 'rsvp';
 import Route from '@ember/routing/route';
 import UnauthenticatedRouteMixin from 'ghost-admin/mixins/unauthenticated-route-mixin';
 import ValidationEngine from 'ghost-admin/mixins/validation-engine';
-import styleBody from 'ghost-admin/mixins/style-body';
 import {inject as service} from '@ember/service';
 
 const {Promise} = RSVP;
 const {Errors} = DS;
 
-export default Route.extend(styleBody, UnauthenticatedRouteMixin, {
+export default Route.extend(UnauthenticatedRouteMixin, {
     ghostPaths: service(),
     notifications: service(),
     session: service(),
     ajax: service(),
     config: service(),
 
-    classNames: ['ghost-signup'],
-
     beforeModel() {
         if (this.get('session.isAuthenticated')) {
             this.notifications.showAlert('You need to sign out to register as a new user.', {type: 'warn', delayed: true, key: 'signup.create.already-authenticated'});
@@ -82,5 +79,11 @@ export default Route.extend(styleBody, UnauthenticatedRouteMixin, {
 
         // clear the properties that hold the sensitive data from the controller
         this.controllerFor('signup').get('signupDetails').setProperties({email: '', password: '', token: ''});
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            bodyClasses: ['unauthenticated-route']
+        };
     }
 });

app/services/ui.js

@@ -1,9 +1,35 @@
 import Service, {inject as service} from '@ember/service';
+import {get} from '@ember/object';
 import {not, or, reads} from '@ember/object/computed';
 
+function updateBodyClasses(transition) {
+    let oldClasses = [];
+    let newClasses = [];
+    let {from, to} = transition;
+
+    while (from) {
+        oldClasses = oldClasses.concat(get(from, 'metadata.bodyClasses') || []);
+        from = from.parent;
+    }
+
+    while (to) {
+        newClasses = newClasses.concat(get(to, 'metadata.bodyClasses') || []);
+        to = to.parent;
+    }
+
+    let {body} = document;
+    oldClasses.forEach((oldClass) => {
+        body.classList.remove(oldClass);
+    });
+    newClasses.forEach((newClass) => {
+        body.classList.add(newClass);
+    });
+}
+
 export default Service.extend({
     dropdown: service(),
     mediaQueries: service(),
+    router: service(),
 
     isFullScreen: false,
     showMobileMenu: false,
@@ -13,6 +39,13 @@ export default Service.extend({
     isMobile: reads('mediaQueries.isMobile'),
     isSideNavHidden: or('isFullScreen', 'isMobile'),
 
+    init() {
+        this._super(...arguments);
+        this.router.on('routeDidChange', (transition) => {
+            updateBodyClasses(transition);
+        });
+    },
+
     closeMenus() {
         this.dropdown.closeDropdowns();
         this.setProperties({

app/styles/layouts/main.css

@@ -464,17 +464,11 @@
     }
 
     /* non-authed pages shouldn't have the mobile bar */
-    .ghost-setup .gh-viewport,
-    .ghost-reset .gh-viewport,
-    .ghost-signup .gh-viewport,
-    .ghost-login .gh-viewport {
+    .unauthenticated-route .gh-viewport {
         padding-bottom: 0;
     }
 
-    .ghost-setup .gh-mobile-nav-bar,
-    .ghost-reset .gh-mobile-nav-bar,
-    .ghost-signup .gh-mobile-nav-bar,
-    .ghost-login .gh-mobile-nav-bar {
+    .unauthenticated-route .gh-mobile-nav-bar {
         display: none;
     }
 }