Tinkering With Models - Roles Can Be Found Under Protected Configurat…

…ion Screen (#12)

* Playing with models

* #7 README information.

* #11, #13, & #14 Cleaning up and renaming all modules.  Fixing security issues.  Abandoning model folder/namespaces.

.gitignore

@@ -22,3 +22,6 @@
 /bower.json.ember-try
 /package.json.ember-try
 /.gtm/
+
+# Use YARN
+/package-lock.json

README.md

@@ -1,62 +1,61 @@
-# cppdist-com-emberjs
+# README - ermahgerd-emberjs-jwt-token
 
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
+This Ember application talks to a Rails API server over at [https://github.com/cybertooth-io/ermahgerd-rails-api-jwt](https://github.com/cybertooth-io/ermahgerd-rails-api-jwt).
 
-## Prerequisites
+## Development - Getting Started
 
-You will need the following things properly installed on your computer.
+You need the following:
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/) (with npm)
-* [Ember CLI](https://ember-cli.com/)
-* [Google Chrome](https://google.com/chrome/)
+* [Yarn](https://yarnpkg.com/en/)
+* [Node.js](https://nodejs.org/) - consider using [NVM](https://github.com/creationix/nvm)
+* [Ember CLI](https://ember-cli.com/) - make sure to install the CLI `yarn global ember-cli`
+* [Google Chrome](https://google.com/chrome/) - unit tests run through testem require Chrome
 
-## Installation
 
-* `git clone <repository-url>` this repository
-* `cd cppdist-com-emberjs`
-* `npm install`
+### First Time Setting Up
 
-## Running / Development
+1. `git clone [email protected]:cybertooth-io/ccpdist-com-emberjs.git` - to download the code; `cd ccpdist-com-emberjs.git` to get into the checked out code
+1. `yarn` or `yarn install` - will install all javascript libraries
 
-* `ember serve`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
-* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+### Running The Server
 
-### Code Generators
+`ember s --proxy=http://localhost:3000` - runs the server and proxies all Ember Data 
+requests to `http://locahost:3000` (that's a Rails API server).  Find your app 
+at [http://localhost:4200](http://localhost:4200).
 
-Make use of the many generators for code, try `ember help generate` for more details
+While your Ember server is running, feel free to check out the tests by 
+visiting [http://localhost:4200/tests](http://localhost:4200/tests).
+
+### Testing
+
+Ember comes with linters and qunit testing.
+
+`ember t` - will run the tests once in your console
 
-### Running Tests
+`ember t -s` - will run the tests in a new Chrome window and watch for changes
 
-* `ember test`
-* `ember test --server`
+`ember t -s --filter='role'` - will run tests only tests with the word _role_ in their path
 
 ### Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn run lint:hbs`
+* `yarn run lint:js`
+* `yarn run lint:js -- --fix` 
 
-### Building
+### Development Workflow
 
-* `ember build` (development)
-* `ember build --environment production` (production)
+#### Code Generators
 
-### Deploying
+Make use of the many generators for code, try `ember help generate` for more details
 
-Specify what it takes to deploy your app.
+_...More Coming soon_
 
-## Further Reading / Useful Links
+## Deployment
 
-* [ember.js](https://emberjs.com/)
-* [ember-cli](https://ember-cli.com/)
-* Development Browser Extensions
-  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
-  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
+### Configuration Notes
 
-## Addons
+#### Addons
 
 Please use this section to mention the addons that we've been installing that way if we do an upgrade
 and need to bring them all back we can!
@@ -74,3 +73,29 @@ $ ember install ember-route-action-helper
 $ ember install ember-concurrency
 
 ```
+
+#### `config/environment.js`
+
+1. `ember-simple-auth-token` is configured in here.  Needs to match the token & cookie authentication paths in your API server.
+
+### Building
+
+`ember b` - builds for your development environment
+
+`ember build --environment production` - builds for production minifying and shrinking
+
+_...More Coming soon_
+
+## Contributing
+
+Team members, create a branch and pull request.
+
+General Public: Fork and create pull request.
+
+## Further Reading / Useful Links
+
+* [ember.js](https://emberjs.com/)
+* [ember-cli](https://ember-cli.com/)
+* Development Browser Extensions
+  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
+  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

app/adapters/application.js

@@ -1,5 +1,5 @@
 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'

app/index.html

@@ -3,22 +3,22 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>CppdistComEmberjs</title>
+    <title>ErmahgerdEmberjsJwtToken</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/cppdist-com-emberjs.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ermahgerd-emberjs-jwt-token.css">
 
     {{content-for "head-footer"}}
   </head>
   <body>
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/cppdist-com-emberjs.js"></script>
+    <script src="{{rootURL}}assets/ermahgerd-emberjs-jwt-token.js"></script>
 
     {{content-for "body-footer"}}
   </body>

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

@@ -2,19 +2,19 @@
   <div class="container">
     {{#if session.isAuthenticated}}
       {{#link-to "protected.index" class="navbar-brand"}}
-        cppdist-com-emberjs
+        ermahgerd-emberjs-jwt-token
       {{/link-to}}
     {{else}}
       {{#link-to "index" class="navbar-brand"}}
-        cppdist-com-emberjs
+        ermahgerd-emberjs-jwt-token
       {{/link-to}}
     {{/if}}
 
     <div class="form-inline">
       {{#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>

config/environment.js

@@ -2,7 +2,7 @@
 
 module.exports = function (environment) {
   let ENV = {
-    modulePrefix: 'cppdist-com-emberjs',
+    modulePrefix: 'ermahgerd-emberjs-jwt-token',
     environment,
     rootURL: '/',
     locationType: 'auto',