From 1080cb398a4b4112eec19abad3e41225d9c5dd54 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 14:44:17 -0700
Subject: [PATCH 01/14] ui/acls: initial commit

---
 ui/index.html                     | 162 ++++++++++++++++++++++++++++++
 ui/javascripts/app/controllers.js |  33 ++++++
 ui/javascripts/app/models.js      |   6 ++
 ui/javascripts/app/router.js      |   9 +-
 ui/javascripts/app/routes.js      |  33 ++++++
 ui/javascripts/app/views.js       |  10 ++
 6 files changed, 252 insertions(+), 1 deletion(-)

diff --git a/ui/index.html b/ui/index.html
index 3902b8b21a..6123e4205c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -38,6 +38,31 @@
     </div>
   </script>
 
+  <script type="text/x-handlebars" data-template-name="dc/unauthorized">
+    <div class="row">
+      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
+        <div class="text-center vertical-center">
+          <p class="bold">Access Denied</p>
+          <p>Your ACL token, <code>foobarbaz</code>, does not
+          have the appropriate permissions to perform the expected action.</p>
+          <p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
+        </div>
+      </div>
+    </div>
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="dc/aclsdisabled">
+    <div class="row">
+      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
+        <div class="text-center vertical-center">
+          <p class="bold">ACLs Disabled</p>
+          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to implicitly enable them.</p>
+          </p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type="text/x-handlebars" data-template-name="loading">
     <div class="row">
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
@@ -524,6 +549,143 @@
       {{/if}}
   </script>
 
