Merge pull request #128 from grycap/devel

Devel
grycap · Mar 30, 2021 · 323f354 · 323f354
2 parents 7bc529f + 21f8a81
commit 323f354
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/app/templates/config_form.html b/app/templates/config_form.html
@@ -4,27 +4,29 @@
 {% set inputs=template['inputs'] %}
 {% if tabs|length > 0 %}
   {% for tab in tabs %}
+    {% set tab_id = tab.replace(" ", "_") %}
     {% if loop.first %}
-      <li class="nav-item"><a class="nav-link active" data-toggle="tab" href=#{{tab}}>{{tab}}</a></li>
+      <li class="nav-item"><a class="nav-link active" data-id="#{{tab_id}}" data-toggle="tab" href=#{{tab_id}}>{{tab}}</a></li>
     {% else %}
-      <li class="nav-item"><a class="nav-link" data-toggle="tab" href=#{{tab}}>{{tab}}</a></li>
+      <li class="nav-item"><a class="nav-link" data-id="#{{tab_id}}" data-toggle="tab" href=#{{tab_id}}>{{tab}}</a></li>
     {% endif %}
   {% endfor %}
 {% else %}
-  <li class="nav-item"><a class="nav-link" data-toggle="tab" href=#InputValues>Input Values</a></li>
+  <li class="nav-item"><a class="nav-link" data-id="#InputValues" data-toggle="tab" href=#InputValues>Input Values</a></li>
 {% endif %}
-<li class="nav-item"><a class="nav-link" data-toggle="tab" href=#Advanced>Cloud Provider Selection</a></li> <!-- always create advanced tab -->
+<li class="nav-item"><a class="nav-link" data-id="#Advanced" data-toggle="tab" href=#Advanced>Cloud Provider Selection</a></li> <!-- always create advanced tab -->
 </ul>
   <!-- end tab creation section -->
 
 <div class="tab-content">
   <!-- inputs -->
   {% if tabs|length > 0 %}
     {% for tab in tabs %}
+      {% set tab_id = tab.replace(" ", "_") %}
       {% if loop.first %}
-        <div id={{tab}} class="tab-pane fade show active">
+        <div id="{{tab_id}}" class="tab-pane fade show active">
       {% else %}
-        <div id={{tab}} class="tab-pane fade">
+        <div id="{{tab_id}}" class="tab-pane fade">
       {% endif %}
 
       <br>
@@ -37,7 +39,7 @@
     {% endfor %}
 
   {% else %} <!-- no tabs -->
-    <div id=InputValues class="tab-pane fade in active">
+    <div id="InputValues" class="tab-pane fade in active">
       {% for key, value in inputs.items() %}
         {% include 'input_types.html' %}
       {% endfor %}
@@ -51,3 +53,20 @@
     {% include 'advanced_config.html' %}
   </div>
 </div>
+
+<script>
+  // Functio to validate fields of each tab before changing to other tab
+ $('.nav-tabs a').on('hide.bs.tab', function(e){
+  var link = e.delegateTarget;
+  var tab_id = link.getAttribute('data-id')
+  var inputs = $(tab_id).find(':input');
+  var valid = true;
+  for (var i = 0; i < inputs.length; i++) {
+    if (!inputs[i].checkValidity()) {
+      inputs[i].reportValidity();
+      valid = false;
+    }
+  }
+  return valid;
+});
+</script>
diff --git a/app/templates/input_types.html b/app/templates/input_types.html
@@ -8,11 +8,15 @@
     {% endif %}
   </label>
   {% endif %}
+
+  {% set min_length = value.constraints | selectattr('min_length') | map(attribute='min_length') | list  %}
+  {% set max_length = value.constraints | selectattr('max_length') | map(attribute='max_length') | list  %}
+
   {% if value.tag_type is defined %}
 
     <!-- text type -->
     {% if value.tag_type == "text" %}
-      <input type="text" class="form-control" id="{{key}}" name="{{key}}" value="{{value.default}}" aria-describedby="help{{key}}" {% if value.required %}required{%endif%} />
+      <input type="text" class="form-control" id="{{key}}" name="{{key}}" value="{{value.default}}" aria-describedby="help{{key}}" {% if value.required %}required{%endif%} {% if min_length %}minlength="{{min_length[0]}}"{%endif%} {% if max_length %}maxlength="{{max_length[0]}}"{%endif%}/>
     <!-- end select type -->
 
     <!-- hidden text type -->
@@ -78,8 +82,13 @@
           {% endfor %}
           </select>
 	  {% else %}
-	  <!-- text type, hide fields with password -->
-    <input {% if 'password' in key %}type="password"{% else %}type="text"{% endif %} class="form-control" id="{{key}}" name="{{key}}" value="{{value.default}}" aria-describedby="help{{key}}" {% if value.required %}required{%endif%} />
+
+      {% if value.type == "integer" %}
+      <input type="number" class="form-control" id="{{key}}" name="{{key}}" value="{{value.default}}" aria-describedby="help{{key}}" {% if value.required %}required{%endif%}/>
+      {% else %}
+	    <!-- text type, hide fields with password -->
+      <input {% if 'password' in key %}type="password"{% else %}type="text"{% endif %} class="form-control" id="{{key}}" name="{{key}}" value="{{value.default}}" aria-describedby="help{{key}}" {% if value.required %}required{%endif%} {% if min_length %}minlength="{{min_length[0]}}"{%endif%} {% if max_length %}maxlength="{{max_length[0]}}"{%endif%}/>
+      {% endif %}
     {% endif %}
 
   {% endif %}  <!-- end tag type existence if -->

diff --git a/tosca-templates/oscar.yaml b/tosca-templates/oscar.yaml
@@ -65,6 +65,8 @@ topology_template:
       type: string
       description: MinIO password
       default: minio123
+      constraints:
+      - min_length: 8
 
   node_templates:
 

diff --git a/tosca-templates/oscar_elastic.yaml b/tosca-templates/oscar_elastic.yaml
@@ -66,6 +66,8 @@ topology_template:
       type: string
       description: MinIO password
       default: minio123
+      constraints:
+      - min_length: 8
 
   node_templates: