Download as
Browse Code »

Commit d2009d0fa5259c422fbe44247c9f03ccddd06a48

Authored by Leonardo Merlin
1 parent a67c49e2
Exists in master and in 5 other branches build, build2, contigency_plan_recaptcha, production, staging

Add login form on header (fix #303)

Showing 3 changed files with 122 additions and 44 deletions   Show diff stats
index.html
  Diff comments   View file @d2009d0
... ... @@ -90,7 +90,6 @@
90 90 fjs.parentNode.insertBefore(js, fjs);
91 91 }(document, 'script', 'facebook-jssdk'));</script>
92 92  
93   -
94 93 <div class="">
95 94 <div id="proposal-result"></div>
96 95 </div>
... ... @@ -98,11 +97,20 @@
98 97  
99 98 <script id="proposal-template" type="text/x-handlebars-template">
100 99 <header class="container">
101   - <a id="display-contrast" href="#">Alto Contraste</a>
102   - <div class="participar">
103   - <!--<a href="#" class="button button-inline participe">Participe</a>-->
104   - <a href="#" class="entrar">Entrar</a>
105   - <a href="#" class="logout hide">Sair</a>
  100 + <div class="row" style="margin: 10px 0 0 0">
  101 + <div class="col-xs-5">
  102 + <a id="display-contrast" href="#">Alto Contraste</a>
  103 + </div>
  104 + <div class="col-xs-7">
  105 + <div class="participar">
  106 + <!--<a href="#" class="button button-inline participe">Participe</a>-->
  107 + <a id="login-button" href="#" class="login"><i class="icon icon-login"></i>Entrar</a>
  108 + <a id="logout-button" href="#" class="logout hide"><i class="icon icon-login"></i><span class="name"></span>Sair</a>
  109 + </div>
  110 + </div>
  111 + <div class="col-xs-12">
  112 + <div id="login-panel" class="hide"></div>
  113 + </div>
106 114 </div>
107 115 <h1>
108 116 <a href="#" class='logo'>{{article.title}}</a>
... ... @@ -367,7 +375,7 @@
367 375 </div>
368 376 </script>
369 377  
370   - <script id="results" type="text/x-handlebars-template">
  378 + <script id="results-template" type="text/x-handlebars-template">
371 379 <div class="box box-propostas">
372 380 <div class="loading">Carregando...</div>
373 381 <div class="results-content hide">
... ... @@ -407,7 +415,7 @@
407 415 </div>
408 416 </script>
409 417  
410   - <script id="login" type="text/x-handlebars-template">
  418 + <script id="login-template" type="text/x-handlebars-template">
411 419 <div class="loading">Carregando...</div>
412 420 <form id="login-form" class="login">
413 421 <div class="message hide"></div>
... ... @@ -485,7 +493,7 @@
485 493 </ul>
486 494 </script>
487 495  
488   - <script id="article" type="text/x-handlebars-template">
  496 + <script id="article-template" type="text/x-handlebars-template">
489 497 <div class="title">
490 498 {{{title}}}
491 499 </div>
... ... @@ -506,11 +514,11 @@
506 514 <a href="#/artigo/107880">Termos de uso</a>
507 515 </div>
508 516  
509   - <script type='text/javascript' >
  517 + <script type="text/javascript">
510 518 loadRequireJS();
511 519 </script>
512 520  
513   - <script src='https://www.google.com/recaptcha/api.js?hl=pt-BR' async defer></script>
  521 + <script src="https://www.google.com/recaptcha/api.js?hl=pt-BR" async defer></script>
514 522  
515 523 </body>
516 524  
... ...
js/main.js
  Diff comments   View file @d2009d0
... ... @@ -7,9 +7,9 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
7 7 // compile the template
8 8 var template = Handlebars.compile(templateSource);
9 9 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
10   - var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
11   - var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
12   - var articleTemplate = Handlebars.compile(document.getElementById('article').innerHTML);
  10 + var loginTemplate = Handlebars.compile(document.getElementById('login-template').innerHTML);
  11 + var resultsTemplate = Handlebars.compile(document.getElementById('results-template').innerHTML);
  12 + var articleTemplate = Handlebars.compile(document.getElementById('article-template').innerHTML);
