used js module pattern (cmxClt) and almost finished all client-side controllers factorization

services/main.py

@@ -151,7 +151,8 @@ def user():
 def login():
     if request.method == 'GET':
         return render_template(
-            "login.html"
+            "login.html",
+            doors_connect = config['DOORS_HOST']+':'+config['DOORS_PORT']
         )
     elif request.method == 'POST':
         # TODO sanitize
@@ -341,9 +342,8 @@ def sanitize(value):
         return san_typed_val
 
 
-
-
 ########### MAIN ###########
+# this only uses the dev server (in prod we're run by unicorn and not as main)
 if __name__ == "__main__":
     # our app should be bound to an ip (cf stackoverflow.com/a/30329547/2489184)
     app.run(host=config['COMEX_HOST'], port=int(config['COMEX_PORT']))

static/js/comex_page_login_controllers.js

+/**
+ * @fileoverview
+ * Login via Doors
+ * @todo
+ *    - package.json
+ *
+ * @version 1
+ * @copyright ISCPIF-CNRS 2016
+ * @author romain.loth@iscpif.fr
+ *
+ * @requires comex_user_shared
+ * @requires comex_user_shared_auth
+ */
+
+
+// initialize form controllers
+cmxClt.uform.initialize("comex_login_form", loginValidate)
+
+// initialize auth with doors
+cmxClt.uauth.emailIdSupposedToExist = true
+
+
+// done when anything in the form changes
+function loginValidate() {
+  // console.log("loginValidate Go")
+
+  cmxClt.uauth.earlyValidate()
+
+  // TODO checkPassStatusSingle()
+
+  if (cmxClt.uauth.passStatus
+        && cmxClt.uauth.emailStatus
+        && cmxClt.uauth.captchaStatus) {
+      cmxClt.uform.submitButton.disabled = false
+  }
+  else {
+      cmxClt.uform.submitButton.disabled = true
+  }
+}
+
+function loginDoorsThenTestUidAndSubmit(){
+    cmxClt.uform.mainMessage.innerHTML = "Logging in ISCPIF Doors..."
+
+    // all values from the form have now been validated
+    var emailValue = cmxClt.uauth.email.value
+    var passValue = cmxClt.uauth.pass1.value
+
+    // KNOCKING ON THE DOORS -------------------------------------
+    // /!\ async
+    callDoors(
+        "user",
+        [emailValue, passValue],
+
+        // callback: get uid to send to server -------------------
+        function(doorsResp) {
+            console.log("login resp:", doorsResp)
+            testUidAndSubmit(doorsResp)
+        }
+    )
+}
+
+function testUidAndSubmit(doorsResp) {
+    var doorsUid = doorsResp[0]
+    var doorsMsg = doorsResp[1]
+
+    if (doorsUid == null) {
+        cmxClt.uform.mainMessage.innerHTML = "Problem with doors login..."
+        cmxClt.uform.mainMessage.style.color = cmxClt.colorRed
+        cmxClt.uform.submitButton.disabled = false
+    }
+    else {
+        // fill in the answer we got
+        // £TODO fix scope uauth and uform ?
+        uidInput.value = doorsUid
+
+        console.info("form was validated and registered@doors: submitting now")
+
+        //==== SEND! ====
+         theForm.submit()
+        //===============
+    }
+}
+
+
+console.log("login controllers load OK")

static/js/comex_page_profile_controllers.js

+/**
+ * @fileoverview
+ * Profile 1/overview and 2/completing via Doors
+ * @todo
+ *    - package.json
+ *
+ * @version 1
+ * @copyright ISCPIF-CNRS 2016
+ * @author romain.loth@iscpif.fr
+ *
+ * @requires comex_user_shared
+ * @requires comex_user_shared_auth
+ */
+
+// TODO

static/js/comex_user_login_controllers.js

