#9 Add some user and session configuration.

README.md

@@ -69,18 +69,24 @@ yarn add --dev @fortawesome/free-solid-svg-icons
 yarn add --dev @fortawesome/free-regular-svg-icons
 yarn add --dev @fortawesome/free-brands-svg-icons
 
-# SASS for stylesheets; make sure to renamed app/styles/app.css -> app/styles/app.scss
-ember install ember-cli-sass
+# For importing libraries (replaces ember-browserify); needed for: `import Auth from '@aws-amplify/Auth'
+ember install ember-auto-import
 
 # Bootstrap 4 support; bring it all in looks like bootstrap@^4.1.0 comes in, should be bootstrap@~4.1.0 
 ember install ember-cli-bootstrap-4
 
-# For importing libraries (replaces ember-browserify); needed for: `import Auth from '@aws-amplify/Auth'
-ember install ember-auto-import
+# Get gravatar images
+ember install ember-cli-gravatar
+
+# SASS for stylesheets; make sure to renamed app/styles/app.css -> app/styles/app.scss
+ember install ember-cli-sass
 
 # Used to manipulate arrays template-side
 ember install ember-composable-helpers
 
+# Used to format dates
+ember install ember-helper-locale-date
+
 # using QRCode.js to create QR codes for Authenticator apps (e.g. Google Authenticator)
 ember install ember-qrcode-shim
 

app/models/role.js

@@ -8,5 +8,10 @@ export default BaseModel.extend({
 
   key: DS.attr('string'),
   name: DS.attr('string'),
-  notes: DS.attr('string')
+  notes: DS.attr('string'),
+
+  /** Relationships
+   * ---------------------------------------------------------------------------------------------------------------- */
+
+  users: DS.hasMany('user')
 });

app/models/session.js

@@ -0,0 +1,20 @@
+import BaseModel from './-base';
+import DS from 'ember-data';
+
+export default BaseModel.extend({
+
+  /** Attributes
+   * ---------------------------------------------------------------------------------------------------------------- */
+
+  browser: DS.attr('string'),
+  browserVersion: DS.attr('string'),
+  device: DS.attr('string'),
+  ipAddress: DS.attr('string'),
+  platform: DS.attr('string'),
+  platformVersion: DS.attr('string'),
+
+  /** Relationships
+   * ---------------------------------------------------------------------------------------------------------------- */
+
+  user: DS.belongsTo('user')
+});

app/models/user.js

@@ -0,0 +1,16 @@
+import BaseModel from './-base';
+import DS from 'ember-data';
+
+export default BaseModel.extend({
+
+  /** Attributes
+   * ---------------------------------------------------------------------------------------------------------------- */
+
+  email: DS.attr('string'),
+
+  /** Relationships
+   * ---------------------------------------------------------------------------------------------------------------- */
+
+  roles: DS.hasMany('role'),
+  sessions: DS.hasMany('session')
+});

app/router.js

@@ -7,10 +7,17 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function () {
+  this.mount('ember-cognito-engine', { path: '/test' });
   this.route('protected', function () {
     this.route('configuration', function () {
       this.route('roles', function () {
       });
+      this.route('users', function () {
+        this.route('user', { path: '/:user_id' }, function () {
+          this.route('sessions', function () {
+          });
+        });
+      });
     });
     this.route('change-password');
     this.route('configure-mfa');

app/routes/protected/configuration/users.js

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

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

@@ -0,0 +1,17 @@
+import { hash } from 'rsvp';
+import { get, set } from '@ember/object';
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  afterModel(resolvedModel) {
+    set(resolvedModel, 'usersCount', get(resolvedModel, 'users.meta.record-count'));
+  },
+
+  model() {
+    return hash({
+      users: this.get('store').query('user', {
+        sort: 'email'
+      })
+    })
+  }
+});

app/routes/protected/configuration/users/user.js

@@ -0,0 +1,15 @@
+import { get } from '@ember/object';
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel() {
+    const params = this.paramsFor('protected.configuration.users.user');
+    return this.get('store').query('user', {
+      filter: { id: get(params, 'user_id') },
+      include: '' +
+        'roles' +
+        ',sessions' +
+        ''
+    })
+  }
+});

app/routes/protected/configuration/users/user/index.js

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

app/routes/protected/configuration/users/user/sessions.js

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

app/routes/protected/configuration/users/user/sessions/index.js

@@ -0,0 +1,20 @@
+import { hash } from 'rsvp';
+import { get, set } from '@ember/object';
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  afterModel(resolvedModel) {
+    set(resolvedModel, 'sessionsCount', get(resolvedModel, 'sessions.meta.record-count'));
+  },
+
+  model() {
+    const user = this.modelFor('protected.configuration.users.user');
+    return hash({
+      sessions: this.get('store').query('session', {
+        filter: { user: user.get('id') },
+        sort: '' +
+          '-created-at'
+      })
+    });
+  }
+});

app/templates/application.hbs

@@ -54,12 +54,6 @@
               </a>
             </li>
           {{else}}
