Commit d2009d0fa5259c422fbe44247c9f03ccddd06a48
1 parent
a67c49e2
Exists in
master
and in
5 other branches
Add login form on header (fix #303)
Showing
3 changed files
with
122 additions
and
44 deletions
Show diff stats
index.html
... | ... | @@ -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
... | ... | @@ -7,9 +7,9 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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(['handlebars', 'fastclick', 'handlebars_helpers'], 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
... | ... | @@ -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 | ... | ... |