-/**
- * @fileoverview
- * Login via Doors
- * @todo
- *    - package.json
- *
- * @version 1
- * @copyright ISCPIF-CNRS 2016
- * @author romain.loth@iscpif.fr
- *
- * @requires comex_user_shared
- * @requires comex_user_shared_auth
- */
-
-// common vars to user forms
-// NB other vars defined in main scope but just before their respective funs
-var theFormId = "comex_login_form"
-var theForm = document.getElementById(theFormId)
-var wholeFormData
-
-// cf corresponding css classes
-var colorWhite = '#fff'
-var colorRed = '#910'
-var colorGreen = '#161'
-var colorGrey = '#554'
-
-// vars that will be used during the interaction
-var submitButton = document.getElementById('formsubmit')
-var mainMessage = document.getElementById('main_validation_message')
-
-submitButton.disabled = true
-theForm.onkeyup = testAsYouGo
-theForm.onchange = testAsYouGo
-theForm.onblur = testAsYouGo
-
-var lastEmailValueCheckedDisplayed = null
-
-// done when anything in the form changes
-function testAsYouGo() {
-  // console.log("testAsYouGo Go")
-
-  if (email.value != lastEmailValueCheckedDisplayed) {
-      // will update the emailStatus boolean
-      basicEmailValidate(email.value)
-  }
-
-  captchaStatus = (captcha.value.length == realCaptchaLength)
-
-  checkPassStatusSingle()
-
-  if (passStatus && emailStatus && captchaStatus) {
-      submitButton.disabled = false
-  }
-  else {
-      submitButton.disabled = true
-  }
-}
-
-
-// NB using new route in doors api/userExists
-// case true => Ok("""{"status":"login exists"}""")
-// case false => Ok("""{"status":"login available"}""")
-function testDoorsUserExists(emailValue) {
-    // /!\ async
-    callDoors(
-        "userExists",
-        [emailValue],
-        function(doorsResp) {
-            var doorsUid = doorsResp[0]
-            var doorsMsg = doorsResp[1]
-
-            // for login the global status can be true iff login exists
-            emailStatus = (doorsMsg == "login available")
-
-            displayDoorsStatusInLoginBox(emailStatus, emailValue)
-        }
-    )
-}
-
-
-function doorsThenTestUidAndSubmit(){
-    mainMessage.innerHTML = "Logging in ISCPIF Doors..."
-
-    // all values from the form have now been validated
-    var emailValue = email.value
-    var passValue = pass.value
-
-    // KNOCKING ON THE DOORS -------------------------------------
-    // /!\ async
-    callDoors(
-        "user",
-        [emailValue, passValue],
-
-        // callback: get uid to send to server -------------------
-        function(doorsResp) {
-            testUidAndSubmit(doorsResp)
-        }
-    )
-}
-
-function testUidAndSubmit(doorsResp) {
-    var doorsUid = doorsResp[0]
-    var doorsMsg = doorsResp[1]
-
-    if (doorsUid == null) {
-        mainMessage.innerHTML = "Problem with doors login..."
-        mainMessage.style.color = colorRed
-        submitButton.disabled = false
-    }
-    else {
-        // fill in the answer we got
-        uidInput.value = doorsUid
-
-        console.info("form was validated and registered@doors: submitting now")
-
-        //==== SEND! ====
-         theForm.submit()
-        //===============
-    }
-}
-
-var doorsIcon = document.getElementById('doors_ret_icon')
-function displayDoorsStatusInLoginBox (available, emailValue) {
-
-    if (available) {
-        // icon
-        doorsIconMessage.title = "Sorry this ID isn't recognized on Doors!"
-        doorsIcon.style.color = colorRed
-        doorsIcon.classList.remove('glyphicon-ok')
-        doorsIcon.classList.remove('glyphicon-question-sign')
-        doorsIcon.classList.add('glyphicon-remove')
-
-        // message in legend
-        doorsMessage.innerHTML = "Sorry this email ID isn't recognized on Doors!"
-        doorsMessage.style.color = colorRed
-    }
-    else {
-        // icon
-        doorsIconMessage.title = "Ok ID exists in Doors"
-        doorsIcon.style.color = colorGreen
-        doorsIcon.classList.remove('glyphicon-remove')
-        doorsIcon.classList.remove('glyphicon-question-sign')
-        doorsIcon.classList.add('glyphicon-ok')
-
-        // message in legend
-        doorsMessage.innerHTML = "Ok, this email ID is recognized in Doors!"
-        doorsMessage.style.color = colorGreen
-    }
-
-    // to debounce further actions in testAsYouGo
-    // return to neutral is also in testAsYouGo
-    lastEmailValueCheckedDisplayed = emailValue
-}
-
-
-
-
-console.log("login controllers load OK")

