Add login and sync support

This commit is contained in:
Benjamin Renard 2014-01-12 01:24:16 +01:00
parent 507e86c2da
commit 5891b19968
3 changed files with 289 additions and 3 deletions

View file

@ -366,6 +366,117 @@ on_confirm_remove_group=function(group) {
} }
} }
/********************
* Login
********************/
on_close_login_modal=function(e) {
$('#login_modal form')[0].reset();
}
sync_server=false;
on_valid_login_modal=function(e) {
email=$('#login_modal #login_email')[0].value;
pass=$('#login_modal #login_pass')[0].value;
server=$('#login_modal #login_server')[0].value;
$('#login_modal').modal('hide');
sync_server.login(server,email,pass,
function(data) {
localStorage.user=JSON.stringify({
'name': data.name,
'email': email,
'password': pass,
'server': server,
});
logged_menu();
},
function(data) {
if (jQuery.type(data) != 'object' && data.loginerror) {
alert(data.loginerror);
}
else {
console.log(data);
alert('Erreur durant la connexion au serveur');
}
}
);
}
/********************
* Sync
********************/
on_click_sync_btn=function(e) {
if (jQuery.type(localStorage.user)!="undefined") {
user=JSON.parse(localStorage.user);
localStorage.oldgroups=groups.export();
sync_server.sync(user.server, user.email, user.password, groups.export(),
function(data) {
console.log(data);
if (data.groups) {
groups.import(data.groups);
groups.save();
refresh_group_list();
alert('Groupes synchronisés');
}
else {
console.log(data);
alert('Erreur durant la synchronisation :(');
}
},
function(data) {
console.log(data);
alert('Impossible de contacter le serveur :(');
}
);
}
else {
alert("Vous devez vous connecter pour commencer");
$('#login_modal').modal('show');
}
}
/*
* User menu
*/
user=false;
logged_menu=function() {
user=JSON.parse(localStorage.user);
$('#user-name').html(user.name);
$('#user-menu li').remove();
menu=$('#user-menu');
menu.html("<li><a id='myaccount_btn'>Mon compte</a></li>"+
"<li><a id='sync_btn'>Synchroniser</a></li>" +
"<li class='divider'></li>" +
"<li><a id='logoff_btn'>Déconnexion</a></li>");
$('#myaccount_btn').bind('click',on_click_myaccount_btn);
$('#sync_btn').bind('click',on_click_sync_btn);
$('#logoff_btn').bind('click',on_click_logoff_btn);
}
logged_out_menu=function() {
$('#user-name').html('Connexion');
$('#user-menu li').remove();
menu=$('#user-menu');
menu.html("<li><a id='login_btn'>Connexion</a></li>");
$('#login_btn').bind('click',on_click_login_btn);
}
on_click_myaccount_btn=function() {
$('#myaccount_modal #myaccount_email').html(user.email);
$('#myaccount_modal #myaccount_name')[0].value=user.name;
$('#myaccount_modal').modal('show');
}
on_click_login_btn=function() {
$('#login_modal').modal('show');
}
on_click_logoff_btn=function() {
delete localStorage.user;
logged_out_menu();
}
/********************* /*********************
* Activate * Activate
@ -375,10 +486,18 @@ $( document ).ready( function() {
groups=new GroupList(); groups=new GroupList();
groups.loadFromLocalStorage(); groups.loadFromLocalStorage();
refresh_group_list(); refresh_group_list();
if (jQuery.type(localStorage.user)!='undefined') {
logged_menu();
}
else {
logged_out_menu();
}
} }
else { else {
alert('Local storage not supported !'); alert('Local storage not supported !');
return;
} }
sync_server=new SyncServer();
$('#add_group_btn').bind('click',on_click_add_group_btn); $('#add_group_btn').bind('click',on_click_add_group_btn);
$('#add_group_submit').bind('click',on_valid_add_group_modal); $('#add_group_submit').bind('click',on_valid_add_group_modal);
@ -388,6 +507,10 @@ $( document ).ready( function() {
$('#clear_local_data').bind('click',clear_local_data); $('#clear_local_data').bind('click',clear_local_data);
$('#login_modal').on('hidden.bs.modal',on_close_login_modal);
$('#login_modal #login_submit').bind('click',on_valid_login_modal);
$('#login_modal form').bind('submit',on_valid_login_modal);
$('#view-group #contributor').bind('change',on_contributor_change); $('#view-group #contributor').bind('change',on_contributor_change);
$('#add_contributor_btn').bind('click',on_click_add_contributor_btn); $('#add_contributor_btn').bind('click',on_click_add_contributor_btn);

View file

@ -22,6 +22,20 @@ function GroupList() {
return ret; return ret;
} }
this.import=function(groups) {
ret={};
for (el in this) {
if (this.isGroup(this[el])) {
delete ret[el];
}
}
for (el in groups) {
this[el]=new Group(el,groups[el]);
}
return true;
}
this.save=function() { this.save=function() {
localStorage.groups=JSON.stringify({ localStorage.groups=JSON.stringify({
'lastChange': new Date().getTime(), 'lastChange': new Date().getTime(),
@ -228,3 +242,73 @@ function Contribution(contributor,cost,title,date,id,lastChange) {
return ''; return '';
} }
} }
function SyncServer() {
this.url=false;
this.email=false;
this.password=false;
this.logged=false;
this.login=function(url,email,password,onsuccess,onerror) {
this.url=url;
this.email=email;
this.password=password;
try {
jQuery.getJSON(
this.url+'/login',
{'email':email,'password':password},
function(data, textStatus) {
console.log(data);
if (textStatus=='success') {
if(jQuery.type(data.email) && jQuery.type(data.name)) {
console.log('Login success return');
console.log(onsuccess);
onsuccess(data);
return true;
}
}
onerror(data);
}
).fail(onerror);
}
catch(e) {
if(jQuery.type(onerror)=='function') {
onerror();
}
}
}
this.sync=function(url,email,password,groups,onsuccess,onerror) {
this.url=url;
this.email=email;
this.password=password;
try {
jQuery.getJSON(
this.url+'/sync',
{
'email':email,
'password':password,
'groups': JSON.stringify(groups)
},
function(data, textStatus) {
console.log(data);
if (textStatus=='success') {
if(jQuery.type(data.groups)) {
console.log('Sync success return');
onsuccess(data);
return true;
}
}
onerror(data);
}
).fail(onerror);
}
catch(e) {
if(jQuery.type(onerror)=='function') {
onerror();
}
}
}
}

View file

@ -58,14 +58,21 @@ body{
<div class="collapse navbar-collapse" id="navbar-groupe-collapse"> <div class="collapse navbar-collapse" id="navbar-groupe-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Groupe <b class="caret"></b></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-th-list'></span> Groupe <b class="caret"></b></a>
<ul id="group-choice" class="dropdown-menu"> <ul id="group-choice" class="dropdown-menu">
<li class="divider"></li> <li class="divider"></li>
<li><a href="#" id='add_group_btn' data-toggle="modal" data-target="#add_group_modal">Nouveau</a></li> <li><a href="#" id='add_group_btn' data-toggle="modal" data-target="#add_group_modal"><span class='glyphicon glyphicon-plus'><span> Nouveau</a></li>
<li><a id='clear_local_data'><span class='glyphicon glyphicon-trash'></span> Purger les données locales</a></li>
</ul> </ul>
</li> </li>
<li><a id='clear_local_data'>Purger les données locales</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-user'></span> <span id='user-name'>Connexion</span> <b class="caret"></b></a>
<ul id="user-menu" class="dropdown-menu"></ul>
</li>
</ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div> </div>
@ -187,6 +194,42 @@ body{
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div> </div>
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Connexion</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Email *</span>
<input type='text' id='login_email' class="form-control" placeholder='Email'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Mot de passe *</span>
<input type='password' id='login_pass' class="form-control" placeholder='Mot de passe'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Serveur *</span>
<input type='text' id='login_server' class="form-control" value='http://myco.zionetrix.net'/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id='login_submit'>Connexion</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="add_contribution_modal" tabindex="-1" role="dialog" aria-labelledby="addContributorModal" aria-hidden="true"> <div class="modal fade" id="add_contribution_modal" tabindex="-1" role="dialog" aria-labelledby="addContributorModal" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
@ -281,6 +324,42 @@ body{
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div> </div>
<div class="modal fade" id="myaccount_modal" tabindex="-1" role="dialog" aria-labelledby="myaccountModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Mon compte</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static" id='myaccount_email'></p>
</div>
</div>
<div class="form-group">
<label "inputName" class="col-sm-2 control-label">Nom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="myaccount_name" placeholder="Nom" disabled>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="myaccount_password" placeholder="Mot de passe" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div> </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="inc/lib/jquery-1.10.2.min.js"></script> <script src="inc/lib/jquery-1.10.2.min.js"></script>