13 13  
14 14 // The div/container that we are going to display the results in
15 15 var resultsPlaceholder = document.getElementById('proposal-result');
... ... @@ -592,17 +592,17 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
592 592 return this.user;
593 593 },
594 594 showLogin: function(){
595   - $('.entrar').show();
596   - $('.logout').hide();
  595 + $('#login-button').show();
  596 + $('#logout-button').hide();
597 597 },
598 598 showLogout: function(){
599   - $('.entrar').hide();
  599 + $('#login-button').hide();
600 600 var name = '';
601 601 if(this.user){
602   - name = this.user.person.name + ' | ';
  602 + name = this.user.person.name + ' - ';
603 603 }
604   - $('.logout').text(name + 'Sair');
605   - $('.logout').show();
  604 + $('#logout-button .name').text(name);
  605 + $('#logout-button').show();
606 606 },
607 607 responseToText: function(responseJSONmessage){
608 608 var o = JSON.parse(responseJSONmessage);
... ... @@ -640,7 +640,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
640 640 maxLinesByParagraph = lines
641 641 }
642 642 });
643   - console.log('maxLinesByParagraph', maxLinesByParagraph);
  643 + // console.log('maxLinesByParagraph', maxLinesByParagraph);
644 644  
645 645 // get the bigger title
646 646 $visibleProposals.each(function(index, proposalItemEl){
... ... @@ -651,7 +651,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
651 651 maxLinesByTitle = lines
652 652 }
653 653 });
654   - console.log('maxLinesByTitle', maxLinesByTitle);
  654 + // console.log('maxLinesByTitle', maxLinesByTitle);
655 655  
656 656 $visibleProposals.each(function(index, proposalItemEl){
657 657 var $proposalItemEl = $(proposalItemEl);
... ... @@ -677,6 +677,16 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
677 677 var lineHeight = parseInt($el.css('lineHeight'));
678 678 var lines = Math.ceil(divHeight / lineHeight);
679 679 return lines;
  680 + },
  681 + handleLoginSuccess: function (e, data){
  682 + if(data.person){
  683 + Main.setUser({person: data.person});
  684 + }
  685 +
  686 + Main.loginCallback(true, data.private_token);
  687 + },
  688 + handleLoginFail: function (e){
  689 + // console.log('Event', e);
680 690 }
681 691 }
682 692 })();
... ... @@ -878,30 +888,50 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
878 888 });
879 889 }
880 890  
  891 + $(document).on('login:success', Main.handleLoginSuccess);
  892 + $(document).on('login:fail', Main.handleLoginFail);
  893 +
