Commit 1b04d79f authored by Romain Loth's avatar Romain Loth

tidy up and add loose branches

parent b8ff0a08
......@@ -82,36 +82,36 @@ login_manager.init_app(app)
# all inputs as they are declared in form, as a couple
SOURCE_FIELDS = [
# NAME, SANITIZE?
("luid", False ),
("doors_uid", False ),
("last_modified_date", False ), # ex 2016-11-16T17:47:07.308Z
("email", True ),
("country", True ),
("first_name", True ),
("middle_name", True ),
("last_name", True ),
("initials", True ),
# NAME, SANITIZE? Specificity
("luid", False, None),
("doors_uid", False, None),
("last_modified_date", False, None), # TODO use stamp
("email", True, None),
("country", True, None),
("first_name", True, None),
("middle_name", True, None),
("last_name", True, None),
("initials", True, None),
# => for *scholars* table
("position", True ),
("hon_title", True ),
("interests_text", True ),
("gender", False ), # M|F
("job_looking_date", True ), # def null: not looking for a job
("home_url", True ), # scholar's homepage
("pic_url", True ),
("pic_file", False ), # will be saved separately
("position", True, None),
("hon_title", True, None),
("interests_text", True, None),
("gender", False, None), # M|F
("job_looking_date", True, None), # def null: not looking for a job
("home_url", True, "url"), # scholar's homepage
("pic_url", True, "url"),
("pic_file", False, None), # saved separately
# => for *scholars* table (optional)
("org", True ),
("org_type", False ), # values are predefined for this
( "other_org_type", True ), # +=> org_type in read_record()
("team_lab", True ),
("org_city", True ),
("org", True, None),
("org_type", False, None), # predefined values
( "other_org_type", True, None), # +=> org_type
("team_lab", True, None),
("org_city", True, None),
# => for *affiliations* table
("keywords", True ),
("keywords", True, None),
# => for *keywords* table (after split str)
("hashtags", True )
......@@ -730,9 +730,13 @@ def read_record_from_request(request):
for field_info in SOURCE_FIELDS:
field = field_info[0]
do_sanitize = field_info[1]
spec_type = field_info[2]
if field in request.form:
if do_sanitize:
val = sanitize(request.form[field])
val = sanitize(
request.form[field],
is_url = (spec_type == "url")
)
if val != '':
clean_records[field] = val
else:
......@@ -773,7 +777,7 @@ def read_record_from_request(request):
# TODO move to text submodules
def sanitize(value):
def sanitize(value, is_url=False):
"""
simple and radical: leaves only alphanum and '@' '.' '-' ':' ',' '(', ')', '#', ' '
......@@ -784,7 +788,11 @@ def sanitize(value):
str_val = str(value)
clean_val = sub(r'^\s+', '', str_val)
clean_val = sub(r'\s+$', '', clean_val)
san_val = sub(r'[^\w@\.:,()# -]', '_', clean_val)
if is_url:
san_val = sub(r'[^\w@\.: -/]', '_', clean_val)
else:
san_val = sub(r'[^\w@\.:,()# -]', '_', clean_val)
if vtype not in [int, str]:
raise ValueError("Value has an incorrect type %s" % str(vtype))
......
......@@ -12,4 +12,10 @@ ADD init_comex_shared.sql /docker-entrypoint-initdb.d/
# if Adding data
# 1) a pre-existing database can be added via the volume in /data/shared_mysql_data
# 2) any pre-existing table-formed data can be imported if added inside into /var/lib/mysql-files
# 2) any pre-existing well-formed data can be imported if added inside into /var/lib/mysql-files
# exemple:
# ADD new_scholars_htids_mapping.tsv /var/lib/mysql-files/
# then in SQL something like:
# LOAD DATA INFILE '/var/lib/mysql-files/new_scholars_htids_mapping.tsv'
# INTO TABLE sch_ht IGNORE 1 LINES (uid,htid)
......@@ -13,7 +13,7 @@
body {
margin: 0;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: -0.04em;
/*letter-spacing: -0.04em;*/
color: #333;
background-color: #fff;
line-height: .9em;
......
......@@ -61,3 +61,7 @@ iframe.wwwthumbsmall {
border-radius: 1em;
padding: .8em;
}
#news-container {
min-height: 50px !important;
}
......@@ -335,44 +335,16 @@ input.is-realperson {
}
/* Autocomplete items */
.ui-menu-item {
color: #337AB7 !important;
font-family: "Droid Sans", Calibri, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing:normal;
font-weight: bold;
}
.ui-menu-item:hover {
color: #fff !important;
.ui-state-focus, .ui-state-hover, .ui-state-active {
text-shadow: none !important ; /* <=== !!! */
font-weight: bold !important;
background-color: #5278B3 !important;
border: .5px solid #6BB0E3 !important;
}
/*.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
_width: 160px;
padding: 4px 0;
margin: 2px 0 0 0;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}*/
......@@ -19,6 +19,10 @@
// so we put an absolute path and change the domain name at rendering.
var relsrc = document.getElementById('inlink').src
document.getElementById('inlink').src = 'https://'+location.host+'/'+relsrc
if (! /^https/.test(relsrc)) {
relsrc = 'https://'+location.host+'/'+relsrc
}
document.getElementById('inlink').src = relsrc
console.log("rootindex controllers load OK")
{% extends "base_layout.html" %}
{% block headers %}
<title>Community Explorer Profile</title>
<meta name="description" content="Community Explorer Wall">
<meta name="keywords" content="community, user profiles, data exploration">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/comex_alt.css') }}">
<!-- for #mini-explorer -->
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/jquery/jquery-ui.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/css2/freshslider.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/css2/custom.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/css2/sidebar.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/bootswatch/css/bootswatch.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='explorerlibs/css2/font.css') }}" type="text/css"> -->
<!-- for news vertical marquee -->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.vticker-min.js') }}"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 700,
pause: 6000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
{% endblock %}
<!-- ======================================================================= -->
{% block incipit %}
<!-- for facebook like -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endblock %}
{% block main_content %}
<!-- <div class="row spacerrow">&nbsp;</div> -->
<!-- INTRO 1 -->
<div class="row">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<!-- ##################### ( WELCOME ) #################### -->
<div class="my-box col-lg-9 col-md-9 col-sm-12">
<div id="loading" style="padding-left:-175px; margin-left: 27%;">
<img src="/static/css/loading.gif" style="border: 0px; opacity: 0.05; " />
</div>
<h2 class="oldstyle">Welcome to the complex systems community explorer</h2>
</div>
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<!-- INTRO 2 -->
<div class="row">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<!-- ### ( 1 big column for directory search ) ### -->
<div class="my-box col-lg-6 col-md-6 col-sm-12">
<p class="mini-hero">
Map your own socio-semantic network or explore sub-communities using the <strong> interactive menu</strong> on the top of the webpage. Use the "refine" filters to select keywords and scholars matching your subjects of interests.
<br/>
<br/>
The integration of <a href="/print_jobs_directory.php" target="blank">job openings</a> in maps aims at increasing the visibility of new positions or new candidates. <small>[ <a href="/jobmarket.html">more</a> ]</small>
</p>
<p class="sub-hero">
<!--<form>-->
<input type="text" id="searchname" class="input-lg name" style="display:inline-block;" placeholder="Your last name">
<input type="hidden" id="searchlogin" value="">
<img src="/static/css/branding/big_arrow.png" alt="" style="border: none; margin: 0 2px 5px 0;" title="" />
<button id="print2" class="btn btn-small btn-primary">
DIRECTORY
</button>
&nbsp;OR&nbsp;
<button id="generate2" class="btn btn-small btn-primary">
MAP
</button>
<!--<a id="printname" href="#"> <strong>PRINT</strong></a>-->
</p>
<p class="sub-hero">
<span class="glyphicon glyphicon-user"></span>
<strong>You cannot find yourself</strong> in the database ?
<button id="register" class="btn btn-mini btn-success">
Register
</button>
</p>
<p class="sub-hero">
<span class="glyphicon glyphicon-user"></span>
<strong>You to want update your data or keywords ?</strong>
<a href="/services/user/profile/">Edit your profile</a>, the database is updated instantly.
</p>
<p class="sub-hero">
<span class="glyphicon glyphicon-info-sign"></span>
View our <a href="/tips.html">tips</a> for best experience. This directory is <strong>open</strong> to everybody working in the field of Complex Systems science and Complexity science. Map and explore communities or generate a printable version of their directory.
Updated every few minutes.
<br/>
<!-- <span class="glyphicon glyphicon-th-list"></span> Personal data are given on a voluntary basis and people are responsible for the validity and integrity of their data. <br/>
<span class="glyphicon glyphicon-repeat"></span> Suggestions or comments ? <a href="http://moma.csregistry.org/feedback" target="BLANK">Please feedback.</a> <br/> -->
</p>
</div>
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<!-- ### ( 1 small column for news and announcements ) ### -->
<div class="my-box col-lg-3 col-md-3 col-sm-12">
<h2 class="oldstyle" style="font-size:1.5em;margin-top:1.5em;text-align:center;">
Special features
</h2>
<div id="news-container">
<ul>
<li><a href="/jobmarket.html">Soon a better job market integration: </a> announce new jobs and find people looking for a job</li>
<li><a href="/community_tags.html">Community tags:</a> Map any workgroup or event audience and get the associated directory.</li>
<li>This beta version of Community Explorer 2 is open source!</a> For sysadmins, it's easy to deploy a new server like this one using docker (<a href="https://github.com/moma/comex2/tree/master/setup/dockers">more info</a>).</li>
</ul>
</div>
<br/>
<center>
<iframe src="https://player.vimeo.com/video/38383946" width="300" height="170" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</center>
<br/><br/>
</div>
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<div class="row smallspacerrow">&nbsp;</div>
<!-- INTRO foot (social media likes etc) -->
<div class="row">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="my-box col-lg-9 col-md-9 col-sm-12">
<a href="https://twitter.com/intent/tweet?button_hashtag=communityexplorer&text=Map%20your%20%23network%2C%20explore%20the%20worldwide%20%23complexsystems%20%23community%20at%20all%20scales.%20%23dataviz" class="twitter-hashtag-button" data-url="http://communityexplorer.org">Tweet #communityexplorer</a>
&nbsp;
<div class="fb-like" data-href="http://www.communityexplorer.org" data-width="300" data-layout="standard" data-action="like" data-show-faces="false" data-share="false">
</div>
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<!-- ##################### ( notebook banners ) #################### -->
<!-- colored notebook section: EXPLORE -->
<div class="row spacerrow">&nbsp;</div>
<div class="row banner-row" style="background-color:#00B4E6">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="col-lg-3 col-md-3 col-sm-10">
<div class="panel panel-primary action-announce">
<div class="panel-body">
<div class="cmx-action-wrap">
<img src="{{ url_for('static', filename='img/action_explore.png') }}"
class="cmx-action">
</div>
<h2 class="oldstyle">Graph Explorer</h2>
<p class="mini-hero">
Use our explorer view to browse the map of the community.
<br/>
<br/>
(It's a <strong> network of scholars </strong> connected by their research subjects.)
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-10 wwwpanel">
<div class="panel panel-default">
<div class="panel-heading">
<p class="pull-up-right">
<a target="_blank" href="/explorerjs.html?type=%22filter%22&nodeidparam=%22%257B%257D%22">
<span class="glyphicon glyphicon-new-window"></span>
Open in another tab
</a>
</p>
</div>
<div class="panel-body wwwthumb">
<iframe src="/explorerjs.html?type=%22filter%22&nodeidparam=%22%257B%257D%22" class="wwwthumbsmall" frameborder="0" scrolling="yes">
<p>Your web browser doesn't support iframes. :(</p>
</iframe>
</div>
</div>
</div>
<div class="spacer col-lg-1 col-md-2 hidden-sm-down">&nbsp;</div>
</div>
<!-- white notebook section: PROFILE -->
<div class="row spacerrow">&nbsp;</div>
<div class="row banner-row" style="background-color:#fff">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="col-lg-3 col-md-3 col-sm-10">
<div class="panel panel-primary action-announce">
<div class="panel-body">
<div class="cmx-action-wrap">
<img src="{{ url_for('static', filename='img/action_profile.png') }}"
class="cmx-action">
</div>
<h2 class="oldstyle">Sharing your "carte de visite"</h2>
<p class="mini-hero">
Add your keywords and you will be plotted in the map
<br/>Selecting you will flash a visit card like this:
<div id="information-example">
<br><h4>Information:</h4><ul><li><b>Dr. Jacques Monod</b></li><li><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Jacques_Monod_nobel.jpg" width="80px" style="float:left;margin:5px"><b>Country: </b>France<br><b>Position: </b>Research Director<br><b>Keywords: </b>emergence, biology, systems biology, autopoiesis, biochemistry.<br>[ <a href="https://fr.wikipedia.org/wiki/Jacques_Monod" target="blank"> View homepage </a>]<br></li></ul><br>
</div>
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-10">
<div class="panel panel-default wwwpanel">
<div class="panel-heading">
<p class="pull-up-right">
<a target="_blank" href="/services/user/{% if current_user.info %}profile{% else %}register{% endif %}">
<span class="glyphicon glyphicon-new-window"></span>
Open in another tab
</a>
</p>
</div>
<div class="panel-body wwwthumb">
<iframe src="/services/user/{% if current_user.info %}profile{% else %}register{% endif %}" class="wwwthumb" frameborder="0" scrolling="yes">
<p>Your web browser doesn't support iframes. :(</p>
</iframe>
</div>
</div>
</div>
<div class="spacer col-lg-1 col-md-2 hidden-sm-down">&nbsp;</div>
</div>
<!-- coloured notebook section: STATS -->
<div class="row spacerrow">&nbsp;</div>
<div class="row banner-row" style="background-color:#FAB612">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="col-lg-3 col-md-3 col-sm-10">
<div class="panel panel-primary action-announce">
<div class="panel-body">
<div class="cmx-action-wrap">
<img src="{{ url_for('static', filename='img/action_stats.png') }}"
class="cmx-action">
</div>
<h2 class="oldstyle">Analyze the community structure and trends</h2>
<p class="mini-hero">
Our pie-chart directories allow you to explore <strong>scholars</strong>, <strong>keywords</strong> and <strong>affiliations</strong> statistics for any query.
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-10">
<div class="panel panel-default wwwpanel">
<div class="panel-heading">
<p class="pull-up-right">
<a target="_blank" href="/print_directory.php?query=%7B%7D">
<span class="glyphicon glyphicon-new-window"></span>
Open in another tab
</a>
</p>
</div>
<div class="panel-body wwwthumb">
<iframe src="/print_directory.php?query=%7B%7D" class="wwwthumb" frameborder="0" scrolling="yes">
<p>Your web browser doesn't support iframes. :(</p>
</iframe>
</div>
</div>
</div>
<div class="spacer col-lg-1 col-md-2 hidden-sm-down">&nbsp;</div>
</div>
<!-- white notebook section: QUERY -->
<!-- <div class="row spacerrow">&nbsp;</div>
<div class="row banner-row" style="background-color:#fff">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="col-lg-3 col-md-3 col-sm-10">
<div class="panel panel-primary action-announce">
<div class="panel-body">
<div class="cmx-action-wrap">
<img src="{{ url_for('static', filename='img/action_query.png') }}"
class="cmx-action">
</div>
<h2 class="oldstyle">Refine your search</h2>
<p class="mini-hero">
Use filters to select keywords and scholars matching your subjects of interests.
<ul>
<li>countries</li>
<li>keywords</li>
<li>organizations</li>
<li>labs</li>
<li>community hashtags</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-10">
<div class="panel panel-default wwwpanel">
<div class="panel-heading">
<p class="pull-up-right">
<a target="_blank" href="/index.html">
<span class="glyphicon glyphicon-new-window"></span>
Open in another tab
</a>
</p>
</div>
<div class="panel-body wwwthumb">
TODO schema with queries'explanations
</div>
</div>
</div>
<div class="spacer col-lg-1 col-md-2 hidden-sm-down">&nbsp;</div>
</div> -->
<!-- colored notebook section: EXPLORE2 POSS: insert tina inline -->
<!-- <div class="row spacerrow">&nbsp;</div>
<div class="row banner-row" style="background-color:#00B4E6">
<div class="spacer col-lg-1 col-md-1 hidden-sm-down">&nbsp;</div>
<div class="col-lg-3 col-md-3 col-sm-10">
<div class="panel panel-primary action-announce">
<div class="panel-body">
<div class="cmx-action-wrap">
<img src="{{ url_for('static', filename='img/action_explore.png') }}"
class="cmx-action">
</div>
<h2 class="oldstyle">Graph Explorer</h2>
<p class="mini-hero">
Use our explorer view to browse the map of the community.
<br/>
<br/>
(It's a <strong> network of scholars </strong> connected by their research subjects.)
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-10 wwwpanel">
<div class="panel panel-default">
<div class="panel-heading">
<p class="pull-up-right">
<a target="_blank" href="/explorerjs.html?type=%22filter%22&nodeidparam=%22%257B%257D%22">
<span class="glyphicon glyphicon-new-window"></span>
Open in another tab
</a>
</p>
</div>
<div class="panel-body wwwthumb">
<div class="container container-fluid" id="mini-explorer">
<div id="defaultop" class="navbar navbar-default">
<div class="navbar-collapse collapse navbar-responsive-collapse">
<div id="left" style="margin:0em 2em;">
<ul class="nav navbar-nav">
<li>
<a>
<button type="button" id="changetype" class="btn btn-success btn-sm">Change Type</button>
</a>
</li>
<li>
<a>
<button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
</a>
</li>
<li>
<a>
<div style="margin:0em 2em;" id="unranged-value"></div>
<label style="margin:0em 2em;" for="unranged-value">selector size</label>
</a>
</li>
</ul>
<ul id="category-A" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:0em 1em;">
<li><div id="sliderANodeWeight"></div></li>
<li><div id="sliderAEdgeWeight"></div></li>
<li><div id="sliderANodeSize"></div></li>
</ul>
</li>
</ul>
<ul id="filterslegend" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none;">
<li>Nodes</li>
<li>Edges</li>
<li>Size</li>
</ul>
</li>
</ul>
<ul id="category-B" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:0em 1em;">
<li><div id="sliderBNodeWeight"></div></li>
<li><div id="sliderBEdgeWeight"></div></li>
<li><div id="sliderBNodeSize"></div></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>
<input type="checkbox" id="checkboxdiv" onclick="alertCheckBox(this);">Add</input>
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>
<input id="searchinput" autocomplete="off" class="form-control input-sm col-lg-8" placeholder="Search" type="text">
</a></li>
</ul>
<ul id="colorGraph" class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img title="Set Colors" src="{{ url_for('static', filename='explorerlibs/img2/colors.png') }}" width="20px"><b class="caret"></b></img>
</a>
<ul class="dropdown-menu">
<li><a href="#" onclick='clustersBy("country")'>By Country</a></li>
<li><a href="#" onclick='clustersBy("acronym")'>By Acronym</a></li>
<li><a href="#" onclick='clustersBy("default")'>By Default</a></li>
<li class="divider"></li>
<li><a href="#"> <span class="glyphicon glyphicon-repeat"></span> <strike>Properties</strike></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div id="zonecentre">
<div id="sigma-example"></div>
<div style="visibility: hidden;" id="sigma-othergraph"></div>
<div id="semLoader" style="position:absolute; top:50%; left:40%; width:80px; visibility: hidden;">
<img src="{{ url_for('static', filename='explorerlibs/img2/loading-bar.gif') }}"></img>
</div>
<ul id="ctlzoom">
<li>
<div id="unfold">
<a href="#" id="aUnfold" class="rightarrow"></a>
</div>
</li>
<li>
<a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
<img title="World Map Distribution" width="34px" src="{{ url_for('static', filename='explorerlibs/img2/world.png') }}"></img>
</a>
</li>
<li>
<a href="#" id="snapicon" onclick="saveGraphIMG();" >
<img title="Take a photo!" width="34px" src="{{ url_for('static', filename='explorerlibs/img2/camera.png') }}"></img>
</a>
</li>
<li>
<a href="#" id="saveAs">
<img width="30px" title="Save As..." src="{{ url_for('static', filename='explorerlibs/img2/save.png') }}"></img>
</a>
</li>
<li>
<a href="#" id="zoomPlusButton" title="S'approcher"> </a>
</li>
<li id="zoomSliderzone">
<div id="zoomSlider"></div>
</li>
<li>
<a href="#" id="zoomMinusButton" title="S'éloigner"> </a>
</li>
<li>
<a href="#" id="lensButton"> </a>
</li>
<li>
<a href="#" id="edgesButton"> </a>
</li>
</ul>
</div>
<div id="leftcolumn">
<div id="tips"></div>
<div id="names"></div>
<br>
<div id="tab-container" class='tab-container' style="display: none;">
<ul class='etabs'>
<li id="taboppos" class='tab'><a href="#tabs1">Opposite-Neighbors</a></li>
<li id="tabneigh" class='tab'><a href="#tabs2">Neighbors</a></li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<div id="opossiteNodes"></div>
</div>
<div id="tabs2">
<div id="sameNodes"></div>
</div>
</div>
</div>
<div id="information"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer col-lg-1 col-md-2 hidden-sm-down">&nbsp;</div>
</div> -->
{% endblock %}
<!-- ======================================================================= -->
{% block last_imports %}
<script type="text/javascript">
// ---------
// a copy of the user info in json
// ---------
var uinfo = {{ (current_user.json_info | safe) if current_user.info else ("null" | safe) }};
</script>
<!-- for #mini-explorer -->
<!--
<script src="{{ url_for('static', filename='explorerlibs/jquery/jquery-1.10.2.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/jquery/jquery-ui.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/jquery/jquery.ba-dotimeout.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/jquery/jquery.mousewheel.min.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="{{ url_for('static', filename='explorerlibs/freshslider.1.0.js') }}"></script>
<script src="{{ url_for('static', filename='explorerlibs/readmore.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/jquery/jquery.easytabs.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='explorerlibs/bootswatch/js/bootswatch.js') }}"></script>
<script src="{{ url_for('static', filename='explorerlibs/bootstrap/js/bootstrap-modal.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/bootstrap/js/bootstrap-hover-dropdown.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/globalUtils.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='explorerlibs/geomap2/js/raphael/raphael-min.js') }}" charset="utf-8" ></script>
<script src="{{ url_for('static', filename='explorerlibs/geomap2/js/jquery.mapael.js') }}" charset="utf-8" ></script>
<script src="{{ url_for('static', filename='explorerlibs/geomap2/js/maps/world_countries.js') }}" charset="utf-8" ></script>
<script src="{{ url_for('static', filename='explorerlibs/geomap2/examples.js') }}" charset="utf-8" ></script>
<script src="{{ url_for('static', filename='explorerlibs/geomap2/js/countries_iso3166.js') }}" charset="utf-8" ></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='explorerlibs/geomap2/css/geo.css') }}" />
<script src="{{ url_for('static', filename='tinawebJS/sigma.min.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/sigma.forceatlas2.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/settings_explorerjs.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/sigma.parseCustom.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/extras_explorerjs.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/sigmaUtils.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/methods.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/minimap.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/enviroment.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/asyncFA2.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/DataScanner.js') }}" type="text/javascript" language="javascript"></script>
<script src="{{ url_for('static', filename='tinawebJS/main.js') }}" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$('#tab-container').easytabs({updateHash:false});
</script>
-->
{% endblock %}
{% extends "base_layout.html" %}
{% block headers %}
<title>Formulaire Community Explorer : se ré-enregistrer</title>
<meta name="description" content="Formulaire d'enregistrement sur la plateforme Community Explorer (ISCPIF CNRS UPS 3611)">
<meta name="keywords" content="complex systems, community, registration form">
{% endblock %}
<!-- ======================================================================= -->
{% block main_content %}
<div class="row">
<div class="spacer col-lg-1 hidden-md-down">&nbsp;</div>
<div class="my-box col-lg-9 col-md-11 col-sm-12">
<!-- INTRODUCTION TEXT -->
<div id="intro">
<h2 class="oldstyle">Registration form</h2>
<p class="mini-hero">
<strong>Community Explorer</strong> maps your own socio-semantic network and enables to explore the complex systems researchers community.
<br/>
<br/>
This <strong>registration form</strong> will allow us to update your database information and to create your *login credentials* in <a href="https://{{ doors_connect }}/">the Doors platform (login portal of the institute)</a>.
<br/>
Only the first 3 sections contain the essential information we need for the map, the following ones are optional.
</p>
</div>
<!-- ########################### ( FORM ) ########################## -->
<div class="uform-nobg">
<form id="comex_reg_form" enctype="multipart/form-data"
method="post" onsubmit="console.info('submitted')">
<!-- todo onsubmit also save to cache -->
<div class="accordion" id="reg_full_form">
<!-- login infos for doors -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#login_infos_usection"
aria-controls="login_infos_usection"
id="ccsection_toggle_login_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is your email/password login data.">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-log-in"></span>
Login info
</h2>
</div>
</a>
<div id="login_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse in"
role="tabpanel" aria-expanded="true">
<!-- EMAIL & PASSWORD -->
<!-- <h3 class="formcat"> Login infos </h3> -->
<div class="question">
<!-- POSS login within modal like comex_test_modal -->
<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 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">
<!-- doors return value icon -->
<div class="uicontitmsg input-group-addon"
title="The email will be checked in our DB after you type and leave the box.">
<span class="uicon glyphicon glyphicon-question-sign grey"
></span>
</div>
</div>
<!-- doors return value message -->
<p class="umessage legend"></p>
</div>
<div class="question">
<p class="legend">Please make your password difficult to predict.</p>
<div class="input-group">
<label for="password" class="smlabel input-group-addon">* Password</label>
<input id="password" name="password" maxlength="30"
type="password" class="form-control" placeholder="Create a password">
</div>
</div>
<div class="question">
<div class="input-group">
<label for="password2" class="smlabel input-group-addon">* Password</label>
<input id="password2" name="password2" maxlength="30"
type="password" class="form-control" placeholder="Repeat the password">
</div>
<p class="umessage legend red" style="font-weight:bold"></p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- basic name infos -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#basic_infos_usection"
aria-controls="basic_infos_usection"
id="ccsection_toggle_basic_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is your name and country data">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-user"></span>
Basic info
</h2>
</div>
</a>
<div id="basic_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse out"
role="tabpanel" aria-expanded="false">
<!-- NAME & COUNTRY -->
<div class="question input-group">
<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="eg. Mr or Prof. Dr."
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="hon_title">
</div>
<div class="question input-group">
<label for="first_name" class="smlabel input-group-addon">
* First name
</label>
<input id="first_name" name="first_name" maxlength="30"
type="text" class="form-control" placeholder="prénom"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="first_name">
<div class="input-group-addon"
title="Add middle name(s)">
<button class="btn btn-xs btn-default operation-dark"
title="Opens the input for middle name(s)" id="btn-midname"
type="button">
<span id="btn-midname-icon"
class="glyphicon glyphicon-plus"></span>
Add name
</button>
</div>
</div>
<!-- optionnel -->
<div id="group-midname" class="question input-group" style='display:none'>
<label for="middle_name" class="smlabel input-group-addon">
Middle name
</label>
<input id="middle_name" name="middle_name" maxlength="30"
type="text" class="form-control" placeholder="autres prénoms"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="middle_name">
</div>
<div class="question input-group">
<label for="last_name" class="smlabel input-group-addon">
* Last name
</label>
<input id="last_name" name="last_name" maxlength="30"
type="text" class="form-control" placeholder="nom de famille"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="last_name">
</div>
<input id="initials" name="initials" maxlength="7"
type="text" hidden
placeholder="initials">
<div class="question input-group">
<label for="country" class="smlabel input-group-addon">
* Country
</label>
<input id="country" name="country" maxlength="60"
type="text" class="form-control autocomp"
placeholder="pays"
onblur="if(this.value=='France'){teamCityDivStyle.display = 'block'} else {teamCityDivStyle.display='none'}"
placeholder="country">
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- essential mapping infos -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#map_infos_usection"
aria-controls="map_infos_usection"
id="ccsection_toggle_map_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is the main data that allows us to plot you in the exploration graph and render the 'carte de visite'">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-tags"></span>&nbsp;
Mapping data
</h2>
</div>
</a>
<div id="map_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse in"
role="tabpanel" aria-expanded="true">
<!-- JOB, INTERESTS AND ORGANIZATION -->
<h3 class="formcatfirst"> About your job and research </h3>
<p class="mini-hero">
The <strong>keywords</strong> and <strong>affiliation</strong> will count as similarities to identify your network neighbours. Just start typing... we have autocomplete!
</p>
<div class="question">
<div class="input-group tagbox-container">
<label for="keywords" class="smlabel input-group-addon">* Key subjects</label>
<input id="keywords" name="keywords" maxlength="350"
type="text" class="form-control autocomp" placeholder="keywords"
placeholder="keywords">
</div>
<p class="legend">Please enter at least 5 keywords (press TAB or ENTER after each)</p>
</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="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="position">
</div>
<div class="question">
<div class="input-group">
<label for="team_lab" class="smlabel input-group-addon">* Lab / Team / Dept</label>
<input id="team_lab" name="team_lab" maxlength="120"
type="text" class="form-control" placeholder="Your lab"
placeholder="team_lab">
</div>
</div>
<!-- Lab city <=> only for France -->
<div class="question conditional-q" id="team_city_div">
<div class="input-group">
<label for="org_city" class="smlabel input-group-addon">Lab city</label>
<input id="org_city" name="org_city" maxlength="50"
type="text" class="form-control" placeholder="Ville de votre institution"
placeholder="org_city">
</div>
</div>
<h3 class="formcat"> About your future activities </h3>
<div class="question">
<div class="input-group">
<label for="job_bool" class="smlabel input-group-addon">Soon on the job market? <br/><small>and do you want our job contacts?</small></label>
<select id="job_bool" name="job_bool"
class="custom-select form-control">
<option selected value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<!-- job_looking_date_div <=> only if previous choice == Yes -->
<div class="question conditional-q" id="job_looking_div">
<p class="legend">
We'll show you're available for job offers...
<br/>(it can be until a given date)</p>
<div class="input-group">
<label for="job_looking_date" class="smlabel input-group-addon"><small>Subscribe until ?</small></label>
<input id="job_looking_date" name="job_looking_date" maxlength="10"
type="text" class="form-control" placeholder="ex: 2019/09/30">
</div>
<p id="job_date_message" class="legend red" style="font-weight:bold"></p>
</div>
</div>
<div class="question">
<p class="legend">Hashtags for community interest groups (seminars, mailing lists, events...)</p>
<div class="input-group tagbox-container">
<label for="hashtags" class="smlabel input-group-addon">Interest groups</label>
<input id="hashtags" name="hashtags" maxlength="350"
type="text" class="form-control" placeholder="eg #dataviz, #networks, #rochebrune2018">
</div>
<p class="legend">(press TAB or ENTER after each)</p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- Affiliation -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#org_infos_usection"
aria-controls="org_infos_usection"
id="ccsection_toggle_org_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is your affiliation data, if you want to fill it it'll be available in stats.">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-briefcase"></span>
Affiliation details
</h2>
</div>
</a>
<div id="org_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse out"
role="tabpanel" aria-expanded="false">
<!-- ORG QUESTIONS -->
<div class="question">
<div class="input-group">
<label for="org" class="smlabel input-group-addon">Parent Institution</label>
<input id="org" name="org" maxlength="120"
type="text" class="form-control autocomp" placeholder='eg "CNRS" or "University of Oxford"'
placeholder="org">
</div>
</div>
<div class="question">
<div class="input-group">
<label for="org_type" class="smlabel input-group-addon">Institution Type</label>
<select id="org_type" name="org_type"
class="custom-select form-control"
onchange="if(this.value=='other'){otherInstDivStyle.display = 'block'} else {otherInstDivStyle.display='none'}">
<option selected disabled value="">Please select</option>
<option value="university">University</option>
<option value="public R&amp;D org">Public sector R&amp;D organization</option>
<option value="public other org">Other public sector organization</option>
<option value="private org">Private sector organization</option>
<option value="none">None at the moment</option>
<option value="other"
onclick="otherInstDivStyle.display = 'block'"
>Other</option>
</select>
</div>
<!-- Other institution type <=> only if previous choice == 5 -->
<div class="question conditional-q" id="other_org_div">
<div class="input-group">
<label for="other_org_type" class="smlabel input-group-addon">Other type</label>
<input id="other_org_type" name="other_org_type" maxlength="120"
type="text" class="form-control" placeholder="Clarify here the type of your parent institution">
</div>
</div>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- additional mapping infos -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#other_infos_usection"
aria-controls="other_infos_usection"
id="ccsection_toggle_other_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is additional data like picture, home page, etc.">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-picture"></span>
Additional Personal data
</h2>
</div>
</a>
<div id="other_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse out"
role="tabpanel" aria-expanded="false">
<p class="mini-hero">
The <strong>home page (url)</strong>, <strong>picture (url or file)</strong> and <strong>free description</strong> will allow your neighbours to know you a little better.
</p>
<h3 class="formcat"> Homepage and other IDS </h3>
<div class="question">
<div class="input-group">
<label for="home_url" class="smlabel input-group-addon">Homepage</label>
<input id="home_url" name="home_url" maxlength="120"
type="text" class="form-control autocomp" placeholder='eg "http://www.wittyexample.org/~me"'
placeholder="home_url">
</div>
</div>
<div class="question">
<div class="input-group">
<label for="linked_ids" class="smlabel input-group-addon">Linked IDs</label>
<input id="linked_ids" name="linked_ids" maxlength="120"
type="text" readonly placeholder="available shortly">
</div>
</div>
<h3 class="formcat"> Picture </h3>
<div class="question">
<p class="legend">Link to a picture of yours...</p>
<div class="input-group">
<label for="pic_url" class="smlabel input-group-addon">Picture link</label>
<input id="pic_url" name="pic_url" maxlength="120"
type="text" class="form-control autocomp" placeholder='eg "http://www.wittyexample.org/~me/my_great_pic.png"'
placeholder="pic_url">
</div>
</div>
<div class="question" style="margin-bottom:.5em" >
<p class="legend">... or upload a picture (png, jpg or gif, max source size: 200kB)</p>
<!-- <p class="legend">Upload a picture of yours (max source size: 4MB, then the image will be reduced to 200kB)</p> -->
<div class="input-group">
<label for="pic_file" class="smlabel input-group-addon">Picture</label>
<input type="file" id="pic_file" name="pic_file"
accept="image/png,image/jpeg" class="form-control"
onchange="cmxClt.uform.checkShowPic(this)">
<!-- £TODO retrieve and show db picture if not None -->
</div>
<p id="picture_message" class="legend red" style="font-weight:bold"></p>
</div>
<div id="box_show_pic">
<img id="show_pic" src=""></img>
</div>
<!-- OTHER PERSONAL INFO -->
<h3 class="formcat"> Complementary information </h3>
<div class="question">
<div class="input-group">
<label for="gender" class="smlabel input-group-addon">Gender</label>
<select id="gender" name="gender"
class="custom-select form-control">
<option selected value="0">Select your gender</option>
<option value="F">Woman</option>
<option value="M">Man</option>
</select>
<!-- £TODO js select current_user.info.gender -->
</div>
</div>
<div class="question">
<div class="input-group">
<label for="interests_text" class="input-group-addon">
Personal interests
</label>
<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 scientific interests."
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="interests_text"></textarea>
</div>
<p class="legend">Optional, ~15 lines max (1200 chars)</p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- hidden input for doors "hostname:port" -->
<input id="doors_connect" name="doors_connect" type="text" hidden value="{{doors_connect|safe}}">
</input>
<!-- hidden input for modification date -->
<input id="last_modified_date" name="last_modified_date" type="text" hidden>
</input>
<!-- hidden input for doors user id -->
<input id="doors_uid" name="doors_uid" type="text" hidden>
</input>
<!-- hidden input for captcha verification hash -->
<input id="my-captchaHash" name="my-captchaHash" type="text" hidden>
</input>
<!-- CAPTCHA & SUBMIT BTN + INFOS-->
<h3 class="formcat">Verify and submit</h3>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<div>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
</div>
<p class="legend legend-float">(A challenge for spam bots)</p>
</div>
<!-- == S U B M I T == -->
<!-- button instead of input.submit to validate before real submit action -->
<!-- also remember stackoverflow.com/a/3315016/2489184 -->
<button class="btn btn-lg btn-success" style="float:right"
id="form_submit" type=button disabled
onclick="if (validateAndMsg(event)) {registerDoorsAndSubmit()}">
Submit your form
</button>
</div>
</form>
<!-- FOR DEBUG: test go-between with Doors -->
<!-- <p>
<button type=button onclick='cmxClt.uauth.callDoors("user", [regfo.elEmail.value, regfo.elEmail.elPass.value], console.warn)'>
test doors login
</button>
<button type=button onclick='cmxClt.uauth.callDoors("register", [regfo.elEmail.elEmail.value, regfo.elEmail.elPass.value, "anyname"], console.warn)'>
test doors register
</button>
<button type=button onclick='cmxClt.uauth.callDoors("userExists", [regfo.elEmail.elEmail.value], console.warn)'>
test doors userExists
</button>
</p> -->
</div>
</div>
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<div class="menu-right-fixed">
<!-- main validation message -->
<p id="main_message" class="legend" style="display:none"></p>
</div>
{% endblock %}
<!-- ======================================================================= -->
{% block last_imports %}
<!-- our js -->
<script src="{{ url_for('static', filename='js/comex_page_reg_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
{% endblock %}
{% extends "base_layout.html" %}
{% block headers %}
<title>Formulaire Community Explorer : se ré-enregistrer</title>
<meta name="description" content="Formulaire d'enregistrement sur la plateforme Community Explorer (ISCPIF CNRS UPS 3611)">
<meta name="keywords" content="complex systems, community, registration form">
{% endblock %}
<!-- ======================================================================= -->
{% block main_content %}
<div class="row">
<div class="spacer col-lg-1 hidden-md-down">&nbsp;</div>
<div class="my-box col-lg-9 col-md-11 col-sm-12">
<!-- INTRODUCTION TEXT -->
<div id="intro">
<h2 class="oldstyle">Registration form</h2>
<p class="mini-hero">
<strong>Community Explorer</strong> maps your own socio-semantic network and enables to explore the complex systems researchers community.
<br/>
<br/>
This <strong>registration form</strong> will allow us to update your database information and to create your *login credentials* in <a href="https://{{ doors_connect }}/">the Doors platform (login portal of the institute)</a>.
</p>
</div>
<!-- ########################### ( FORM ) ########################## -->
<div class="uform-nobg">
<form id="comex_reg_form" enctype="multipart/form-data"
method="post" onsubmit="console.info('submitted')">
<!-- todo onsubmit also save to cache -->
<div class="accordion" id="reg_full_form">
<!-- login infos for doors -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#login_infos_usection"
aria-controls="login_infos_usection"
id="ccsection_toggle_login_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is your email/password login data.">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-log-in"></span>
Login info
</h2>
</div>
</a>
<div id="login_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse in"
role="tabpanel" aria-expanded="true">
<!-- EMAIL & PASSWORD -->
<!-- <h3 class="formcat"> Login infos </h3> -->
<div class="question">
<!-- POSS login within modal like comex_test_modal -->
<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 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">
<!-- doors return value icon -->
<div class="uicontitmsg input-group-addon"
title="The email will be checked in our DB after you type and leave the box.">
<span class="uicon glyphicon glyphicon-question-sign grey"
></span>
</div>
</div>
<!-- doors return value message -->
<p class="umessage legend"></p>
</div>
<div class="question">
<p class="legend">Please make your password difficult to predict.</p>
<div class="input-group">
<label for="password" class="smlabel input-group-addon">* Password</label>
<input id="password" name="password" maxlength="30"
type="password" class="form-control" placeholder="Create a password">
</div>
</div>
<div class="question">
<div class="input-group">
<label for="password2" class="smlabel input-group-addon">* Password</label>
<input id="password2" name="password2" maxlength="30"
type="password" class="form-control" placeholder="Repeat the password">
</div>
<p class="umessage legend red" style="font-weight:bold"></p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- basic name infos -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#basic_infos_usection"
aria-controls="basic_infos_usection"
id="ccsection_toggle_basic_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is your name and country data">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-user"></span>
Basic info
</h2>
</div>
</a>
<div id="basic_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse out"
role="tabpanel" aria-expanded="false">
<!-- NAME & COUNTRY -->
<div class="question input-group">
<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="eg. Mr or Prof. Dr."
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="hon_title">
</div>
<div class="question input-group">
<label for="first_name" class="smlabel input-group-addon">
* First name
</label>
<input id="first_name" name="first_name" maxlength="30"
type="text" class="form-control" placeholder="prénom"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="first_name">
<div class="input-group-addon"
title="Add middle name(s)">
<button class="btn btn-xs btn-default operation-dark"
title="Opens the input for middle name(s)" id="btn-midname"
type="button">
<span id="btn-midname-icon"
class="glyphicon glyphicon-plus"></span>
Add name
</button>
</div>
</div>
<!-- optionnel -->
<div id="group-midname" class="question input-group" style='display:none'>
<label for="middle_name" class="smlabel input-group-addon">
Middle name
</label>
<input id="middle_name" name="middle_name" maxlength="30"
type="text" class="form-control" placeholder="autres prénoms"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="middle_name">
</div>
<div class="question input-group">
<label for="last_name" class="smlabel input-group-addon">
* Last name
</label>
<input id="last_name" name="last_name" maxlength="30"
type="text" class="form-control" placeholder="nom de famille"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="last_name">
</div>
<input id="initials" name="initials" maxlength="7"
type="text" hidden
placeholder="initials">
<div class="question input-group">
<label for="country" class="smlabel input-group-addon">
* Country
</label>
<input id="country" name="country" maxlength="60"
type="text" class="form-control autocomp"
placeholder="pays"
onblur="if(this.value=='France'){teamCityDivStyle.display = 'block'} else {teamCityDivStyle.display='none'}"
placeholder="country">
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- essential mapping infos -->
<div class="panel ccsection-wrap">
<a class="ccsection-toggle"
data-parent="#reg_full_form"
data-toggle="collapse"
href="#map_infos_usection"
aria-controls="map_infos_usection"
id="ccsection_toggle_map_infos">
<div class="panel-heading ccsection-heading" role="tab">
<h2 class="ccsection"
title="This is the main data that allows us to plot you in the exploration graph and render the 'carte de visite'">
<span class="glyphicon glyphicon-collapse-down glyphicon-float-right"></span>
<span class="glyphicon glyphicon-tags"></span>&nbsp;
Mapping data
</h2>
</div>
</a>
<div id="map_infos_usection"
class="panel-body ccsection-uform-body panel-collapse collapse in"
role="tabpanel" aria-expanded="true">
<!-- JOB, INTERESTS AND ORGANIZATION -->
<h3 class="formcatfirst"> About your job and research </h3>
<p class="mini-hero">
The <strong>keywords</strong> and <strong>affiliation</strong> will count as similarities to identify your network neighbours. Just start typing... we have autocomplete!
</p>
<div class="question">
<div class="input-group">
<label for="keywords" class="smlabel input-group-addon tagbox-container">* Key subjects</label>
<input id="keywords" name="keywords" maxlength="350"
type="text" class="form-control autocomp" placeholder="keywords"
placeholder="keywords">
</div>
<p class="legend">Please enter at least 5 keywords (press TAB or ENTER after each)</p>
</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="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)"
placeholder="position">
</div>
<div class="question">
<div class="input-group">
<label for="team_lab" class="smlabel input-group-addon">* Lab / Team / Dept</label>
<input id="team_lab" name="team_lab" maxlength="120"
type="text" class="form-control" placeholder="Your lab"
placeholder="team_lab">
</div>
</div>
<!-- Lab city <=> only for France -->
<div class="question conditional-q" id="team_city_div">
<div class="input-group">
<label for="org_city" class="smlabel input-group-addon">Lab city</label>
<input id="org_city" name="org_city" maxlength="50"
type="text" class="form-control" placeholder="Ville de votre institution"
placeholder="org_city">
</div>
</div>
<h3 class="formcat"> About your future activities </h3>
<div class="question">
<div class="input-group">
<label for="job_bool" class="smlabel input-group-addon">Soon on the job market? <br/><small>and do you want our job contacts?</small></label>
<select id="job_bool" name="job_bool"
class="custom-select form-control">
<option selected value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<!-- job_looking_date_div <=> only if previous choice == Yes -->
<div class="question conditional-q" id="job_looking_div">
<p class="legend">
We'll show you're available for job offers...
<br/>(it can be until a given date)</p>
<div class="input-group">
<label for="job_looking_date" class="smlabel input-group-addon"><small>Subscribe until ?</small></label>
<input id="job_looking_date" name="job_looking_date" maxlength="10"
type="text" class="form-control" placeholder="ex: 2019/09/30">
</div>
<p id="job_date_message" class="legend red" style="font-weight:bold"></p>
</div>
</div>
<div class="question">
<p class="legend">Hashtags for community interest groups (seminars, mailing lists, events...)</p>
<div class="input-group tagbox-container">
<label for="hashtags" class="smlabel input-group-addon">Interest groups</label>
<input id="hashtags" name="hashtags" maxlength="350"
type="text" class="form-control" placeholder="eg #dataviz, #networks, #rochebrune2018">
</div>
<p class="legend">(press TAB or ENTER after each)</p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
</div>
<!-- hidden input for doors "hostname:port" -->
<input id="doors_connect" name="doors_connect" type="text" hidden value="{{doors_connect|safe}}">
</input>
<!-- hidden input for modification date -->
<input id="last_modified_date" name="last_modified_date" type="text" hidden>
</input>
<!-- hidden input for doors user id -->
<input id="doors_uid" name="doors_uid" type="text" hidden>
</input>
<!-- hidden input for captcha verification hash -->
<input id="my-captchaHash" name="my-captchaHash" type="text" hidden>
</input>
<!-- CAPTCHA & SUBMIT BTN + INFOS-->
<h3 class="formcat">Verify and submit</h3>
<!--pseudo captcha using realperson from http://keith-wood.name/realPerson.html -->
<div class="question input-group">
<label for="my-captcha" class="smlabel input-group-addon">Code</label>
<div>
<input id="my-captcha" name="my-captcha" style="max-width:60%"
type="text" class="form-control input-lg" placeholder="Enter the 5 letters beside =>"
onblur="cmxClt.makeBold(this)" onfocus="cmxClt.makeNormal(this)">
</div>
<p class="legend legend-float">(A challenge for spam bots)</p>
</div>
<!-- == S U B M I T == -->
<!-- button instead of input.submit to validate before real submit action -->
<!-- also remember stackoverflow.com/a/3315016/2489184 -->
<button class="btn btn-lg btn-success" style="float:right"
id="form_submit" type=button disabled
onclick="if (validateAndMsg(event)) {registerDoorsAndSubmit()}">
Submit your form
</button>
</div>
</form>
<!-- FOR DEBUG: test go-between with Doors -->
<!-- <p>
<button type=button onclick='cmxClt.uauth.callDoors("user", [regfo.elEmail.value, regfo.elEmail.elPass.value], console.warn)'>
test doors login
</button>
<button type=button onclick='cmxClt.uauth.callDoors("register", [regfo.elEmail.elEmail.value, regfo.elEmail.elPass.value, "anyname"], console.warn)'>
test doors register
</button>
<button type=button onclick='cmxClt.uauth.callDoors("userExists", [regfo.elEmail.elEmail.value], console.warn)'>
test doors userExists
</button>
</p> -->
</div>
</div>
<div class="spacer col-lg-2 col-md-1 hidden-sm-down">&nbsp;</div>
</div>
<div class="menu-right-fixed">
<!-- main validation message -->
<p id="main_message" class="legend" style="display:none"></p>
</div>
{% endblock %}
<!-- ======================================================================= -->
{% block last_imports %}
<!-- our js -->
<script src="{{ url_for('static', filename='js/comex_page_reg_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
{% endblock %}
......@@ -5,7 +5,7 @@
<meta name="description" content="Community Explorer Wall">
<meta name="keywords" content="community, user profiles, data exploration">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/comex_alt.css') }}">
<link type=text/css rel=stylesheet href="{{ url_for('static', filename='css/comex_index.css') }}">
<!-- for news vertical marquee -->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.vticker-min.js') }}"></script>
......
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