From e4ddcd9e4934d58ee47248e0e1f9a23b9189da5b Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 8 Mar 2018 02:20:07 +0100
Subject: [PATCH] minor fixes for file-inputs and buttons

---
 src/Handler/Utils/Form.hs     |  2 +-
 templates/widgets/form.julius | 29 ++++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Handler/Utils/Form.hs b/src/Handler/Utils/Form.hs
index 7759f81de..93b32bb45 100644
--- a/src/Handler/Utils/Form.hs
+++ b/src/Handler/Utils/Form.hs
@@ -124,7 +124,7 @@ buttonField btn = Field {fieldParse, fieldView, fieldEnctype}
 
     fieldView fid name attrs _val _ =
       [whamlet|
-        <button .button .#{bcc2txt $ cssClass btn} type=submit name=#{name} value=#{toPathPiece btn} *{attrs} ##{fid}>^{label btn}
+        <input .#{bcc2txt $ cssClass btn} type=submit name=#{name} value=^{label btn} *{attrs} ##{fid}>
       |]
 
     fieldParse []    _ = return $ Right Nothing
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index f52b7ced3..64c286d56 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -26,24 +26,21 @@
     });
   };
 
-  window.utils.reactiveFormGroup = function(formGroup, input, listen) {
+  window.utils.reactiveFormGroup = function(formGroup, input) {
     // updates to dom
     if (input.value.length > 0) {
       formGroup.classList.add('form-group--valid');
     } else {
       formGroup.classList.remove('form-group--valid');
     }
-    // add event listeners if told to listen
-    if (listen) {
-      input.addEventListener('input', function() {
-        console.log(input, 'got inpit');
-        if (input.value.length > 0) {
-          formGroup.classList.add('form-group--valid');
-        } else {
-          formGroup.classList.remove('form-group--valid');
-        }
-      });
-    }
+    input.addEventListener('input', function() {
+      formGroup.classList.remove('form-group--has-error');
+      if (input.value.length > 0) {
+        formGroup.classList.add('form-group--valid');
+      } else {
+        formGroup.classList.remove('form-group--valid');
+      }
+    });
   };
 
   window.utils.reactiveFileUpload = function(input, parent) {
@@ -70,14 +67,19 @@
       parent.appendChild(addMore);
     }
     function updateParent() {
+      var submitBtn = parent.parentElement.querySelector('[type=submit]');
       if (currInputCount > 0) {
         if (parent.classList.contains('form-group')) {
           parent.classList.add('form-group--valid')
+          parent.classList.remove('form-group--has-error');
         }
+        submitBtn.removeAttribute('disabled');
       } else {
         if (parent.classList.contains('form-group')) {
+          parent.classList.remove('form-group--has-error');
           parent.classList.remove('form-group--valid')
         }
+        submitBtn.setAttribute('disabled', 'disabled');
       }
     }
     function addListener(destInput) {
@@ -90,6 +92,7 @@
       });
     }
     addListener(input);
+    updateParent();
   }
 
   // registers input-listener for each element in <elements> (array) and
@@ -128,7 +131,7 @@ document.addEventListener('DOMContentLoaded', function() {
     var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
 
     if (isInFormGroup) {
-      window.utils.reactiveFormGroup(parent, input, isListening);
+      window.utils.reactiveFormGroup(parent, input);
     }
     if (isFileInput) {
       window.utils.reactiveFileUpload(input, parent);