Signup interface improvements

Caio Almeida
1 parent f3421ecd
Showing 37 changed files with 710 additions and 142 deletions Show diff stats
app/controllers/public/account_controller.rb
app/controllers/public/home_controller.rb
app/helpers/account_helper.rb
app/helpers/application_helper.rb
app/helpers/profile_helper.rb
app/models/person.rb
app/models/profile.rb
app/views/account/_email_status.rhtml
app/views/account/_identifier_status.rhtml
app/views/account/_signup_form.rhtml
app/views/account/signup.rhtml
app/views/admin_panel/_site_info.rhtml
app/views/admin_panel/_terms_of_use.rhtml
app/views/admin_panel/index.rhtml
app/views/admin_panel/site_info.rhtml
app/views/admin_panel/terms_of_use.rhtml
app/views/home/terms.rhtml
app/views/layouts/application-ng.rhtml
app/views/profile_editor/_person.rhtml
app/views/profile_editor/_person_form.rhtml
@@ -60,6 +60,10 @@ class AccountController &lt; ApplicationController
   def signup
     @invitation_code = params[:invitation_code]
     begin
+      if params[:user]
+        params[:user].delete(:password_confirmation_clear)
+        params[:user].delete(:password_clear)
+      end
       @user = User.new(params[:user])
       @user.terms_of_use = environment.terms_of_use
       @user.environment = environment
@@ -209,16 +213,26 @@ class AccountController &lt; ApplicationController
     @identifier = params[:identifier]
     valid = Person.is_available?(@identifier, environment)
     if valid
-      @status = _('Available!')
+      @status = _('This login name is available')
       @status_class = 'available'
     else
-      @status = _('Unavailable!')
+      @status = _('This login name is unavailable')
       @status_class = 'unavailable'
     end
-    @url = environment.top_url + '/' + @identifier
     render :partial => 'identifier_status'
   end
+  def check_email
+    if User.find_by_email_and_environment_id(params[:address], environment.id).nil?
+      @status = _('This e-mail address is available')
+      @status_class = 'available'
+    else
+      @status = _('This e-mail address is taken')
+      @status_class = 'unavailable'
+    end
+    render :partial => 'email_status'
+  end
+
   def user_data
     user_data =
       if logged_in?
@@ -14,4 +14,8 @@ class HomeController &lt; PublicController
     end
   end
+  def terms
+    @no_design_blocks = true
+  end
+
 end
 module AccountHelper
+  def validation_classes
+    'available unavailable valid invalid checking'
+  end
+
+  def checking_message(key)
+    case key
+    when :url
+      _('Checking availability of login name...')
+    when :email
+      _('Checking if e-mail address is already taken...')
+    end
+  end
 end
@@ -1317,4 +1317,14 @@ module ApplicationHelper
       ) + content_tag('span', ' | ', :class => 'comment-footer comment-footer-hide')
     end
   end
+
+  def render_tabs(tabs)
+    titles = tabs.inject(''){ |result, tab| result << content_tag(:li, link_to(tab[:title], '#'+tab[:id]), :class => 'tab') }
+    contents = tabs.inject(''){ |result, tab| result << content_tag(:div, tab[:content], :id => tab[:id]) }
+
+    content_tag :div, :class => 'ui-tabs' do
+      content_tag(:ul, titles) + contents
+    end
+  end
+
 end
@@ -15,12 +15,4 @@ module ProfileHelper
     end
   end
-  def render_tabs(tabs)
-    titles = tabs.inject(''){ |result, tab| result << content_tag(:li, link_to(tab[:title], '#'+tab[:id]), :class => 'tab') }
-    contents = tabs.inject(''){ |result, tab| result << content_tag(:div, tab[:content], :id => tab[:id]) }
-
-    content_tag :div, :class => 'ui-tabs' do
-      content_tag(:ul, titles) + contents
-    end
-  end
 end
@@ -116,6 +116,7 @@ class Person &lt; Profile
   contact_phone
   contact_information
   description
+  image
   ]
   validates_multiparameter_assignments
@@ -148,6 +148,7 @@ class Profile &lt; ActiveRecord::Base
   doc
   chat
   plugin
+  site
   ]
   belongs_to :user
@@ -0,0 +1,7 @@
+<div class='status-identifier'>
+  <p><span class='<%= @status_class %>'><%= @status %></span></p>
+  <script type="text/javascript">
+    jQuery('#user_email').removeClass('<%= validation_classes %>');
+    jQuery('#user_email').addClass('<%= @status_class %>');
+  </script>
+</div>
 <div class='status-identifier'>
-  <p><%= @url %> <span class='<%= @status_class %>'><%= @status %></span> </p>
+  <p><span class='<%= @status_class %>'><%= @status %></span></p>
+  <script type="text/javascript">
+    jQuery('#user_login').removeClass('<%= validation_classes %>');
+    jQuery('#user_login').addClass('<%= @status_class %>');
+  </script>
 </div>
 <%= error_messages_for :user, :person %>
-<% if ! defined? hidden_atention || ! hidden_atention %>
-<p/>
-<div class="atention">
-<%= _('Dear user, welcome to the %s network. To start your participation in this space, fill in the fields below. After this operation, your login and password will be registered, allowing you to create %s and %s in this environment.') % [environment.name, __('communities'), __('enterprises')] %>
-</div>
-<% end %>
-
-<% labelled_form_for :user, @user, :html => { :multipart => true } do |f| %>
+<% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form' } do |f| %>
 <%= hidden_field_tag :invitation_code, @invitation_code %>
-<%= required_fields_message %>
+<div id='signup-form-header'>
-<div id='signup-email'>
-  <%= required f.text_field(:email) %>
-  <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
-</div>
+  <span id="signup-domain"><%= environment.default_hostname %>/</span>
+  <div id='signup-login'>
+    <div id='signup-login-field'>
+      <%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin(this.value);', :rel => s_('signup|Login')) %>
+      <div id='url-check'><p>&nbsp;</p></div>
+    </div>
+    <%= content_tag(:small, _('Choose your login name carefully! It will be your network access and you will not be able to change it later.'), :id => 'signup-balloon') %>
+    <br style="clear: both;" />
+  </div>
+  <%= observe_field 'user_login',
+        :url => { :action => 'check_url' },
+        :with => 'identifier',
+        :update => 'url-check',
+        :loading => "jQuery('#user_login').removeClass('#{validation_classes}').addClass('checking');
+                     jQuery('#url-check').html('<p><span class=\"checking\">#{checking_message(:url)}</span></p>');",
+        :complete => "jQuery('#user_login').removeClass('checking')"
+  %>
-<%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin( this.value )') %>
-<%= content_tag(:small,_('Insert your login')) %>
-<div id='url-check'></div>
+  <div id='signup-password'>
+    <%= required f.password_field(:password, :id => 'user_pw') %>
+    <%= f.text_field(:password_clear, :value => _('password')) %>
+    <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
+    <div id='fake-check'><p>&nbsp;</p></div>
+  </div>
+
+  <div id='signup-password-confirmation'>
+    <%= required f.password_field(:password_confirmation) %>
+    <%= f.text_field(:password_confirmation_clear, :value => _('password confirmation')) %>
+    <div id='password-check'><p>&nbsp;</p></div>
+  </div>
+
+  <div id='signup-email'>
+    <%= required f.text_field(:email, :rel => _('e-Mail')) %>
+    <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
+    <div id='email-check'><p>&nbsp;</p></div>
+  </div>
+  <%= observe_field "user_email",
+        :url      => { :action => "check_email" },
+        :with     => "address",
+        :update   => "email-check",
+        :loading  => "jQuery('#user_email').removeClass('#{validation_classes}').addClass('checking');
+                      jQuery('#email-check').html('<p><span class=\"checking\">#{checking_message(:email)}</span></p>');",
+        :complete => "jQuery('#user_email').removeClass('checking')",
+        :before   => "if (!( jQuery('#user_email').valid() )) {
+                        jQuery('#user_email').removeClass('#{validation_classes}').addClass('unavailable');
+                        jQuery('#email-check').html('<p><span class=\"unavailable\">#{_('This e-mail address is not valid')}</span></p>');
+                        return false;
+                      }"
+  %>
-<%= observe_field 'user_login', :url => {:action => 'check_url'}, :with => 'identifier', :update => 'url-check' %>
+  <%= label :profile_data, :name %>
+  <%= required text_field(:profile_data, :name, :rel => _('Full name')) %>
-<div id='signup-password'>
-  <%= required f.password_field(:password) %>
-  <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.')) %>
 </div>
