Auto merge of #4309 - Turbo87:settings, r=locks

Implement new `/settings` route

This is basically similar to the `/me` route, but split into multiple subroutes to make the settings more scaleable.

<img width="1001" alt="Bildschirmfoto 2021-12-21 um 13 54 58" src="https://user-images.githubusercontent.com/141300/146974376-bfd3e759-5843-4940-b784-0966e3ded9fd.png">
<img width="1005" alt="Bildschirmfoto 2021-12-21 um 13 55 14" src="https://user-images.githubusercontent.com/141300/146974382-5abfe305-fe1a-424e-95f7-fbf971dedb13.png">

Author: bors

app/components/header.hbs

@@ -50,7 +50,7 @@
 
           <dd.Menu local-class="current-user-links" as |menu|>
             <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="settings">Account Settings</LinkTo></menu.Item>
             <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
             <menu.Item local-class="menu-item-with-separator">
               <button
@@ -95,7 +95,7 @@
           <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
           {{#if this.session.currentUser}}
             <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-            <menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="settings" data-test-me-link>Account Settings</LinkTo></menu.Item>
             <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
             <menu.Item local-class="menu-item-with-separator">
               <button

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/components/side-menu.hbs

@@ -0,0 +1,3 @@
+<ul role="list" local-class="list" ...attributes>
+  {{yield (hash Item=(component "side-menu/item"))}}
+</ul>

app/components/side-menu.module.css

@@ -0,0 +1,9 @@
+.list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    > * + * {
+        margin-top: 8px;
+    }
+}

app/components/side-menu/item.hbs

@@ -0,0 +1,3 @@
+<li>
+  <a href={{@link.url}} local-class="link {{if @link.isActive "active"}}" {{on "click" @link.transitionTo}}>{{yield}}</a>
+</li>

app/components/side-menu/item.module.css

@@ -0,0 +1,22 @@
+.link {
+    display: block;
+    padding: 10px 12px;
+    border-radius: 6px;
+    color: var(--main-color-light);
+    transition: all 300ms ease-in;
+
+    &:hover {
+        background-color: var(--main-bg-dark);
+        color: var(--main-color);
+        transition: none;
+    }
+}
+
+.active {
+    background-color: var(--main-bg-dark);
+    color: var(--main-color);
+
+    &:hover {
+        background-color: #e5e1cd;
+    }
+}

app/controllers/me/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 MeIndexController extends Controller {
+export default class EmailNotificationsSettingsController extends Controller {
   isResetting = false;
 
   @alias('model.ownedCrates') ownedCrates;

app/router.js

@@ -31,6 +31,11 @@ Router.map(function () {
     this.route('following');
     this.route('pending-invites');
   });
+  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/me/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 MeIndexRoute extends Route {
+  @service router;
 
-export default class MeIndexRoute 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');
   }
 }

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

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class SettingsRoute extends Route {
+  @service router;
+
+  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/me/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;
+}