-            <li class="nav-item">
-              {{#link-to "sign-up" class="nav-link"}}
-                Sign Up
-              {{/link-to}}
-            </li>
-            <div class="dropdown-divider"></div>
             <li class="nav-item">
               {{#link-to "login" class="nav-link"}}
                 Sign In
@@ -114,10 +108,7 @@
         </div>
       </div>
     {{else}}
-      <div class="btn-group d-none d-md-flex ml-auto" role="group" aria-label="Sign In & Sign Up">
-        {{#link-to "sign-up" class="btn btn-outline-info btn-sm"}}
-          Sign Up
-        {{/link-to}}
+      <div class="btn-group d-none d-md-flex ml-auto" role="group" aria-label="Sign In">
         {{#link-to "login" class="btn btn-outline-primary btn-sm"}}
           Sign In
         {{/link-to}}

app/templates/protected/configuration/index.hbs

@@ -1,15 +1,23 @@
 <section class="my-3">
   <div class="container">
-    <div class="d-flex my-3">
-      <h1 class="flex-fill">Configuration</h1>
-      <div class="align-self-center">
+    <div class="align-items-center d-flex my-3">
+      <h1 class="flex-fill h5">
+        Configuration
+      </h1>
+      <div class="align-self-center btn-group">
+        <button class="btn btn-outline-secondary" disabled="disabled" type="button">
+          {{fa-icon "question"}}
+        </button>
       </div>
     </div>
 
     <div class="list-group">
-      {{#link-to "protected.configuration.roles.index" class="list-group-item"}}
+      {{#link-to "protected.configuration.roles.index" class="list-group-item list-group-item-action"}}
         Roles
       {{/link-to}}
+      {{#link-to "protected.configuration.users.index" class="list-group-item list-group-item-action"}}
+        Users
+      {{/link-to}}
     </div>
   </div>
 </section>

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

@@ -1,11 +1,20 @@
 <section class="my-3">
   <div class="container">
-    <div class="d-flex my-3">
-      <h1 class="flex-fill">Roles</h1>
-      <div class="align-self-center">
+    <div class="align-items-center d-flex my-3">
+      <h1 class="flex-fill h5">
+        {{#link-to "protected.configuration.index"}}
+          Configuration
+        {{/link-to}}
+        {{fa-icon "caret-right" fixedWidth=true}}
+        Roles
+      </h1>
+      <div class="align-self-center btn-group">
         <button class="btn btn-outline-secondary" disabled="disabled" type="button">
           {{fa-icon "plus"}}
         </button>
+        <button class="btn btn-outline-secondary" disabled="disabled" type="button">
+          {{fa-icon "question"}}
+        </button>
       </div>
     </div>
 
@@ -18,10 +27,10 @@
     </div>
     <div class="list-group">
       {{#each model.roles as |role|}}
-        <div class="d-flex list-group-item">
+        <div class="align-items-center d-flex justify-content-between list-group-item">
           {{role.name}}
-          <small class="ml-auto text-muted">
-            {{role.updatedAt}}
+          <small class="text-muted text-right">
+            {{date-short-llll role.updatedAt}}
           </small>
         </div>
       {{else}}
@@ -31,4 +40,4 @@
       {{/each}}
     </div>
   </div>
-</section>
+</section>

app/templates/protected/configuration/users.hbs

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

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

@@ -0,0 +1,45 @@
+<section class="my-3">
+  <div class="container">
+    <div class="align-items-center d-flex my-3">
+      <h1 class="flex-fill h5">
+        {{#link-to "protected.configuration.index"}}
+          Configuration
+        {{/link-to}}
+        {{fa-icon "caret-right" fixedWidth=true}}
+        Users
+      </h1>
+      <div class="align-self-center btn-group">
+        <button class="btn btn-outline-secondary" disabled="disabled" type="button">
+          {{fa-icon "plus"}}
+        </button>
+        <button class="btn btn-outline-secondary" disabled="disabled" type="button">
+          {{fa-icon "question"}}
+        </button>
+      </div>
+    </div>
+
+    <div>
+      <p class="small text-muted">
+        {{model.users.length}}
+        of
+        {{model.usersCount}}
+      </p>
+    </div>
+    <div class="list-group">
+      {{#each model.users as |user|}}
+        {{#link-to "protected.configuration.users.user.index" user.id
+                   class="align-items-center d-flex justify-content-between list-group-item list-group-item-action"
+        }}
+          {{user.email}}
+          <small class="text-muted text-right">
+            {{date-short-llll user.updatedAt}}
+          </small>
+        {{/link-to}}
+      {{else}}
+        <div class="list-group-item">
+          <em>None</em>
+        </div>
+      {{/each}}
+    </div>
+  </div>
+</section>

app/templates/protected/configuration/users/user.hbs

@@ -0,0 +1,46 @@
+<section class="my-3">
+  <div class="container">
+    <div class="align-items-center d-flex my-3">
+      <h1 class="flex-fill h5">
+        {{#link-to "protected.configuration.index"}}
+          Configuration
+        {{/link-to}}
+        {{fa-icon "caret-right" fixedWidth=true}}
+        {{#link-to "protected.configuration.users.index"}}
+          Users
+        {{/link-to}}
+        {{fa-icon "caret-right" fixedWidth=true}}
+        {{model.email}}
+      </h1>
+      <div class="align-self-center btn-group">
+        <button class="btn btn-outline-secondary" disabled="disabled" type="button">
+          {{fa-icon "question"}}
+        </button>
+      </div>
+    </div>
+  </div>
+</section>
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-3 pt-2">
+        <div class="list-group">
+          {{#link-to "protected.configuration.users.user.index" class="list-group-item list-group-item-action"}}
+            Summary
+          {{/link-to}}
+          {{#link-to "protected.configuration.users.user.sessions.index"
+                     class="align-items-center d-flex justify-content-between list-group-item list-group-item-action"
+          }}
+            Sessions
+            <span class="badge badge-secondary badge-pill">
+              {{model.sessions.length}}
+            </span>
+          {{/link-to}}
+        </div>
+      </div>
+      <div class="col-sm-9 pt-2">
+        {{outlet}}
+      </div>
+    </div>
+  </div>
+</section>

app/templates/protected/configuration/users/user/index.hbs

@@ -0,0 +1 @@
+{{gravatar-image email=model.email}}

app/templates/protected/configuration/users/user/sessions.hbs

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