-<%= required f.password_field(:password_confirmation) %>
-<%= content_tag(:small,_('To confirm, repeat your password.')) %>
-
-<% labelled_fields_for :profile_data, @person do |f| %>
-  <%= render :partial => 'profile_editor/person_form', :locals => {:f => f} %>
-<% end %>
-
-<% unless @terms_of_use.blank? %>
-  <div id='terms-of-use-box' class='formfieldline'>
-    <%= _("By clicking on 'I accept the terms of use' below you are agreeing to the %s") %
-    link_to_function(_('Terms of use'), nil) do |page|
-      page['terms-of-use'].show
-    end %>
-
-    <div id='terms-of-use' style='display: none;'>
-      <%= @terms_of_use %>
-      <%= link_to_function(_('Hide'), nil) do |page|
-        page['terms-of-use'].hide
-      end %>
+<div id="signup-form-profile">
+
+  <% labelled_fields_for :profile_data, @person do |f| %>
+    <%= render :partial => 'profile_editor/person_form', :locals => {:f => f} %>
+  <% end %>
+
+  <% unless @terms_of_use.blank? %>
+    <div id='terms-of-use-box' class='formfieldline'>
+      <%= labelled_check_box(_('I accept the %s') % link_to(_('terms of use'), {:controller => 'home', :action => 'terms'}, :target => '_blank'), 'user[terms_accepted]') %>
     </div>
-    <p><%= labelled_check_box(environment.terms_of_use_acceptance_text.blank? ? _('I accept the terms of use') : environment.terms_of_use_acceptance_text, 'user[terms_accepted]') %></p>
-  </div>
-<% end %>
-
-<% if params[:enterprise_code] %>
-  <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
-  <%= hidden_field_tag :answer, params[:answer] %>
-  <%= hidden_field_tag :terms_accepted, params[:terms_accepted] %>
-  <%= hidden_field_tag :new_user, true %>
-<% end %>
-
-<% button_bar do %>
-  <%= submit_button('save', _('Sign up'), :cancel => {:action => 'index'}, :class => 'icon-menu-login') %>
-<% end %>
+  <% end %>
+
+  <% if params[:enterprise_code] %>
+    <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
+    <%= hidden_field_tag :answer, params[:answer] %>
+    <%= hidden_field_tag :terms_accepted, params[:terms_accepted] %>
+    <%= hidden_field_tag :new_user, true %>
+  <% end %>
+</div>
+
+<p style="text-align: center">
+  <%= submit_button('save', _('Create my account')) %>
+</p>
+
 <% end -%>
+
+<script type="text/javascript">
+jQuery(function($) {
+  $('#signup-form input[type=text], #signup-form textarea').each(function() {
+    if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
+    if ($(this).val() == '') $(this).val(default_value);
+    $(this).bind('focus', function() {
+      if ($(this).val() == default_value) $(this).val('');
+    });
+    $(this).bind('blur', function() {
+      if ($(this).val() == '') {
+        $(this).val(default_value);
+        $(this).removeClass('filled-in');
+      }
+      else $(this).addClass('filled-in');
+    });
+  });
+
+  $('#signup-form').bind('submit', function() {
+    $('#signup-form input[type=text], #signup-form textarea').each(function() {
+      if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
+      if ($(this).val() == default_value) $(this).val('');
+    });
+    return true;
+  });
+
+  $('#user_password_clear, #user_password_confirmation_clear').show();
+  $('#user_password_clear, #user_password_confirmation_clear').unbind();
+  $('#user_pw, #user_password_confirmation').hide();
+  $('#user_password_clear').focus(function() {
+    $(this).hide();
+    $('#user_pw').show();
+    $('#user_pw').focus();
+  });
+  $('#user_pw').focus(function() {
+    $('#password-balloon').fadeIn('slow');
+  });
+  $('#user_pw').blur(function() {
+    if ($(this).val() == '') {
+      $('#user_password_clear').show();
+      $(this).hide();
+    }
+  });
+  $('#user_password_confirmation_clear').focus(function() {
+    $(this).hide();
+    $('#user_password_confirmation').show();
+    $('#user_password_confirmation').focus();
+  });
+  $('#user_password_confirmation, #user_pw').blur(function() {
+    if ($('#user_password_confirmation').val() == '') {
+      $('#user_password_confirmation_clear').show();
+      $('#user_password_confirmation').hide();
+    } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
+      $('#user_password_confirmation').addClass('passwords_match').removeClass('passwords_differ');
+      $('#user_pw').removeClass('invalid_input').addClass('valid_input');
+      $('#password-check').html("<p>&nbsp;</p>");
+    } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) {
+      $('#user_password_confirmation').removeClass('passwords_match').addClass('passwords_differ');
+      $('#user_pw').addClass('invalid_input').removeClass('valid_input');
+      $('#password-check').html("<p><span class='unavailable'><%= _('Passwords don\'t match') %></span></p>");
+    }
+    $('#password-balloon').fadeOut('slow');
+  });
+  $('#user_login').focus(function() {
+    $('#signup-balloon').fadeIn('slow');
+  });
+  $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); });
+  $('#signup-form').validate({ rules: { 'user[email]': { email: true } }, messages: { 'user[email]' : '' } });
+});
+</script>
-<h1><%= _('Signup') %></h1>
 <% if @register_pending %>
