Merge pull request #63 from hoodiehq/handle-403s

Handle 403s

app/controllers/login.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  expired: false,
+  attemptedTransition: null,
 
   reset: function() {
     this.setProperties({
@@ -28,13 +30,14 @@ export default Ember.Controller.extend({
   // or go to a default route.
   gotoRoute: function (self) {
     self.setBearerToken();
+    self.set('expired', null);
     var attemptedTransition = self.get('attemptedTransition');
-    if (attemptedTransition) {
+    if (attemptedTransition && attemptedTransition.targetName !== 'index') {
       attemptedTransition.retry();
       self.set('attemptedTransition', null);
     } else {
       // Redirect to 'plugins' by default.
-      self.transitionToRoute('plugins');
+      self.transitionToRoute('plugins.users');
     }
   },
 

app/routes/authenticated.js

@@ -1,23 +1,28 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-  // Before the model is loaded, check if the admin is signed in, and redirect to login if not
+  // Before the model is loaded, check if the admin is signed in,
+  // and redirect to login if not
   beforeModel: function(transition) {
     if (!window.hoodieAdmin.account.isSignedIn()) {
-      this.redirectToLogin(transition);
+      this.redirectToLogin(transition, false);
     }
   },
 
-  redirectToLogin: function(transition) {
+  redirectToLogin: function(transition, expired) {
+    // Only show the "please log in again" message if explicitly requested
+    expired = expired || false;
     var loginController = this.controllerFor('login');
     loginController.set('attemptedTransition', transition);
+    loginController.set('expired', expired);
     this.transitionTo('login');
   },
 
   actions: {
     error: function(reason, transition) {
-      if (reason.status === 401) {
-        this.redirectToLogin(transition);
+      // If the token has expired, send back to login
+      if (reason.status === 401 || reason.status === 403) {
+        this.redirectToLogin(transition, true);
       } else {
         console.log('Something went wrong: ', reason);
       }

app/styles/uikit.scss

@@ -283,10 +283,17 @@ form{
     font-size: 16px;
     height: 44px;
     width: 70%;
+    box-shadow: none;
     &.select2-container{
       padding: 0;
       border: none;
     }
+    &:focus {
+      border-color: $strongLightBlue;
+      outline: 0;
+      box-shadow: none;
+      box-shadow: 0 0 0 3px rgba(102, 175, 233, 0.6);
+    }
   }
 }
 

app/templates/login.hbs

@@ -4,7 +4,9 @@
 <div class="login-container">
   <form class="form-inline login" {{action login on="submit"}}>
     <img src="assets/images/hoodie_logo.svg" alt="" class="fitWidth">
-    <label for="password">Please enter your admin password:</label>
+    {{#if expired}}
+      <p>You've been gone for too long, please re-enter your password:</p>
+    {{/if}}
     <div class="inputs">
     {{input id="password" value=password type="password" placeholder="Admin password" autofocus="autofocus"}}
     {{input class="btn" type="submit" value="Log In"}}

guide/index.html

@@ -23,7 +23,7 @@ <h2>Including the UIKit</h2>
   <p>In your html's head: </p>
   <pre><code class="language-markup">&lt;link rel="stylesheet" href="/hoodie/admin/assets/uikit.css"></code></pre>
   <p>And before the closing body tag:</p>
-  <pre><code class="language-markup">&lt;script src="/hoodie/admin/uikit.js">&lt;/script></code></pre>
+  <pre><code class="language-markup">&lt;script src="/hoodie/admin/assets/uikit.js">&lt;/script></code></pre>
   <h2>Quickstart Template</h2>
   <p>Here's a handy template so you can get started without any hassle:</p>
   <pre><code class="language-markup">&lt;!doctype html>
@@ -34,15 +34,15 @@ <h2>Quickstart Template</h2>
   &lt;title>My Hoodie Plugin&lt;/title>
 
   &lt;!-- Admin Dashboard UIKit CSS -->
-  &lt;link rel="stylesheet" href="/hoodie/admin/uikit.css">
+  &lt;link rel="stylesheet" href="/hoodie/admin/assets/uikit.css">
 &lt;/head>
 &lt;body>
   &lt;div class="container">
     &lt;!-- This is where all your stuff goes -->
   &lt;/div>
 
   &lt;!-- Admin Dashboard UIKit JS (includes jQuery and Boostrap Components) -->
-  &lt;script src="/hoodie/admin/uikit.js">&lt;/script>
+  &lt;script src="/hoodie/admin/assets/uikit.js">&lt;/script>
 &lt;/body>
 &lt;/html></code></pre>
   <p class="note">Please put all of your plugin's markup in the div with the class <code>container</code>.</p>

www/index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-<meta name="hoodie-admin-dashboard/config/environment" content="%7B%22modulePrefix%22%3A%22hoodie-admin-dashboard%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22hoodie-admin-dashboard%22%2C%22version%22%3A%22master+42a8a862%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
+<meta name="hoodie-admin-dashboard/config/environment" content="%7B%22modulePrefix%22%3A%22hoodie-admin-dashboard%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22hoodie-admin-dashboard%22%2C%22version%22%3A%22handle-403s+86403afd%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
 <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
 
     <link rel="stylesheet" href="assets/uikit.css">