Skip to content

C
clinicaltrials
Commit d6e932a7 authored by Romain Loth's avatar Romain Loth
Browse files
Options

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

parent 40322a00
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 587 additions and 569 deletions
services/main.py
View file @ d6e932a7
......@@ -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 0 → 100755
View file @ d6e932a7
/**
* @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 0 → 100755
View file @ d6e932a7
/**
* @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 deleted 100755 → 0
View file @ 40322a00
/**
* @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
View file @ d6e932a7
/**
* @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")
static/js/comex_user_shared_auth.js
View file @ d6e932a7
This diff is collapsed.
templates/base_layout.html
View file @ d6e932a7
......@@ -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
View file @ d6e932a7
......@@ -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
View file @ d6e932a7
......@@ -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
View file @ d6e932a7
......@@ -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 %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment