Playing with models

app/adapters/application.js

@@ -1,6 +1,6 @@
 import DS from 'ember-data';
-import EmberSimpleAuthTokenHeaders from 'ember-simple-auth-token/addon/mixins/token-authorizer';
+import EmberSimpleAuthTokenHeaders from 'ember-simple-auth-token/mixins/token-authorizer';
 
 export default DS.JSONAPIAdapter.extend(EmberSimpleAuthTokenHeaders, {
-  namespace: 'api/v1'
+  namespace: 'api/v1/protected'
 });

app/models/role.js

@@ -0,0 +1,8 @@
+import BaseModel from './-base';
+import DS from 'ember-data';
+
+export default BaseModel.extend({
+  key: DS.attr('string'),
+  name: DS.attr('string'),
+  notes: DS.attr('string')
+});

app/router.js

@@ -10,6 +10,8 @@ Router.map(function () {
   this.route('login');
   this.route('protected', function () {
     this.route('configuration', function () {
+      this.route('roles', function () {
+      });
     });
   });
 });

app/routes/protected/configuration/roles.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({});

app/routes/protected/configuration/roles/index.js

@@ -0,0 +1,10 @@
+import {hash} from 'rsvp';
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model() {
+    return hash({
+      roles: this.get('store').query('role', {sort: 'name'})
+    });
+  }
+});

app/templates/application.hbs

@@ -14,7 +14,7 @@
       {{#if session.isAuthenticated}}
         <button
           {{action "logout" session on="click"}}
-          class="btn btn-outline-secondary btn-sm" type="button">
+          class="btn btn-outline-primary btn-sm" type="button">
           Logout
         </button>
 

app/templates/protected/configuration/index.hbs

@@ -1,10 +1,20 @@
 <section class="my-3">
   <div class="container">
-    <h1>Configuration</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos, et fuga magnam provident
-      quibusdam sequi velit veniam? Dolore eveniet excepturi expedita officia placeat. Accusamus deserunt esse iusto
-      nulla quaerat?
-    </p>
+
+    <div class="d-flex my-3">
+      <h1 class="flex-fill">Configuration</h1>
+      <div class="align-self-center">
+        {{#link-to "protected.index" class="btn btn-outline-secondary"}}Home{{/link-to}}
+      </div>
+    </div>
+
+    <div class="list-group">
+      {{#link-to "protected.configuration.roles.index" class="list-group-item list-group-item-action"}}
+        <h5 class="mb-0">
+          Roles
+        </h5>
+      {{/link-to}}
+    </div>
+
   </div>
 </section>

app/templates/protected/configuration/roles.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/protected/configuration/roles/index.hbs

@@ -0,0 +1,27 @@
+<section class="my-3">
+  <div class="container">
+
+    <div class="d-flex my-3">
+      <h1 class="flex-fill">Roles</h1>
+      <div class="align-self-center">
+        {{#link-to "protected.configuration.index" class="btn btn-outline-secondary"}}
+          Configuration
+        {{/link-to}}
+      </div>
+    </div>
+
+    <div class="list-group">
+      {{#each model.roles as |role|}}
+        <div class="list-group-item">
+          <h5 class="mb-0">
+            {{role.name}}
+            {{#if role.notes}}
+              <small class="text-muted">{{role.notes}}</small>
+            {{/if}}
+          </h5>
+        </div>
+      {{/each}}
+    </div>
+
+  </div>
+</section>

app/templates/protected/index.hbs

@@ -1,14 +1,27 @@
 <section class="my-3">
   <div class="container">
-    <h1>Welcome To The <span class="text-success">Protected</span> Index Page</h1>
-    <p>
-      You can only get to the <code>/protected/*</code> paths if you have logged in.
-    </p>
-    <p>
-      {{#link-to "protected.configuration.index"}}Configuration Page{{/link-to}}
-    </p>
-    <p>
-      {{#link-to "index"}}Public Page{{/link-to}}
-    </p>
+
+    <div class="d-flex my-3">
+      <h1 class="flex-fill"><span class="text-success">Protected</span> Path</h1>
+      <div class="align-self-center">
+        <div class="btn-group">
+          {{#link-to "protected.configuration.index" class="btn btn-outline-secondary"}}Configuration{{/link-to}}
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <p>
+        Welcome to the protected index page that you can only get to once you have logged in. Check
+        your address bar, everything under <code>/protected/*</code> requires authentication.
+      </p>
+      <p>
+        {{#link-to "protected.configuration.index"}}Configuration Page{{/link-to}}
+      </p>
+      <p>
+        {{#link-to "index"}}Public Page{{/link-to}}
+      </p>
+    </div>
+
   </div>
 </section>

tests/unit/models/role-test.js

@@ -0,0 +1,13 @@
+import {module, test} from 'qunit';
+import {setupTest} from 'ember-qunit';
+
+module('Unit | Model | role', function (hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function (assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('role', {});
+    assert.ok(model);
+  });
+});

tests/unit/routes/protected/configuration/roles-test.js

@@ -0,0 +1,11 @@
+import {module, test} from 'qunit';
+import {setupTest} from 'ember-qunit';
+
+module('Unit | Route | protected/configuration/roles', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:protected/configuration/roles');
+    assert.ok(route);
+  });
+});

tests/unit/routes/protected/configuration/roles/index-test.js

@@ -0,0 +1,11 @@
+import {module, test} from 'qunit';
+import {setupTest} from 'ember-qunit';
+
+module('Unit | Route | protected/configuration/roles/index', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:protected/configuration/roles/index');
+    assert.ok(route);
+  });
+});