Add login and sync support
This commit is contained in:
parent
507e86c2da
commit
5891b19968
123
inc/myco.js
123
inc/myco.js
|
|
@ -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
|
||||
|
|
@ -375,10 +486,18 @@ $( document ).ready( function() {
|
|||
groups=new GroupList();
|
||||
groups.loadFromLocalStorage();
|
||||
refresh_group_list();
|
||||
if (jQuery.type(localStorage.user)!='undefined') {
|
||||
logged_menu();
|
||||
}
|
||||
else {
|
||||
logged_out_menu();
|
||||
}
|
||||
}
|
||||
else {
|
||||
alert('Local storage not supported !');
|
||||
return;
|
||||
}
|
||||
sync_server=new SyncServer();
|
||||
|
||||
$('#add_group_btn').bind('click',on_click_add_group_btn);
|
||||
$('#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);
|
||||
|
||||
$('#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);
|
||||
|
||||
$('#add_contributor_btn').bind('click',on_click_add_contributor_btn);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,20 @@ function GroupList() {
|
|||
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() {
|
||||
localStorage.groups=JSON.stringify({
|
||||
'lastChange': new Date().getTime(),
|
||||
|
|
@ -228,3 +242,73 @@ function Contribution(contributor,cost,title,date,id,lastChange) {
|
|||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
85
index.html
85
index.html
|
|
@ -58,14 +58,21 @@ body{
|
|||
<div class="collapse navbar-collapse" id="navbar-groupe-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<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">
|
||||
<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>
|
||||
</li>
|
||||
<li><a id='clear_local_data'>Purger les données locales</a></li>
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -187,6 +194,42 @@ body{
|
|||
</div><!-- /.modal-dialog -->
|
||||
</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">×</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-dialog">
|
||||
|
|
@ -281,6 +324,42 @@ body{
|
|||
</div><!-- /.modal-dialog -->
|
||||
</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">×</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>
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="inc/lib/jquery-1.10.2.min.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue