Fix forms

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">
+            <div class="col s12 l6">
-              <a href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
-            </div>
-            <div class="col s6 right-align">
               {{ 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') }}
+          {{ wtf.render_field(form.email, material_icon='email', type='email') }}
-          <br>
+          <div class="row">
-          {{ wtf.render_field(form.terms_of_use_accepted, type='checkbox')}}
+            <div class="col s12 l6">
-          <p></p>
+              {{ wtf.render_field(form.terms_of_use_accepted)}}
-          <br>
+            </div>
-          {{ wtf.render_field(form.submit, class_='width-100', material_icon='send') }}
+            <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.email, material_icon='email', type='email') }}
-          {{ 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/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) => {
+    let createJobFormBinarizationElement = document.querySelector('#{{ form.binarization.id }}');
-  document.querySelector('#create-job-form-ocropus_nlbin_threshold-container').classList.toggle('hide');
+    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 %}