Add login and sync support

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);

inc/myco_objects.js

@@ -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();
+      }
+    }
+  }
+
+}

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">&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-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">&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>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="inc/lib/jquery-1.10.2.min.js"></script>