Add signup form

Victor Costa
1 parent 512a9ca1
Showing 3 changed files with 86 additions and 1 deletions Show diff stats
index.html
js/main.js
sass/_proposal_detail.scss
@@ -342,11 +342,35 @@
           <div class="label">Acessar com:</div>
           <a href="http://www.participa.br/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook oauth-login">Facebook</a>
           <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>
-          <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a>
+          <a href="#" class="new-user">Cadastrar</a>
+        </div>
+      </form>
+      <form id="signup-form" class="signup hide" autocomplete="off">
+        <div class="email">
+          <label for="user_email" class="label">E-mail:</label>
+          <input id="user_email" name="email" type="text" placeholder="E-mail">
+        </div>
+        <div class="username">
+          <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
+          <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
+        </div>
+        <div class="password">
+          <label for="user_password" class="label">Senha:</label>
+          <input id="user_password" name="password" type="password" placeholder="Senha">
+        </div>
+        <div class="password-confirmation">
+          <label for="user_password_confirmation" class="label">Confirme a senha:</label>
+          <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
+        </div>
+        <div class="actions">
+          <div class="message hide"></div>
+          <a href="#" class="confirm-signup">Confirmar</a>
+          <a href="#" class="cancel-signup">Cancelar</a>
         </div>
       </form>
     </script>
+
     <script type='text/javascript'	>
       loadRequireJS();
     </script>
@@ -640,6 +640,38 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
       });
       e.preventDefault();
     });
+
+    $(document).on('click', '.new-user', function(e) {
+      var loginForm = $(this).parents('#login-form');
+      loginForm.hide();
+      loginForm.siblings('#signup-form').show();
+      loginForm.find('.message').hide();
+      e.preventDefault();
+    })
+
+    $(document).on('click', '.cancel-signup', function(e) {
+      var signupForm = $(this).parents('#signup-form');
+      signupForm.hide();
+      signupForm.siblings('#login-form').show();
+      e.preventDefault();
+    });
+
+    $(document).on('click', '.confirm-signup', function(e) {
+      var message = $('.signup .message');
+      message.hide();
+      message.text('');
+      $.ajax({
+        type: 'post',
+        url: host + '/api/v1/register',
+        data: $(this).parents('.signup').serialize(),
+      }).done(function(data) {
+        Main.loginCallback(true, data.private_token);
+      }).fail(function( /*data*/ ) {
+        message.show();
+        message.text('Não foi possível efetuar o cadastro');
+      });
+      e.preventDefault();
+    });
   });
   window.addEventListener("message", function(ev) {
@@ -602,6 +602,35 @@
         width: 50%;
     }
+    form.signup {
+      .password, .password-confirmation {
+        width: 47%;
+        display: inline-block;
+      }
+      .password {
+        margin-left: 15px;
+      }
+      .actions {
+        margin: 20px 0 0 0;
+        float: none;
+        width: 100%;
+        .confirm-signup {
+          background: #00a9bd;
+          border-radius: 7px;
+          color: #fff;
+          padding: 10px 15px;
+          margin: 0 0 0 8px;
+        }
+        .cancel-signup {
+          @extend .confirm-signup;
+        }
+        .message {
+          float: left;
+          margin-top: -8px;
+        }
+      }
+    }
+
     .actions > a.login-action{
         background: $color;
         -webkit-border-radius: 7px;
	@@ -342,11 +342,35 @@		@@ -342,11 +342,35 @@
342	<div class="label">Acessar com:</div>	342	<div class="label">Acessar com:</div>
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>	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	<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>	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	</div>	369	</div>
347	</form>	370	</form>
348	</script>	371	</script>
349		372
		373	+
350	<script type='text/javascript' >	374	<script type='text/javascript' >
351	loadRequireJS();	375	loadRequireJS();
352	</script>	376	</script>
	@@ -640,6 +640,38 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F		@@ -640,6 +640,38 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F
640	});	640	});
641	e.preventDefault();	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	window.addEventListener("message", function(ev) {	677	window.addEventListener("message", function(ev) {
	@@ -602,6 +602,35 @@		@@ -602,6 +602,35 @@
602	width: 50%;	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	.actions > a.login-action{	634	.actions > a.login-action{
606	background: $color;	635	background: $color;
607	-webkit-border-radius: 7px;	636	-webkit-border-radius: 7px;