Merge pull request #2187 from CodeNow/add-env-validation

add env validation

Author: runnabro

client/directives/environment/modals/forms/formEnvironmentVariables/environmentVariablesTableView.jade

@@ -3,25 +3,37 @@ ul.tbody(
   ng-init = "vars = [\
     {key: 'hello', value: '●●●', duplicate: true},\
     {key: 'hi', value: '●●●●●●', duplicate: false},\
-    {key: '‘sup', value: '●●●●●●●●●', duplicate: false},\
+    {key: 'sup', value: '●●●●●●●●●', duplicate: false},\
     {key: 'hey', value: '●●●', duplicate: false},\
     {key: 'hello', value: '●●●●●●', duplicate: true}\
   ]"
 )
   li.tr
     label.grid-block.align-center.cell
+      //- this pattern should also (but does not currently) validate that the first character is not a number
       //- [disable] when loading
-      input.input.monospace(
+      input.input.input-validate.monospace(
+        name = "key"
+        ng-model = "key"
+        ng-required = "true"
+        ng-pattern = "/^([A-Za-z]|[0-9]|_)+$/"
         placeholder = "Key"
+        spellcheck = "false"
       )
     label.grid-block.align-center.cell
       //- [disable] when loading
-      input.input.monospace(
+      input.input.input-validate.monospace(
+        name = "value"
+        ng-model = "value"
+        ng-required = "true"
+        ng-pattern = "/^([A-Za-z]|[0-9]|_)+$/"
         placeholder = "Value"
+        spellcheck = "false"
       )
     .grid-block.align-center.justify-right.cell.cell-action
       //- [disable] when loading
       button.grid-block.align-center.justify-center.btn.btn-xs.white(
+        ng-disabled = "envVarForm.$invalid"
         ng-init = "saving = null"
       )
         //- show when loading

client/directives/environment/modals/forms/formEnvironmentVariables/viewFormEnvironmentVariables.jade

@@ -4,7 +4,10 @@
   ng-if = "!$root.featureFlags.connections"
 )
   .label-col Environment Variables
-  .small.text-gray Use environment variables for sensitive information you need to build or run your code.
+  .small.text-gray Use environment variables for sensitive information you need to build or run your code. 
+    span(
+      ng-class = "{'text-red': envVarForm.$error.pattern}"
+    ) Keys and values may be alphanumeric characters or underscores, but may not start with a number.
     //- |  
     //- a.link(
     //-   href = "//runnable.com/docs"

client/directives/environment/modals/serverModalView.jade

@@ -183,6 +183,7 @@ section.modal-body(
     ports-form
   )
   .modal-form(
+    ng-form = "envVarForm"
     ng-include = "'viewFormEnvironmentVariables'"
     ng-if = "SMC.selectedTab === 'env'"
   )