Split settings route into three dedicated routes

Author: Turbo87

app/components/settings-page.hbs

@@ -0,0 +1,11 @@
+<div local-class="page" ...attributes>
+  <SideMenu as |menu|>
+    <menu.Item @link={{link "settings.profile"}}>Profile</menu.Item>
+    <menu.Item @link={{link "settings.email-notifications"}}>Email Notifications</menu.Item>
+    <menu.Item @link={{link "settings.tokens"}}>API Tokens</menu.Item>
+  </SideMenu>
+
+  <div local-class="content">
+    {{yield}}
+  </div>
+</div>

app/components/settings-page.module.css

@@ -0,0 +1,16 @@
+.page {
+    display: grid;
+    gap: 16px;
+
+    @media only screen and (min-width: 891px) {
+        grid-template:
+            "menu content" auto /
+            200px auto;
+    }
+}
+
+.content {
+    h2:first-child {
+        margin-top: 4px;
+    }
+}

app/controllers/settings/index.js renamed to app/controllers/settings/email-notifications.js

@@ -6,7 +6,7 @@ import { alias } from 'macro-decorators';
 
 import ajax from '../../utils/ajax';
 
-export default class SettingsController extends Controller {
+export default class EmailNotificationsSettingsController extends Controller {
   isResetting = false;
 
   @alias('model.ownedCrates') ownedCrates;

app/router.js

@@ -31,7 +31,11 @@ Router.map(function () {
     this.route('following');
     this.route('pending-invites');
   });
-  this.route('settings');
+  this.route('settings', function () {
+    this.route('email-notifications');
+    this.route('profile');
+    this.route('tokens');
+  });
   this.route('user', { path: '/users/:user_id' });
   this.route('install');
   this.route('search');

app/routes/settings/email-notifications.js

@@ -0,0 +1,27 @@
+import { inject as service } from '@ember/service';
+
+import AuthenticatedRoute from '../-authenticated-route';
+
+export default class EmailNotificationsSettingsRoute extends AuthenticatedRoute {
+  @service store;
+
+  async model() {
+    let { ownedCrates, currentUser: user } = this.session;
+
+    if (!ownedCrates) {
+      await this.session.fetchUser();
+      ({ ownedCrates } = this.session);
+    }
+
+    return { user, ownedCrates };
+  }
+
+  setupController(controller) {
+    super.setupController(...arguments);
+
+    controller.setProperties({
+      emailNotificationsSuccess: false,
+      emailNotificationsError: false,
+    });
+  }
+}

app/routes/settings/index.js

@@ -1,29 +1,10 @@
+import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-import AuthenticatedRoute from '../-authenticated-route';
+export default class SettingsRoute extends Route {
+  @service router;
 
-export default class SettingsRoute extends AuthenticatedRoute {
-  @service store;
-
-  async model() {
-    let { ownedCrates, currentUser: user } = this.session;
-
-    if (!ownedCrates) {
-      await this.session.fetchUser();
-      ({ ownedCrates } = this.session);
-    }
-
-    let apiTokens = await this.store.findAll('api-token');
-
-    return { user, ownedCrates, api_tokens: apiTokens.toArray() };
-  }
-
-  setupController(controller) {
-    super.setupController(...arguments);
-
-    controller.setProperties({
-      emailNotificationsSuccess: false,
-      emailNotificationsError: false,
-    });
+  redirect() {
+    this.router.replaceWith('settings.profile');
   }
 }

app/routes/settings/profile.js

@@ -0,0 +1,11 @@
+import { inject as service } from '@ember/service';
+
+import AuthenticatedRoute from '../-authenticated-route';
+
+export default class ProfileSettingsRoute extends AuthenticatedRoute {
+  @service session;
+
+  async model() {
+    return { user: this.session.currentUser };
+  }
+}

app/routes/settings/tokens.js

@@ -0,0 +1,12 @@
+import { inject as service } from '@ember/service';
+
+import AuthenticatedRoute from '../-authenticated-route';
+
+export default class TokenSettingsRoute extends AuthenticatedRoute {
+  @service store;
+
+  async model() {
+    let apiTokens = await this.store.findAll('api-token');
+    return apiTokens.toArray();
+  }
+}

app/styles/settings/index.module.css renamed to app/styles/settings/email-notifications.module.css

@@ -1,40 +1,5 @@
-.me-profile {
-    border-bottom: 5px solid var(--gray-border);
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-
-    .info { display: flex; }
-    dl {
-        margin: 0 0 0 30px;
-        line-height: 150%;
-        font-size: 110%;
-        dt {
-            font-weight: bold;
-            width: 150px;
-            text-align: right;
-            float: left;
-            clear: both;
-        }
-        dd { float: left; margin-left: 10px; }
-    }
-
-    @media only screen and (max-width: 550px) {
-        .info img { display: none; }
-    }
-}
-
-.me-email {
-    border-bottom: 5px solid var(--gray-border);
-    padding-bottom: 20px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-}
-
 .me-email-notifications {
-    border-bottom: 5px solid var(--gray-border);
     padding-bottom: 20px;
-    margin-bottom: 20px;
     display: flex;
     flex-direction: column;
 

app/styles/settings/profile.module.css

@@ -0,0 +1,28 @@
+.me-profile {
+    margin-bottom: 24px;
+
+    .info { display: flex; }
+    dl {
+        margin: 0 0 0 30px;
+        line-height: 150%;
+        font-size: 110%;
+        dt {
+            font-weight: bold;
+            width: 150px;
+            text-align: right;
+            float: left;
+            clear: both;
+        }
+        dd { float: left; margin-left: 10px; }
+    }
+
+    @media only screen and (max-width: 550px) {
+        .info img { display: none; }
+    }
+}
+
+.me-email {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+}