static/js/comex_user_shared.js

 /**
  * @fileoverview
- * Shared vars and functions for all user forms
+ * Comex Client Module: initialize and expose as *cmxClt* var
+ *   -> shared vars for css
+ *   -> shared vars and functions for all user forms in *cmxClt.uform* submodule
  *
  * @todo
  *    - package.json
@@ -11,56 +13,73 @@
  *
  */
 
-// common vars to user forms
-// NB other vars defined in main scope but just before their respective funs
-var theFormId = "comex_login_form"
-var theForm = document.getElementById(theFormId)
-var wholeFormData
-
-// cf corresponding css classes
-var colorWhite = '#fff'
-var colorRed = '#910'
-var colorGreen = '#161'
-var colorGrey = '#554'
-
-// vars that will be used during the interaction
-var submitButton = document.getElementById('formsubmit')
-var mainMessage = document.getElementById('main_validation_message')
-theForm.onkeyup = testAsYouGo
-theForm.onchange = testAsYouGo
-theForm.onblur = testAsYouGo
-
-var lastEmailValueCheckedDisplayed = null
-
-function makeRandomString(nChars) {
-  var rando = ""
-  var possible = "abcdefghijklmnopqrstuvwxyz0123456789";
-  var len = possible.length
-  for( var i=0; i < nChars; i++ )
-      rando += possible.charAt(Math.floor(Math.random() * len));
-  return rando
-}
-
-
-function ulListFromLabelsArray(strArray, ulClassList) {
-    ulClasses=["minilabels"].concat(ulClassList).join(" ")
-    var resultHtml = '<ul class="'+ulClasses+'">'
-    for (var i in strArray) {
-        var label = strArray[i].replace(/_/, " ")
-        resultHtml += '<li class="minilabel">'+label+'</li>'
+
+// initialize and export cmxClt module
+var cmxClt = (function() {
+
+    ccModule = {}
+
+    // cf corresponding css classes
+    ccModule.colorWhite = '#fff'
+    ccModule.colorRed = '#910'
+    ccModule.colorGreen = '#161'
+    ccModule.colorGrey = '#554'
+
+
+    ccModule.makeRandomString = function (nChars) {
+      var rando = ""
+      var possible = "abcdefghijklmnopqrstuvwxyz0123456789";
+      var len = possible.length
+      for( var i=0; i < nChars; i++ )
+          rando += possible.charAt(Math.floor(Math.random() * len));
+      return rando
+    }
+
+    ccModule.ulListFromLabelsArray = function (strArray, ulClassList) {
+        ulClasses=["minilabels"].concat(ulClassList).join(" ")
+        var resultHtml = '<ul class="'+ulClasses+'">'
+        for (var i in strArray) {
+            var label = strArray[i].replace(/_/, " ")
+            resultHtml += '<li class="minilabel">'+label+'</li>'
+        }
+        resultHtml += '</ul>'
+        return resultHtml
+    }
+
+    // basic inputs get normal on focus
+    ccModule.makeNormal = function (elt) {
+        elt.style.fontWeight = "normal"
+    }
+
+    // basic inputs get bold on blur
+    ccModule.makeBold = function (elt){
+      if (elt.value != "")   elt.style.fontWeight = "bold"
+    }
+
+
+    // common vars to user forms
+    ccModule.uform = {}
+    ccModule.uform.theFormId = null
+    ccModule.uform.theForm = null
+    ccModule.uform.wholeFormData = null
+
+    // vars that will be used during the interaction
+    ccModule.uform.submitButton = document.getElementById('formsubmit')
+    ccModule.uform.mainMessage = document.getElementById('main_validation_message')
+
+    ccModule.uform.initialize = function(aFormId, aValidationFun) {
+        ccModule.uform.theFormId = aFormId
+        ccModule.uform.theForm = document.getElementById(aFormId)
+
+        ccModule.uform.theForm.onkeyup = aValidationFun
+        ccModule.uform.theForm.onchange = aValidationFun
+        ccModule.uform.theForm.onblur = aValidationFun
+
     }
-    resultHtml += '</ul>'
-    return resultHtml
-}
 
+    return ccModule
+}()) ;
 
-// basic inputs get normal on focus
-function makeNormal(elt) {
-    elt.style.fontWeight = "normal"
-}
 
-// basic inputs get bold on blur
-function makeBold(elt){
-  if (elt.value != "")   elt.style.fontWeight = "bold"
-}
 
+console.log("shared load OK")

templates/base_layout.html

@@ -19,7 +19,7 @@
   <!--  NB our js will be at the end -->
 
   <!-- ## Piwik ## -->
-  <script type="text/javascript">
+  <!-- <script type="text/javascript">
     var _paq = _paq || [];
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
@@ -31,7 +31,7 @@
       g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
     })();
   </script>
