ENH: Set up ember-simple-auth (initial) (#12)

Fixes #6

app/authenticators/application.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+import BaseAuthenticator from 'ember-simple-auth/authenticators/base';
+import config from '../config/environment';
+
+const { RSVP: { Promise }, $, get, isEmpty, run } = Ember;
+
+export default BaseAuthenticator.extend({
+  serverTokenEndpoint: `${config.APP.API_HOST}/api/auth/login/`,
+  tokenAttributeName: 'data.token',
+  identificationAttributeName: 'username',
+  verificationAttributeName: 'password',
+
+  restore(data) {
+    const tokenAttributeName = this.get('tokenAttributeName');
+    const tokenAttribute = get(data, tokenAttributeName);
+
+    if (!isEmpty(tokenAttribute)) {
+      return Promise.resolve(data);
+    } else {
+      return Promise.reject();
+    }
+  },
+
+  authenticate(username, password) {
+    return new Promise((resolve, reject) => {
+      const { identificationAttributeName: id, verificationAttributeName: verify } = this.getProperties('identificationAttributeName', 'verificationAttributeName');
+      const data = {};
+      data[id] = username;
+      data[verify] = password;
+      return this.makeRequest(data).then(
+        (response) => run(null, resolve, response),
+        (xhr) => run(null, reject, xhr.responseJSON || xhr.responseText)
+      );
+    });
+  },
+
+  invalidate() {
+    return Promise.resolve();
+  },
+
+  makeRequest(data, options) {
+    const serverTokenEndpoint = this.get('serverTokenEndpoint');
+    const requestOptions = $.extend({}, {
+      url: serverTokenEndpoint,
+      type: 'POST',
+      data,
+    }, options || {});
+    return $.ajax(requestOptions);
+  },
+});

app/authorizers/application.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+import BaseAuthorizer from 'ember-simple-auth/authorizers/base';
+
+const { isEmpty } = Ember;
+
+export default BaseAuthorizer.extend({
+  authorize(data, block) {
+    const accessToken = data['token'];
+    if (!isEmpty(accessToken)) {
+      block('Authorization', `Token ${accessToken}`);
+    }
+  }
+});

app/controllers/login.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+const { Controller, inject: { service } } = Ember;
+
+export default Controller.extend({
+  session: service(),
+  flashMessages: service(),
+
+  actions: {
+    authenticate() {
+      this.transitionToRoute('loading').then(() => {
+        let { identification, password } = this.getProperties('identification', 'password');
+        this.get('session').authenticate('authenticator:application', identification, password).catch((reason) => {
+          this.transitionToRoute('login').then(() => {
+            this.get('flashMessages').danger(reason.non_field_errors || reason);
+          });
+        });
+      });
+    },
+  },
+});

app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('login');
 });
 
 export default Router;

app/routes/application.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
+
+const { Route } = Ember;
+
+export default Route.extend(ApplicationRouteMixin, {});

app/routes/index.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+const { Route } = Ember;
+
+export default Route.extend(AuthenticatedRouteMixin, {});

app/routes/login.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
+
+const { Route } = Ember;
+
+export default Route.extend(UnauthenticatedRouteMixin, {});

app/styles/app.css

@@ -0,0 +1,39 @@
+.form-signin {
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+
+.form-signin .form-signin-heading, .form-signin .checkbox {
+  margin-bottom: 10px;
+}
+
+.form-signin .checkbox {
+  font-weight: normal;
+}
+
+.form-signin .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+}
+
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+
+.form-signin input[type="text"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

app/templates/application.hbs

@@ -1,11 +1 @@
-<div class="container">
-  <div class="row">
-    <div class="col-md-6">
-      foo
-    </div>
-    <div class="col-md-6">
-      bar
-    </div>
-  </div>
-</div>
 {{outlet}}

app/templates/index.hbs

@@ -0,0 +1,2 @@
+Logged in
+{{outlet}}

app/templates/login.hbs

@@ -0,0 +1,8 @@
+<div class="container">
+  <form {{action 'authenticate' on='submit'}} id="loginForm" class="form-signin">
+    <h2 class="form-signin-heading">Please sign in</h2>
+    {{input id="username" type="text" placeholder='Username' class="form-control" value=identification}}
+    {{input id="password" type="password" placeholder='Password' class="form-control" value=password}}
+    <button class="btn btn-lg btn-primary btn-block" type="submit">Log In</button>
+  </form>
+</div>

mirage/config.js

@@ -1,26 +1,5 @@
+import config from '../config/environment';
+
 export default function() {
-
+  this.passthrough(`${config.APP.API_HOST}/api/auth/login/`);
-  // These comments are here to help you get started. Feel free to delete them.
-
-  /*
-    Config (with defaults).
-
-    Note: these only affect routes defined *after* them!
-  */
-
-  // this.urlPrefix = '';    // make this `http://localhost:8080`, for example, if your API is on a different server
-  // this.namespace = '';    // make this `api`, for example, if your API is namespaced
-  // this.timing = 400;      // delay for each request, automatically set to 0 during testing
-
-  /*
-    Shorthand cheatsheet:
-
-    this.get('/posts');
-    this.post('/posts');
-    this.get('/posts/:id');
-    this.put('/posts/:id'); // or this.patch
-    this.del('/posts/:id');
-
-    http://www.ember-cli-mirage.com/docs/v0.2.x/shorthands/
-  */
 }

tests/unit/controllers/login-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:login', 'Unit | Controller | login', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

tests/unit/routes/application-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:application', 'Unit | Route | application', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/index-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:index', 'Unit | Route | index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/login-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:login', 'Unit | Route | login', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});