-  <%= _('Thanks for signing up! Now check your e-mail to activate your account!') %>
-  <p style="text-align: center"><%= link_to(_('Go to the homepage'), '/') %></p>
+<div id='thanks-for-signing'>
+  <%= _("<h1>Welcome to %s!</h1>
+         <h3>Thanks for signing up, we're thrilled to have you on our social network!</h3>
+         <p>Firsty, some tips for getting started:</p>
+         <h4>Confirm your account!</h4>
+         <p>You should receive a welcome email from us shortly. Please take a second to follow the link within to confirm your account.</p>
+         <p>You won't appear as a <a href=\"%s\">user</a> until your account is confirmed.</p>
+         <h4>What to do next?</h4>
+         <p><a href=\"/doc/user/editing-person-info\">Customize your profile</a>. Upload an avatar and sign up for activity notifications under Account.</p>
+         <p>Learn the guidelines. Read the <a href=\"/doc\">Documentation</a> for more details on how to use new social network!</p>
+         <p><a href=\"/profile/noosfero_person_template/invite/friends\">Invite and find</a> your Gmail, Yahoo and Hotmail contacts!</p>
+         <p>Start exploring and Have fun!</p>" % [environment.name, url_for(:controller => :browse, :action => :people, :filter => 'more_recent')]) %>
+</div>
 <% else %>
+  <h1><%= _('Sign up for %s!') % environment.name %></h1>
   <%= render :partial => 'signup_form' %>
 <% end %>
@@ -0,0 +1,3 @@
+<%= required labelled_form_field(_('Site name'), text_field(:environment, :name)) %>
+<%= required f.text_field(:reports_lower_bound, :size => 3) %>
+<%= labelled_form_field _('Homepage content'), text_area(:environment, :description, :cols => 40, :style => 'width: 90%', :class => 'mceEditor') %>
@@ -0,0 +1 @@
+<%= f.text_area :terms_of_use, :cols => 40, :style => 'width: 90%', :class => 'mceEditor' %>
@@ -15,7 +15,6 @@
   <tr><td><%= link_to _('Edit Templates'), :action => 'edit_templates' %></td></tr>
   <tr><td><%= link_to _('Manage Fields'), :controller => 'features', :action => 'manage_fields' %></td></tr>
   <tr><td><%= link_to _('Set Portal'), :action => 'set_portal_community' %></td></tr>
-  <tr><td><%= link_to _('Terms of use'), :action => 'terms_of_use' %></td></tr>
   <% @plugins.map(:admin_panel_links).each do |link| %>
     <tr><td><%= link_to link[:title], link[:url] %></td></tr>
   <% end %>
@@ -5,10 +5,12 @@
 <%= render :file => 'shared/tiny_mce' %>
 <% labelled_form_for :environment, @environment, :url => {:host => @environment.default_hostname} do |f| %>
-  <%= required labelled_form_field(_('Site name'), text_field(:environment, :name)) %>
-  <%= required f.text_field(:reports_lower_bound, :size => 3) %>
-  <%= labelled_form_field _('Homepage content'), text_area(:environment, :description, :cols => 40, :style => 'width: 90%', :class => 'mceEditor') %>
-
+  <% tabs = [] %>
+  <% tabs << {:title => _('Site info'), :id => 'site-info',
+    :content => (render :partial => 'site_info', :locals => {:f => f})} %>
+  <% tabs << {:title => _('Terms of use'), :id => 'terms-of-use',
+    :content => (render :partial => 'terms_of_use', :locals => {:f => f})} %>
+  <%= render_tabs(tabs) %>
   <% button_bar do %>
     <%= submit_button(:save, _('Save'), :cancel => {:action => 'index'}) %>
   <% end %>
@@ -1,14 +0,0 @@
-<h2><%= _('Terms of use') %></h2>
-
-<%= render :file => 'shared/tiny_mce' %>
-
-<% labelled_form_for :environment, @environment, :url => {:action => 'site_info'} do |f| %>
-
-  <%= f.text_area :terms_of_use, :cols => 40, :style => 'width: 90%' %>
-
-  <% button_bar do %>
-    <%= submit_button(:save, _('Save')) %>
-    <%= button(:cancel, _('Cancel'), :action => 'index') %>
-  <% end %>
-
-<% end %>
@@ -0,0 +1,2 @@
+<h1><%= _('Terms of use - %s') % environment.name %></h1>
+<%= environment.terms_of_use %>
@@ -58,7 +58,7 @@
             <%= usermenu_logged_in %>
           </span>
           <span class='not-logged-in' style='display: none'>
-              <%= _("<span class='login'>%s</span> <span class='or'>or</span> <span class='signup'>%s</span>") % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login'), link_to('<strong>' + _('Register') + '</strong>', :controller => 'account', :action => 'signup') ] %>
+              <%= _("<span class='login'>%s</span> <span class='or'>or</span> <span class='signup'>%s</span>") % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login'), link_to('<strong>' + _('Sign up') + '</strong>', :controller => 'account', :action => 'signup') ] %>
               <div id='inlineLoginBox' style='display: none;'>
                 <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
               </div>
@@ -2,6 +2,8 @@
   <%= required_fields_message %>
-  <%= required f.text_field(:email)%>
+  <%= required f.text_field(:name) %>
+
+  <%= required f.text_field(:email) %>
   <%= render :partial => 'person_form', :locals => {:f => f} %>
 <% @person ||= @profile %>
-<%= required f.text_field(:name) %>
-
 <% optional_field(@person, 'nickname') do %>
-  <%= f.text_field(:nickname, :maxlength => 16, :size => 30) %>
+  <%= f.text_field(:nickname, :maxlength => 16, :size => 30, :rel => _('Nickname')) %>
   <div>
     <small><%= _('A short name by which you like to be known. Will be used in friends listings, community member listings etc.') %></small>
   </div>
 <% end %>
-<%= optional_field(@person, 'description', f.text_area(:description, :rows => 5)) %>
+<%= optional_field(@person, 'description', f.text_area(:description, :rows => 5, :rel => _('Description'))) %>
 <%= optional_field(@person, 'preferred_domain', select_preferred_domain(:profile_data)) %>
-<%= optional_field(@person, 'contact_information', f.text_field(:contact_information)) %>
-<%= optional_field(@person, 'contact_phone', labelled_form_field(_('Home phone'), text_field(:profile_data, :contact_phone))) %>
-<%= optional_field(@person, 'cell_phone', f.text_field(:cell_phone)) %>
-<%= optional_field(@person, 'comercial_phone', f.text_field(:comercial_phone)) %>
+<%= optional_field(@person, 'contact_information', f.text_field(:contact_information, :rel => _('Contact information'))) %>
+<%= optional_field(@person, 'contact_phone', labelled_form_field(_('Home phone'), text_field(:profile_data, :contact_phone, :rel => _('Contact phone')))) %>
+<%= optional_field(@person, 'cell_phone', f.text_field(:cell_phone, :rel => _('Cell phone'))) %>
+<%= optional_field(@person, 'comercial_phone', f.text_field(:comercial_phone, :rel => _('Comercial phone'))) %>
 <%= optional_field(@person, 'sex', f.radio_group(:profile_data, :sex, [ ['male',_('Male')], ['female',_('Female')] ])) %>
 <%= optional_field(@person, 'birth_date', labelled_form_field(_('Birth date'), '<div class="select-birth-date">' + pick_date(:profile_data, :birth_date, {:start_year => (Date.today.year - 100), :end_year => (Date.today.year - 5)}) + '</div>')) %>
-<%= optional_field(@person, 'nationality', f.text_field(:nationality)) %>
+<%= optional_field(@person, 'nationality', f.text_field(:nationality, :rel => _('Nationality'))) %>
 <%= optional_field(@person, 'country', select_country(_('Country'), 'profile_data', 'country', {:class => 'type-select'})) %>
-<%= optional_field(@person, 'state', f.text_field(:state)) %>
-<%= optional_field(@person, 'city', f.text_field(:city)) %>
-<%= optional_field(@person, 'zip_code', labelled_form_field(_('ZIP code'), text_field(:profile_data, :zip_code))) %>
-<%= optional_field(@person, 'address', labelled_form_field(_('Address (street and number)'), text_field(:profile_data, :address))) %>
+<%= optional_field(@person, 'state', f.text_field(:state, :rel => _('State'))) %>
+<%= optional_field(@person, 'city', f.text_field(:city, :rel => _('City'))) %>
+<%= optional_field(@person, 'zip_code', labelled_form_field(_('ZIP code'), text_field(:profile_data, :zip_code, :rel => _('ZIP code')))) %>
+<%= optional_field(@person, 'address', labelled_form_field(_('Address (street and number)'), text_field(:profile_data, :address, :rel => _('Address')))) %>
 <% optional_field(@person, 'schooling') do %>
   <div class="formfieldline">
@@ -47,18 +45,25 @@
 <%= optional_field(@person, 'formation', select_area(_('Education'), 'profile_data', 'formation', {:class => 'type-select-full-line'})) %>
 <span id='profile_data_custom_formation_span' <%= "style='display:none'" if ! ['Others', nil].include?(@person.formation) %> >
-  <%= optional_field(@person, 'custom_formation', f.text_field(:custom_formation)) %>
+  <%= optional_field(@person, 'custom_formation', f.text_field(:custom_formation, :rel => _('Custom formation'))) %>
 </span>
 <%= observe_field 'profile_data_formation', :function =>'toggle_text_field("profile_data_formation", "profile_data_custom_formation_span")' %>
 <%= optional_field(@person, 'area_of_study', select_area(_('Area of study'), 'profile_data', 'area_of_study', {:class => 'type-select-full-line'})) %>
 <span id='profile_data_custom_area_of_study_span' <%= "style='display:none'" if ! ['Others', nil].include?(@person.area_of_study) %> >
-  <%= optional_field(@person, 'custom_area_of_study', f.text_field(:custom_area_of_study)) %>
+  <%= optional_field(@person, 'custom_area_of_study', f.text_field(:custom_area_of_study, :rel => _('Custom area of study'))) %>
 </span>
 <%= observe_field 'profile_data_area_of_study', :function =>'toggle_text_field("profile_data_area_of_study", "profile_data_custom_area_of_study_span")' %>
-<%= optional_field(@person, 'professional_activity', f.text_field(:professional_activity)) %>
-<%= optional_field(@person, 'organization', f.text_field(:organization)) %>
-<%= optional_field(@person, 'organization_website', f.text_field(:organization_website)) %>
+<%= optional_field(@person, 'professional_activity', f.text_field(:professional_activity, :rel => _('Professional activity'))) %>
+<%= optional_field(@person, 'organization', f.text_field(:organization, :rel => _('Organization'))) %>
+<%= optional_field(@person, 'organization_website', f.text_field(:organization_website, :rel => _('Organization website'))) %>
+<% optional_field(@person, 'image') do %>
+  <div id="profile_choose_picture">
+    <% f.fields_for :image_builder, @person.image do |i| %>
+      <%= file_field_or_thumbnail(_('Image:'), @person.image, i) %><span class="person_image_maxsize"><%= _("Max size: %s (.jpg, .gif, .png)")% Image.max_size.to_humanreadable %></span>
+    <% end %>
+  </div>
+<% end %>
@@ -6,12 +6,14 @@
   <%= render :partial => partial_for_class(@profile.class), :locals => { :f => f } %>
+  <% unless @profile.person? && @environment.active_person_fields.include?('image') %>
   <div id="profile_change_picture">
     <h2><%= _('Change picture') %></h2>
     <% f.fields_for :image_builder, @profile.image do |i| %>
       <%= file_field_or_thumbnail(_('Image:'), @profile.image, i) %><%= _("Max size: %s (.jpg, .gif, .png)")% Image.max_size.to_humanreadable %>
     <% end %>
   </div>
+  <% end %>
   <h2><%= _('Privacy options') %></h2>
@@ -20,6 +20,7 @@ ActionController::Routing::Routes.draw do |map|
   # -- just remember to delete public/index.html.
   # You can have the root of your site routed by hooking up ''
   map.connect '', :controller => "home", :conditions => { :if => lambda { |env| !Domain.hosting_profile_at(env[:host]) } }
+  map.home 'site/:action', :controller => 'home'
   map.connect 'images/*stuff', :controller => 'not_found', :action => 'index'
   map.connect 'stylesheets/*stuff', :controller => 'not_found', :action => 'index'
@@ -13,19 +13,19 @@ Feature: signup
       | Password              | secret                |
       | Password confirmation | secret                |
       | Name                  | José da Silva         |
-    And I press "Sign up"
+    And I press "Create my account"
     Then I should not be logged in
-		And I should receive an e-mail on josesilva@example.com
+    And I should receive an e-mail on josesilva@example.com
     When I go to login page
-		And I fill in "Username" with "josesilva"
-		And I fill in "Password" with "secret"
-		And I press "Log in"
+    And I fill in "Username" with "josesilva"
+    And I fill in "Password" with "secret"
+    And I press "Log in"
     Then I should not be logged in
     When José da Silva's account is activated
     And I go to login page
-		And I fill in "Username" with "josesilva"
-		And I fill in "Password" with "secret"
-		And I press "Log in"
+    And I fill in "Username" with "josesilva"
+    And I fill in "Password" with "secret"
+    And I press "Log in"
     Then I should be logged in as "josesilva"
   Scenario: be redirected if user goes to signup page and is logged
@@ -44,7 +44,7 @@ Feature: signup
     And I fill in "Username" with "josesilva"
     And I fill in "Password" with "secret"
     And I fill in "Password confirmation" with "secret"
-    And I press "Sign up"
+    And I press "Create my account"
     Then I should see "Name can't be blank"
   Scenario: user cannot change his name to empty string
@@ -6420,33 +6420,384 @@ h1#agenda-title {
 /* Captcha */
-.comment_reply #recaptcha_area {
-  margin-bottom: 3px !important;
-}
+/* Colorbox */
-.comment_reply .recaptchatable tr td + td + td {
+#cboxClose {
   display: none !important;
 }