-  <noscript><p><img src="//piwik.iscpif.fr/piwik.php?idsite=4" style="border:0;" alt="" /></p></noscript>
+  <noscript><p><img src="//piwik.iscpif.fr/piwik.php?idsite=4" style="border:0;" alt="" /></p></noscript> -->
   <!-- End Piwik Code -->
 
 

templates/login.html

@@ -36,10 +36,7 @@
               <div class="question">
                 <p class="legend">(It is the same login for all the ISC services.)</p>
                 <div class="input-group">
-                  <!-- email validation onblur/onchange
-                            is done by basicEmailValidate
-                                   and testDoorsUserExists
-                            in comex_reg_form_controllers.js -->
+                  <!-- email validation onblur/onchange is done by cmxClt.uauth in comex_user_shared_auth.js -->
                   <label for="email" class="smlabel input-group-addon">Email</label>
                   <input id="email" name="email" maxlength="255"
                          type="text" class="form-control" placeholder="email">
@@ -89,7 +86,7 @@
             <label for="my-captcha" class="smlabel input-group-addon">Code</label>
             <input id="my-captcha" name="my-captcha" style="max-width:60%"
                    type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
-                   onblur="makeBold(this)" onfocus="makeNormal(this)">
+                   onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
           </div>
 
           <!-- == S U B M I T == -->
@@ -106,13 +103,10 @@
 
         <!-- FOR DEBUG: test go-between with Doors -->
         <p>
-            <button type=button onclick='callDoors("user", [email.value, pass1.value, initialsInput.value], console.warn)'>
+            <button type=button onclick='cmxClt.uauth.callDoors("user", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value, null], console.warn)'>
                 test doors login
             </button>
-            <button type=button onclick='callDoors("register", [email.value, pass1.value, initialsInput.value], console.warn)'>
-                test doors register
-            </button>
-            <button type=button onclick='callDoors("userExists", [email.value, null, null], console.warn)'>
+            <button type=button onclick='cmxClt.uauth.callDoors("userExists", [cmxClt.uauth.email.value, null, null], console.warn)'>
                 test doors userExists
             </button>
         </p>
@@ -128,5 +122,5 @@
     <!--  our js  -->
     <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_user_login_controllers.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/comex_page_login_controllers.js') }}"></script>
 {% endblock %}

templates/profile.html

@@ -13,9 +13,22 @@
       <div class="spacer col-sm-1 col-md-1">&nbsp;</div>
       <div class="my_form_box col-sm-8 col-md-8">
 
-        <!-- INTRODUCTION TEXT -->
+
+
+
+        <!-- ##################### ( PROFILE OVERVIEW ) #################### -->
+
+
         <div id="intro">
-          <h2 class="oldstyle">Profile</h2>
+            <h2 class="oldstyle">Your Profile Info</h2>
+                <p class="mini-hero">
+                </p>
+        </div>
+
+
+        <!-- FORM COMPLETING INTRO TEXT -->
+        <div id="intro">
+          <h2 class="oldstyle">Complete your profile</h2>
               <p class="mini-hero">
                   Take the time to complete your <strong>Community Explorer</strong> profile to generate better maps of your own socio-semantic network .
                   <br/>
@@ -27,7 +40,6 @@
               </p>
         </div>
 
-
         <!-- ########################### ( FORM ) ########################## -->
         <form id="comex_profil_form" enctype="multipart/form-data"
               method="post" onsubmit="console.info('submitted')">
@@ -94,10 +106,7 @@
           <div class="question">
             <p class="legend">Your email will also be your login for the ISC services.</p>
             <div class="input-group">
-              <!-- email validation onblur/onchange
-                        is done by basicEmailValidate
-                               and testDoorsUserExists
-                        in comex_reg_form_controllers.js -->
+              <!-- email validation onblur/onchange is done by cmxClt.uauth in comex_user_shared_auth.js -->
               <label for="email" class="smlabel input-group-addon">* Email</label>
               <input id="email" name="email" maxlength="255"
                      type="text" class="form-control" placeholder="email">
