Add login form on header (fix #303)

Leonardo Merlin
1 parent a67c49e2
Showing 3 changed files with 122 additions and 44 deletions Show diff stats
index.html
js/main.js
sass/style.sass
@@ -90,7 +90,6 @@
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>
-
     <div class="">
       <div id="proposal-result"></div>
     </div>
@@ -98,11 +97,20 @@
     <script id="proposal-template" type="text/x-handlebars-template">
       <header class="container">
-        <a id="display-contrast" href="#">Alto Contraste</a>
-        <div class="participar">
-          <!--<a href="#" class="button button-inline participe">Participe</a>-->
-          <a href="#" class="entrar">Entrar</a>
-          <a href="#" class="logout hide">Sair</a>
+        <div class="row" style="margin: 10px 0 0 0">
+          <div class="col-xs-5">
+            <a id="display-contrast" href="#">Alto Contraste</a>
+          </div>
+          <div class="col-xs-7">
+            <div class="participar">
+              <!--<a href="#" class="button button-inline participe">Participe</a>-->
+              <a id="login-button" href="#" class="login"><i class="icon icon-login"></i>Entrar</a>
+              <a id="logout-button" href="#" class="logout hide"><i class="icon icon-login"></i><span class="name"></span>Sair</a>
+            </div>
+          </div>
+          <div class="col-xs-12">
+            <div id="login-panel" class="hide"></div>
+          </div>
         </div>
         <h1>
           <a href="#" class='logo'>{{article.title}}</a>
@@ -367,7 +375,7 @@
       </div>
     </script>
-    <script id="results" type="text/x-handlebars-template">
+    <script id="results-template" type="text/x-handlebars-template">
       <div class="box box-propostas">
         <div class="loading">Carregando...</div>
         <div class="results-content hide">
@@ -407,7 +415,7 @@
       </div>
     </script>
-    <script id="login" type="text/x-handlebars-template">
+    <script id="login-template" type="text/x-handlebars-template">
       <div class="loading">Carregando...</div>
       <form id="login-form" class="login">
         <div class="message hide"></div>
@@ -485,7 +493,7 @@
       </ul>
     </script>
-    <script id="article" type="text/x-handlebars-template">
+    <script id="article-template" type="text/x-handlebars-template">
       <div class="title">
         {{{title}}}
       </div>
@@ -506,11 +514,11 @@
       <a href="#/artigo/107880">Termos de uso</a>
     </div>
-    <script type='text/javascript'	>
+    <script type="text/javascript">
       loadRequireJS();
     </script>
-    <script src='https://www.google.com/recaptcha/api.js?hl=pt-BR' async defer></script>
+    <script src="https://www.google.com/recaptcha/api.js?hl=pt-BR" async defer></script>
   </body>
@@ -7,9 +7,9 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
   // compile the template
   var template = Handlebars.compile(templateSource);
   var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
-  var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
-  var resultsTemplate = Handlebars.compile(document.getElementById('results').innerHTML);
-  var articleTemplate = Handlebars.compile(document.getElementById('article').innerHTML);
+  var loginTemplate = Handlebars.compile(document.getElementById('login-template').innerHTML);
+  var resultsTemplate = Handlebars.compile(document.getElementById('results-template').innerHTML);
+  var articleTemplate = Handlebars.compile(document.getElementById('article-template').innerHTML);
   // The div/container that we are going to display the results in
   var resultsPlaceholder = document.getElementById('proposal-result');
@@ -592,17 +592,17 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
         return this.user;
       },
       showLogin: function(){
-        $('.entrar').show();
-        $('.logout').hide();
+        $('#login-button').show();
+        $('#logout-button').hide();
       },
       showLogout: function(){
-        $('.entrar').hide();
+        $('#login-button').hide();
         var name = '';
         if(this.user){
-          name = this.user.person.name + ' | ';
+          name = this.user.person.name + ' - ';
         }
-        $('.logout').text(name + 'Sair');
-        $('.logout').show();
+        $('#logout-button .name').text(name);
+        $('#logout-button').show();
       },
       responseToText: function(responseJSONmessage){
         var o = JSON.parse(responseJSONmessage);
@@ -640,7 +640,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
             maxLinesByParagraph = lines
           }
         });
-        console.log('maxLinesByParagraph', maxLinesByParagraph);
+        // console.log('maxLinesByParagraph', maxLinesByParagraph);
         // get the bigger title
         $visibleProposals.each(function(index, proposalItemEl){
@@ -651,7 +651,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
             maxLinesByTitle = lines
           }
         });
-        console.log('maxLinesByTitle', maxLinesByTitle);
+        // console.log('maxLinesByTitle', maxLinesByTitle);
         $visibleProposals.each(function(index, proposalItemEl){
           var $proposalItemEl = $(proposalItemEl);
@@ -677,6 +677,16 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
         var lineHeight = parseInt($el.css('lineHeight'));
         var lines = Math.ceil(divHeight / lineHeight);
         return lines;
+      },
+      handleLoginSuccess: function (e, data){
+        if(data.person){
+          Main.setUser({person: data.person});
+        }
+
+        Main.loginCallback(true, data.private_token);
+      },
+      handleLoginFail: function (e){
+        // console.log('Event', e);
       }
     }
   })();
