Add JSON validation to UI

JSON validation added to UI. This has been implemented through the use of a flag
to enable/disable the functionality with a watcher on the value to set the
success/error class on the textarea itself.

No hard validation added to the field.

ui/index.html

@@ -244,13 +244,16 @@
                   {{#if newKey.isFolder }}
                   <p>No value needed for nested keys.</p>
                   {{else}}
-                  <div class="form-group">
+                  <div {{ bind-attr class=":form-group newKey.validateJson:validate newKey.isValidJson:success:error" }}>
                     {{ textarea value=newKey.Value class="form-control"}}
                     <span class="help-block">Value can be any format and length</span>
                   </div>
                   {{/if}}
 
                   <button {{ action "createKey"}} {{bind-attr disabled=newKey.isInvalid }} {{ bind-attr class=":btn newKey.isValid:btn-success:btn-default" }}>Create</button>
+                  {{#unless newKey.isFolder }}
+                  <label class="form-checkbox">{{ input type=checkbox checked=newKey.validateJson }}Validate JSON</span>
+                  {{/unless}}
                   <button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
                 </form>
               </div>

ui/javascripts/app/models.js

@@ -125,6 +125,8 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
     Key: { presence: true }
   },
 
+  // Boolean if field should validate JSON
+  validateJson: false,
   // Boolean if the key is valid
   keyValid: Ember.computed.empty('errors.Key'),
   // Boolean if the value is valid
@@ -191,6 +193,15 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
     return (this.get('Value').fromBase64());
   }.property('Value'),
 
+  // Check if JSON is valid by attempting a native JSON parse
+  isValidJson: function() {
+    try {
+      JSON.parse(this.get('Value'));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }.property('Value'),
 
   // An array of the key broken up by the /
   keyParts: function() {
@@ -270,5 +281,3 @@ App.Settings = Ember.Object.extend({
     this.endPropertyChanges();
   }
 });
-
-

ui/styles/_forms.scss

@@ -16,6 +16,22 @@
         }
     }
 
+    &.validate {
+        &.success {
+            .form-control {
+                border-color: $green-faded;
+                box-shadow: 0 0 5px $green-faded;
+            }
+        }
+
+        &.error {
+            .form-control {
+                border-color: $red-faded;
+                box-shadow: 0 0 5px $red-faded;
+            }
+        }
+    }
+
     .input-group-addon {
         background-color: $gray-background;
     }
@@ -24,3 +40,15 @@
 textarea.form-control {
     height: 130px;
 }
+
+.form-checkbox {
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 12px;
+    color: $gray;
+    margin-left: 20px;
+
+    input {
+        margin-right: 5px;
+    }
+}