881 894 $(document).on('click', '.login-action', function(e) {
882   - var message = $('.login .message');
883   - message.hide();
884   - message.text('');
885   - var button = $(this);
  895 + e.preventDefault();
  896 + // console.log('obj', obj);
  897 +
  898 + var $this = $(this); // button
  899 + var $form = $this.closest('#login-form');
  900 + var $message = $form.find('.message');
  901 + $message.text('').hide();
  902 +
  903 + loginButton = $this;
  904 +
886 905 $.ajax({
887 906 type: 'post',
888 907 url: host + '/api/v1/login',
889   - data: $(this).parents('.login').serialize(),
  908 + data: $form.serialize(),
890 909 xhrFields: {
891 910 //withCredentials: true
892 911 }
893 912 }).done(function(data) {
894   - Main.loginCallback(true, data.private_token);
895   - Main.displaySuccess(button.closest('.section-content'), 'Login efetuado com sucesso', 1000, 'icon-login-success');
  913 + $(document).trigger('login:success', data);
  914 +
  915 + var $sectionContent = $form.closest('.section-content');
  916 + if($sectionContent && $sectionContent.length > 0){
  917 + Main.displaySuccess($sectionContent, 'Login efetuado com sucesso', 1000, 'icon-login-success');
  918 + }
  919 +
  920 + var $loginPanel = $form.closest('#login-panel');
  921 + if($loginPanel && $loginPanel.length > 0){
  922 + $loginPanel.hide();
  923 + }
  924 +
896 925 }).fail(function(data) {
897   - message.show();
  926 + $(document).trigger('login:fail', data);
  927 +
  928 + $message.show();
898 929 if(data.status==401){
899   - message.text('Nome de usuário, e-mail ou senha incorretos, não foi possível acessar.');
  930 + $message.text('Nome de usuário, e-mail ou senha incorretos, não foi possível acessar.');
900 931 }else{
901   - message.text('Um erro inesperado ocorreu');
  932 + $message.text('Um erro inesperado ocorreu');
902 933 }
903 934 });
904   - e.preventDefault();
905 935 });
906 936  
907 937 $(document).on('click', '.social .fb-share', function(e) {
... ... @@ -992,7 +1022,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
992 1022 e.preventDefault();
993 1023 });
994 1024  
995   - $(document).on('click', '.logout', function (e){
  1025 + $(document).on('click', '#logout-button', function (e){
996 1026 var self = $(this);
997 1027 $.removeCookie('_dialoga_session');
998 1028 $.removeCookie('votedProposals');
... ... @@ -1003,6 +1033,29 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
1003 1033 e.preventDefault();
1004 1034 });
1005 1035  
  1036 + // create login panel on header
  1037 + (function (){
  1038 + var $loginPanel = $('#login-panel');
  1039 + $loginPanel.hide();
  1040 + $loginPanel.removeClass('hide');
  1041 + $loginPanel.append(loginTemplate());
  1042 + $loginPanel.find('.actions')
  1043 + .removeClass('col-sm-4')
  1044 + .addClass('col-sm-12');
  1045 + $loginPanel.find('.oauth')
  1046 + .removeClass('col-sm-8')
  1047 + .addClass('col-sm-12');
  1048 + $loginPanel.find('.new-user').parent()
  1049 + .removeClass('col-sm-4')
  1050 + .addClass('col-sm-12');
  1051 +
  1052 + $(document).on('click', '#login-button', function (e){
  1053 + e.preventDefault();
  1054 +
  1055 + $loginPanel.toggle();
  1056 + });
  1057 + })();
  1058 +
1006 1059 });
1007 1060  
1008 1061 window.addEventListener("message", function(ev) {
... ... @@ -1057,7 +1110,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
1057 1110 })(jQuery, 'smartresize');
1058 1111  
1059 1112 $(window).smartresize(function(){
1060   - console.log('window resized');
  1113 + // console.log('window resized');
1061 1114 Main.computeBoxHeight();
1062 1115 });
1063 1116  
... ...
sass/style.sass
  Diff comments   View file @d2009d0
... ... @@ -683,21 +683,38 @@ h1
683 683  
684 684 // 6.11 - login form
685 685 .participar
  686 + position: relative
686 687 text-align: right
687 688 .participe
688 689 font-size: 14px
689 690 padding: 2px 10px
690   - .entrar
  691 + .icon-login
  692 + display: inline-block
  693 + position: relative
  694 + top: -2px
  695 + right: 5px
  696 + width: 20px
  697 + height: 20px
  698 + padding: 12px
  699 + vertical-align: middle
  700 + border: 1px solid #ccc !important
691 701 background: url(images/icons/icon-user.png) no-repeat 20px 50%
692   - // border-left: 1px solid #bcbcbc
693   - // margin-left: 20px
694   - padding-left: 40px
  702 + .login
  703 + margin-left: 20px
695 704 .logout
696   - background: url(images/icons/icon-user.png) no-repeat 20px 50%
697   - // border-left: 1px solid #bcbcbc
698   - // margin-left: 20px
699   - padding-left: 40px
700   -.login,.signup
  705 + margin-left: 20px
  706 +#login-panel
  707 + position: absolute
  708 + top: 0
  709 + right: 0
  710 + padding: 20px
  711 + z-index: 9999
  712 + background-color: #fff
  713 + border: 1px solid #ccc
  714 + .loading
  715 + display: none
  716 +.login,
  717 +.signup
701 718 text-align: left
702 719 .message
703 720 background: #fcc
... ...