From c0f8d9532da8cbcb583412d01bfaa7c0787e9f12 Mon Sep 17 00:00:00 2001
From: micafer <micafer1@upv.es>
Date: Tue, 30 Mar 2021 10:31:53 +0200
Subject: [PATCH] Fix #127 and #99 in default form

---
 app/templates/default_form.html | 32 ++++++++++++++++++++++++++++----
 app/templates/input_types.html  |  1 +
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/templates/default_form.html b/app/templates/default_form.html
index bf3345637..0d371bd78 100644
--- a/app/templates/default_form.html
+++ b/app/templates/default_form.html
@@ -1,7 +1,7 @@
 <!-- start tabs creation section -->
 <ul class="nav nav-tabs">
-  <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#InputValues">Input Values</a></li>
-  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Advanced">Cloud Provider Selection</a></li>
+  <li class="nav-item"><a class="nav-link active" data-id="#InputValues" data-toggle="tab" href="#InputValues">Input Values</a></li>
+  <li class="nav-item"><a class="nav-link" data-id="#Advanced" data-toggle="tab" href="#Advanced">Cloud Provider Selection</a></li>
 </ul>
 <!-- end tab creation section -->
 <div class="tab-content">
@@ -10,6 +10,8 @@
   <div class="tab-pane fade show active" id=InputValues>
     {% if inputs|length > 0 %}
       {% for key, value in inputs.items() %}
+        {% 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  %}
         <div class="form-group">
           <label for="{{key}}">{% if value.description %}{{value.description}}{% else %}{{key}}{% endif %}</label>
 
@@ -22,9 +24,14 @@
           {% endfor %}
           </select>
 	  {% else %}
+      {% if value.type == "integer" %}
+      <!-- number type -->
+      <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%} />
-	  {% endif %}
+          <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 %}
         </div>
       {% endfor %}
     {% else %}
@@ -38,3 +45,20 @@ <h2>No input value to submit.</h2>
     {% 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>
\ No newline at end of file
diff --git a/app/templates/input_types.html b/app/templates/input_types.html
index 9f1d6378a..81897fb61 100644
--- a/app/templates/input_types.html
+++ b/app/templates/input_types.html
@@ -84,6 +84,7 @@
 	  {% else %}
 
       {% if value.type == "integer" %}
+      <!-- number type -->
       <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 -->