Fix forms

app/static/js/resource-lists/job-list.js

@@ -25,19 +25,19 @@ nopaque.resource_lists.JobList = class JobList extends nopaque.resource_lists.Re
 
   get item() {
     return `
-      <tr class="list-item clickable hoverable">
+      <tr class="list-item clickable hoverable service-color lighten">
         <td>
           <label class="list-action-trigger" data-list-action="select">
             <input class="select-checkbox" type="checkbox">
             <span class="disable-on-click"></span>
           </label>
         </td>
-        <td><a class="btn-floating service-color darken" data-service="inherit"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
+        <td><a class="btn-floating service-color darken"><i class="nopaque-icons service-icons"></i></a></td>
         <td><b class="title"></b><br><i class="description"></i></td>
         <td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
         <td class="right-align">
           <a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
-          <a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
+          <a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
         </td>
       </tr>
     `.trim();

app/templates/auth/login.html.j2

@@ -5,7 +5,7 @@
 {% block page_content %}
 <div class="container">
   <div class="row">
-    <div class="col s12 m8 offset-m2">
+    <div class="col s12 l8 offset-l2">
       <h1 id="title">{{ title }}</h1>
       <p>Want to boost your research and get going? Nopaque is free and no download is needed. <a href="{{ url_for('.register') }}">Register now</a>!</p>
 
@@ -15,14 +15,14 @@
           {{ wtf.render_field(form.user, material_icon='person') }}
           {{ wtf.render_field(form.password, material_icon='vpn_key') }}
           <div class="row">
-            <div class="col s6 left-align">
-              <a href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
-            </div>
-            <div class="col s6 right-align">
+            <div class="col s12 l6">
               {{ wtf.render_field(form.remember_me) }}
             </div>
+            <div class="col s12 l6 right-align">
+              <a class="mr-3" href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
+              {{ wtf.render_field(form.submit, material_icon='send') }}
+            </div>
           </div>
-          {{ wtf.render_field(form.submit, material_icon='send', class_='width-100') }}
         </div>
       </form>
     </div>

app/templates/auth/register.html.j2

@@ -5,7 +5,7 @@
 {% block page_content %}
 <div class="container">
   <div class="row">
-    <div class="col s12 m8 offset-m2">
+    <div class="col s12 l8 offset-l2">
       <h1 id="title">{{ title }}</h1>
       <p>
         Simply enter a username and password to receive your registration email.
@@ -22,12 +22,15 @@
           {{ wtf.render_field(form.username, material_icon='person') }}
           {{ wtf.render_field(form.password, material_icon='vpn_key') }}
           {{ wtf.render_field(form.password_2, material_icon='vpn_key') }}
-          {{ wtf.render_field(form.email, class_='validate', material_icon='email', type='email') }}
-          <br>
-          {{ wtf.render_field(form.terms_of_use_accepted, type='checkbox')}}
-          <p></p>
-          <br>
-          {{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
+          {{ wtf.render_field(form.email, material_icon='email', type='email') }}
+          <div class="row">
+            <div class="col s12 l6">
+              {{ wtf.render_field(form.terms_of_use_accepted)}}
+            </div>
+            <div class="col s12 l6 right-align">
+              {{ wtf.render_field(form.submit, material_icon='send') }}
+            </div>
+          </div>
         </div>
       </form>
     </div>

app/templates/auth/reset_password.html.j2

@@ -13,7 +13,9 @@
           {{ form.hidden_tag() }}
           {{ wtf.render_field(form.password) }}
           {{ wtf.render_field(form.password_2) }}
-          {{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
+          <div class="right-align">
+            {{ wtf.render_field(form.submit, material_icon='send') }}
+          </div>
         </div>
       </form>
     </div>

app/templates/auth/reset_password_request.html.j2

@@ -4,15 +4,17 @@
 {% block page_content %}
 <div class="container">
   <div class="row">
-    <div class="col s12 m8 offset-m2">
+    <div class="col s12 l8 offset-l2">
       <h1 id="title">{{ title }}</h1>
       <p>After entering your email address you will receive instructions on how to reset your password.</p>
 
       <form method="POST">
         <div class="card-panel">
           {{ form.hidden_tag() }}
-          {{ wtf.render_field(form.email, class_='validate', material_icon='email', type='email') }}
-          {{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
+          {{ wtf.render_field(form.email, material_icon='email', type='email') }}
+          <div class="right-align">
+            {{ wtf.render_field(form.submit, material_icon='send') }}
+          </div>
         </div>
       </form>
     </div>

app/templates/services/file_setup_pipeline.html.j2

@@ -47,7 +47,7 @@
                 {{ wtf.render_field(form.description, material_icon='description') }}
               </div>
               <div class="col s12 l9">
-                {{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', class_='file-setup-pipeline-color darken', placeholder='Choose JPEG, PNG or TIFF files') }}
+                {{ wtf.render_field(form.images, accept='image/jpeg, image/png, image/tiff', placeholder='Choose JPEG, PNG or TIFF files') }}
               </div>
               <div class="col s12 l3">
                 {{ wtf.render_field(form.version, material_icon='apps') }}
@@ -63,3 +63,18 @@
   </div>
 </div>
 {% endblock page_content %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+  function initPage() {
+    let createJobFormImagesElement = document.querySelector('#{{ form.images.id }}');
+    createJobFormImagesElement.parentElement.classList.add('service-color', 'darken');
+
+    let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
+    createJobFormSubmitElement.classList.add('service-color', 'darken');
+  };
+
+  initPage();
+</script>
+{% endblock scripts %}

app/templates/services/spacy_nlp_pipeline.html.j2

@@ -165,10 +165,20 @@
 {% block scripts %}
 {{ super() }}
 <script>
-// Disable user model selection if no models are available
+  function initPage() {
+    let createJobFormTxtElement = document.querySelector('#{{ form.txt.id }}');
+    createJobFormTxtElement.parentElement.classList.add('service-color', 'darken');
+
     {% if user_spacy_nlp_pipeline_models_count == 0 %}
+    // Disable user model selection if no models are available
     optionGroupOptions = document.querySelectorAll(".optgroup-option");
     optionGroupOptions[0].classList.add("disabled");
     {% endif %}
+
+    let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
+    createJobFormSubmitElement.classList.add('service-color', 'darken');
+  };
+
+  initPage();
 </script>
 {% endblock scripts %}

app/templates/services/tesseract_ocr_pipeline.html.j2

@@ -145,15 +145,26 @@
 {% block scripts %}
 {{ super() }}
 <script>
+  function initPage() {
+    let createJobFormPdfElement = document.querySelector('#{{ form.pdf.id }}');
+    createJobFormPdfElement.parentElement.classList.add('service-color', 'darken');
 
-// Disable user model selection if no models are available
     {% if user_tesseract_ocr_pipeline_models_count == 0 %}
+    // Disable user model selection if no models are available
     optionGroupOptions = document.querySelectorAll(".optgroup-option");
     optionGroupOptions[0].classList.add("disabled");
     {% endif %}
 
-document.querySelector('#create-job-form-binarization').addEventListener('change', (event) => {
-  document.querySelector('#create-job-form-ocropus_nlbin_threshold-container').classList.toggle('hide');
+    let createJobFormBinarizationElement = document.querySelector('#{{ form.binarization.id }}');
+    let createJobFormOcropusNlbinThresholdContainerElement = document.querySelector('#create-job-form-ocropus_nlbin_threshold-container');
+    createJobFormBinarizationElement.addEventListener('change', (event) => {
+      createJobFormOcropusNlbinThresholdContainerElement.classList.toggle('hide');
     });
+
+    let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
+    createJobFormSubmitElement.classList.add('service-color', 'darken');
+  };
+
+  initPage();
 </script>
 {% endblock scripts %}

app/templates/services/transkribus_htr_pipeline.html.j2

@@ -138,3 +138,18 @@
   </div>
 </div>
 {% endblock modals %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+  function initPage() {
+    let createJobFormPdfElement = document.querySelector('#{{ form.pdf.id }}');
+    createJobFormPdfElement.parentElement.classList.add('service-color', 'darken');
+
+    let createJobFormSubmitElement = document.querySelector('#{{ form.submit.id }}');
+    createJobFormSubmitElement.classList.add('service-color', 'darken');
+  };
+
+  initPage();
+</script>
+{% endblock scripts %}

app/templates/wtf.html.j2

@@ -1,47 +1,42 @@
 {% macro render_field(field) %}
   {% if field.type == 'BooleanField' %}
     {{ render_boolean_field(field, *args, **kwargs) }}
-  {% elif field.type == 'DecimalRangeField' %}
-    {{ render_decimal_range_field(field, *args, **kwargs) }}
+  {% elif field.type == 'FileField' %}
+    {{ render_file_field(field, *args, **kwargs) }}
+  {% elif field.type == 'IntegerField' %}
+    {{ render_integer_field(field, *args, **kwargs) }}
+  {% elif field.type == 'MultipleFileField' %}
+    {{ render_multiple_file_field(field, *args, **kwargs) }}
   {% elif field.type == 'SubmitField' %}
     {{ render_submit_field(field, *args, **kwargs) }}
-  {% elif field.type in ['FileField', 'MultipleFileField'] %}
-    {{ render_file_field(field, *args, **kwargs) }}
+  {% elif field.type == 'TextAreaField' %}
+    {{ render_text_area_field(field, *args, **kwargs) }}
   {% else %}
-    {% if 'class_' in kwargs and 'validate' not in kwargs['class_'] %}
-      {% set tmp = kwargs.update({'class_': kwargs['class_'] + ' validate'}) %}
-    {% else %}
-      {% set tmp = kwargs.update({'class_': 'validate'}) %}
-    {% endif %}
     {{ render_generic_field(field, *args, **kwargs) }}
   {% endif %}
 {% endmacro %}
 
+
 {% macro render_boolean_field(field) %}
-  {% set label = kwargs.pop('label', True) %}
-  <div class="switch">
-    {% if 'material_icon' in kwargs %}
-      <i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
-    {% endif %}
+  <div>
     <label>
-      {{ field(*args, **kwargs) }}
-      <span class="lever"></span>
-      {% if label %}
-      {{ field.label.text }}
-      {% endif %}
-    </label>
+      <input id="{{ field.id }}" name="{{ field.name }}" type="checkbox">
+      <span>{{ field.label.text }}</span>
       {% for error in field.errors %}
         <span class="helper-text error-color-text">{{ error }}</span>
       {% endfor %}
+    </label>
   </div>
 {% endmacro %}
 
+
 {% macro render_file_field(field) %}
   {% set placeholder = kwargs.pop('placeholder', '') %}
+
   <div class="file-field input-field">
     <div class="btn">
       <span>{{ field.label.text }}</span>
-      {{ field(*args, **kwargs) }}
+      <input id="{{ field.id }}" name="{{ field.name }}" type="file">
     </div>
     <div class="file-path-wrapper">
       <input class="file-path validate" type="text" placeholder="{{ placeholder }}">
@@ -52,50 +47,78 @@
   </div>
 {% endmacro %}
 
-{% macro render_generic_field(field) %}
-  {% if field.type == 'TextAreaField' and 'materialize-textarea' not in kwargs['class_'] %}
-    {% set tmp = kwargs.update({'class_': kwargs['class_'] + ' materialize-textarea'}) %}
-  {% elif field.type == 'IntegerField' %}
-    {% set tmp = kwargs.update({'type': 'number'}) %}
-  {% endif %}
-  {% set label = kwargs.pop('label', True) %}
-  <div class="input-field">
-    {% if 'material_icon' in kwargs %}
-      <i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
-    {% endif %}
-    {{ field(*args, **kwargs) }}
-    {% if label %}
-    {{ field.label }}
-    {% endif %}
+
+{% macro render_multiple_file_field(field) %}
+  {% set placeholder = kwargs.pop('placeholder', '') %}
+
+  <div class="file-field input-field">
+    <div class="btn">
+      <span>{{ field.label.text }}</span>
+      <input id="{{ field.id }}" name="{{ field.name }}" type="file" multiple>
+    </div>
+    <div class="file-path-wrapper">
+      <input class="file-path validate" type="text" placeholder="{{ placeholder }}">
+    </div>
     {% for error in field.errors %}
       <span class="helper-text error-color-text">{{ error }}</span>
     {% endfor %}
   </div>
 {% endmacro %}
 
+
+{% macro render_integer_field(field) %}
+  <div class="input-field">
+    {% if 'material_icon' in kwargs %}
+      <i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
+    {% endif %}
+    <input class="validate" id="{{ field.id }}" name="{{ field.name }}" type="number">
+    <label for="{{ field.id }}">{{ field.label.text }}</label>
+    {% for error in field.errors %}
+      <span class="helper-text error-color-text">{{ error }}</span>
+    {% endfor %}
+  </div>
+{% endmacro %}
+
+
 {% macro render_submit_field(field) %}
-  {% if 'class_' in kwargs and 'btn' not in kwargs['class_'] %}
-    {% set tmp = kwargs.update({'class_': kwargs['class_'] + ' btn'}) %}
-  {% else %}
-    {% set tmp = kwargs.update({'class_': 'btn'}) %}
-  {% endif %}
-  {% if 'waves-effect' not in kwargs['class_'] %}
-    {% set tmp = kwargs.update({'class_': kwargs['class_'] + ' waves-effect'}) %}
-  {% endif %}
-  {% if 'waves-light' not in kwargs['class_'] %}
-    {% set tmp = kwargs.update({'class_': kwargs['class_'] + ' waves-light'}) %}
-  {% endif %}
-  <button class="{{ kwargs['class_'] }}"
-          id="{{ field.id }}"
-          name="{{ field.name }}"
-          type="submit"
-          value="{{ field.label.text }}"
-          {% if 'style' in kwargs %}
-            style="{{ kwargs.pop('style') }}"
-          {% endif %}>
+  <button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit">
     {{ field.label.text }}
     {% if 'material_icon' in kwargs %}
       <i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
     {% endif %}
   </button>
 {% endmacro %}
+
+
+{% macro render_text_area_field(field) %}
+  <div class="input-field">
+    {% if 'material_icon' in kwargs %}
+      <i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
+    {% endif %}
+    <textarea class="materialize-textarea validate" id="{{ field.id }}" name="{{ field.name }}"></textarea>
+    <label for="{{ field.id }}">{{ field.label.text }}</label>
+    {% for error in field.errors %}
+      <span class="helper-text error-color-text">{{ error }}</span>
+    {% endfor %}
+  </div>
+{% endmacro %}
+
+
+{% macro render_generic_field(field) %}
+  {% set classes_ = kwargs.pop('class_', '').split(' ') %}
+  {% if 'validate' not in classes_ %}
+    {% set _ = classes_.append('validate') %}
+  {% endif %}
+  {% set _ = kwargs.update({'class_': ' '.join(classes_)}) %}
+
+  <div class="input-field">
+    {% if 'material_icon' in kwargs %}
+      <i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
+    {% endif %}
+    {{ field(*args, **kwargs) }}
+    {{ field.label }}
+    {% for error in field.errors %}
+      <span class="helper-text error-color-text">{{ error }}</span>
+    {% endfor %}
+  </div>
+{% endmacro %}