Commit 5e92b21719b4da06a0e257b4ce939e73990b658d

Authored by Victor Costa
1 parent 512a9ca1

Add signup form

index.html
... ... @@ -342,11 +342,35 @@
342 342 <div class="label">Acessar com:</div>
343 343 <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login">Facebook</a>
344 344 <a href="http://www.participa.br/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google oauth-login">Google +</a>
345   - <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a>
  345 + <a href="#" class="new-user">Cadastrar</a>
  346 + </div>
  347 + </form>
  348 + <form id="signup-form" class="signup hide" autocomplete="off">
  349 + <div class="email">
  350 + <label for="user_email" class="label">E-mail:</label>
  351 + <input id="user_email" name="email" type="text" placeholder="E-mail">
  352 + </div>
  353 + <div class="username">
  354 + <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
  355 + <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
  356 + </div>
  357 + <div class="password">
  358 + <label for="user_password" class="label">Senha:</label>
  359 + <input id="user_password" name="password" type="password" placeholder="Senha">
  360 + </div>
  361 + <div class="password-confirmation">
  362 + <label for="user_password_confirmation" class="label">Confirme a senha:</label>
  363 + <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
  364 + </div>
  365 + <div class="actions">
  366 + <div class="message hide"></div>
  367 + <a href="#" class="confirm-signup">Confirmar</a>
  368 + <a href="#" class="cancel-signup">Cancelar</a>
346 369 </div>
347 370 </form>
348 371 </script>
349 372  
  373 +
350 374 <script type='text/javascript' >
351 375 loadRequireJS();
352 376 </script>
... ...
js/main.js
... ... @@ -640,6 +640,38 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
640 640 });
641 641 e.preventDefault();
642 642 });
  643 +
  644 + $(document).on('click', '.new-user', function(e) {
  645 + var loginForm = $(this).parents('#login-form');
  646 + loginForm.hide();
  647 + loginForm.siblings('#signup-form').show();
  648 + loginForm.find('.message').hide();
  649 + e.preventDefault();
  650 + })
  651 +
  652 + $(document).on('click', '.cancel-signup', function(e) {
  653 + var signupForm = $(this).parents('#signup-form');
  654 + signupForm.hide();
  655 + signupForm.siblings('#login-form').show();
  656 + e.preventDefault();
  657 + });
  658 +
  659 + $(document).on('click', '.confirm-signup', function(e) {
  660 + var message = $('.signup .message');
  661 + message.hide();
  662 + message.text('');
  663 + $.ajax({
  664 + type: 'post',
  665 + url: host + '/api/v1/register',
  666 + data: $(this).parents('.signup').serialize(),
  667 + }).done(function(data) {
  668 + Main.loginCallback(true, data.private_token);
  669 + }).fail(function( /*data*/ ) {
  670 + message.show();
  671 + message.text('Não foi possível efetuar o cadastro');
  672 + });
  673 + e.preventDefault();
  674 + });
643 675 });
644 676  
645 677 window.addEventListener("message", function(ev) {
... ...
sass/_proposal_detail.scss
... ... @@ -602,6 +602,35 @@
602 602 width: 50%;
603 603 }
604 604  
  605 + form.signup {
  606 + .password, .password-confirmation {
  607 + width: 47%;
  608 + display: inline-block;
  609 + }
  610 + .password {
  611 + margin-left: 15px;
  612 + }
  613 + .actions {
  614 + margin: 20px 0 0 0;
  615 + float: none;
  616 + width: 100%;
  617 + .confirm-signup {
  618 + background: #00a9bd;
  619 + border-radius: 7px;
  620 + color: #fff;
  621 + padding: 10px 15px;
  622 + margin: 0 0 0 8px;
  623 + }
  624 + .cancel-signup {
  625 + @extend .confirm-signup;
  626 + }
  627 + .message {
  628 + float: left;
  629 + margin-top: -8px;
  630 + }
  631 + }
  632 + }
  633 +
605 634 .actions > a.login-action{
606 635 background: $color;
607 636 -webkit-border-radius: 7px;
... ...