bitbake: toaster: newcustomimage_modal add frontend name validation

Add front end handling of validation response from create new
CustomImageRecipe api.

(Bitbake rev: eff66b502df8e001cd0abc25bcbd742687169619)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: brian avery <avery.brian@gmail.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

2 files changed, 35 insertions, 9 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
index 16e42b3d27..0b9d31aa6c 100644
--- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
+++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js
@@ -5,24 +5,51 @@ function newCustomImageModalInit(){
 
   var newCustomImgBtn = $("#create-new-custom-image-btn");
   var imgCustomModal = $("#new-custom-image-modal");
+  var invalidNameHelp = $("#invalid-name-help");
+  var nameInput = imgCustomModal.find('input');
+
+  var invalidMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-).";
 
   newCustomImgBtn.click(function(e){
     e.preventDefault();
 
-    var name = imgCustomModal.find('input').val();
     var baseRecipeId = imgCustomModal.data('recipe');
 
-    if (name.length > 0) {
-      imgCustomModal.modal('hide');
-      libtoaster.createCustomRecipe(name, baseRecipeId, function(ret) {
+    if (nameInput.val().length > 0) {
+      libtoaster.createCustomRecipe(nameInput.val(), baseRecipeId,
+      function(ret) {
         if (ret.error !== "ok") {
           console.warn(ret.error);
+          if (ret.error === "invalid-name") {
+            showError(invalidMsg);
+          } else if (ret.error === "already-exists") {
+            showError("An image with this name already exists. Image names must be unique.");
+          }
         } else {
+          imgCustomModal.modal('hide');
           window.location.replace(ret.url + '?notify=new');
         }
       });
+    }
+  });
+
+  function showError(text){
+    invalidNameHelp.text(text);
+    invalidNameHelp.show();
+  }
+
+  nameInput.on('keyup', function(){
+    if (nameInput.val().length === 0){
+      newCustomImgBtn.prop("disabled", true);
+      return
+    }
+
+    if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){
+      showError(invalidMsg);
+      newCustomImgBtn.prop("disabled", true);
     } else {
-      console.warn("TODO No name supplied");
+      invalidNameHelp.hide();
+      newCustomImgBtn.prop("disabled", false);
     }
   });
 }
diff --git a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
index 93cf9d7e02..fed489fad9 100644
--- a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
+++ b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html
@@ -22,12 +22,11 @@
       <span class="help-block span8">Image names must be unique. They should not contain spaces or capital letters, and the only allowed special character is dash (-).<p></p>
       </span></div>
     <div class="control-group controls">
-      <input type="text" class="huge span5" placeholder="Type the name, something like 'core-image-myimage'">
-        <span class="help-block" style="display:none">Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)</span>
-        <span class="help-block" style="display: none">An image with this name already exists. Image names must be unique: try a different one.</span>
+      <input type="text" class="huge span5" placeholder="Type the name, something like 'core-image-myimage'" required>
+        <span class="help-block error" id="invalid-name-help" style="display:none"></span>
       </div>
     </div>
     <div class="modal-footer">
-      <a href="#" id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="">Create custom image</a>
+      <button id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="" disabled>Create custom image</button>
     </div>
 </div>