+  <script type="text/x-handlebars" id="acls">
+    <div class="row">
+      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
+        {{view App.ActionBarView }}
+
+          {{#if filteredContent}}
+
+                {{#if condensed }}
+                    {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
+                      {{#link-to 'acl.show' Node tagName="div" href=false class="list-group-item list-condensed-link" }}
+                        <div {{bind-attr class=":list-bar-horizontal"}}></div>
+                        <div class="name">
+                          foo
+                          <small class="pull-right">
+                          bar
+                          </small>
+                        </div>
+                      {{/link-to}}
+                    {{/collection}}
+
+                {{else}}
+
+                  {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
+                    {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-link" }}
+                      <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
+                      <h4 class="list-group-item-heading">
+                        {{Node}}
+                        <small>{{Address}}</small>
+                        <div class="heading-helper">
+                          <a class="subtle" href="#">{{checkMessage}}</a>
+                        </div>
+                      </h4>
+                      <ul class="list-inline">
+                        {{#each service in services}}
+                          <li class="bold">{{service.Service}}</li>
+                        {{/each}}
+                      </ul>
+                    {{/link-to}}
+                  {{/collection}}
+
+                {{/if}}
+
+          {{else}}
+          <p class="light">There are no nodes to show.</p>
+          {{/if}}
+      </div>
+
+      <div class="border-left hidden-xs hidden-sm">
+      </div>
+
+      <div class="col-md-6 col-lg-7 border-left scrollable">
+        <div class="row padded-border">
+          {{outlet}}
+        </div>
+      </div>
+    </div>
+  </script>
+
+  <script type="text/x-handlebars" id="acl">
+      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
+        {{#link-to "nodes" class="btn btn-default btn-block" }}Back to all nodes{{/link-to}}
+        <hr>
+      </div>
+
+      <h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
+      <hr>
+
+      <h5>Services</h5>
+
+      {{#each service in model.Services }}
+        {{#link-to 'services.show' service.Service tagName="div" href=false class="list-group-item list-condensed-link double-line" }}
+          <div class="list-bar-horizontal bg-light-gray"></div>
+            <div class="name">
+              {{service.Service}}
+              <small class="pull-right">
+                :{{service.Port}}
+              </small>
+            </div>
+            <ul class="list-inline sub">
+              {{#each tag in service.Tags}}
+                <li>{{tag}}</li>
+              {{/each}}
+              {{serviceTagMessage service.Tags}}
+            </ul>
+        {{/link-to}}
+
+      {{/each}}
+
+      <h5>Checks</h5>
+
+      {{#each check in model.Checks }}
+
+        <div class="panel">
+          {{ panelBar check.Status }}
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              {{check.Name}}
+              <small>{{check.CheckID}}</small>
+              <span class="panel-note">{{check.Status}}</span>
+            </h3>
+          </div>
+
+          <div class="panel-body">
+            <h5>Notes</h5>
+            <p>{{ check.Notes }}</p>
+            <h5>Output</h5>
+            <pre>{{check.Output}}</pre>
+          </div>
+        </div>
+
+      {{/each}}
+
+      <h5>Lock Sessions</h5>
+
+      {{#if sessions }}
+        {{errorMessage}}
+
+        {{#each session in sessions }}
+          <div class="list-group-item list-condensed double-line">
+            <div class="bg-light-gray list-bar-horizontal"></div>
+            <div class="name">
+              {{ sessionName session }}
+              <button {{ action "invalidateSession" session.ID }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-list isLoading:btn-warning" }}>Invalidate</button>
+            </div>
+              <ul class="list-inline sub">
+                {{#each check in session.Checks}}
+                  <li class="bold">{{check}}</li>
+                {{/each}}
+              </ul>
+          </div>
+        {{/each}}
+
+      {{else}}
+        <p class="light small">No sessions</p>
+      {{/if}}
+  </script>
+
   <script type="text/x-handlebars" id="index">
     <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12 vertical-center">
       <h5>Select a datacenter</h5>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 58d3df1264..ac06ac642c 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -313,3 +313,36 @@ App.ServicesController = ItemBaseController.extend({
   items: Ember.computed.alias("services"),
 });
 
+App.AclsIndexController = Ember.ArrayController.extend({
+  needs: ["dc", "application"],
+  queryParams: ["filter"],
+  dc: Ember.computed.alias("controllers.dc"),
+
+  isShowingItem: function() {
+    var currentPath = this.get('controllers.application.currentPath');
+    return (currentPath === "dc.acls.show");
+  }.property('controllers.application.currentPath'),
+
+  filteredContent: function() {
+    var filter = this.get('filter');
+
+    var items = this.get('items').filter(function(item, index, enumerable){
+      // First try to match on the name
+      var nameMatch = item.get('Name').toLowerCase().match(filter.toLowerCase());
+      if (nameMatch.length > 0) {
+        return nameMatch;
+      // Otherwise match on the ID
+      } else {
+        return item.get('ID').toLowerCase().match(filter.toLowerCase());
+      }
+    });
+
+  }.property('filter', 'items.@each'),
+});
+
+
+App.AclsShowController = Ember.ArrayController.extend({
+  needs: ["dc"],
+  dc: Ember.computed.alias("controllers.dc"),
+});
+
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index 95538ffdda..f2755b17bc 100644
--- a/ui/javascripts/app/models.js
+++ b/ui/javascripts/app/models.js
@@ -239,3 +239,9 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
     return parts.join("/") + "/";
   }.property('Key')
 });
+
+//
+// An ACL
+//
+App.Acl = Ember.Object.extend({
+});
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index 598858460f..1397fc227f 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -25,7 +25,14 @@ App.Router.map(function() {
       this.route("show", { path: "/*key" });
       // Edit a specific key
       this.route("edit", { path: "/*key/edit" });
-    })
+    });
+    // ACLs
+    this.resource("acls", { path: "/acls" }, function(){
+      this.route("show", { path: "/:name" });
+    });
+
+    // Shows a page explaining that ACLs haven't been set-up
+    this.route("aclsdisabled", { path: "/aclsdisabled" });
   });
 
   // Shows a datacenter picker. If you only have one
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 4a79567d9e..6661c1318f 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -299,3 +299,36 @@ App.NodesRoute = App.BaseRoute.extend({
       controller.set('nodes', model);
   }
 });
+
+
+App.AclsRoute = App.BaseRoute.extend({
+  model: function(params) {
+    var dc = this.modelFor('dc').dc;
+    // Return a promise containing the ACLS
+    return Ember.$.getJSON('/v1/acl/list?dc=' + dc).then(function(data) {
+      objs = [];
+      data.map(function(obj){
+       objs.push(App.Acl.create(obj));
+      });
+      return objs;
+    });
+  },
+
+  actions: {
+    error: function(error, transition) {
+      // If consul returns 401, ACLs are disabled
+      if (error && error.status === 401) {
+        this.transitionTo('dc.aclsdisabled');
+      // If consul returns 403, they key isn't authorized for that
+      // action.
+      } else if (error && error.status === 403) {
+        this.transitionTo('dc.unauthorized');
+      }
+      return true;
+    }
+  },
+
+  setupController: function(controller, model) {
+      controller.set('acls', model);
+  }
+});
diff --git a/ui/javascripts/app/views.js b/ui/javascripts/app/views.js
index cf685e25b9..29883c1d1c 100644
--- a/ui/javascripts/app/views.js
+++ b/ui/javascripts/app/views.js
@@ -62,3 +62,13 @@ App.KvListView = Ember.View.extend({
 App.ActionBarView = Ember.View.extend({
     templateName: 'actionbar'
 });
+
+// ACLS
+
+App.AclView = Ember.View.extend({
+    templateName: 'acls',
+});
+
+App.AclsShowView = Ember.View.extend({
+    templateName: 'acl'
+});

From 420af735d66c9ba595cab9cd9708a52d5276a9d9 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 16:00:37 -0700
Subject: [PATCH 02/14] ui/acls: compact nav, add ACL and url helpers

---
 ui/index.html                     | 20 ++++++++++++--------
 ui/javascripts/app/controllers.js |  4 ++--
 ui/javascripts/app/router.js      | 10 +++++++++-
 ui/javascripts/app/routes.js      | 16 +++++++++++++++-
 ui/styles/_nav.scss               |  2 +-
 ui/styles/base.scss               |  7 +++++++
 6 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 6123e4205c..296c8c035d 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -56,7 +56,7 @@
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
           <p class="bold">ACLs Disabled</p>
-          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to implicitly enable them.</p>
+          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to implictly enable them.</p>
           </p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
         </div>
       </div>
@@ -100,28 +100,32 @@
     <div class="row">
       <div class="col-md-12 col-sm-12 col-xs-12 topbar">
 
-        <div class="col-md-1 col-sm-2 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           <a href="#"><div class="top-brand"></div></a>
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-10 col-xs-offset-1">
+        <div class="col-md-2 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
+          {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
+        </div>
+
+        <div class="col-md-1 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-10 col-xs-offset-1">
             {{#link-to 'services' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</a>{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
-          <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </a>
+        <div class="col-md-1 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+          <a {{bind-attr class=":col-xs-6 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
             <ul class="dropdown-menu col-xs-8" style="display:block;">
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index ac06ac642c..e35ff17cdc 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -44,9 +44,9 @@ App.DcController = Ember.Controller.extend({
     var passingChecks = checks.filterBy('Status', 'passing').get('length');
 
     if (this.get('hasFailingChecks') === true) {
-      return  failingChecks + ' checks failing';
+      return  failingChecks + ' failing';
     } else {
-      return  passingChecks + ' checks passing';
+      return  passingChecks + ' passing';
     }
 
   }.property('nodes'),
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index 1397fc227f..e29f614f69 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -1,6 +1,11 @@
 window.App = Ember.Application.create({
   rootElement: "#app",
-  currentPath: ''
+  currentPath: '',
+
+  initialize: function(container, application) {
+    console.log("initialize");
+    console.log(localStorage.getItem("foobars"));
+  }
 });
 
 
@@ -33,6 +38,9 @@ App.Router.map(function() {
 
     // Shows a page explaining that ACLs haven't been set-up
     this.route("aclsdisabled", { path: "/aclsdisabled" });
+    // Shows a page explaining that the ACL key being used isn't
+    // authorized
+    this.route("unauthorized", { path: "/unauthorized" });
   });
 
   // Shows a datacenter picker. If you only have one
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 6661c1318f..cc2bf63a32 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -305,7 +305,7 @@ App.AclsRoute = App.BaseRoute.extend({
   model: function(params) {
     var dc = this.modelFor('dc').dc;
     // Return a promise containing the ACLS
-    return Ember.$.getJSON('/v1/acl/list?dc=' + dc).then(function(data) {
+    return Ember.$.getJSON(formatUrl('/v1/acl/list', dc, "")).then(function(data) {
       objs = [];
       data.map(function(obj){
        objs.push(App.Acl.create(obj));
@@ -332,3 +332,17 @@ App.AclsRoute = App.BaseRoute.extend({
       controller.set('acls', model);
   }
 });
+
+// Adds any global parameters we need to set to a url/path
+function formatUrl(url, dc, token) {
+  if (url.indexOf("?") > 0) {
+    // If our url has existing params
+    url = url + "&dc=" + dc;
+    url = url + "&token=" + token;
+  } else {
+    // Our url doesn't have params
+    url = url + "?dc=" + dc;
+    url = url + "&token=" + token;
+  }
+  return url;
+}
diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss
index b3a46875dc..dc932af3ff 100644
--- a/ui/styles/_nav.scss
+++ b/ui/styles/_nav.scss
@@ -18,7 +18,7 @@
 
     .btn {
         margin-top: 20px;
-        min-width: 140px;
+        min-width: 100px;
     }
 
     .btn-dropdown {
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 51202eaf1c..808c57ec52 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -120,3 +120,10 @@ a {
   height: 800px;
   margin-bottom: 30px;
 }
+
+.elip-overflow {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

From 70f7073e01904d73434ac170230ef5fcfecb0495 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 16:06:22 -0700
Subject: [PATCH 03/14] ui: remove useless file

---
 ui/javascripts/app/untitled | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 ui/javascripts/app/untitled

diff --git a/ui/javascripts/app/untitled b/ui/javascripts/app/untitled
deleted file mode 100644
index e69de29bb2..0000000000

From 2f9f1afa100e7dc7f5f15c4455203c707cb49c8d Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 17:40:29 -0700
Subject: [PATCH 04/14] ui: add a development config

---
 ui/development_config.json | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 ui/development_config.json

diff --git a/ui/development_config.json b/ui/development_config.json
new file mode 100644
index 0000000000..940eb7d891
--- /dev/null
+++ b/ui/development_config.json
@@ -0,0 +1,9 @@
+{
+  "datacenter": "dc1",
+  "data_dir": "/tmp/",
+  "ui_dir": ".",
+  "bootstrap": true,
+  "server": true,
+  "acl_datacenter": "dc1",
+  "acl_master_token": "dev"
+}

From c2830c0f74c05c7dff136b0268f1c4642b68b5a9 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 17:42:10 -0700
Subject: [PATCH 05/14] ui: update readme for dev confi

---
 ui/README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui/README.md b/ui/README.md
index 6e1fabb59a..9a25f4448e 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -47,6 +47,11 @@ An example of this command, from inside the `ui/` directory, would be:
 Basic tests can be run by adding the `?test` query parameter to the
 application.
 
+When developing Consul, it's recommended that you use the included
+development configuration.
+
+    consul agent -config-file=development_config.json
+
 ### Releasing
 
 `make dist`

From a133d9ecba06ce567e4bf2e608bb1369f345ab20 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 21 Aug 2014 17:43:08 -0700
Subject: [PATCH 06/14] ui: use ember object to wrap localstorag

---
 ui/acl.md                    |  6 ++++++
 ui/javascripts/app/mixins.js |  0
 ui/javascripts/app/router.js | 34 +++++++++++++++++++++++++++++++---
 ui/javascripts/app/routes.js |  3 ++-
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 ui/acl.md
 create mode 100644 ui/javascripts/app/mixins.js

diff --git a/ui/acl.md b/ui/acl.md
new file mode 100644
index 0000000000..080e3a450a
--- /dev/null
+++ b/ui/acl.md
@@ -0,0 +1,6 @@
+- ACL management
+  - KV takes ?token=ACCESS_KEY
+    - There is a default token
+    - Allow setting a token
+    - store the token in local storage
+    - return error (notification) if the write fails
diff --git a/ui/javascripts/app/mixins.js b/ui/javascripts/app/mixins.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index e29f614f69..d3e616e103 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -1,13 +1,41 @@
 window.App = Ember.Application.create({
   rootElement: "#app",
-  currentPath: '',
+  currentPath: ''
+});
+
+Ember.Application.initializer({
+  name: 'settings',
 
   initialize: function(container, application) {
-    console.log("initialize");
-    console.log(localStorage.getItem("foobars"));
+    application.set('settings', App.Settings.create());
   }
 });
 
+// Wrap localstorage with an ember object
+App.Settings = Ember.Object.extend({
+  unknownProperty: function(key) {
+    return localStorage[key];
+  },
+
+  setUnknownProperty: function(key, value) {
+    if(Ember.isNone(value)) {
+      delete localStorage[key];
+    } else {
+      localStorage[key] = value;
+    }
+    this.notifyPropertyChange(key);
+    return value;
+  },
+
+  clear: function() {
+    this.beginPropertyChanges();
+    for (var i=0, l=localStorage.length; i<l; i++){
+      this.set(localStorage.key(i));
+    }
+    localStorage.clear();
+    this.endPropertyChanges();
+  }
+});
 
 App.Router.map(function() {
   // Our parent datacenter resource sets the namespace
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index cc2bf63a32..046b9d5781 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -304,8 +304,9 @@ App.NodesRoute = App.BaseRoute.extend({
 App.AclsRoute = App.BaseRoute.extend({
   model: function(params) {
     var dc = this.modelFor('dc').dc;
+    var token = App.get('settings.token');
     // Return a promise containing the ACLS
-    return Ember.$.getJSON(formatUrl('/v1/acl/list', dc, "")).then(function(data) {
+    return Ember.$.getJSON(formatUrl('/v1/acl/list', dc, token)).then(function(data) {
       objs = [];
       data.map(function(obj){
        objs.push(App.Acl.create(obj));

From e970ea8ddf56e2395073291173ed4b84cafa3fda Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 12:25:10 -0700
Subject: [PATCH 07/14] ui: more acl integration, condensing top bar

---
 ui/index.html                     | 148 +++++++-----------------------
 ui/javascripts/app/controllers.js |  93 ++++++++++++++++++-
 ui/javascripts/app/helpers.js     |  18 ++++
 ui/javascripts/app/models.js      |  33 +++++++
 ui/javascripts/app/router.js      |  28 +-----
 ui/javascripts/app/routes.js      |  24 ++++-
 ui/styles/_buttons.scss           |  36 +++++---
 7 files changed, 219 insertions(+), 161 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 296c8c035d..eff48db12a 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -77,21 +77,25 @@
   <script type="text/x-handlebars" id="actionbar">
     <div class="row">
       <div class="action-bar">
-        <div class="col-md-5">
+        <div {{ bind-attr class="searchBar:col-md-12:col-md-5" }} >
           <div class="form-group">
-            {{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
+            {{ input type="text" value=filter class="form-control form-control-mini" placeholder=filterText}}
           </div>
         </div>
+        {{#if statuses}}
         <div class="col-md-5">
           <div class="form-group">
             {{view Ember.Select content=statuses value=status class="form-control form-control-mini"}}
           </div>
         </div>
+        {{/if}}
+        {{#if hasExpanded }}
         <div class="col-md-2 hidden-xs hidden-sm">
           <div class="form-group">
             <button {{ bind-attr class=":btn :btn-mini :pull-right condensed:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
           </div>
         </div>
+        {{/if}}
       </div>
     </div>
   </script>
@@ -105,11 +109,11 @@
         </div>
 
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
-         {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
+          {{#link-to 'services' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>Services</a>{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
-          {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
+          {{#link-to 'nodes' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>Nodes</a>{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
@@ -120,12 +124,8 @@
           {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
         </div>
 
-        <div class="col-md-1 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-10 col-xs-offset-1">
-            {{#link-to 'services' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</a>{{/link-to}}
-        </div>
-
-        <div class="col-md-1 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
-          <a {{bind-attr class=":col-xs-6 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
+        <div class="col-md-2 col-md-offset-1 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+          <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
             <ul class="dropdown-menu col-xs-8" style="display:block;">
@@ -559,44 +559,16 @@
         {{view App.ActionBarView }}
 
           {{#if filteredContent}}
-
-                {{#if condensed }}
-                    {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
-                      {{#link-to 'acl.show' Node tagName="div" href=false class="list-group-item list-condensed-link" }}
-                        <div {{bind-attr class=":list-bar-horizontal"}}></div>
-                        <div class="name">
-                          foo
-                          <small class="pull-right">
-                          bar
-                          </small>
-                        </div>
-                      {{/link-to}}
-                    {{/collection}}
-
-                {{else}}
-
-                  {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
-                    {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-link" }}
-                      <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
-                      <h4 class="list-group-item-heading">
-                        {{Node}}
-                        <small>{{Address}}</small>
-                        <div class="heading-helper">
-                          <a class="subtle" href="#">{{checkMessage}}</a>
-                        </div>
-                      </h4>
-                      <ul class="list-inline">
-                        {{#each service in services}}
-                          <li class="bold">{{service.Service}}</li>
-                        {{/each}}
-                      </ul>
-                    {{/link-to}}
-                  {{/collection}}
-
-                {{/if}}
-
+              {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
+                {{#link-to 'acls.show' ID tagName="div" href=false class="list-group-item list-condensed-link" }}
+                  <div class="bg-light-gray list-bar-horizontal"></div>
+                  <div class="name">
+                    {{ aclName Name ID }}
+                  </div>
+                {{/link-to}}
+              {{/collection}}
           {{else}}
-          <p class="light">There are no nodes to show.</p>
+            <p class="light">There are no ACLs to show.</p>
           {{/if}}
       </div>
 
@@ -613,81 +585,25 @@
 
   <script type="text/x-handlebars" id="acl">
       <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
-        {{#link-to "nodes" class="btn btn-default btn-block" }}Back to all nodes{{/link-to}}
+        {{#link-to "acls" class="btn btn-default btn-block" }}Back to all ACLs{{/link-to}}
         <hr>
       </div>
 
-      <h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
+      {{errorMessage}}
+
+      <h3 class="no-margin">{{aclName model.Name model.ID }}</h3>
       <hr>
 
-      <h5>Services</h5>
-
-      {{#each service in model.Services }}
-        {{#link-to 'services.show' service.Service tagName="div" href=false class="list-group-item list-condensed-link double-line" }}
-          <div class="list-bar-horizontal bg-light-gray"></div>
-            <div class="name">
-              {{service.Service}}
-              <small class="pull-right">
-                :{{service.Port}}
-              </small>
-            </div>
-            <ul class="list-inline sub">
-              {{#each tag in service.Tags}}
-                <li>{{tag}}</li>
-              {{/each}}
-              {{serviceTagMessage service.Tags}}
-            </ul>
-        {{/link-to}}
-
-      {{/each}}
-
-      <h5>Checks</h5>
-
-      {{#each check in model.Checks }}
-
-        <div class="panel">
-          {{ panelBar check.Status }}
-          <div class="panel-heading">
-            <h3 class="panel-title">
-              {{check.Name}}
-              <small>{{check.CheckID}}</small>
-              <span class="panel-note">{{check.Status}}</span>
-            </h3>
-          </div>
-
-          <div class="panel-body">
-            <h5>Notes</h5>
-            <p>{{ check.Notes }}</p>
-            <h5>Output</h5>
-            <pre>{{check.Output}}</pre>
-          </div>
-        </div>
-
-      {{/each}}
-
-      <h5>Lock Sessions</h5>
-
-      {{#if sessions }}
-        {{errorMessage}}
-
-        {{#each session in sessions }}
-          <div class="list-group-item list-condensed double-line">
-            <div class="bg-light-gray list-bar-horizontal"></div>
-            <div class="name">
-              {{ sessionName session }}
-              <button {{ action "invalidateSession" session.ID }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-list isLoading:btn-warning" }}>Invalidate</button>
-            </div>
-              <ul class="list-inline sub">
-                {{#each check in session.Checks}}
-                  <li class="bold">{{check}}</li>
-                {{/each}}
-              </ul>
-          </div>
-        {{/each}}
-
-      {{else}}
-        <p class="light small">No sessions</p>
+      <button {{ action "clone" }} {{ bind-attr class=":btn :btn-default" }}>Clone</button>
+      <button {{ action "set" }} {{ bind-attr class=":btn :btn-default" }}>Use Token</button>
+      {{# if model.isNotAnon }}
+      <button {{ action "delete"}} {{ bind-attr class=":btn isLoading:btn-warning:btn-danger" }}>Delete</button>
       {{/if}}
+      <h5>Type</h5>
+      <p>{{Type}}</p>
+
+      <h5>Rules</h5>
+      <pre>{{formatRules model.Rules}}</pre>
   </script>
 
   <script type="text/x-handlebars" id="index">
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index e35ff17cdc..43f37c7b08 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -241,6 +241,8 @@ ItemBaseController = Ember.ArrayController.extend({
   queryParams: ["filter", "status", "condensed"],
   dc: Ember.computed.alias("controllers.dc"),
   condensed: true,
+  hasExpanded: true,
+  filterText: "Filter by name",
   filter: "", // default
   status: "any status", // default
   statuses: ["any status", "passing", "failing"],
@@ -313,10 +315,16 @@ App.ServicesController = ItemBaseController.extend({
   items: Ember.computed.alias("services"),
 });
 
-App.AclsIndexController = Ember.ArrayController.extend({
+App.AclsController = Ember.ArrayController.extend({
   needs: ["dc", "application"],
   queryParams: ["filter"],
+  filterText: "Filter by name or ID",
+  searchBar: true,
+
   dc: Ember.computed.alias("controllers.dc"),
+  items: Ember.computed.alias("acls"),
+
+  filter: "",
 
   isShowingItem: function() {
     var currentPath = this.get('controllers.application.currentPath');
@@ -329,20 +337,95 @@ App.AclsIndexController = Ember.ArrayController.extend({
     var items = this.get('items').filter(function(item, index, enumerable){
       // First try to match on the name
       var nameMatch = item.get('Name').toLowerCase().match(filter.toLowerCase());
-      if (nameMatch.length > 0) {
+      if (nameMatch !== null) {
         return nameMatch;
-      // Otherwise match on the ID
       } else {
         return item.get('ID').toLowerCase().match(filter.toLowerCase());
       }
     });
 
+    return items;
   }.property('filter', 'items.@each'),
 });
 
 
-App.AclsShowController = Ember.ArrayController.extend({
-  needs: ["dc"],
+App.AclsShowController = Ember.ObjectController.extend({
+  needs: ["dc", "acls"],
   dc: Ember.computed.alias("controllers.dc"),
+  isLoading: false,
+
+  actions: {
+    set: function() {
+      this.set('isLoading', true);
+      var controller = this;
+      var acl = controller.get('model');
+      var dc = controller.get('dc').get('datacenter');
+
+      if (window.confirm("Are you sure you want to use this token for your session?")) {
+        // Set
+        var token = App.set('settings.token', acl.ID);
+        controller.transitionToRoute('services');
+        this.set('isLoading', false);
+      }
+    },
+
+    clone: function() {
+      this.set('isLoading', true);
+      var controller = this;
+      var acl = controller.get('model');
+      var dc = controller.get('dc').get('datacenter');
+      var token = App.get('settings.token');
+
+      // Set
+      controller.transitionToRoute('services');
+
+      Ember.$.ajax({
+          url: formatUrl('/v1/acl/clone/'+ acl.ID, dc, token),
+          type: 'PUT'
+      }).then(function(response) {
+        controller.transitionToRoute('acls.show', response.ID);
+        controller.set('isLoading', false);
+      }).fail(function(response) {
+        // Render the error message on the form if the request failed
+        controller.set('errorMessage', 'Received error while processing: ' + response.statusText);
+        controller.set('isLoading', false);
+      });
+
+    },
+
+    delete: function() {
+      this.set('isLoading', true);
+      var controller = this;
+      var acl = controller.get('model');
+      var dc = controller.get('dc').get('datacenter');
+      var token = App.get('settings.token');
+
+      if (window.confirm("Are you sure you want to delete this token?")) {
+        Ember.$.ajax({
+            url: formatUrl('/v1/acl/destroy/'+ acl.ID, dc, token),
+            type: 'PUT'
+        }).then(function(response) {
+          Ember.$.getJSON(formatUrl('/v1/acl/list', dc, token)).then(function(data) {
+            objs = [];
+            data.map(function(obj){
+              if (obj.ID === "anonymous") {
+                objs.unshift(App.Acl.create(obj));
+              } else {
+                objs.push(App.Acl.create(obj));
+              }
+            });
+            controller.get('controllers.acls').set('acls', objs);
+          }).then(function() {
+            controller.transitionToRoute('acls');
+            controller.set('isLoading', false);
+          });
+        }).fail(function(response) {
+          // Render the error message on the form if the request failed
+          controller.set('errorMessage', 'Received error while processing: ' + response.statusText);
+          controller.set('isLoading', false);
+        });
+      }
+    }
+  }
 });
 
diff --git a/ui/javascripts/app/helpers.js b/ui/javascripts/app/helpers.js
index 50b6dc0466..6f370734da 100644
--- a/ui/javascripts/app/helpers.js
+++ b/ui/javascripts/app/helpers.js
@@ -28,6 +28,24 @@ Ember.Handlebars.helper('sessionName', function(session) {
   }
 });
 
+Ember.Handlebars.helper('aclName', function(name, id) {
+  if (name === "") {
+    return id;
+  } else {
+    return new Handlebars.SafeString(name + ' <small class="pull-right">' + id + '</small>');
+  }
+});
+
+
+Ember.Handlebars.helper('formatRules', function(rules) {
+  if (rules === "") {
+    return "No rules defined";
+  } else {
+    return rules;
+  }
+});
+
+
 // We need to do this because of our global namespace properties. The
 // service.Tags
 Ember.Handlebars.helper('serviceTagMessage', function(tags) {
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index f2755b17bc..4082d36fc2 100644
--- a/ui/javascripts/app/models.js
+++ b/ui/javascripts/app/models.js
@@ -244,4 +244,37 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
 // An ACL
 //
 App.Acl = Ember.Object.extend({
+  isNotAnon: function() {
+    if (this.get('ID') === "anonymous"){
+      return false;
+    } else {
+      return true;
+    }
+  }.property('ID')
+});
+
+// Wrap localstorage with an ember object
+App.Settings = Ember.Object.extend({
+  unknownProperty: function(key) {
+    return localStorage[key];
+  },
+
+  setUnknownProperty: function(key, value) {
+    if(Ember.isNone(value)) {
+      delete localStorage[key];
+    } else {
+      localStorage[key] = value;
+    }
+    this.notifyPropertyChange(key);
+    return value;
+  },
+
+  clear: function() {
+    this.beginPropertyChanges();
+    for (var i=0, l=localStorage.length; i<l; i++){
+      this.set(localStorage.key(i));
+    }
+    localStorage.clear();
+    this.endPropertyChanges();
+  }
 });
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index d3e616e103..ac16e068cb 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -11,32 +11,6 @@ Ember.Application.initializer({
   }
 });
 
-// Wrap localstorage with an ember object
-App.Settings = Ember.Object.extend({
-  unknownProperty: function(key) {
-    return localStorage[key];
-  },
-
-  setUnknownProperty: function(key, value) {
-    if(Ember.isNone(value)) {
-      delete localStorage[key];
-    } else {
-      localStorage[key] = value;
-    }
-    this.notifyPropertyChange(key);
-    return value;
-  },
-
-  clear: function() {
-    this.beginPropertyChanges();
-    for (var i=0, l=localStorage.length; i<l; i++){
-      this.set(localStorage.key(i));
-    }
-    localStorage.clear();
-    this.endPropertyChanges();
-  }
-});
-
 App.Router.map(function() {
   // Our parent datacenter resource sets the namespace
   // for the entire application
@@ -61,7 +35,7 @@ App.Router.map(function() {
     });
     // ACLs
     this.resource("acls", { path: "/acls" }, function(){
-      this.route("show", { path: "/:name" });
+      this.route("show", { path: "/:id" });
     });
 
     // Shows a page explaining that ACLs haven't been set-up
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 046b9d5781..1d09f92a77 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -309,7 +309,11 @@ App.AclsRoute = App.BaseRoute.extend({
     return Ember.$.getJSON(formatUrl('/v1/acl/list', dc, token)).then(function(data) {
       objs = [];
       data.map(function(obj){
-       objs.push(App.Acl.create(obj));
+        if (obj.ID === "anonymous") {
+          objs.unshift(App.Acl.create(obj))
+        } else {
+          objs.push(App.Acl.create(obj));
+        }
       });
       return objs;
     });
@@ -334,6 +338,24 @@ App.AclsRoute = App.BaseRoute.extend({
   }
 });
 
+App.AclsShowRoute = App.BaseRoute.extend({
+  model: function(params) {
+    var dc = this.modelFor('dc').dc;
+    var token = App.get('settings.token');
+    // Return a promise hash of the node and nodes
+    return Ember.RSVP.hash({
+      dc: dc,
+      acl: Ember.$.getJSON(formatUrl('/v1/acl/info/'+ params.id, dc, token)).then(function(data) {
+        return App.Acl.create(data[0]);
+      })
+    });
+  },
+
+  setupController: function(controller, models) {
+      controller.set('content', models.acl);
+  }
+});
+
 // Adds any global parameters we need to set to a url/path
 function formatUrl(url, dc, token) {
   if (url.indexOf("?") > 0) {
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index f5db97df4a..4f7d6a5f79 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -29,17 +29,6 @@
         box-shadow: none;
     }
 
-    &.btn-primary, &.active {
-        color: $purple-dark;
-        background-color: transparent;
-        border: 2px solid $purple;
-
-        &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
-        }
-    }
-
     &.btn-warning {
         color: $orange-faded;
         background-color: transparent;
@@ -61,7 +50,6 @@
             background-color: lighten($green-faded, 24%);
             color: darken($green-dark, 10%);
         }
-
     }
 
     &.btn-danger {
@@ -73,7 +61,18 @@
             background-color: lighten($red, 38%);
             color: darken($red, 10%);
         }
+    }
 
+
+    &.active {
+        color: $purple-dark;
+        background-color: transparent;
+        border: 2px solid $purple;
+
+        &:hover {
+            background-color: $light-purple;
+            color: darken($purple, 10%);
+        }
     }
 
     &.btn-mini {
@@ -89,3 +88,16 @@
     }
 
 }
+
+.active {
+    .btn {
+        color: $purple-dark;
+        background-color: transparent;
+        border: 2px solid $purple;
+
+        &:hover {
+            background-color: $light-purple;
+            color: darken($purple, 10%);
+        }
+    }
+}

From f581c94b39841fa9c1af7eb812cbe557ddb9007e Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 12:57:38 -0700
Subject: [PATCH 08/14] ui: initial settings ui

---
 ui/index.html       | 13 ++++++++-----
 ui/styles/_nav.scss |  8 ++++++++
 ui/styles/base.scss | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index eff48db12a..99c02e583b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -102,18 +102,17 @@
 
   <script type="text/x-handlebars" data-template-name="dc">
     <div class="row">
-      <div class="col-md-12 col-sm-12 col-xs-12 topbar">
+      <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar hasFailingChecks:topbar-orange:topbar-green" }}>
 
         <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           <a href="#"><div class="top-brand"></div></a>
         </div>
-
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
-          {{#link-to 'services' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>Services</a>{{/link-to}}
+          {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
-          {{#link-to 'nodes' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>Nodes</a>{{/link-to}}
+          {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
@@ -124,7 +123,7 @@
           {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-md-offset-1 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
           <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
@@ -136,6 +135,10 @@
           {{/if}}
 
         </div>
+
+        <div class="col-md-1 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
+          {{#link-to 'nodes' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
+        </div>
       </div>
     </div>
 
diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss
index dc932af3ff..680e5d2a3d 100644
--- a/ui/styles/_nav.scss
+++ b/ui/styles/_nav.scss
@@ -16,6 +16,14 @@
     min-height: 95px;
     border-bottom: 1px #eee solid;
 
+    &.topbar-green {
+        border-top: 6px $green-faded solid;
+    }
+
+    &.topbar-orange {
+        border-top: 6px $orange-faded solid;
+    }
+
     .btn {
         margin-top: 20px;
         min-width: 100px;
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 808c57ec52..8c331d3e3c 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -98,6 +98,20 @@ a {
     background-color: $gray-background;
 }
 
+.topbar {
+  .btn.icon {
+    min-width: 50px;
+    font-size: 30px;
+    height: 33px;
+    padding: 0;
+    .wrap {
+      position: absolute;
+      top: -8px;
+      left: 14px;
+    }
+  }
+}
+
 .action-bar {
   min-height: 50px;
   padding-top: 10px;

From bc0339bd1314f01a5c6e44d84dc731311fbd1cf3 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 16:03:46 -0700
Subject: [PATCH 09/14] ui: add notification system

---
 ui/index.html                         |  25 ++-
 ui/javascripts/app/controllers.js     |  19 ++
 ui/javascripts/app/helpers.js         |  24 +++
 ui/javascripts/app/models.js          |   2 +
 ui/javascripts/app/router.js          |   2 +
 ui/javascripts/app/routes.js          |   9 +-
 ui/javascripts/app/views.js           |   7 +
 ui/javascripts/libs/classie.js        |  80 ++++++++
 ui/javascripts/libs/classie.min.js    |   0
 ui/javascripts/libs/notificationFx.js | 146 ++++++++++++++
 ui/scripts/compile.rb                 |   2 +
 ui/styles/_nav.scss                   |   8 -
 ui/styles/_notifications.scss         | 267 ++++++++++++++++++++++++++
 ui/styles/base.scss                   |   1 +
 14 files changed, 581 insertions(+), 11 deletions(-)
 create mode 100755 ui/javascripts/libs/classie.js
 create mode 100644 ui/javascripts/libs/classie.min.js
 create mode 100644 ui/javascripts/libs/notificationFx.js
 create mode 100644 ui/styles/_notifications.scss

diff --git a/ui/index.html b/ui/index.html
index 99c02e583b..cbcac6f2aa 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -102,7 +102,7 @@
 
   <script type="text/x-handlebars" data-template-name="dc">
     <div class="row">
-      <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar hasFailingChecks:topbar-orange:topbar-green" }}>
+      <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar" }}>
 
         <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           <a href="#"><div class="top-brand"></div></a>
@@ -137,7 +137,7 @@
         </div>
 
         <div class="col-md-1 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
-          {{#link-to 'nodes' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
+          {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
         </div>
       </div>
     </div>
@@ -628,6 +628,25 @@
     </div>
   </script>
 
+  <script type="text/x-handlebars" id="settings">
+    <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12">
+      <h3>Settings</h3>
+      <p>These settings allow you to configure your browser for the Consul Web UI. Everything is saved to localstorage,
+      and should persist through visits and browser usage.</p>
+      <p>Settings are automatically persisted upon modification, so no manual save is required.</p>
+      <h5>Access Token</h5>
+      <div class="form-group">
+        {{ input type="text" value=model.token class="form-control form-mono" placeholder="token"}}
+        <span class="help-block">The token is sent with requests as the <code>?token</code> parameter. This is used to control the ACL for the
+        web UI.</span>
+      </div>
+      <div class="form-group">
+        <button {{ action "reset" }} {{ bind-attr class=":btn :btn-danger" }}>Reset Defaults</button>
+      </div>
+    </div>
+  </script>
+
+
   <script>
   // Enable query params, must be loaded before ember is
   EmberENV = {FEATURES: {'query-params-new': true}};
@@ -639,6 +658,8 @@
   <script src="javascripts/libs/ember-debug.min.js"></script>
   <script src="javascripts/libs/ember-validations.min.js"></script>
   <script src="javascripts/libs/list-view.min.js"></script>
+  <script src="javascripts/libs/classie.js"></script>
+  <script src="javascripts/libs/notificationFx.js"></script>
   <script src="javascripts/fixtures.js"></script>
   <script src="javascripts/app/router.js"></script>
   <script src="javascripts/app/routes.js"></script>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 43f37c7b08..d4c0a183b2 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -366,6 +366,7 @@ App.AclsShowController = Ember.ObjectController.extend({
         var token = App.set('settings.token', acl.ID);
         controller.transitionToRoute('services');
         this.set('isLoading', false);
+        notify('Now using token: ' + acl.ID, 3000);
       }
     },
 
@@ -385,6 +386,7 @@ App.AclsShowController = Ember.ObjectController.extend({
       }).then(function(response) {
         controller.transitionToRoute('acls.show', response.ID);
         controller.set('isLoading', false);
+        notify('Succesfully cloned token', 4000);
       }).fail(function(response) {
         // Render the error message on the form if the request failed
         controller.set('errorMessage', 'Received error while processing: ' + response.statusText);
@@ -418,6 +420,7 @@ App.AclsShowController = Ember.ObjectController.extend({
           }).then(function() {
             controller.transitionToRoute('acls');
             controller.set('isLoading', false);
+            notify('ACL token deleted', 3000);
           });
         }).fail(function(response) {
           // Render the error message on the form if the request failed
@@ -429,3 +432,19 @@ App.AclsShowController = Ember.ObjectController.extend({
   }
 });
 
+App.SettingsController = Ember.ObjectController.extend({
+  actions: {
+    reset: function() {
+      this.set('isLoading', true);
+      var controller = this;
+
+      if (window.confirm("Are your sure you want to reset your settings?")) {
+        localStorage.clear();
+        controller.set('content', App.Settings.create());
+        notify('Settings reset', 3000);
+        this.set('isLoading', false);
+      }
+    }
+  }
+});
+
diff --git a/ui/javascripts/app/helpers.js b/ui/javascripts/app/helpers.js
index 6f370734da..851867bdd0 100644
--- a/ui/javascripts/app/helpers.js
+++ b/ui/javascripts/app/helpers.js
@@ -53,3 +53,27 @@ Ember.Handlebars.helper('serviceTagMessage', function(tags) {
     return "No tags";
   }
 });
+
+
+// Sends a new notification to the UI
+function notify(message, ttl) {
+  if (window.notifications !== undefined && window.notifications.length > 0) {
+    $(window.notifications).each(function(i, v) {
+      v.dismiss();
+    });
+  }
+  var notification = new NotificationFx({
+    message : '<p>'+ message + '</p>',
+    layout : 'growl',
+    effect : 'slide',
+    type : 'notice',
+    ttl: ttl,
+  });
+
+  // show the notification
+  notification.show();
+
+  // Add the notification to the queue to be closed
+  window.notifications = [];
+  window.notifications.push(notification);
+}
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index 4082d36fc2..73c28e2777 100644
--- a/ui/javascripts/app/models.js
+++ b/ui/javascripts/app/models.js
@@ -278,3 +278,5 @@ App.Settings = Ember.Object.extend({
     this.endPropertyChanges();
   }
 });
+
+
diff --git a/ui/javascripts/app/router.js b/ui/javascripts/app/router.js
index ac16e068cb..7bcc580819 100644
--- a/ui/javascripts/app/router.js
+++ b/ui/javascripts/app/router.js
@@ -43,6 +43,8 @@ App.Router.map(function() {
     // Shows a page explaining that the ACL key being used isn't
     // authorized
     this.route("unauthorized", { path: "/unauthorized" });
+
+    this.resource("settings", { path: "/settings" });
   });
 
   // Shows a datacenter picker. If you only have one
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 1d09f92a77..d7f8b19834 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -310,7 +310,7 @@ App.AclsRoute = App.BaseRoute.extend({
       objs = [];
       data.map(function(obj){
         if (obj.ID === "anonymous") {
-          objs.unshift(App.Acl.create(obj))
+          objs.unshift(App.Acl.create(obj));
         } else {
           objs.push(App.Acl.create(obj));
         }
@@ -356,6 +356,13 @@ App.AclsShowRoute = App.BaseRoute.extend({
   }
 });
 
+App.SettingsRoute = App.BaseRoute.extend({
+  model: function(params) {
+    return App.get('settings');
+  }
+});
+
+
 // Adds any global parameters we need to set to a url/path
 function formatUrl(url, dc, token) {
   if (url.indexOf("?") > 0) {
diff --git a/ui/javascripts/app/views.js b/ui/javascripts/app/views.js
index 29883c1d1c..b111efccbf 100644
--- a/ui/javascripts/app/views.js
+++ b/ui/javascripts/app/views.js
@@ -72,3 +72,10 @@ App.AclView = Ember.View.extend({
 App.AclsShowView = Ember.View.extend({
     templateName: 'acl'
 });
+
+
+// Settings
+
+App.SettingsView = Ember.View.extend({
+    templateName: 'settings',
+});
diff --git a/ui/javascripts/libs/classie.js b/ui/javascripts/libs/classie.js
new file mode 100755
index 0000000000..a96755488b
--- /dev/null
+++ b/ui/javascripts/libs/classie.js
@@ -0,0 +1,80 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ * 
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+  hasClass = function( elem, c ) {
+    return elem.classList.contains( c );
+  };
+  addClass = function( elem, c ) {
+    elem.classList.add( c );
+  };
+  removeClass = function( elem, c ) {
+    elem.classList.remove( c );
+  };
+}
+else {
+  hasClass = function( elem, c ) {
+    return classReg( c ).test( elem.className );
+  };
+  addClass = function( elem, c ) {
+    if ( !hasClass( elem, c ) ) {
+      elem.className = elem.className + ' ' + c;
+    }
+  };
+  removeClass = function( elem, c ) {
+    elem.className = elem.className.replace( classReg( c ), ' ' );
+  };
+}
+
+function toggleClass( elem, c ) {
+  var fn = hasClass( elem, c ) ? removeClass : addClass;
+  fn( elem, c );
+}
+
+var classie = {
+  // full names
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  // short names
+  has: hasClass,
+  add: addClass,
+  remove: removeClass,
+  toggle: toggleClass
+};
+
+// transport
+if ( typeof define === 'function' && define.amd ) {
+  // AMD
+  define( classie );
+} else {
+  // browser global
+  window.classie = classie;
+}
+
+})( window );
diff --git a/ui/javascripts/libs/classie.min.js b/ui/javascripts/libs/classie.min.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/javascripts/libs/notificationFx.js b/ui/javascripts/libs/notificationFx.js
new file mode 100644
index 0000000000..cc5b1c96d9
--- /dev/null
+++ b/ui/javascripts/libs/notificationFx.js
@@ -0,0 +1,146 @@
+/**
+ * notificationFx.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright 2014, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+
+	'use strict';
+
+	var docElem = window.document.documentElement,
+		// animation end event name
+		animEndEventName = "webkitAnimationEnd";
+
+	/**
+	 * extend obj function
+	 */
+	function extend( a, b ) {
+		for( var key in b ) {
+			if( b.hasOwnProperty( key ) ) {
+				a[key] = b[key];
+			}
+		}
+		return a;
+	}
+
+	/**
+	 * NotificationFx function
+	 */
+	function NotificationFx( options ) {
+		this.options = extend( {}, this.options );
+		extend( this.options, options );
+		this._init();
+	}
+
+	/**
+	 * NotificationFx options
+	 */
+	NotificationFx.prototype.options = {
+		// element to which the notification will be appended
+		// defaults to the document.body
+		wrapper : document.body,
+		// the message
+		message : 'yo!',
+		// layout type: growl|attached|bar|other
+		layout : 'growl',
+		// effects for the specified layout:
+		// for growl layout: scale|slide|genie|jelly
+		// for attached layout: flip|bouncyflip
+		// for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
+		// ...
+		effect : 'slide',
+		// notice, warning, error, success
+		// will add class ns-type-warning, ns-type-error or ns-type-success
+		type : 'error',
+		// if the user doesn´t close the notification then we remove it
+		// after the following time
+		ttl : 6000,
+		// callbacks
+		onClose : function() { return false; },
+		onOpen : function() { return false; }
+	};
+
+	/**
+	 * init function
+	 * initialize and cache some vars
+	 */
+	NotificationFx.prototype._init = function() {
+		// create HTML structure
+		this.ntf = document.createElement( 'div' );
+		this.ntf.className = 'ns-box ns-' + this.options.layout + ' ns-effect-' + this.options.effect + ' ns-type-' + this.options.type;
+		var strinner = '<div class="ns-box-inner">';
+		strinner += this.options.message;
+		strinner += '</div>';
+		strinner += '<span class="ns-close"></span></div>';
+		this.ntf.innerHTML = strinner;
+
+		// append to body or the element specified in options.wrapper
+		this.options.wrapper.insertBefore( this.ntf, this.options.wrapper.firstChild );
+
+		// dismiss after [options.ttl]ms
+		var self = this;
+		this.dismissttl = setTimeout( function() {
+			if( self.active ) {
+				self.dismiss();
+			}
+		}, this.options.ttl );
+
+		// init events
+		this._initEvents();
+	};
+
+	/**
+	 * init events
+	 */
+	NotificationFx.prototype._initEvents = function() {
+		var self = this;
+		// dismiss notification
+		this.ntf.querySelector( '.ns-close' ).addEventListener( 'click', function() { self.dismiss(); } );
+	};
+
+	/**
+	 * show the notification
+	 */
+	NotificationFx.prototype.show = function() {
+		this.active = true;
+		classie.remove( this.ntf, 'ns-hide' );
+		classie.add( this.ntf, 'ns-show' );
+		this.options.onOpen();
+	};
+
+	/**
+	 * dismiss the notification
+	 */
+	NotificationFx.prototype.dismiss = function() {
+		var self = this;
+		this.active = false;
+		clearTimeout( this.dismissttl );
+		classie.remove( this.ntf, 'ns-show' );
+		setTimeout( function() {
+			classie.add( self.ntf, 'ns-hide' );
+
+			// callback
+			self.options.onClose();
+		}, 25 );
+
+		// after animation ends remove ntf from the DOM
+		var onEndAnimationFn = function( ev ) {
+			if( ev.target !== self.ntf ) return false;
+			this.removeEventListener( animEndEventName, onEndAnimationFn );
+			self.options.wrapper.removeChild( this );
+		};
+
+		this.ntf.addEventListener( animEndEventName, onEndAnimationFn );
+	};
+
+	/**
+	 * add to global namespace
+	 */
+	window.NotificationFx = NotificationFx;
+
+} )( window );
diff --git a/ui/scripts/compile.rb b/ui/scripts/compile.rb
index 0f6f4fecd3..c59feeedcd 100644
--- a/ui/scripts/compile.rb
+++ b/ui/scripts/compile.rb
@@ -8,6 +8,8 @@ libs = [
   "javascripts/libs/ember.min.js",
   "javascripts/libs/ember-validations.min.js",
   "javascripts/libs/list-view.min.js",
+  "javascripts/libs/classie.js",
+  "javascripts/libs/notificationFx.js",
 ]
 
 app = [
diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss
index 680e5d2a3d..dc932af3ff 100644
--- a/ui/styles/_nav.scss
+++ b/ui/styles/_nav.scss
@@ -16,14 +16,6 @@
     min-height: 95px;
     border-bottom: 1px #eee solid;
 
-    &.topbar-green {
-        border-top: 6px $green-faded solid;
-    }
-
-    &.topbar-orange {
-        border-top: 6px $orange-faded solid;
-    }
-
     .btn {
         margin-top: 20px;
         min-width: 100px;
diff --git a/ui/styles/_notifications.scss b/ui/styles/_notifications.scss
new file mode 100644
index 0000000000..7cb3d518ee
--- /dev/null
+++ b/ui/styles/_notifications.scss
@@ -0,0 +1,267 @@
+.ns-box {
+    position: fixed;
+    background: lighten(black, 40%);
+    padding: 14px;
+    line-height: 1.4;
+    z-index: 1000;
+    min-width: 400px;
+    pointer-events: none;
+    color: rgba(250,251,255,0.95);
+    font-weight: 700;
+    font-size: 14px;
+    opacity: 0.8;
+}
+
+.ns-box.ns-show {
+    pointer-events: auto;
+}
+
+.ns-box a {
+    color: inherit;
+    opacity: 0.7;
+    font-weight: 700;
+}
+
+.ns-box a:hover,
+.ns-box a:focus {
+    opacity: 1;
+}
+
+.ns-box p {
+    margin: 0;
+}
+
+.ns-box.ns-show,
+.ns-box.ns-visible {
+    pointer-events: auto;
+}
+
+.ns-close {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    overflow: hidden;
+    text-indent: 100%;
+    cursor: pointer;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.ns-close:hover,
+.ns-close:focus {
+    outline: none;
+}
+
+.ns-close::before,
+.ns-close::after {
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 60%;
+    top: 50%;
+    left: 50%;
+    background: white;
+}
+
+.ns-close:hover::before,
+.ns-close:hover::after {
+    background: #fff;
+}
+
+.ns-close::before {
+    -webkit-transform: translate(-50%,-50%) rotate(45deg);
+    transform: translate(-50%,-50%) rotate(45deg);
+}
+
+.ns-close::after {
+    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
+    transform: translate(-50%,-50%) rotate(-45deg);
+}
+
+
+/* Growl-style notifications */
+
+.ns-growl {
+    top: 30px;
+    left: 30px;
+    max-width: 300px;
+    border-radius: 5px;
+}
+
+.ns-growl p {
+    margin: 0;
+    line-height: 1.3;
+}
+
+[class^="ns-effect-"].ns-growl.ns-hide,
+[class*=" ns-effect-"].ns-growl.ns-hide {
+    -webkit-animation-direction: reverse;
+    animation-direction: reverse;
+}
+
+
+/* Slide */
+.ns-effect-slide {
+    top: 30px;
+}
+
+.ns-effect-slide .ns-close:hover::before,
+.ns-effect-slide .ns-close:hover::after {
+    background: #fff;
+}
+
+.ns-effect-slide.ns-show {
+    -webkit-animation-name: animSlideElastic;
+    animation-name: animSlideElastic;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+}
+
+@-webkit-keyframes animSlideElastic {
+    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); }
+    1.666667% { -webkit-transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); }
+    3.333333% { -webkit-transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); }
+    5% { -webkit-transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); }
+    6.666667% { -webkit-transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); }
+    8.333333% { -webkit-transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); }
+    10% { -webkit-transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); }
+    11.666667% { -webkit-transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); }
+    13.333333% { -webkit-transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); }
+    15% { -webkit-transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); }
+    16.666667% { -webkit-transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); }
+    18.333333% { -webkit-transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); }
+    20% { -webkit-transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); }
+    21.666667% { -webkit-transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); }
+    23.333333% { -webkit-transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); }
+    25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); }
+    26.666667% { -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); }
+    28.333333% { -webkit-transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); }
+    30% { -webkit-transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); }
+    31.666667% { -webkit-transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); }
+    33.333333% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); }
+    35% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); }
+    36.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); }
+    38.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); }
+    40% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); }
+    41.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); }
+    43.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); }
+    45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); }
+    46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); }
+    48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); }
+    50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); }
+    51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); }
+    53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); }
+    55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); }
+    56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); }
+    58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); }
+    60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); }
+    61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); }
+    63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); }
+    65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); }
+    66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); }
+    68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); }
+    70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); }
+    71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); }
+    73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); }
+    75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); }
+    76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); }
+    78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); }
+    80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); }
+    81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); }
+    83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); }
+    85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); }
+    86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); }
+    88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); }
+    90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); }
+    91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); }
+    93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); }
+    95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); }
+    96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); }
+    98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); }
+    100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+@keyframes animSlideElastic {
+    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1000, 0, 0, 1); }
+    1.666667% { -webkit-transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); transform: matrix3d(1.92933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -739.26805, 0, 0, 1); }
+    3.333333% { -webkit-transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -521.82545, 0, 0, 1); }
+    5% { -webkit-transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); transform: matrix3d(1.70901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -349.26115, 0, 0, 1); }
+    6.666667% { -webkit-transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -218.3238, 0, 0, 1); }
+    8.333333% { -webkit-transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); transform: matrix3d(1.21065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -123.29848, 0, 0, 1); }
+    10% { -webkit-transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -57.59273, 0, 0, 1); }
+    11.666667% { -webkit-transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); transform: matrix3d(1.0165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -14.72371, 0, 0, 1); }
+    13.333333% { -webkit-transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.12794, 0, 0, 1); }
+    15% { -webkit-transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); transform: matrix3d(0.98478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 24.86339, 0, 0, 1); }
+    16.666667% { -webkit-transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.40503, 0, 0, 1); }
+    18.333333% { -webkit-transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); transform: matrix3d(0.9916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30.75275, 0, 0, 1); }
+    20% { -webkit-transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 28.10141, 0, 0, 1); }
+    21.666667% { -webkit-transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); transform: matrix3d(0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 23.98271, 0, 0, 1); }
+    23.333333% { -webkit-transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.40752, 0, 0, 1); }
+    25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.99558, 0, 0, 1); }
+    26.666667% { -webkit-transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 11.08575, 0, 0, 1); }
+    28.333333% { -webkit-transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); transform: matrix3d(1.00022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.82507, 0, 0, 1); }
+    30% { -webkit-transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.23737, 0, 0, 1); }
+    31.666667% { -webkit-transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); transform: matrix3d(1.0001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.27389, 0, 0, 1); }
+    33.333333% { -webkit-transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.84893, 0, 0, 1); }
+    35% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.86364, 0, 0, 1); }
+    36.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22079, 0, 0, 1); }
+    38.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16687, 0, 0, 1); }
+    40% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.37284, 0, 0, 1); }
+    41.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.45594, 0, 0, 1); }
+    43.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.46116, 0, 0, 1); }
+    45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.4214, 0, 0, 1); }
+    46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35963, 0, 0, 1); }
+    48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.29103, 0, 0, 1); }
+    50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22487, 0, 0, 1); }
+    51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.16624, 0, 0, 1); }
+    53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.11734, 0, 0, 1); }
+    55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07854, 0, 0, 1); }
+    56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04909, 0, 0, 1); }
+    58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02773, 0, 0, 1); }
+    60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01295, 0, 0, 1); }
+    61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00331, 0, 0, 1); }
+    63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0025, 0, 0, 1); }
+    65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00559, 0, 0, 1); }
+    66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00684, 0, 0, 1); }
+    68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00692, 0, 0, 1); }
+    70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00632, 0, 0, 1); }
+    71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00539, 0, 0, 1); }
+    73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00436, 0, 0, 1); }
+    75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00337, 0, 0, 1); }
+    76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00249, 0, 0, 1); }
+    78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00176, 0, 0, 1); }
+    80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00118, 0, 0, 1); }
+    81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00074, 0, 0, 1); }
+    83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00042, 0, 0, 1); }
+    85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00019, 0, 0, 1); }
+    86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00005, 0, 0, 1); }
+    88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00004, 0, 0, 1); }
+    90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); }
+    91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); }
+    93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0001, 0, 0, 1); }
+    95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00009, 0, 0, 1); }
+    96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00008, 0, 0, 1); }
+    98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00007, 0, 0, 1); }
+    100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+.ns-effect-slide.ns-hide {
+    -webkit-animation-name: animSlide;
+    animation-name: animSlide;
+    -webkit-animation-duration: 0.25s;
+    animation-duration: 0.25s;
+}
+
+@-webkit-keyframes animSlide {
+    0% { -webkit-transform: translate3d(-30px,0,0) translate3d(-100%,0,0); }
+    100% { -webkit-transform: translate3d(0,0,0); }
+}
+
+@keyframes animSlide {
+    0% { -webkit-transform: translate3d(-30px,0,0) translate3d(-100%,0,0); transform: translate3d(-30px,0,0) translate3d(-100%,0,0); }
+    100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
+}
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 8c331d3e3c..7a74a95f7e 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -6,6 +6,7 @@
 @import "buttons";
 @import "lists";
 @import "forms";