@@ -878,30 +888,50 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
       });
     }
+    $(document).on('login:success', Main.handleLoginSuccess);
+    $(document).on('login:fail', Main.handleLoginFail);
+
     $(document).on('click', '.login-action', function(e) {
-      var message = $('.login .message');
-      message.hide();
-      message.text('');
-      var button = $(this);
+      e.preventDefault();
+      // console.log('obj', obj);
+
+      var $this = $(this); // button
+      var $form = $this.closest('#login-form');
+      var $message = $form.find('.message');
+      $message.text('').hide();
+
+      loginButton = $this;
+
       $.ajax({
         type: 'post',
         url: host + '/api/v1/login',
-        data: $(this).parents('.login').serialize(),
+        data: $form.serialize(),
         xhrFields: {
           //withCredentials: true
         }
       }).done(function(data) {
-        Main.loginCallback(true, data.private_token);
-        Main.displaySuccess(button.closest('.section-content'), 'Login efetuado com sucesso', 1000, 'icon-login-success');
+        $(document).trigger('login:success', data);
+
+        var $sectionContent = $form.closest('.section-content');
+        if($sectionContent && $sectionContent.length > 0){
+          Main.displaySuccess($sectionContent, 'Login efetuado com sucesso', 1000, 'icon-login-success');
+        }
+
+        var $loginPanel = $form.closest('#login-panel');
+        if($loginPanel && $loginPanel.length > 0){
+          $loginPanel.hide();
+        }
+
       }).fail(function(data) {
-        message.show();
+        $(document).trigger('login:fail', data);
+
+        $message.show();
         if(data.status==401){
-          message.text('Nome de usuário, e-mail ou senha incorretos, não foi possível acessar.');
+          $message.text('Nome de usuário, e-mail ou senha incorretos, não foi possível acessar.');
         }else{
-          message.text('Um erro inesperado ocorreu');
+          $message.text('Um erro inesperado ocorreu');
         }
       });
-      e.preventDefault();
     });
     $(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
       e.preventDefault();
     });
-    $(document).on('click', '.logout', function (e){
+    $(document).on('click', '#logout-button', function (e){
       var self = $(this);
       $.removeCookie('_dialoga_session');
       $.removeCookie('votedProposals');
@@ -1003,6 +1033,29 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
       e.preventDefault();
     });
+    // create login panel on header
+    (function (){
+      var $loginPanel = $('#login-panel');
+      $loginPanel.hide();
+      $loginPanel.removeClass('hide');
+      $loginPanel.append(loginTemplate());
+      $loginPanel.find('.actions')
+        .removeClass('col-sm-4')
+        .addClass('col-sm-12');
+      $loginPanel.find('.oauth')
+        .removeClass('col-sm-8')
+        .addClass('col-sm-12');
+      $loginPanel.find('.new-user').parent()
+        .removeClass('col-sm-4')
+        .addClass('col-sm-12');
+
+      $(document).on('click', '#login-button', function (e){
+        e.preventDefault();
+
+        $loginPanel.toggle();
+      });
+    })();
+
   });
   window.addEventListener("message", function(ev) {
@@ -1057,7 +1110,7 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
   })(jQuery, 'smartresize');
   $(window).smartresize(function(){
-    console.log('window resized');
+    // console.log('window resized');
     Main.computeBoxHeight();
   });
@@ -683,21 +683,38 @@ h1
 //   6.11 - login form
 .participar
+  position: relative
   text-align: right
   .participe
     font-size: 14px
     padding: 2px 10px
-  .entrar
+  .icon-login
+    display: inline-block
+    position: relative
+    top: -2px
+    right: 5px
+    width: 20px
+    height: 20px
+    padding: 12px
+    vertical-align: middle
+    border: 1px solid #ccc !important
     background: url(images/icons/icon-user.png) no-repeat 20px 50%
-    // border-left: 1px solid #bcbcbc
-    // margin-left: 20px
-    padding-left: 40px
+  .login
+    margin-left: 20px
   .logout
-    background: url(images/icons/icon-user.png) no-repeat 20px 50%
-    // border-left: 1px solid #bcbcbc
-    // margin-left: 20px
-    padding-left: 40px
-.login,.signup
+    margin-left: 20px
+#login-panel
+  position: absolute
+  top: 0
+  right: 0
+  padding: 20px
+  z-index: 9999
+  background-color: #fff
+  border: 1px solid #ccc
+  .loading
+    display: none
+.login,
+.signup
   text-align: left
   .message
     background: #fcc
	@@ -683,21 +683,38 @@ h1		@@ -683,21 +683,38 @@ h1
683		683
684	// 6.11 - login form	684	// 6.11 - login form
685	.participar	685	.participar
		686	+ position: relative
686	text-align: right	687	text-align: right
687	.participe	688	.participe
688	font-size: 14px	689	font-size: 14px
689	padding: 2px 10px	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	background: url(images/icons/icon-user.png) no-repeat 20px 50%	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	.logout	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	text-align: left	718	text-align: left
702	.message	719	.message
703	background: #fcc	720	background: #fcc