@@ -375,5 +384,5 @@
 {% block last_imports %}
     <!--  our js  -->
     <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_profile_form_controllers.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/comex_page_profile_controllers.js') }}"></script>
 {% endblock %}

templates/registration_full_form.html

@@ -57,7 +57,7 @@
                 </label>
                 <input id="first_name" name="first_name" maxlength="30"
                        type="text" class="form-control" placeholder="prénom"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <!-- optionnel -->
@@ -67,7 +67,7 @@
                 </label>
                 <input id="middle_name" name="middle_name" maxlength="30"
                        type="text" class="form-control" placeholder="autres prénoms"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <div class="question input-group">
@@ -76,7 +76,7 @@
                 </label>
                 <input id="last_name" name="last_name" maxlength="30"
                        type="text" class="form-control" placeholder="nom de famille"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <button class="btn btn-xs btn-default operation"
@@ -108,10 +108,7 @@
               <div class="question">
                 <p class="legend">Your email will also be your login for the ISC services.</p>
                 <div class="input-group">
-                  <!-- email validation onblur/onchange
-                            is done by basicEmailValidate
-                                   and testDoorsUserExists
-                            in comex_reg_form_controllers.js -->
+                  <!-- email validation onblur/onchange is done by cmxClt.uauth in comex_user_shared_auth.js -->
                   <label for="email" class="smlabel input-group-addon">* Email</label>
                   <input id="email" name="email" maxlength="255"
                          type="text" class="form-control" placeholder="email">
@@ -153,14 +150,14 @@
                 <label for="hon_title" class="smlabel input-group-addon"> Title </label>
                 <input id="hon_title" name="hon_title" maxlength="30"
                        type="text" class="form-control autocomp" placeholder="titre"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <div class="question input-group">
                 <label for="position" class="smlabel input-group-addon">* Job Position</label>
                 <input id="position" name="position" maxlength="30"
                        type="text" class="form-control autocomp" placeholder="titre"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <div class="question">
@@ -298,7 +295,7 @@
                 <textarea id="interests_text" name="interests_text" maxlength="1200"
                           rows="7" style="resize:none"
                           class="form-control" placeholder="If you wish, you may describe here your personal interests."
-                          onblur="makeBold(this)" onfocus="makeNormal(this)"
+                          onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
                           ></textarea>
               </div>
               <p class="legend">Optional, ~15 lines max (1200 chars)</p>
@@ -398,7 +395,7 @@
                 <label for="my-captcha" class="smlabel input-group-addon">Code</label>
                 <input id="my-captcha" name="my-captcha" style="max-width:60%"
                        type="text" class="form-control input-lg" placeholder="Enter the 5 letters you see beside =>"
-                       onblur="makeBold(this)" onfocus="makeNormal(this)">
+                       onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
               </div>
 
               <!-- == S U B M I T == -->
@@ -416,13 +413,13 @@
 
         <!-- FOR DEBUG: test go-between with Doors -->
         <!-- <p>
-            <button type=button onclick='callDoors("user", [email.value, pass1.value, initialsInput.value], console.warn)'>
+            <button type=button onclick='cmxClt.uauth.callDoors("user", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value, initialsInput.value], console.warn)'>
                 test doors login
             </button>
-            <button type=button onclick='callDoors("register", [email.value, pass1.value, initialsInput.value], console.warn)'>
+            <button type=button onclick='cmxClt.uauth.callDoors("register", [cmxClt.uauth.email.value, cmxClt.uauth.pass1.value, initialsInput.value], console.warn)'>
                 test doors register
             </button>
-            <button type=button onclick='callDoors("userExists", [email.value, null, null], console.warn)'>
+            <button type=button onclick='cmxClt.uauth.callDoors("userExists", [cmxClt.uauth.email.value, null, null], console.warn)'>
                 test doors userExists
             </button>
         </p> -->
@@ -439,5 +436,5 @@
     <!--  our js  -->
     <script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
     <script src="{{ url_for('static', filename='js/comex_user_shared_auth.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/comex_user_reg_controllers.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/comex_page_reg_controllers.js') }}"></script>
 {% endblock %}