+@import "notifications";
 
 @media (min-width: 1120px) { // + 30
   .container {

From 9eedf3b001bf9c5080a3cb7a27da50a930f668d6 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 16:46:32 -0700
Subject: [PATCH 10/14] ui: acl edit and creation

---
 ui/index.html                     | 89 ++++++++++++++++++++++++++-----
 ui/javascripts/app/controllers.js | 54 +++++++++++++++++++
 ui/javascripts/app/routes.js      |  1 +
 ui/styles/_forms.scss             |  4 ++
 ui/styles/_panels.scss            |  2 +-
 5 files changed, 136 insertions(+), 14 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index cbcac6f2aa..f34a0ff03a 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -578,11 +578,50 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
+      {{#if isShowingItem}}
       <div class="col-md-6 col-lg-7 border-left scrollable">
         <div class="row padded-border">
           {{outlet}}
         </div>
       </div>
+      {{else}}
+        <div class="col-md-6 col-lg-7 border-left">
+          <div class="row padded-border">
+            <div class="panel">
+              <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
+                <div class="panel-heading">
+                  <h4 class="panel-title">
+                    Create ACL
+                  </h4>
+                </div>
+
+                <div class="panel-body panel-form">
+                  <div class="form-group"></div>
+
+                  <form class="form">
+                    <div class="form-group">
+                      {{ input value=newAcl.Name class="form-control" }}
+                      <span class="help-block">Set the optional name for the ACL.</span>
+                    </div>
+
+                    <div class="form-group">
+                      {{view Ember.Select content=types value=newAcl.Type class="form-control form-control-mini"}}
+                      <span class="help-block">The type of ACL this is.</span>
+                    </div>
+
+                    <div class="form-group">
+                      <label>Rules</label>
+                      {{ textarea value=newAcl.Rules class="form-control" }}
+                      <span class="help-block">For more information on rules, visit the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation.</a></span>
+                    </div>
+
+                    <button {{ action "createAcl"}} {{ bind-attr class=":btn :btn-success" }}>Create</button>
+                  </form>
+                </div>
+              </div>
+          </div>
+        </div>
+      {{/if}}
     </div>
   </script>
 
@@ -592,21 +631,45 @@
         <hr>
       </div>
 
-      {{errorMessage}}
+        <div class="panel">
+          <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
+            <div class="panel-heading">
+              <h4 class="panel-title">
+                {{ aclName "Update ACL" model.ID }}
+              </h4>
+            </div>
 
-      <h3 class="no-margin">{{aclName model.Name model.ID }}</h3>
+            <div class="panel-body panel-form">
+              <div class="form-group"></div>
+
+              <form class="form">
+                <div class="form-group">
+                  {{ input value=model.Name class="form-control" }}
+                  <span class="help-block">Set the optional name for the ACL.</span>
+                </div>
+
+                <div class="form-group">
+                  {{view Ember.Select content=types value=model.Type class="form-control form-control-mini"}}
+                  <span class="help-block">The type of ACL this is.</span>
+                </div>
+
+                <div class="form-group">
+                  <label>Rules</label>
+                  {{ textarea value=model.Rules class="form-control" }}
+                  <span class="help-block">For more information on rules, visit the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation.</a></span>
+                </div>
+
+                <button {{ action "updateAcl"}} {{ bind-attr class=":btn :btn-success" }}>Update</button>
+                <button {{ action "clone" }} {{ bind-attr class=":btn :btn-default" }}>Clone</button>
+                <button {{ action "set" }} {{ bind-attr class=":btn :btn-default" }}>Use Token</button>
+                {{# if model.isNotAnon }}
+                <button {{ action "delete"}} {{ bind-attr class=":btn isLoading:btn-warning:btn-danger :pull-right" }}>Delete</button>
+                {{/if}}
+
+              </form>
+            </div>
+          </div>
       <hr>
-
-      <button {{ action "clone" }} {{ bind-attr class=":btn :btn-default" }}>Clone</button>
-      <button {{ action "set" }} {{ bind-attr class=":btn :btn-default" }}>Use Token</button>
-      {{# if model.isNotAnon }}
-      <button {{ action "delete"}} {{ bind-attr class=":btn isLoading:btn-warning:btn-danger" }}>Delete</button>
-      {{/if}}
-      <h5>Type</h5>
-      <p>{{Type}}</p>
-
-      <h5>Rules</h5>
-      <pre>{{formatRules model.Rules}}</pre>
   </script>
 
   <script type="text/x-handlebars" id="index">
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index d4c0a183b2..f90b8960d8 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -320,6 +320,7 @@ App.AclsController = Ember.ArrayController.extend({
   queryParams: ["filter"],
   filterText: "Filter by name or ID",
   searchBar: true,
+  types: ["management", "client"],
 
   dc: Ember.computed.alias("controllers.dc"),
   items: Ember.computed.alias("acls"),
@@ -346,6 +347,34 @@ App.AclsController = Ember.ArrayController.extend({
 
     return items;
   }.property('filter', 'items.@each'),
+
+  actions: {
+    createAcl: function() {
+      this.set('isLoading', true);
+
+      var controller = this;
+      var newAcl = controller.get('newAcl');
+      var dc = controller.get('dc').get('datacenter');
+      var token = App.get('settings.token');
+
+      console.log();
+
+      // Create the ACL
+      Ember.$.ajax({
+          url: formatUrl('/v1/acl/create', dc, token),
+          type: 'PUT',
+          data: JSON.stringify(newAcl)
+      }).then(function(response) {
+        // transition to the acl
+        controller.transitionToRoute('acls.show', response.ID);
+        controller.set('isLoading', false);
+      }).fail(function(response) {
+        // Render the error message on the form if the request failed
+        notify('Received error while creating ACL: ' + response.statusText, 8000);
+        controller.set('isLoading', false);
+      });
+    },
+  }
 });
 
 
@@ -353,6 +382,7 @@ App.AclsShowController = Ember.ObjectController.extend({
   needs: ["dc", "acls"],
   dc: Ember.computed.alias("controllers.dc"),
   isLoading: false,
+  types: ["management", "client"],
 
   actions: {
     set: function() {
@@ -428,6 +458,30 @@ App.AclsShowController = Ember.ObjectController.extend({
           controller.set('isLoading', false);
         });
       }
+    },
+
+    updateAcl: function() {
+      this.set('isLoading', true);
+
+      var controller = this;
+      var acl = controller.get('model');
+      var dc = controller.get('dc').get('datacenter');
+      var token = App.get('settings.token');
+
+      // Update the ACL
+      Ember.$.ajax({
+          url: formatUrl('/v1/acl/update', dc, token),
+          type: 'PUT',
+          data: JSON.stringify(acl)
+      }).then(function(response) {
+        // transition to the acl
+        controller.set('isLoading', false);
+        notify('ACL updated successfully', 3000);
+      }).fail(function(response) {
+        // Render the error message on the form if the request failed
+        notify('Received error while creating ACL: ' + response.statusText, 8000);
+        controller.set('isLoading', false);
+      });
     }
   }
 });
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index d7f8b19834..aa87119d03 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -335,6 +335,7 @@ App.AclsRoute = App.BaseRoute.extend({
 
   setupController: function(controller, model) {
       controller.set('acls', model);
+      controller.set('newAcl', App.Acl.create());
   }
 });
 
diff --git a/ui/styles/_forms.scss b/ui/styles/_forms.scss
index d9990af8b1..fe279322a8 100644
--- a/ui/styles/_forms.scss
+++ b/ui/styles/_forms.scss
@@ -20,3 +20,7 @@
         background-color: $gray-background;
     }
 }
+
+textarea.form-control {
+    height: 130px;
+}
diff --git a/ui/styles/_panels.scss b/ui/styles/_panels.scss
index f53669e8ae..a15f15a585 100644
--- a/ui/styles/_panels.scss
+++ b/ui/styles/_panels.scss
@@ -11,7 +11,7 @@
     }
 
     h4.panel-title {
-        padding: 4px 10px 4px 10px;
+        padding: 4px 10px 4px 2px;
         font-size: 20px;
         color: $gray-light;
         color: $gray-darker;

From 2e088af833079973438e1c124daffc950a53f1f2 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 17:00:26 -0700
Subject: [PATCH 11/14] ui: more touches on create acl

---
 ui/index.html                     | 11 +++++++++--
 ui/javascripts/app/controllers.js |  1 +
 ui/styles/_buttons.scss           | 31 ++++++++++++++++++-------------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index f34a0ff03a..dfb89f9a36 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -77,11 +77,18 @@
   <script type="text/x-handlebars" id="actionbar">
     <div class="row">
       <div class="action-bar">
-        <div {{ bind-attr class="searchBar:col-md-12:col-md-5" }} >
+        <div {{ bind-attr class="searchBar:col-md-10:col-md-5" }} >
           <div class="form-group">
             {{ input type="text" value=filter class="form-control form-control-mini" placeholder=filterText}}
           </div>
         </div>
+        {{#if newAclButton }}
+          <div class="col-md-2">
+            <div class="form-group">
+              {{#link-to 'acls' class='btn btn-mini btn-default btn-noactive pull-right'}}New ACL{{/link-to}}
+            </div>
+          </div>
+        {{/if}}
         {{#if statuses}}
         <div class="col-md-5">
           <div class="form-group">
@@ -591,7 +598,7 @@
               <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
                 <div class="panel-heading">
                   <h4 class="panel-title">
-                    Create ACL
+                    New ACL
                   </h4>
                 </div>
 
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index f90b8960d8..e364bbd1d6 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -320,6 +320,7 @@ App.AclsController = Ember.ArrayController.extend({
   queryParams: ["filter"],
   filterText: "Filter by name or ID",
   searchBar: true,
+  newAclButton: true,
   types: ["management", "client"],
 
   dc: Ember.computed.alias("controllers.dc"),
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index 4f7d6a5f79..179c3a2b1e 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -29,6 +29,17 @@
         box-shadow: none;
     }
 
+    &.btn-primary {
+        color: $purple-dark;
+        background-color: transparent;
+        border: 2px solid $purple;
+
+        &:hover {
+            background-color: $light-purple;
+            color: darken($purple, 10%);
+        }
+    }
+
     &.btn-warning {
         color: $orange-faded;
         background-color: transparent;
@@ -73,6 +84,13 @@
             background-color: $light-purple;
             color: darken($purple, 10%);
         }
+
+        &.btn-noactive {
+            color: inherit;
+            background-color: inherit;
+            border: 2px solid #ccc;
+        }
+
     }
 
     &.btn-mini {
@@ -88,16 +106,3 @@
     }
 
 }
-
-.active {
-    .btn {
-        color: $purple-dark;
-        background-color: transparent;
-        border: 2px solid $purple;
-
-        &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
-        }
-    }
-}

From 1d34ede6029fb6f854ec6c2d0082baf685185998 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 17:14:26 -0700
Subject: [PATCH 12/14] ui: mobile fixes for acl

---
 ui/index.html                     | 11 ++++++++---
 ui/javascripts/app/controllers.js |  2 ++
 ui/styles/_buttons.scss           | 14 ++++++++++++++
 ui/styles/base.scss               | 14 --------------
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index dfb89f9a36..9d584a0432 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -43,8 +43,13 @@
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
           <p class="bold">Access Denied</p>
-          <p>Your ACL token, <code>foobarbaz</code>, does not
+          {{#if aclToken}}
+          <p>Your ACL token, <code>{{aclToken}}</code>, does not
           have the appropriate permissions to perform the expected action.</p>
+          {{else}}
+          <p>The default agent token does not
+          have the appropriate permissions to perform the expected action.</p>
+          {{/if}}
           <p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
         </div>
       </div>
@@ -130,7 +135,7 @@
           {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-2 col-xs-6 col-md-offset-0 col-sm-offset-4 col-xs-offset-1">
           <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
@@ -143,7 +148,7 @@
 
         </div>
 
-        <div class="col-md-1 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
+        <div class="col-md-1 col-sm-2 col-xs-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
           {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
         </div>
       </div>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index e364bbd1d6..d14ebbc805 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -5,8 +5,10 @@ App.ApplicationController = Ember.ObjectController.extend({
 });
 
 App.DcController = Ember.Controller.extend({
+  needs: ["application"],
   // Whether or not the dropdown menu can be seen
   isDropdownVisible: false,
+  aclToken: Ember.computed.alias("application.settings.token"),
 
   datacenter: function() {
     return this.get('content');
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index 179c3a2b1e..2c4ad7c553 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -106,3 +106,17 @@
     }
 
 }
+
+.topbar {
+  .btn.icon {
+    min-width: 50px;
+    font-size: 30px;
+    height: 33px;
+    padding: 0;
+    .wrap {
+      position: absolute;
+      top: -8px;
+      left: 14px;
+    }
+  }
+}
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 7a74a95f7e..10db88faae 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -99,20 +99,6 @@ a {
     background-color: $gray-background;
 }
 
-.topbar {
-  .btn.icon {
-    min-width: 50px;
-    font-size: 30px;
-    height: 33px;
-    padding: 0;
-    .wrap {
-      position: absolute;
-      top: -8px;
-      left: 14px;
-    }
-  }
-}
-
 .action-bar {
   min-height: 50px;
   padding-top: 10px;

From cfb11f7a6a56244e0693ae6b98c543065185b9ed Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 17:16:20 -0700
Subject: [PATCH 13/14] ui: small acl mobile fix

---
 ui/acl.md     | 6 ------
 ui/index.html | 2 ++
 2 files changed, 2 insertions(+), 6 deletions(-)
 delete mode 100644 ui/acl.md

diff --git a/ui/acl.md b/ui/acl.md
deleted file mode 100644
index 080e3a450a..0000000000
--- a/ui/acl.md
+++ /dev/null
@@ -1,6 +0,0 @@
-- ACL management
-  - KV takes ?token=ACCESS_KEY
-    - There is a default token
-    - Allow setting a token
-    - store the token in local storage
-    - return error (notification) if the write fails
diff --git a/ui/index.html b/ui/index.html
index 9d584a0432..626907f34e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -638,10 +638,12 @@
   </script>
 
   <script type="text/x-handlebars" id="acl">
+    <div class="row">
       <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
         {{#link-to "acls" class="btn btn-default btn-block" }}Back to all ACLs{{/link-to}}
         <hr>
       </div>
+    </div>
 
         <div class="panel">
           <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>

From 48ad11d5997d8d78bf9e68d3ebd79b40deee242c Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 17:31:07 -0700
Subject: [PATCH 14/14] ui: remove stray debugging

---
 ui/javascripts/app/controllers.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index d14ebbc805..240631e10d 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -360,8 +360,6 @@ App.AclsController = Ember.ArrayController.extend({
       var dc = controller.get('dc').get('datacenter');
       var token = App.get('settings.token');
 
-      console.log();
-
       // Create the ACL
       Ember.$.ajax({
           url: formatUrl('/v1/acl/create', dc, token),