-.comment_reply .recaptcha-container {
+/* Signup interface {{{ */
+
+#url-check {
+  margin: 0 0 -5px 0;
   width: 100%;
-  overflow: hidden;
+  text-align: right;
 }
-.comment_reply .recaptcha-container:hover {
-  overflow: visible;
+#email-check,
+#fake-check,
+#password-check {
+  margin: -2px 171px -5px 0;
+  text-align: right;
+  clear: both;
+}
+
+#email-check p,
+#fake-check p,
+#password-check p {
+  margin: 0;
+}
+
+.available {
+  color: #88BD00;
+}
+
+.unavailable {
+  color: #FFA000;
+}
+
+.checking {
+  color: #4A4A4A;
+}
+
+#email-check p,
+#password-check p,
+#url-check p {
+  margin: 0;
+  text-transform: lowercase;
+  font-size: 11px;
+  clear: both;
+}
+
+.action-account-signup #main-content-wrapper-8 {
+  background: #ECECEC;
+}
+
+@font-face {
+  font-family: droidserif;
+  src: url('/fonts/DroidSerif-Regular.eot'); /* EOT file for IE */
+  src: local("DroidSerif-Regular"), url('/fonts/DroidSerif-Regular.ttf');
+}
+
+.action-account-signup #content .no-boxes h1 {
+  font-variant: normal;
+  border-bottom: 0;
+  color: #666666;
+  font-family: droidserif, serif;
+  font-weight: lighter;
+  text-align: center;
+  margin-top: 35px;
+  margin-left: 12px;
+}
+
+.action-account-signup #wrap-1 label,
+.action-account-signup #wrap-1 small,
+.action-account-signup #wrap-1 #user_password,
+.action-account-signup #wrap-1 #user_password_confirmation {
+   display: none;
+}
+
+.action-account-signup #wrap-1 #signup-form-header {
+  background: #E3E3E3;
+  padding: 22px 0;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  margin: 60px auto 20px;
+  position: relative;
+  width: 563px;
+}
+
+.action-account-signup #wrap-1 .formfield input.invalid_input {
+  border: 2px solid #FFA000;
+  background: #FFF;
+  padding: 5px 30px 8px 5px;
+}
+
+.action-account-signup #wrap-1 .formfield input.valid_input {
+  border: 2px solid #88BD00;
+  background: #FFF;
+  padding: 5px 30px 8px 5px;
 }
