Merge pull request #2712 from hebeworks/add-json-validation-to-ui

Add JSON validation to UI

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</label>
+                  {{/unless}}
                   <button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
                 </form>
               </div>
@@ -307,11 +310,12 @@
                 {{errorMessage}}
               </div>
               <form class="form">
-                <div class="form-group">
+                <div {{ bind-attr class=":form-group model.validateJson:validate model.isValidJson:success:error" }}>
                   {{ 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"}} {{bind-attr disabled=isLocked}}>Update</button>
                 <button {{action "cancelEdit"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-default"}}>Cancel</button>
+                <label class="form-checkbox">{{ input type=checkbox checked=model.validateJson }}Validate JSON</label>
                 <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>

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,24 @@ 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() {
+    var value;
+
+    try {
+      window.atob(this.get('Value'));
+      value = this.get('valueDecoded');
+    } catch (e) {
+      value = this.get('Value');
+    }
+
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }.property('Value'),
 
   // An array of the key broken up by the /
   keyParts: function() {
@@ -270,5 +290,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;
+    }
+}