ui: show isLocked for key

ui/index.html

@@ -145,7 +145,7 @@
           <div class="panel">
             <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
               <div class="panel-heading">
-                <h3 class="panel-title">
+                <h4 class="panel-title">
                   Create Key
                 </h3>
               </div>
@@ -213,10 +213,15 @@
       <div class="col-md-6 col-lg-7 border-left">
         <div class="padded-border">
           <div class="panel">
-            <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
+            <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green isLocked:bg-light-gray" }}></div>
               <div class="panel-heading">
-                <h3 class="panel-title">
+                <h4 {{bind-attr class=":panel-title isLocked:locked"}}>
                   {{model.Key}}
+                  {{#if model.isLocked}}
+                  <small class="pull-right">
+                  KEY LOCKED
+                  </small>
+                  {{/if}}
                 </h3>
               </div>
 
@@ -226,11 +231,11 @@
                 </div>
                 <form class="form">
                   <div class="form-group">
-                    {{ textarea value=model.valueDecoded class="form-control"}}
+                    {{ textarea value=model.valueDecoded class="form-control" disabled=model.isLocked}}
                   </div>
-                  <button {{ action "updateKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-success" }}>Update</button>
+                  <button {{action "updateKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-success"}} {{bind-attr disabled=isLocked}}>Update</button>
                   <button {{action "cancelEdit"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-default"}}>Cancel</button>
-                  <button {{ action "deleteKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger" }}>Delete key</button>
+                  <button {{action "deleteKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger"}} {{bind-attr disabled=isLocked}}>Delete key</button>
                 </form>
               </div>
             </div>

ui/javascripts/app/models.js

@@ -176,6 +176,15 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
     return (this.get('Key').slice(-1) === '/')
   }.property('Key'),
 
+  // Boolean if the key is locked or now
+  isLocked: function() {
+    if (!this.get('Session')) {
+      return false;
+    } else {
+      return true;
+    }
+  }.property('Session'),
+
   // Determines what route to link to. If it's a folder,
   // it will link to kv.show. Otherwise, kv.edit
   linkToRoute: function() {

ui/javascripts/app/routes.js

@@ -172,6 +172,12 @@ App.KvEditRoute = App.BaseRoute.extend({
         });
         return objs;
       }),
+    }).then(function(models) {
+        // If the key is locked, add the session
+        if (models.key.get('isLocked') == true) {
+          models.session = Ember.$.getJSON('/v1/session/info/' + key.Session + '/&dc=' + dc)
+        }
+        return models
     });
   },
 

ui/styles/_panels.scss

@@ -10,6 +10,32 @@
         border-color: $gray-background;
     }
 
+    h4.panel-title {
+        padding: 4px 10px 4px 10px;
+        font-size: 20px;
+        color: $gray-light;
+        color: $gray-darker;
+        border-radius: 3px;
+        opacity: 0.8;
+
+        small {
+            font-size: 14px;
+            text-transform: uppercase;
+            font-weight: 700;
+            margin-left: 5px;
+            padding-top: 2px;
+        }
+
+        .panel-note {
+            margin-top: 5px;
+            float: right;
+            font-weight: 600;
+            color: $gray-light;
+            font-size: 14px;
+        }
+    }
+
+
     h3.panel-title {
         padding: 4px 0px 4px 0px;
         font-size: 20px;