-.comment_reply .recaptcha-container tr:hover td {
+.action-account-signup #wrap-1 .formfield select,
+.action-account-signup #wrap-1 .formfield textarea,
+.action-account-signup #wrap-1 #profile_data_name,
+.action-account-signup #wrap-1 .formfield input {
+  background: transparent url(/images/field-bg.png) left top no-repeat;
+  padding: 7px 3px 10px 7px;
+  height: 24px;
+  width: 335px;
+  color: #6d786e;
+  font-size: 20px;
+  font-family: droidserif, serif;
+  margin: 9px 14px 0;
+  border: 0;
+  padding-right: 30px;
+}
+
+.action-account-signup #wrap-1 #user_login.checking,
+.action-account-signup #wrap-1 #user_login.available,
+.action-account-signup #wrap-1 #user_login.unavailable,
+.action-account-signup #wrap-1 #user_email.checking,
+.action-account-signup #wrap-1 #user_email.available,
+.action-account-signup #wrap-1 #user_email.unavailable,
+.action-account-signup #wrap-1 .formfield input.passwords_differ,
+.action-account-signup #wrap-1 .formfield input.passwords_match {
+  border-width: 2px;
+  border-style: solid;
+  background-color: #fff;
+  background-position: right center;
+  background-repeat: no-repeat;
+  padding: 5px 30px 8px 5px;
+}
+
+.action-account-signup #wrap-1 .formfield select.filled-in,
+.action-account-signup #wrap-1 .formfield textarea.filled-in,
+.action-account-signup #wrap-1 #profile_data_name.filled-in,
+.action-account-signup #wrap-1 .formfield input.filled-in {
+   color: #4A4A4A;
+}
+
+.action-account-signup #wrap-1 .formfield select {
+  height: auto;
+  padding-right: 3px;
+  width: 365px;
+}
+
+.action-account-signup #wrap-1 .formfield .select-birth-date select {
+  width: 93px;
+  margin-right: 2px;
+  margin-left: 0;
+}
+
+.webkit.action-account-signup #wrap-1 .formfield select {
+  background: #fff;
+}
+
+.action-account-signup #wrap-1 .formfield textarea {
+  background: #fff;
+  height: 100px;
+  padding-right: 3px;
+  width: 365px;
+}
+
+.action-account-signup #wrap-1 .formfield input[type=file] {
+  font-size: 12px;
+}
+
+.action-account-signup #wrap-1 input[type=radio] {
+  height: auto;
+  margin: 0;
+  margin-left: 3px;
+}
+
+.action-account-signup #wrap-1 .fieldgroup {
+  margin: 5px 10px;
+}
+
+.action-account-signup #wrap-1 label[for=profile_data_sex_female],
+.action-account-signup #wrap-1 label[for=profile_data_sex_male] {
+  color: #6d786e;
+  font-size: 20px;
+  font-family: droidserif;
+  text-transform: lowercase;
+  display: inline;
+  margin-left: 8px;
+}
+
+.action-account-signup #wrap-1 label[for=profile_data_country],
+.action-account-signup #wrap-1 label[for=profile_data_preferred_domain_id],
+.action-account-signup #wrap-1 label[for=profile_data_birth_date_2i],
+.action-account-signup #wrap-1 label[for=profile_data_birth_date_3i],
+.action-account-signup #wrap-1 label[for=profile_data_schooling],
+.action-account-signup #wrap-1 label[for=profile_data_formation],
+.action-account-signup #wrap-1 label[for=profile_data_area_of_study],
+.action-account-signup #wrap-1 label[for=profile_data_image_builder_uploaded_data] {
+  display: block;
+}
+
+.action-account-signup #wrap-1 #profile_data_name {
+  padding-left: 10px;
+}
+
+.action-account-signup #wrap-1 #user_login.unavailable,
+.action-account-signup #wrap-1 #user_email.unavailable,
+.action-account-signup #wrap-1 .formfield input.passwords_differ {
+  border-color: #FFA000;
+  background-image: url(/images/passwords_nomatch.png);
+}
+
+.action-account-signup #wrap-1 #user_email.checking,
+.action-account-signup #wrap-1 #user_login.checking {
+  border-color: #4A4A4A;
+  background-image: url(/images/login_checking.png);
+}
+
+.action-account-signup #wrap-1 #user_login.available,
+.action-account-signup #wrap-1 #user_email.available,
+.action-account-signup #wrap-1 .formfield input.passwords_match {
+  border-color: #88BD00;
+  background-image: url(/images/passwords_match.png);
+}
+
+#signup-domain {
+  float: left;
+  display: inline-block;
+  vertical-align: middle;
+  background: #EAEAEA;
+  border-right: 2px solid #FFFFFF;
+  border-top: 2px solid #FFFFFF;
+  border-left: 2px solid #CFCFCF;
+  border-bottom: 2px solid #CFCFCF;
+  line-height: 37px;
+  padding: 0px 7px;
+  color: #4A4A4A;
+  font-size: 20px;
+  font-family: droidserif;
+  text-transform: lowercase;
+  margin-left: 14px;
+}
+
+.action-account-signup #wrap-1 #signup-form-header #user_login {
+  margin: 0;
+  width: 200px;
+  padding-right: 30px;
+}
+
+#url-check {
+  width: 239px;
+}
+
+#signup-login-field {
+  float: left;
+}
+
+.action-account-signup #wrap-1 #signup-password,
+.action-account-signup #wrap-1 #signup-password-confirmation,
+.action-account-signup #wrap-1 #signup-login {
+  position: relative;
+}
+
+.action-account-signup #wrap-1 small#signup-balloon,
+.action-account-signup #wrap-1 small#password-balloon {
+  display: none;
+  width: 142px;
+  height: 69px;
+  color: #FFFFFF;
+  font-weight: bold;
+  font-size: 11px;
+  padding: 5px 10px 45px 10px;
+  margin: 0;
+  line-height: 1.5em;
+  background: transparent url(/images/orange-balloon.png) bottom center no-repeat;
+  position: absolute;
+  z-index: 2;
+  right: -40px;
+  top: -100px;
+}
+
+.action-account-signup #wrap-1 .required-field label,
+.action-account-signup #wrap-1 .formlabel {
+  color: #b4b9b5;
+  font-size: 20px;
+  text-transform: lowercase;
+  font-weight: normal;
+  margin-left: 15px;
+  font-family: droidserif;
+}
+
+.action-account-signup #wrap-1 .required-field label::after {
+  content: '';
+}
+
+.action-account-signup #wrap-1 div.fieldWithErrors {
   background: transparent;
 }
-.comment_reply .recaptcha_image_cell {
-  background: transparent !important;
+.person_image_maxsize {
+  margin: 0 18px;
+  font: 13px sans-serif;
+  color: #BABABA;
 }
-/* Colorbox */
+#terms-of-use-box {
+  margin: 20px 0 30px 40px;
+  color: #4A4A4A;
+}
-#cboxClose {
-  display: none !important;
+#terms-of-use-box input[type=checkbox] {
+  border: 1px solid #FFA514;
+  background: #FFF;
+}
+
+.action-account-signup #terms-of-use-box label {
+  display: inline;
+  font-size: 16px;
+}
+
+.action-account-signup #terms-of-use-box label a {
+  color: #FF7F2A;
+}
+
+.action-account-signup #content form input.button.submit {
+  border: 0;
+  padding: 8px 36px 12px;
+  background: transparent url(/images/orange-bg.png) left center repeat-x;
+  font-size: 17px;
+  font-family: droidserif;
+  color: #FFFFD5;
+  text-align: center;
+  text-shadow: #d45500 0 -1px 0;
+  border-radius: 7px;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  max-height: none;
+  height: 39px;
+}
+
+.action-account-signup .no-boxes {
+  margin-left: 128px;
+  margin-right: 128px;
+}
+
+#signup-form-profile {
+  margin: 30px 0 0 40px;
+}
+
+.select-birth-date {
+  margin-left: 14px;
+}
+
+#thanks-for-signing {
+  font-size: 15px;
+  text-align: center;
+}
+
+.action-account-signup .formfieldline {
+  padding: 0;
 }
