MyCo

Add login and sync support
Parent 507e86c
Benjamin Renard

Benjamin Renard commited on 2014-01-12 00:24:16
Showing 3 changed files, with 289 additions and 3 deletions.

inc/myco.js
View file @ 5891b19
... ... 
@@ -366,6 +366,117 @@ on_confirm_remove_group=function(group) {
366 366 
   }
367 367 
 }
368 368
369 
+/********************
370 
+ * Login
371 
+ ********************/
372 
+on_close_login_modal=function(e) {
373 
+  $('#login_modal form')[0].reset();
374 
+}
375 
+
376 
+sync_server=false;
377 
+on_valid_login_modal=function(e) {
378 
+  email=$('#login_modal #login_email')[0].value;
379 
+  pass=$('#login_modal #login_pass')[0].value;
380 
+  server=$('#login_modal #login_server')[0].value;
381 
+  $('#login_modal').modal('hide');
382 
+  sync_server.login(server,email,pass,
383 
+    function(data) {
384 
+      localStorage.user=JSON.stringify({
385 
+        'name': data.name,
386 
+        'email': email,
387 
+        'password': pass,
388 
+        'server': server,
389 
+      });
390 
+      logged_menu();
391 
+    },
392 
+    function(data) {
393 
+      if (jQuery.type(data) != 'object' && data.loginerror) {
394 
+        alert(data.loginerror);
395 
+      }
396 
+      else {
397 
+        console.log(data);
398 
+        alert('Erreur durant la connexion au serveur');
399 
+      }
400 
+    }
401 
+  );
402 
+}
403 
+
404 
+
405 
+
406 
+/********************
407 
+ * Sync
408 
+ ********************/
409 
+on_click_sync_btn=function(e) {
410 
+  if (jQuery.type(localStorage.user)!="undefined") {
411 
+    user=JSON.parse(localStorage.user);
412 
+    localStorage.oldgroups=groups.export();
413 
+    sync_server.sync(user.server, user.email, user.password, groups.export(),
414 
+      function(data) {
415 
+        console.log(data);
416 
+        if (data.groups) {
417 
+          groups.import(data.groups);
418 
+          groups.save();
419 
+          refresh_group_list();
420 
+          alert('Groupes synchronisés');
421 
+        }
422 
+        else {
423 
+          console.log(data);
424 
+          alert('Erreur durant la synchronisation :(');
425 
+        }
426 
+      },
427 
+      function(data) {
428 
+        console.log(data);
429 
+        alert('Impossible de contacter le serveur :(');
430 
+      }
431 
+    );
432 
+  }
433 
+  else {
434 
+    alert("Vous devez vous connecter pour commencer");
435 
+    $('#login_modal').modal('show');
436 
+  }
437 
+}
438 
+
439 
+/*
440 
+ * User menu
441 
+ */
442 
+user=false;
443 
+logged_menu=function() {
444 
+  user=JSON.parse(localStorage.user);
445 
+  $('#user-name').html(user.name);
446 
+  $('#user-menu li').remove();
447 
+  menu=$('#user-menu');
448 
+  menu.html("<li><a id='myaccount_btn'>Mon compte</a></li>"+
449 
+  "<li><a id='sync_btn'>Synchroniser</a></li>" +
450 
+  "<li class='divider'></li>" +
451 
+  "<li><a id='logoff_btn'>Déconnexion</a></li>");
452 
+  $('#myaccount_btn').bind('click',on_click_myaccount_btn);
453 
+  $('#sync_btn').bind('click',on_click_sync_btn);
454 
+  $('#logoff_btn').bind('click',on_click_logoff_btn);
455 
+}
456 
+
457 
+logged_out_menu=function() {
458 
+  $('#user-name').html('Connexion');
459 
+  $('#user-menu li').remove();
460 
+  menu=$('#user-menu');
461 
+  menu.html("<li><a id='login_btn'>Connexion</a></li>");
462 
+  $('#login_btn').bind('click',on_click_login_btn);
463 
+}
464 
+
465 
+on_click_myaccount_btn=function() {
466 
+  $('#myaccount_modal #myaccount_email').html(user.email);
467 
+  $('#myaccount_modal #myaccount_name')[0].value=user.name;
468 
+  $('#myaccount_modal').modal('show');
469 
+}
470 
+
471 
+on_click_login_btn=function() {
472 
+  $('#login_modal').modal('show');
473 
+}
474 
+
475 
+on_click_logoff_btn=function() {
476 
+  delete localStorage.user;
477 
+  logged_out_menu();
478 
+}
479 
+
369 480
370 481 
 /*********************
371 482 
  * Activate
... ... 
@@ -375,10 +486,18 @@ $( document ).ready( function() {
375 486 
     groups=new GroupList();
376 487 
     groups.loadFromLocalStorage();
377 488 
     refresh_group_list();
489 
+    if (jQuery.type(localStorage.user)!='undefined') {
490 
+      logged_menu();
491 
+    }
492 
+    else {
493 
+      logged_out_menu();
494 
+    }
378 495 
   }
379 496 
   else {
380 497 
     alert('Local storage not supported !');
498 
+    return;
381 499 
   }
500 
+  sync_server=new SyncServer();
382 501
383 502 
   $('#add_group_btn').bind('click',on_click_add_group_btn);
384 503 
   $('#add_group_submit').bind('click',on_valid_add_group_modal);
... ... 
@@ -388,6 +507,10 @@ $( document ).ready( function() {
388 507
389 508 
   $('#clear_local_data').bind('click',clear_local_data);
390 509
510 
+  $('#login_modal').on('hidden.bs.modal',on_close_login_modal);
511 
+  $('#login_modal #login_submit').bind('click',on_valid_login_modal);
512 
+  $('#login_modal form').bind('submit',on_valid_login_modal);
513 
+
391 514 
   $('#view-group #contributor').bind('change',on_contributor_change);
392 515
393 516 
   $('#add_contributor_btn').bind('click',on_click_add_contributor_btn);
inc/myco_objects.js
View file @ 5891b19
... ... 
@@ -22,6 +22,20 @@ function GroupList() {
22 22 
     return ret;
23 23 
   }
24 24
25 
+  this.import=function(groups) {
26 
+    ret={};
27 
+    for (el in this) {
28 
+      if (this.isGroup(this[el])) {
29 
+        delete ret[el];
30 
+      }
31 
+    }
32 
+    for (el in groups) {
33 
+      this[el]=new Group(el,groups[el]);
34 
+    }
35 
+    return true;
36 
+  }
37 
+
38 
+
25 39 
   this.save=function() {
26 40 
     localStorage.groups=JSON.stringify({
27 41 
       'lastChange': new Date().getTime(),
... ... 
@@ -228,3 +242,73 @@ function Contribution(contributor,cost,title,date,id,lastChange) {
228 242 
     return '';
229 243 
   }
230 244 
 }
245 
+
246 
+function SyncServer() {
247 
+  this.url=false;
248 
+  this.email=false;
249 
+  this.password=false;
250 
+  this.logged=false;
251 
+
252 
+  this.login=function(url,email,password,onsuccess,onerror) {
253 
+    this.url=url;
254 
+    this.email=email;
255 
+    this.password=password;
256 
+
257 
+    try {
258 
+      jQuery.getJSON(
259 
+        this.url+'/login',
260 
+        {'email':email,'password':password},
261 
+        function(data, textStatus) {
262 
+          console.log(data);
263 
+          if (textStatus=='success') {
264 
+            if(jQuery.type(data.email) && jQuery.type(data.name)) {
265 
+              console.log('Login success return');
266 
+              console.log(onsuccess);
267 
+              onsuccess(data);
268 
+              return true;
269 
+            }
270 
+          }
271 
+          onerror(data);
272 
+        }
273 
+      ).fail(onerror);
274 
+    }
275 
+    catch(e) {
276 
+      if(jQuery.type(onerror)=='function') {
277 
+        onerror();
278 
+      }
279 
+    }
280 
+  }
281 
+
282 
+  this.sync=function(url,email,password,groups,onsuccess,onerror) {
283 
+    this.url=url;
284 
+    this.email=email;
285 
+    this.password=password;
286 
+    try {
287 
+      jQuery.getJSON(
288 
+        this.url+'/sync',
289 
+        {
290 
+          'email':email,
291 
+          'password':password,
292 
+          'groups': JSON.stringify(groups)
293 
+        },
294 
+        function(data, textStatus) {
295 
+          console.log(data);
296 
+          if (textStatus=='success') {
297 
+            if(jQuery.type(data.groups)) {
298 
+              console.log('Sync success return');
299 
+              onsuccess(data);
300 
+              return true;
301 
+            }
302 
+          }
303 
+          onerror(data);
304 
+        }
305 
+      ).fail(onerror);
306 
+    }
307 
+    catch(e) {
308 
+      if(jQuery.type(onerror)=='function') {
309 
+        onerror();
310 
+      }
311 
+    }
312 
+  }
313 
+
314 
+}
index.html
View file @ 5891b19
... ... 
@@ -58,14 +58,21 @@ body{
58 58 
         <div class="collapse navbar-collapse"  id="navbar-groupe-collapse">
59 59 
           <ul class="nav navbar-nav">
60 60 
             <li class="dropdown">
61 
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Groupe <b class="caret"></b></a>
61 
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-th-list'></span> Groupe <b class="caret"></b></a>
62 62 
               <ul id="group-choice" class="dropdown-menu">
63 63 
                 <li class="divider"></li>
64 
-                <li><a href="#" id='add_group_btn' data-toggle="modal" data-target="#add_group_modal">Nouveau</a></li>
64 
+                <li><a href="#" id='add_group_btn' data-toggle="modal" data-target="#add_group_modal"><span class='glyphicon glyphicon-plus'><span> Nouveau</a></li>
65 
+                <li><a id='clear_local_data'><span class='glyphicon glyphicon-trash'></span> Purger les données locales</a></li>
65 66 
               </ul>
66 67 
             </li>
67 
-            <li><a id='clear_local_data'>Purger les données locales</a></li>
68 68 
           </ul>
69 
+          <ul class="nav navbar-nav navbar-right">
70 
+            <li class="dropdown">
71 
+              <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>
72 
+              <ul id="user-menu" class="dropdown-menu"></ul>
73 
+            </li>
74 
+          </ul>
75 
+
69 76 
         </div><!--/.nav-collapse -->
70 77 
       </div>
71 78 
     </div>
... ... 
@@ -187,6 +194,42 @@ body{
187 194 
   </div><!-- /.modal-dialog -->
188 195 
 </div>
189 196
197 
+<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
198 
+  <div class="modal-dialog">
199 
+    <div class="modal-content">
200 
+      <div class="modal-header">
201 
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
202 
+        <h4 class="modal-title">Connexion</h4>
203 
+      </div>
204 
+      <div class="modal-body">
205 
+        <form class="form-horizontal" role="form">
206 
+          <div class="form-group">
207 
+            <div class="input-group">
208 
+              <span class="input-group-addon">Email *</span>
209 
+              <input type='text' id='login_email' class="form-control" placeholder='Email'/>
210 
+            </div>
211 
+          </div>
212 
+          <div class="form-group">
213 
+            <div class="input-group">
214 
+              <span class="input-group-addon">Mot de passe *</span>
215 
+              <input type='password' id='login_pass' class="form-control" placeholder='Mot de passe'/>
216 
+            </div>
217 
+          </div>
218 
+          <div class="form-group">
219 
+            <div class="input-group">
220 
+              <span class="input-group-addon">Serveur *</span>
221 
+              <input type='text' id='login_server' class="form-control" value='http://myco.zionetrix.net'/>
222 
+            </div>
223 
+          </div>
224 
+        </form>
225 
+      </div>
226 
+      <div class="modal-footer">
227 
+        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
228 
+        <button type="button" class="btn btn-primary" id='login_submit'>Connexion</button>
229 
+      </div>
230 
+    </div><!-- /.modal-content -->
231 
+  </div><!-- /.modal-dialog -->
232 
+</div>
190 233
191 234 
 <div class="modal fade" id="add_contribution_modal" tabindex="-1" role="dialog" aria-labelledby="addContributorModal" aria-hidden="true">
192 235 
   <div class="modal-dialog">
... ... 
@@ -281,6 +324,42 @@ body{
281 324 
   </div><!-- /.modal-dialog -->
282 325 
 </div>
283 326
327 
+<div class="modal fade" id="myaccount_modal" tabindex="-1" role="dialog" aria-labelledby="myaccountModal" aria-hidden="true">
328 
+  <div class="modal-dialog">
329 
+    <div class="modal-content">
330 
+      <div class="modal-header">
331 
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
332 
+        <h4 class="modal-title">Mon compte</h4>
333 
+      </div>
334 
+      <div class="modal-body">
335 
+      <form class="form-horizontal" role="form">
336 
+        <div class="form-group">
337 
+          <label class="col-sm-2 control-label">Email</label>
338 
+          <div class="col-sm-10">
339 
+            <p class="form-control-static" id='myaccount_email'></p>
340 
+          </div>
341 
+        </div>
342 
+        <div class="form-group">
343 
+          <label "inputName" class="col-sm-2 control-label">Nom</label>
344 
+          <div class="col-sm-10">
345 
+            <input type="text" class="form-control" id="myaccount_name" placeholder="Nom" disabled>
346 
+         </div>
347 
+        </div>
348 
+        <div class="form-group">
349 
+          <label for="inputPassword" class="col-sm-2 control-label">Password</label>
350 
+          <div class="col-sm-10">
351 
+            <input type="password" class="form-control" id="myaccount_password" placeholder="Mot de passe" disabled>
352 
+         </div>
353 
+        </div>
354 
+      </form>
355 
+      <div class="modal-footer">
356 
+        <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
357 
+      </div>
358 
+    </div><!-- /.modal-content -->
359 
+  </div><!-- /.modal-dialog -->
360 
+</div>
361 
+
362 
+
284 363 
 </div>
285 364 
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
286 365 
   <script src="inc/lib/jquery-1.10.2.min.js"></script>
287 366