ui: acl edit and creation

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">

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);
+      });
     }
   }
 });

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());
   }
 });
 

ui/styles/_forms.scss

@@ -20,3 +20,7 @@
         background-color: $gray-background;
     }
 }
+
+textarea.form-control {
+    height: 130px;
+}

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;