+
+#thanks-for-signing {
+  text-align: left;
+}
+
+#thanks-for-signing h3 {
+  color: #FF7F2A;
+  font-family: 'Liberation Sans', Arial, sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  text-align: center;
+}
+
+#thanks-for-signing a {
+  color: #333;
+}
+
+#thanks-for-signing h4 {
+  font-family: droidserif, serif;
+  color: #6D786E;
+  font-size: 20px;
+}
+
+/* }}} */
@@ -666,6 +666,22 @@ class AccountControllerTest &lt; Test::Unit::TestCase
     assert_equal 'unavailable', assigns(:status_class)
   end
+  should 'check if e-mail is available on environment' do
+    env = fast_create(Environment, :name => 'Environment test')
+    @controller.expects(:environment).returns(env).at_least_once
+    profile = create_user('mylogin', :email => 'mylogin@noosfero.org', :environment_id => fast_create(Environment).id)
+    get :check_email, :address => 'mylogin@noosfero.org'
+    assert_equal 'available', assigns(:status_class)
+  end
+
+  should 'check if e-mail is not available on environment' do
+    env = fast_create(Environment, :name => 'Environment test')
+    @controller.expects(:environment).returns(env).at_least_once
+    profile = create_user('mylogin', :email => 'mylogin@noosfero.org', :environment_id => env)
+    get :check_email, :address => 'mylogin@noosfero.org'
+    assert_equal 'unavailable', assigns(:status_class)
+  end
+
   should 'merge user data with extra stuff from plugins' do
     class Plugin1 < Noosfero::Plugin
       def user_data_extras
@@ -719,6 +735,42 @@ class AccountControllerTest &lt; Test::Unit::TestCase
     assert_redirected_to '/bli'
   end
