change the way we handle form submit preparation in the lib side

static/js/comex_lib_elts.js

@@ -42,14 +42,9 @@ var cmxClt = (function(cC) {
     cC.elts.box.postAuthBox = function(formId) {
         var formObj = cmxClt.uform.allForms[formId]
 
-        // so lame: we already put collectCaptcha in this form's submit()
-        //          but here we are circumventing submit() b/c different url!
-        if (formObj.validateCaptcha) {
-            cmxClt.uauth.collectCaptcha(formObj)
-        }
-
         // inputs should already have correct names: 'email', 'password'
         var formdat = formObj.asFormData();
+        // + real captcha value has also been collected by asFormData()
 
         // TODO for SSL
         //      currently relative URL <=> same protocol as source

static/js/comex_user_shared.js

@@ -165,7 +165,7 @@ var cmxClt = (function() {
     // A textinput element containing multiple values like keywords
     //   => UI shows input where user enters words one by one
     //   => validated words become removable "boxes"
-    //   => result is an array of texts in memory, concatenated at form.submit()
+    //   => result is an array of texts in memory, concatenated at mtiCollect()
     cC.uform.multiTextinput = function (fName, otherMtiParams, aUForm) {
         // console.debug ("multiTextinput args:", fName, otherMtiParams, aUForm)
 
@@ -299,20 +299,38 @@ var cmxClt = (function() {
     //   - submitBtnId
     //   - multiTextinputs: [(...multiTextinputsParams...)]
 
+    // exposed members:
+    // theForm.id  <=> the HTML #id value
+    // theForm.elForm <=> the HTML <form> element
+    // theForm.mtiStock <=> all tags entered via multiTextinputs
+    // theUForm.asFormData() <=> all values asFormData...
+    // theForm.preSubmitActions <=> functions to call before sending data
+
+    // NB if you send the data by a classic formElt.submit() or use asFormData(), preSubmitActions will already be called
+
     cC.uform.Form = function(aFormId, aValidationFun, fParams) {
 
         // new "obj"
         var myUform = {}
 
+        // keep a ref to it in global scope
+        cC.uform.allForms[aFormId] = myUform
+
         // exposed vars that may be used during the interaction
         myUform.id = aFormId
         myUform.elForm = document.getElementById(aFormId)
         myUform.asFormData = function() {
+
+            // invoke preSubmitActions to collect widget data (captcha, mtis)
+            for (var i in myUform.preSubmitActions) {
+                myUform.preSubmitActions[i]()
+            }
             return new FormData(myUform.elForm)
         }
 
-        // keep a ref to it in global scope
-        cC.uform.allForms[aFormId] = myUform
+        // an array of functions to call before sending form (submit or fetch)
+        // NB *synchronous* functions only !!
+        myUform.preSubmitActions = []
 
         // events
         if (aValidationFun) {
@@ -349,26 +367,38 @@ var cmxClt = (function() {
                 )
             }
 
-            // NB overloading the submit() function seems more practical than the submit *event* but it implies to use this function each time
-            // (if impossible, collect values manually)
+            // collect multiTextinput values
+            myUform.mtiCollect = function() {
+                // console.log('collecting multiTextinputs')
+                for (var field in myUform.mtiStock) {
+                    document.getElementById(field).value = myUform.mtiStock[field].join(',')
+                    // console.debug("  mti collected field '"+field+"', new value =", document.getElementById(field).value)
+                }
+            }
+
+            myUform.preSubmitActions.push(myUform.mtiCollect)
+
 
-            // NB2 we save it as a property of the html form (and not indep var or object property otherwise the invocation context is illegal)
+            // Here we overload the submit() function with preSubmitActions
+            // (submit() is more practical to overload than the submit *event*)
+            // (preSubmitActions are as evaluated at submit invocation time)
 
+            // we keep classicSubmit() as member of the html form
+            // (preserves its invocation context)
             myUform.elForm.classicSubmit = myUform.elForm.submit
+
             myUform.elForm.submit = function() {
 
-                // collect multiTextinput values
-                for (var field in myUform.mtiStock) {
-                    document.getElementById(field).value = myUform.mtiStock[field].join(',')
-                    // console.debug("  mti collected field '"+field+"', new value =", document.getElementById(field).value)
+                // 1) invoke any (synchronous) preparation functions
+                for (var i in myUform.preSubmitActions) {
+                    myUform.preSubmitActions[i]()
                 }
 
+                // 2) proceed with normal submit
                 console.log("go classicSubmit")
-                // proceed with normal submit
                 myUform.elForm.classicSubmit()
             }
         }
-
         return myUform
     }
 

static/js/comex_user_shared_auth.js

@@ -139,12 +139,12 @@ cmxClt = (function(cC) {
             auForm.elPass2.onkeyup = auForm.elPass.onkeyup
             auForm.elPass2.onchange = auForm.elPass.onkeyup
 
-            // another form submit() overload to prevent double registrations
-            auForm.elForm.normalSubmitAction = auForm.elForm.submit
-            auForm.elForm.submit = function() {
+            // we add blocking the button to form submit() prerequisites
+            var blockButton = function() {
+                console.log('blocking submit button')
                 auForm.elSubmitBtn.disabled = true
-                auForm.elForm.normalSubmitAction()
             }
+            auForm.preSubmitActions.push(blockButton)
         }
 
         // 3) for captcha
@@ -162,14 +162,14 @@ cmxClt = (function(cC) {
                 }
                 auForm.elCaptcha.onchange = auForm.elCaptcha.onkeyup
 
-                // also form submit() overoverload
-                auForm.elForm.oldSubmitAction = auForm.elForm.submit
-                auForm.elForm.submit = function() {
-                    // console.log("go newSubmit")
-                    cmxClt.uauth.collectCaptcha(auForm)
-                    // console.log("go oldSubmit")
-                    auForm.elForm.oldSubmitAction()
-                }
+                // we add collecting the captcha real value as another preSubmit
+                auForm.preSubmitActions.push(
+                    function () {
+                        // console.log('collecting captcha data')
+                        cmxClt.uauth.collectCaptcha(auForm)
+                    }
+                )
+
             }
             else {
             console.warn(`validateCaptcha is set to true but there is no captcha in the authentication form #${auForm.id}`)