Require login to send a new proposal

Victor Costa
1 parent b0ca0333
Showing 2 changed files with 72 additions and 18 deletions Show diff stats
index.html
js/main.js
@@ -80,7 +80,9 @@
                 <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div>
                 <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div>
                 <div class='send-proposal-button'><a href='#'>Envie Sua Proposta</a></div>
+                <div class="login-container hide">Login</div>
                 <form class='make-proposal-form hide' id='make-proposal-form-{{id}}'>
+                  <div class="message"></div>
                   <div class="name">
                     <div><label>Título</label></div>
                     <input id="article_name" name="article[name]" type="text" placeholder="Título">
@@ -89,7 +91,6 @@
                     <div><label>Descrição</label></div>
                     <textarea id="article_abstract" name="article[abstract]" placeholder="Descrição"></textarea>
                   </div>
-                  <input id='private_token' name='private_token' value='{{../private_token}}' type='hidden'>
                   <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'>
                   <input type='submit' id='make-proposal-button' class='make-proposal-button'  name='make-proposal-button' value='Enviar'>
                 </form>
@@ -129,13 +130,31 @@
       </div>
     </script>
-    <div id='proposal-result'></div>
+    <script id='login' type='text/x-handlebars-template'>
+      <form class="login">
+        <div class="message"></div>
+        <div class="username">
+          <div class="label">Nome de Usuário / E-mail:</div>
+          <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
+        </div>
+        <div class="password">
+          <div class="label">Senha:</div>
+          <input id="user_password" name="password" type="password" placeholder="Senha">
+        </div>
+        <div class="actions">
+          <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a>
+          <a href="#" class="login-action">Acessar</a>
+        </div>
+        <div class="oauth">
+          <div class="label">Acessar com:</div>
+          <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a>
+          <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google +</a>
+          <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a>
+        </div>
+      </form>
+    </script>
-    <div id="login" style="display: none">
-      <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google</a>
-      <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a>
-      <a href="/plugin/oauth_client/noosfero_oauth2?oauth_client_popup=true&id=3" target="_blank" class="participa">Participa</a>
-    </div>
+    <div id='proposal-result'></div>
     <script src='js/main.js'></script>
   </body>
@@ -5,12 +5,15 @@ var templateSource = document.getElementById(&#39;proposal-template&#39;).innerHTML;
 var template = Handlebars.compile(templateSource);
 var supportProposalTemplate = Handlebars.compile(document.getElementById('support-proposal-template').innerHTML);
+var loginTemplate = Handlebars.compile(document.getElementById('login').innerHTML);
 // The div/container that we are going to display the results in
 var resultsPlaceholder = document.getElementById('proposal-result');
 var topics;
+var logged_in = false;
+
 var participa = true;
 if(participa){
   var host = 'http://www.participa.br';
@@ -31,6 +34,7 @@ $.getJSON(noosferoAPI)
     data['host'] = host;
     data['private_token'] = private_token;
     resultsPlaceholder.innerHTML = template(data);
+    $('.login-container').html(loginTemplate());
     //Actions for links
     $( '#nav-proposal-categories a' ).click(function(event){
       //Display the category tab
@@ -62,6 +66,10 @@ $.getJSON(noosferoAPI)
       $('.proposal-detail').hide();
       $('#' + item).show();
+      $('.send-proposal-button').show();
+      $('.make-proposal-form').hide();
+      $('.login-container').hide();
+
       var topic_id = this.id.replace('\#','');
       loadRandomProposal(topic_id, private_token);
     });
@@ -82,35 +90,32 @@ $.getJSON(noosferoAPI)
       }
       event.preventDefault();
     });
-    $( '.send-proposal-button a' ).click(function(event){
-      //Display Topics or Discussion by category
-      $('.make-proposal-form').show();
+    $( '.send-proposal-button a, .success-proposal-sent a' ).click(function(event){
+      //display form to send proposal (or login form for non-logged users)
       $('.send-proposal-button').hide();
-      event.preventDefault();
-    });
-    $( '.success-proposal-sent a' ).click(function(event){
-      //Display Topics or Discussion by category
-      $('.make-proposal-form').show();
       $('.success-proposal-sent').hide();
+      loginCallback(logged_in);
       event.preventDefault();
     });
     $('.make-proposal-form').submit(function (e) {
       e.preventDefault();
       var proposal_id = this.id.split('-').pop();
+      var form = this;
       $.ajax({
         type: 'post',
         url: host + '/api/v1/articles/' + proposal_id + '/children',
-        data: $('#'+this.id).serialize()
+        data: $('#'+this.id).serialize() + "&private_token="+private_token
       })
       .done(function( data ) {
-        this.reset();
+        form.reset();
         $('.make-proposal-form').hide();
         $('.success-proposal-sent').show();
       })
       .fail(function( jqxhr, textStatus, error ) {
         var err = textStatus + ", " + error;
         console.log( "Request Failed: " + err );
+        $('.make-proposal-form .message').text('Não foi possível enviar sua proposta.');
        });
     });
@@ -149,6 +154,36 @@ function loadRandomProposal(topic_id, private_token) {
   });
 }
+function loginCallback(loggedIn, token) {
+  logged_in = loggedIn;
+  $('.login .message').text('');
+
+  if(logged_in) {
+    if(token) private_token = token;
+    $('.make-proposal-form').show();
+    $('.make-proposal-form .message').text('');
+    $('.login-container').hide();
+  } else {
+    $('.make-proposal-form').hide();
+    $('.login-container').show();
+  }
+}
+
 function oauthPluginHandleLoginResult(loggedIn, token) {
-  private_token = token;
+  loginCallback(loggedIn, token);
 }
+
+jQuery(document).ready(function($) {
+  $(document).on('click', '.login-action', function(e) {
+    $.ajax({
+      type: 'post',
+      url: host + '/api/v1/login',
+      data: $(this).parents('.login').serialize(),
+    }).done(function(data) {
+      loginCallback(true, data.private_token);
+    }).fail(function(data) {
+      $('.login .message').text('Não foi possível logar');
+    });
+    e.preventDefault();
+  });
+});