+  should 'be able to upload an image' do
+    new_user({}, :profile_data => { :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png') } })
+    assert_not_nil Person.last.image
+  end
+
+  should 'not be able to upload an image bigger than max size' do
+    Image.any_instance.stubs(:size).returns(Image.attachment_options[:max_size] + 1024)
+    new_user({}, :profile_data => { :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png') } })
+    assert_nil Person.last.image
+  end
+
+  should 'display error message when image has more than max size' do
+    Image.any_instance.stubs(:size).returns(Image.attachment_options[:max_size] + 1024)
+    new_user({}, :profile_data => { :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png') } })
+    assert_tag :tag => 'div', :attributes => { :class => 'errorExplanation', :id => 'errorExplanation' }
+  end
+
+  should 'not display error message when image has less than max size' do
+    Image.any_instance.stubs(:size).returns(Image.attachment_options[:max_size] - 1024)
+    new_user({}, :profile_data => { :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png') } })
+    assert_no_tag :tag => 'div', :attributes => { :class => 'errorExplanation', :id => 'errorExplanation' }
+  end
+
+  should 'not redirect when some file has errors' do
+    Image.any_instance.stubs(:size).returns(Image.attachment_options[:max_size] + 1024)
+    new_user({}, :profile_data => { :image_builder => { :uploaded_data => fixture_file_upload('/files/rails.png', 'image/png') } })
+    assert_response :success
+    assert_template 'signup'
+  end
+
+  should 'remove useless user data on signup' do
+    assert_nothing_raised do
+      new_user :password_clear => 'nothing', :password_confirmation_clear => 'nothing'
+    end
+  end
+
   protected
     def new_user(options = {}, extra_options ={})
       data = {:profile_data => person_data}
@@ -67,15 +67,11 @@ class AdminPanelControllerTest &lt; Test::Unit::TestCase
     assert_tag :tag => 'a', :attributes => { :href => '/admin/admin_panel/message_for_disabled_enterprise' }
   end
-  should 'link to define terms of use' do
-    get :index
-    assert_tag :tag => 'a', :attributes => { :href => '/admin/admin_panel/terms_of_use' }
-  end
- 
   should 'display form for editing site info' do
     get :site_info
     assert_template 'site_info'
     assert_tag :tag => 'textarea', :attributes => { :name => 'environment[description]'}
+    assert_tag :tag => 'textarea', :attributes => { :name => 'environment[terms_of_use]'}
   end
   should 'display form for editing message for disabled enterprise' do
@@ -84,12 +80,6 @@ class AdminPanelControllerTest &lt; Test::Unit::TestCase
     assert_tag :tag => 'textarea', :attributes => { :name => 'environment[message_for_disabled_enterprise]'}
   end
-  should 'display form for editing terms of use' do
-    get :terms_of_use
-    assert_template 'terms_of_use'
-    assert_tag :tag => 'textarea', :attributes => { :name => 'environment[terms_of_use]'}
-  end
-
   should 'save site description' do
     post :site_info, :environment => { :description => "This is my new environment" }
     assert_redirected_to :action => 'index'
@@ -86,5 +86,11 @@ all_fixtures
     assert block.visible?
   end
+  should 'access terms of use of environment' do
+    env = Environment.default
+    env.update_attribute(:terms_of_use, 'Noosfero terms of use')
+    get :terms
+    assert_tag :content => /Noosfero terms of use/
+  end
 end
@@ -893,4 +893,22 @@ class ProfileEditorControllerTest &lt; Test::Unit::TestCase
     assert_tag :tag => 'input', :attributes => {:id => 'field_added_by_plugin', :value => 'value_of_field_added_by_plugin'}
   end
+  should 'show image upload field from environment person fields' do
+    env = Environment.default
+    env.custom_person_fields = { 'image' => {'active' => 'true', 'required' => 'true'} }
+    env.save!
+    get :edit, :profile => profile.identifier
+    assert_tag :tag => 'input', :attributes => { :name => 'profile_data[image_builder][uploaded_data]' }
+    assert_no_tag :tag => 'div', :attributes => { :id => 'profile_change_picture' }
+  end
+
+  should 'show image upload field from profile editor' do
+    env = Environment.default
+    env.custom_person_fields = { }
+    env.save!
+    get :edit, :profile => profile.identifier
+    assert_tag :tag => 'input', :attributes => { :name => 'profile_data[image_builder][uploaded_data]' }
+    assert_tag :tag => 'div', :attributes => { :id => 'profile_change_picture' }
+  end
+
 end
@@ -64,7 +64,7 @@ class PersonTest &lt; Test::Unit::TestCase
   should "have person info fields" do
     p = Person.new(:environment => Environment.default)
-    [ :name, :photo, :contact_information, :birth_date, :sex, :address, :city, :state, :country, :zip_code ].each do |i|
+    [ :name, :photo, :contact_information, :birth_date, :sex, :address, :city, :state, :country, :zip_code, :image ].each do |i|
       assert_respond_to p, i
     end
   end
	@@ -14,4 +14,8 @@ class HomeController < PublicController		@@ -14,4 +14,8 @@ class HomeController < PublicController
14	end	14	end
15	end	15	end
16		16
		17	+ def terms
		18	+ @no_design_blocks = true
		19	+ end
		20	+
17	end	21	end
1	module AccountHelper	1	module AccountHelper
2		2
		3	+ def validation_classes
		4	+ 'available unavailable valid invalid checking'
		5	+ end
		6	+
		7	+ def checking_message(key)
		8	+ case key
		9	+ when :url
		10	+ _('Checking availability of login name...')
		11	+ when :email
		12	+ _('Checking if e-mail address is already taken...')
		13	+ end
		14	+ end
3	end	15	end
	@@ -1317,4 +1317,14 @@ module ApplicationHelper		@@ -1317,4 +1317,14 @@ module ApplicationHelper
1317	) + content_tag('span', ' \| ', :class => 'comment-footer comment-footer-hide')	1317	) + content_tag('span', ' \| ', :class => 'comment-footer comment-footer-hide')
1318	end	1318	end
1319	end	1319	end
		1320	+
		1321	+ def render_tabs(tabs)
		1322	+ titles = tabs.inject(''){ \|result, tab\| result << content_tag(:li, link_to(tab[:title], '#'+tab[:id]), :class => 'tab') }
		1323	+ contents = tabs.inject(''){ \|result, tab\| result << content_tag(:div, tab[:content], :id => tab[:id]) }
		1324	+
		1325	+ content_tag :div, :class => 'ui-tabs' do
		1326	+ content_tag(:ul, titles) + contents
		1327	+ end
		1328	+ end
		1329	+
1320	end	1330	end
	@@ -15,12 +15,4 @@ module ProfileHelper		@@ -15,12 +15,4 @@ module ProfileHelper
15	end	15	end
16	end	16	end
17		17
18	- def render_tabs(tabs)
19	- titles = tabs.inject(''){ \|result, tab\| result << content_tag(:li, link_to(tab[:title], '#'+tab[:id]), :class => 'tab') }
20	- contents = tabs.inject(''){ \|result, tab\| result << content_tag(:div, tab[:content], :id => tab[:id]) }
21	-
22	- content_tag :div, :class => 'ui-tabs' do
23	- content_tag(:ul, titles) + contents
24	- end
25	- end
26	end	18	end
	@@ -116,6 +116,7 @@ class Person < Profile		@@ -116,6 +116,7 @@ class Person < Profile
116	contact_phone	116	contact_phone
117	contact_information	117	contact_information
118	description	118	description
		119	+ image
119	]	120	]
120		121
121	validates_multiparameter_assignments	122	validates_multiparameter_assignments
	@@ -148,6 +148,7 @@ class Profile < ActiveRecord::Base		@@ -148,6 +148,7 @@ class Profile < ActiveRecord::Base
148	doc	148	doc
149	chat	149	chat
150	plugin	150	plugin
		151	+ site
151	]	152	]
152		153
153	belongs_to :user	154	belongs_to :user
@@ -0,0 +1,7 @@		@@ -0,0 +1,7 @@
	1	+<div class='status-identifier'>
	2	+ <p><span class='<%= @status_class %>'><%= @status %></span></p>
	3	+ <script type="text/javascript">
	4	+ jQuery('#user_email').removeClass('<%= validation_classes %>');
	5	+ jQuery('#user_email').addClass('<%= @status_class %>');
	6	+ </script>
	7	+</div>
1	<div class='status-identifier'>	1	<div class='status-identifier'>
2	- <p><%= @url %> <span class='<%= @status_class %>'><%= @status %></span> </p>	2	+ <p><span class='<%= @status_class %>'><%= @status %></span></p>
		3	+ <script type="text/javascript">
		4	+ jQuery('#user_login').removeClass('<%= validation_classes %>');
		5	+ jQuery('#user_login').addClass('<%= @status_class %>');
		6	+ </script>
3	</div>	7	</div>
1	<%= error_messages_for :user, :person %>	1	<%= error_messages_for :user, :person %>
2		2
3	-<% if ! defined? hidden_atention \|\| ! hidden_atention %>
4	-<p/>
5	-<div class="atention">
6	-<%= _('Dear user, welcome to the %s network. To start your participation in this space, fill in the fields below. After this operation, your login and password will be registered, allowing you to create %s and %s in this environment.') % [environment.name, __('communities'), __('enterprises')] %>
7	-</div>
8	-<% end %>
9	-
10	-<% labelled_form_for :user, @user, :html => { :multipart => true } do \|f\| %>	3	+<% labelled_form_for :user, @user, :html => { :multipart => true, :id => 'signup-form' } do \|f\| %>
11		4
12	<%= hidden_field_tag :invitation_code, @invitation_code %>	5	<%= hidden_field_tag :invitation_code, @invitation_code %>
13		6
14	-<%= required_fields_message %>	7	+<div id='signup-form-header'>
15		8
16	-<div id='signup-email'>
17	- <%= required f.text_field(:email) %>
18	- <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
19	-</div>	9	+ <span id="signup-domain"><%= environment.default_hostname %>/</span>
		10	+ <div id='signup-login'>
		11	+ <div id='signup-login-field'>
		12	+ <%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin(this.value);', :rel => s_('signup\|Login')) %>
		13	+ <div id='url-check'><p> </p></div>
		14	+ </div>
		15	+ <%= content_tag(:small, _('Choose your login name carefully! It will be your network access and you will not be able to change it later.'), :id => 'signup-balloon') %>
		16	+ <br style="clear: both;" />
		17	+ </div>
		18	+ <%= observe_field 'user_login',
		19	+ :url => { :action => 'check_url' },
		20	+ :with => 'identifier',
		21	+ :update => 'url-check',
		22	+ :loading => "jQuery('#user_login').removeClass('#{validation_classes}').addClass('checking');
		23	+ jQuery('#url-check').html('<p><span class=\"checking\">#{checking_message(:url)}</span></p>');",
		24	+ :complete => "jQuery('#user_login').removeClass('checking')"
		25	+ %>
20		26
21	-<%= required f.text_field(:login, :onchange => 'this.value = convToValidLogin( this.value )') %>
22	-<%= content_tag(:small,_('Insert your login')) %>
23	-<div id='url-check'></div>	27	+ <div id='signup-password'>
		28	+ <%= required f.password_field(:password, :id => 'user_pw') %>
		29	+ <%= f.text_field(:password_clear, :value => _('password')) %>
		30	+ <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.'), :id => 'password-balloon') %>
		31	+ <div id='fake-check'><p> </p></div>
		32	+ </div>
		33	+
		34	+ <div id='signup-password-confirmation'>
		35	+ <%= required f.password_field(:password_confirmation) %>
		36	+ <%= f.text_field(:password_confirmation_clear, :value => _('password confirmation')) %>
		37	+ <div id='password-check'><p> </p></div>
		38	+ </div>
		39	+
		40	+ <div id='signup-email'>
		41	+ <%= required f.text_field(:email, :rel => _('e-Mail')) %>
		42	+ <%= content_tag(:small,_('This e-mail address will be used to contact you.')) %>
		43	+ <div id='email-check'><p> </p></div>
		44	+ </div>
		45	+ <%= observe_field "user_email",
		46	+ :url => { :action => "check_email" },
		47	+ :with => "address",
		48	+ :update => "email-check",
		49	+ :loading => "jQuery('#user_email').removeClass('#{validation_classes}').addClass('checking');
		50	+ jQuery('#email-check').html('<p><span class=\"checking\">#{checking_message(:email)}</span></p>');",
		51	+ :complete => "jQuery('#user_email').removeClass('checking')",
		52	+ :before => "if (!( jQuery('#user_email').valid() )) {
		53	+ jQuery('#user_email').removeClass('#{validation_classes}').addClass('unavailable');
		54	+ jQuery('#email-check').html('<p><span class=\"unavailable\">#{_('This e-mail address is not valid')}</span></p>');
		55	+ return false;
		56	+ }"
		57	+ %>
24		58
25	-<%= observe_field 'user_login', :url => {:action => 'check_url'}, :with => 'identifier', :update => 'url-check' %>	59	+ <%= label :profile_data, :name %>
		60	+ <%= required text_field(:profile_data, :name, :rel => _('Full name')) %>
26		61
27	-<div id='signup-password'>
28	- <%= required f.password_field(:password) %>
29	- <%= content_tag(:small,_('Choose a password that you can remember easily. It must have at least 4 characters.')) %>
30	</div>	62	</div>
31		63
32	-<%= required f.password_field(:password_confirmation) %>
33	-<%= content_tag(:small,_('To confirm, repeat your password.')) %>
34	-
35	-<% labelled_fields_for :profile_data, @person do \|f\| %>
36	- <%= render :partial => 'profile_editor/person_form', :locals => {:f => f} %>
37	-<% end %>
38	-
39	-<% unless @terms_of_use.blank? %>
40	- <div id='terms-of-use-box' class='formfieldline'>
41	- <%= _("By clicking on 'I accept the terms of use' below you are agreeing to the %s") %
42	- link_to_function(_('Terms of use'), nil) do \|page\|
43	- page['terms-of-use'].show
44	- end %>
45	-
46	- <div id='terms-of-use' style='display: none;'>
47	- <%= @terms_of_use %>
48	- <%= link_to_function(_('Hide'), nil) do \|page\|
49	- page['terms-of-use'].hide
50	- end %>	64	+<div id="signup-form-profile">
		65	+
		66	+ <% labelled_fields_for :profile_data, @person do \|f\| %>
		67	+ <%= render :partial => 'profile_editor/person_form', :locals => {:f => f} %>
		68	+ <% end %>
		69	+
		70	+ <% unless @terms_of_use.blank? %>
		71	+ <div id='terms-of-use-box' class='formfieldline'>
		72	+ <%= labelled_check_box(_('I accept the %s') % link_to(_('terms of use'), {:controller => 'home', :action => 'terms'}, :target => '_blank'), 'user[terms_accepted]') %>
51	</div>	73	</div>
52	- <p><%= labelled_check_box(environment.terms_of_use_acceptance_text.blank? ? _('I accept the terms of use') : environment.terms_of_use_acceptance_text, 'user[terms_accepted]') %></p>
53	- </div>
54	-<% end %>
55	-
56	-<% if params[:enterprise_code] %>
57	- <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
58	- <%= hidden_field_tag :answer, params[:answer] %>
59	- <%= hidden_field_tag :terms_accepted, params[:terms_accepted] %>
60	- <%= hidden_field_tag :new_user, true %>
61	-<% end %>
62	-
63	-<% button_bar do %>
64	- <%= submit_button('save', _('Sign up'), :cancel => {:action => 'index'}, :class => 'icon-menu-login') %>
65	-<% end %>	74	+ <% end %>
		75	+
		76	+ <% if params[:enterprise_code] %>
		77	+ <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
		78	+ <%= hidden_field_tag :answer, params[:answer] %>
		79	+ <%= hidden_field_tag :terms_accepted, params[:terms_accepted] %>
		80	+ <%= hidden_field_tag :new_user, true %>
		81	+ <% end %>
		82	+</div>
		83	+
		84	+<p style="text-align: center">
		85	+ <%= submit_button('save', _('Create my account')) %>
		86	+</p>
		87	+
66	<% end -%>	88	<% end -%>
		89	+
		90	+<script type="text/javascript">
		91	+jQuery(function($) {
		92	+ $('#signup-form input[type=text], #signup-form textarea').each(function() {
		93	+ if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
		94	+ if ($(this).val() == '') $(this).val(default_value);
		95	+ $(this).bind('focus', function() {
		96	+ if ($(this).val() == default_value) $(this).val('');
		97	+ });
		98	+ $(this).bind('blur', function() {
		99	+ if ($(this).val() == '') {
		100	+ $(this).val(default_value);
		101	+ $(this).removeClass('filled-in');
		102	+ }
		103	+ else $(this).addClass('filled-in');
		104	+ });
		105	+ });
		106	+
		107	+ $('#signup-form').bind('submit', function() {
		108	+ $('#signup-form input[type=text], #signup-form textarea').each(function() {
		109	+ if ($(this).attr('rel')) var default_value = $(this).attr('rel').toLowerCase();
		110	+ if ($(this).val() == default_value) $(this).val('');
		111	+ });
		112	+ return true;
		113	+ });
		114	+
		115	+ $('#user_password_clear, #user_password_confirmation_clear').show();
		116	+ $('#user_password_clear, #user_password_confirmation_clear').unbind();
		117	+ $('#user_pw, #user_password_confirmation').hide();
		118	+ $('#user_password_clear').focus(function() {
		119	+ $(this).hide();
		120	+ $('#user_pw').show();
		121	+ $('#user_pw').focus();
		122	+ });
		123	+ $('#user_pw').focus(function() {
		124	+ $('#password-balloon').fadeIn('slow');
		125	+ });
		126	+ $('#user_pw').blur(function() {
		127	+ if ($(this).val() == '') {
		128	+ $('#user_password_clear').show();
		129	+ $(this).hide();
		130	+ }
		131	+ });
		132	+ $('#user_password_confirmation_clear').focus(function() {
		133	+ $(this).hide();
		134	+ $('#user_password_confirmation').show();
		135	+ $('#user_password_confirmation').focus();
		136	+ });
		137	+ $('#user_password_confirmation, #user_pw').blur(function() {
		138	+ if ($('#user_password_confirmation').val() == '') {
		139	+ $('#user_password_confirmation_clear').show();
		140	+ $('#user_password_confirmation').hide();
		141	+ } else if ($('#user_password_confirmation').val() == $('#user_pw').val()) {
		142	+ $('#user_password_confirmation').addClass('passwords_match').removeClass('passwords_differ');
		143	+ $('#user_pw').removeClass('invalid_input').addClass('valid_input');
		144	+ $('#password-check').html("<p> </p>");
		145	+ } else if ($('#user_password_confirmation').val() != $('#user_pw').val()) {
		146	+ $('#user_password_confirmation').removeClass('passwords_match').addClass('passwords_differ');
		147	+ $('#user_pw').addClass('invalid_input').removeClass('valid_input');
		148	+ $('#password-check').html("<p><span class='unavailable'><%= _('Passwords don\'t match') %></span></p>");
		149	+ }
		150	+ $('#password-balloon').fadeOut('slow');
		151	+ });
		152	+ $('#user_login').focus(function() {
		153	+ $('#signup-balloon').fadeIn('slow');
		154	+ });
		155	+ $('#user_login').blur(function() { $('#signup-balloon').fadeOut('slow'); });
		156	+ $('#signup-form').validate({ rules: { 'user[email]': { email: true } }, messages: { 'user[email]' : '' } });
		157	+});
		158	+</script>
1	-<h1><%= _('Signup') %></h1>
2	<% if @register_pending %>	1	<% if @register_pending %>
3	- <%= _('Thanks for signing up! Now check your e-mail to activate your account!') %>
4	- <p style="text-align: center"><%= link_to(_('Go to the homepage'), '/') %></p>	2	+<div id='thanks-for-signing'>
		3	+ <%= _("<h1>Welcome to %s!</h1>
		4	+ <h3>Thanks for signing up, we're thrilled to have you on our social network!</h3>
		5	+ <p>Firsty, some tips for getting started:</p>
		6	+ <h4>Confirm your account!</h4>
		7	+ <p>You should receive a welcome email from us shortly. Please take a second to follow the link within to confirm your account.</p>
		8	+ <p>You won't appear as a <a href=\"%s\">user</a> until your account is confirmed.</p>
		9	+ <h4>What to do next?</h4>
		10	+ <p><a href=\"/doc/user/editing-person-info\">Customize your profile</a>. Upload an avatar and sign up for activity notifications under Account.</p>
		11	+ <p>Learn the guidelines. Read the <a href=\"/doc\">Documentation</a> for more details on how to use new social network!</p>
		12	+ <p><a href=\"/profile/noosfero_person_template/invite/friends\">Invite and find</a> your Gmail, Yahoo and Hotmail contacts!</p>
		13	+ <p>Start exploring and Have fun!</p>" % [environment.name, url_for(:controller => :browse, :action => :people, :filter => 'more_recent')]) %>
		14	+</div>
5	<% else %>	15	<% else %>
		16	+ <h1><%= _('Sign up for %s!') % environment.name %></h1>
6	<%= render :partial => 'signup_form' %>	17	<%= render :partial => 'signup_form' %>
7	<% end %>	18	<% end %>