Added messages on usp id validations

Daniela Feitosa
1 parent 6adbff04
Showing 5 changed files with 43 additions and 15 deletions Show diff stats
app/views/account/_signup_form.rhtml
plugins/stoa/lib/stoa_plugin.rb
plugins/stoa/public/javascripts/signup_complement.js
plugins/stoa/public/style.css
public/stylesheets/application.css
@@ -152,6 +152,10 @@ jQuery(function($) {
   });
   $('#profile_data_name').blur(function() {
     $('#name-balloon').fadeOut('slow');
+    if ($(this).val() == '') {
+      $(this).removeClass('validated');
+    }
+    else $(this).addClass('validated');
   });
 });
 </script>
@@ -21,7 +21,8 @@ class StoaPlugin &lt; Noosfero::Plugin
     lambda {
       content_tag(:div, labelled_form_field(_('USP number'), text_field_tag('profile_data[usp_id]', '', :id => 'usp_id_field')) +
       content_tag(:small, _('The usp id grants you special powers in the network. Don\'t forget to fill it with a valid number if you have one.'), :id => 'usp-id-balloon') +
-      content_tag('div', '', :id => 'usp-id-check'), :id => 'signup-usp-id') +
+      content_tag('p', _("This usp number is not valid or doesn't exists"), :id => 'usp-id-invalid') +
+      content_tag('p', _('Checking usp number...'), :id => 'usp-id-checking'), :id => 'signup-usp-id') +
       content_tag('div', required(labelled_form_field(_('Birth date (yyyy-mm-dd)'), text_field_tag('birth_date', ''))) +
       content_tag(:small, _('Confirm your birth date. Pay attention to the format: yyyy-mm-dd.'), :id => 'usp-birth-date-balloon'), :id => 'signup-birth-date', :style => 'display: none') +
       content_tag('div', required(labelled_form_field(_('CPF'), text_field_tag('cpf', ''))) +
 jQuery("#usp_id_field").observe_field(1, function(){
   var me=this;
+  jQuery('#usp-id-invalid').hide();
   jQuery(this).addClass('checking').removeClass('validated');
+  jQuery('#usp-id-checking').show();
   jQuery.getJSON('/plugin/stoa/check_usp_id?usp_id='+me.value,
     function(data){
+      jQuery('#usp-id-checking').hide();
       if(data.exists) {
+        jQuery('#usp-id-invalid').hide();
         jQuery.getJSON('/plugin/stoa/check_cpf?usp_id='+me.value,
           function(data){
             if(data.exists){
@@ -27,6 +31,7 @@ jQuery(&quot;#usp_id_field&quot;).observe_field(1, function(){
         if(me.value) {
           jQuery('#signup-form .submit').attr('disabled', true);
           jQuery(me).addClass('invalid');
+          jQuery('#usp-id-invalid').show();
         }
         else {
           jQuery('#signup-form .submit').attr('disabled', false);
@@ -58,6 +63,12 @@ jQuery(&#39;#signup-birth-date #birth_date&#39;).focus(function() {
 });
 jQuery('#signup-birth-date #birth_date').blur(function() {
   jQuery('#usp-birth-date-balloon').fadeOut('slow');
+  if (jQuery(this).val() == '') {
+    jQuery(this).removeClass('validated');
+  }
+  else {
+    jQuery(this).addClass('validated');
+  }
 });
 jQuery('#signup-cpf #cpf').focus(function() {
@@ -65,4 +76,8 @@ jQuery(&#39;#signup-cpf #cpf&#39;).focus(function() {
 });
 jQuery('#signup-cpf #cpf').blur(function() {
   jQuery('#usp-cpf-balloon').fadeOut('slow');
+  if (jQuery(this).val() == '') {
+    jQuery(this).removeClass('validated');
+  }
+  else jQuery(this).addClass('validated');
 });
@@ -34,24 +34,33 @@
   background: transparent url(/images/orange-balloon.png) bottom center no-repeat;
   position: absolute;
   z-index: 2;
-  right: 10px;
-  top: -80px;
+  right: -150px;
+  top: -75px;
 }
-.controller-profile_editor input.checking {
-  cursor: progress;
+#usp-id-invalid,
+#usp-id-checking {
+  display: none;
+  margin: 0px;
+  margin: -2px 16px -5px 13px;
+  text-align: right;
+  clear: both;
+  font-size: 11px;
+  text-transform: lowercase;
 }
-.controller-profile_editor div.checking {
-  background: transparent url(/images/loading-small.gif) 153px center no-repeat;
+#usp-id-invalid{
+  color: #FFA000;
 }
-#signup-form .invalid.valid.filled-in {
-  background-image: url("/images/passwords_nomatch.png");
-  border-color: #FFA000;
+#usp-id-checking {
+  color: #4A4A4A;
 }
-#signup-form .invalid.valid.filled-in.validated {
-  background-image: url("/images/passwords_match.png");
-  border-color: #88BD00;
+.controller-profile_editor input.checking {
+  cursor: progress;
+}
+
+.controller-profile_editor div.checking {
+  background: transparent url(/images/loading-small.gif) 153px center no-repeat;
 }
@@ -5783,8 +5783,7 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   color: #4A4A4A;
 }
-#signup-form .validated,
-#signup-form .valid.filled-in {
+#signup-form .validated {
   border-color: #88BD00;
   background-image: url(/images/passwords_match.png);
 }