From: Tom Hughes <tom@compton.nu>
Date: Sun, 9 May 2010 16:03:51 +0000 (+0100)
Subject: Rework the signup page
X-Git-Tag: live~6313
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/a53c7bf623f7a08706eaf73de44380fbf11b14ad?ds=sidebyside

Rework the signup page
---

diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
index 923a6cfec..b558311d2 100644
--- a/app/controllers/user_controller.rb
+++ b/app/controllers/user_controller.rb
@@ -326,7 +326,7 @@ class UserController < ApplicationController
     @openID = params['openid']
 	
     if !params['openid'].nil?
-	  flash.now[:notice] = t 'user.new.openID association'
+      flash.now[:notice] = t 'user.new.openid association'
     end
   end
 
diff --git a/app/helpers/user_helper.rb b/app/helpers/user_helper.rb
index 006a3d32f..ce32e4c60 100644
--- a/app/helpers/user_helper.rb
+++ b/app/helpers/user_helper.rb
@@ -1,4 +1,8 @@
 module UserHelper
+  def openid_logo
+    image_tag "openid_small.png", :alt => t('user.login.openid_logo_alt'), :class => "openid_logo"
+  end
+
   def openid_button(name, url)
     link_to_function(
       image_tag("#{name}.png", :alt => t("user.login.openid_providers.#{name}.alt")),
diff --git a/app/views/user/login.html.erb b/app/views/user/login.html.erb
index 37b852a52..074031796 100644
--- a/app/views/user/login.html.erb
+++ b/app/views/user/login.html.erb
@@ -37,7 +37,7 @@
       <h3><%= t 'user.login.openid_heading' %></h3>
       <div id="openid_buttons">
         <%=
-          link_to_function(image_tag("openid_logo.png", :alt => t("user.login.openid_providers.openid.title")), nil, :title => t("user.login.openid_providers.openid.title")) do |page|
+          link_to_function(image_tag("openid_large.png", :alt => t("user.login.openid_providers.openid.title")), nil, :title => t("user.login.openid_providers.openid.title")) do |page|
             page[:login_form][:user_openid_url].value = "http://"
             page[:openid_buttons].hide
             page[:openid_url].show
@@ -55,8 +55,7 @@
       <table>
         <tr id="openid_url">
           <td class="fieldName">
-            <%= image_tag "openid-16x16.gif", :alt => t('user.login.openid_logo_alt') %>
-            <%= t 'user.login.openid' %>
+            <%= t 'user.login.openid', :logo => openid_logo %>
           </td>
           <td><%= text_field(:user, :openid_url, { :size => 28, :maxlength => 255, :tabindex => 3, :class => "openid_url" }) %></td>
         </tr>
diff --git a/app/views/user/new.html.erb b/app/views/user/new.html.erb
index 7ac168eba..61bba4bbb 100644
--- a/app/views/user/new.html.erb
+++ b/app/views/user/new.html.erb
@@ -2,49 +2,88 @@
 
 <% if Acl.find_by_address(request.remote_ip, :conditions => {:k => "no_account_creation"}) %>
 
-<p><%= t 'user.new.no_auto_account_create' %>
-</p>
+<p><%= t 'user.new.no_auto_account_create' %></p>
 
-<p><%= t 'user.new.contact_webmaster' %>
-</p>
+<p><%= t 'user.new.contact_webmaster' %></p>
 
 <% else %>
 
-<p><%= t 'user.new.fill_form' %>
-</p>
+<p><%= t 'user.new.fill_form' %></p>
 
-<p><%= t 'user.new.license_agreement' %>
-</p>
+<p><%= t 'user.new.license_agreement' %></p>
 
 <%= error_messages_for 'user' %>
 
 <% form_tag :action => 'save' do %>
-<%= hidden_field_tag('referer', h(params[:referer])) unless params[:referer].nil? %>
-<table id="signupForm">
-  <tr><td class="fieldName"><%= t 'user.new.email address' %></td><td><%= text_field('user', 'email',{:size => 50, :maxlength => 255, :tabindex => 1, :value => @email}) %></td></tr>
-  <tr><td class="fieldName"><%= t 'user.new.confirm email address' %></td><td><%= text_field('user', 'email_confirmation',{:size => 50, :maxlength => 255, :tabindex => 2}) %></td></tr>
-  <tr><td></td><td><span class="minorNote"><%= t 'user.new.not displayed publicly' %></span></td></tr>
-  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
-  <tr><td class="fieldName"><%= t 'user.new.display name' %></td><td><%= text_field('user', 'display_name',{:size => 30, :maxlength => 255, :tabindex => 3, :value => @nickname}) %></td></tr>
-  <tr><td></td><td><span class="minorNote"><%= t 'user.new.display name description' %></span></td></tr>
-  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
-  <tr><td class="fieldName"><%= t 'user.new.password' %></td><td><%= password_field('user', 'pass_crypt',{:size => 30, :maxlength => 255, :tabindex => 4}) %></td></tr>
-  <tr><td class="fieldName"><%= t 'user.new.confirm password' %></td><td><%= password_field('user', 'pass_crypt_confirmation',{:size => 30, :maxlength => 255, :tabindex => 5}) %></td></tr>
-  <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
-  <% if @openID %>
-    <tr id="openid-url"><td class="fieldName"><%= t 'user.new.openID' %></td><td><%= text_field('user', 'openid_url',{:size => 50, :maxlength => 255, :tabindex => 6, :value => @openID, :class => "openid_url"}) %></td></tr>
-    <tr id="openid-note"><td></td><td><span class="minorNote"><%= t 'user.new.openID description' %></span></td></tr>
-  <% else %>
-    <tr id="openid-prompt"><td></td><td><span class="minorNote"><%= link_to_function(t 'user.new.openID associate') { |page| page.hide 'openid-prompt'; page.show 'openid-url', 'openid-note', 'openid-note-2' } %></span></td></tr>
-    <tr id="openid-url" style="display: none"><td class="fieldName"><%= t 'user.new.openID' %></td><td><%= text_field('user', 'openid_url',{:size => 50, :maxlength => 255, :tabindex => 6, :value => @openID, :class => "openid_url"}) %></td></tr>
-    <tr id="openid-note" style="display: none"><td></td><td><span class="minorNote"><%= t 'user.new.openID description' %></span></td></tr>
-    <tr id="openid-note-2" style="display: none"><td></td><td><span class="minorNote"><%= t 'user.new.openID nopassword' %></span></td></tr>   
-  <% end %>
-  <tr><td colspan="2" >&nbsp;<!--vertical spacer--></td></tr>
-  <tr><td></td><td align="right"><input type="submit" value="<%= t'user.new.signup' %>" tabindex="7"></td></tr>
-</table>
+  <%= hidden_field_tag('referer', h(params[:referer])) unless params[:referer].nil? %>
+
+  <table id="signupForm">
+    <tr>
+      <td class="fieldName"><%= t 'user.new.email address' %></td>
+      <td><%= text_field(:user, :email, { :size => 50, :maxlength => 255, :tabindex => 1, :value => @email }) %></td>
+    </tr>
+    <tr>
+      <td class="fieldName"><%= t 'user.new.confirm email address' %></td>
+      <td><%= text_field(:user, :email_confirmation, { :size => 50, :maxlength => 255, :tabindex => 2 }) %></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td><span class="minorNote"><%= t 'user.new.not displayed publicly' %></span></td>
+    </tr>
+
+    <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
+
+    <tr>
+      <td class="fieldName"><%= t 'user.new.display name' %></td>
+      <td><%= text_field(:user, :display_name, { :size => 30, :maxlength => 255, :tabindex => 3, :value => @nickname }) %></td></tr>
+    <tr>
+      <td></td>
+      <td><span class="minorNote"><%= t 'user.new.display name description' %></span></td>
+    </tr>
+
+    <tr id="openid_spacer"><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
+
+    <tr id="openid_url">
+      <td class="fieldName"><%= t 'user.new.openid', :logo => openid_logo %></td>
+      <td><%= text_field(:user, :openid_url, { :size => 50, :maxlength => 255, :tabindex => 4, :value => @openID, :class => "openid_url" }) %></td>
+    </tr>
+
+    <tr><td colspan="2">&nbsp;<!--vertical spacer--></td></tr>
+
+    <tr>
+      <td class="fieldName"><%= t 'user.new.password' %></td>
+      <td><%= password_field(:user, :pass_crypt, { :size => 30, :maxlength => 255, :tabindex => 5 }) %></td>
+    </tr>
+    <tr>
+      <td class="fieldName"><%= t 'user.new.confirm password' %></td>
+      <td><%= password_field(:user, :pass_crypt_confirmation, { :size => 30, :maxlength => 255, :tabindex => 6 }) %></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td>
+        <span id="openid_prompt" class="minorNote"><%= link_to_function(t('user.new.use openid', :logo => openid_logo)) { |page| page.hide 'openid_prompt'; page.show 'openid_spacer', 'openid_url', 'openid_note' } %></span>
+        <span id="openid_note" class="minorNote"><%= t 'user.new.openid no password' %></span>
+      </td>
+    </tr>
+
+    <tr><td colspan="2" >&nbsp;<!--vertical spacer--></td></tr>
+
+    <tr>
+      <td></td>
+      <td align="right"><%= submit_tag t('user.new.signup'), :tabindex => 6 %></td>
+    </tr>
+  </table>
 <% end %>
 
+<%=
+  update_page_tag do |page|
+    page[:openid_spacer].hide unless @openID
+    page[:openid_url].hide unless @openID
+    page[:openid_note].hide unless @openID
+    page[:openid_prompt].hide if @openID
+  end
+%>
+
 <%= javascript_include_tag 'https://ethnio.com/remotes/62786' %>
 
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 569890f9b..7e6592165 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1485,7 +1485,7 @@ en:
       create_account: "create an account"
       email or username: "Email Address or Username:"
       password: "Password:"
-      openid: "OpenID:"
+      openid: "{{logo}} OpenID:"
       username_heading: "Login with username and password:"
       openid_heading: "Login with OpenID:"
       remember: "Remember me:"
@@ -1548,20 +1548,19 @@ en:
       not displayed publicly: 'Not displayed publicly (see <a href="http://wiki.openstreetmap.org/wiki/Privacy_Policy" title="wiki privacy policy including section on email addresses">privacy policy</a>)'
       display name: "Display Name:"
       display name description: "Your publicly displayed username. You can change this later in the preferences."
+      openid: "{{logo}} OpenID:"
       password: "Password:"
       confirm password: "Confirm Password:"
-      openID associate: "Associate an OpenID with your account"
-      openID: "OpenID:"
-      openID description: '(Optional) If you have an <a href="http://wiki.openstreetmap.org/wiki/openID">OpenID</a> you can associate it with this account to login'
-      openID nopassword: "With OpenID, you don't need to specify a password during signup, but some extra OpenStreetMap services or tools may still need one"
-      openID association: |
-        Your OpenID is not associated with a OpenStreetMap account yet.
+      use openid: "Alternatively, use {{logo}} OpenID to login"
+      openid no password: "With OpenID a password is not required, but some extra tools or server may still need one."
+      openid association: |
+        <p>Your OpenID is not associated with a OpenStreetMap account yet.</p>
         <ul>
           <li>If you are new to OpenStreetMap, please create a new account using the form below.</li>
           <li>
             If you already have an account, you can login to your account
             using your username and password and then associate the account
-            with your openID in your user settings.
+            with your OpenID in your user settings.
           </li>
         </ul> 
       signup: Signup
diff --git a/public/images/openid-16x16.gif b/public/images/openid-16x16.gif
deleted file mode 100644
index e2d8377db..000000000
Binary files a/public/images/openid-16x16.gif and /dev/null differ
diff --git a/public/images/openid-inputicon.gif b/public/images/openid-inputicon.gif
deleted file mode 100644
index cde836c89..000000000
Binary files a/public/images/openid-inputicon.gif and /dev/null differ
diff --git a/public/images/openid_input.png b/public/images/openid_input.png
new file mode 100644
index 000000000..b5aa49dfa
Binary files /dev/null and b/public/images/openid_input.png differ
diff --git a/public/images/openid_logo.png b/public/images/openid_large.png
similarity index 100%
rename from public/images/openid_logo.png
rename to public/images/openid_large.png
diff --git a/public/images/openid_small.png b/public/images/openid_small.png
new file mode 100644
index 000000000..83bb30282
Binary files /dev/null and b/public/images/openid_small.png differ
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index f7b145754..0282e47f3 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -598,10 +598,6 @@ hr {
   width: 100%;
 }
 
-.loginBox .fieldName img {
-  vertical-align: text-bottom;
-}
-
 .loginBox img {
   border: 0;
 }
@@ -754,7 +750,7 @@ input[type="submit"] {
 }
 
 input.openid_url { 
-  background: url('../images/openid-inputicon.gif') repeat-y left;
+  background: url('../images/openid_input.png') repeat-y left;
   padding-left: 16px;
 }
 
@@ -800,3 +796,10 @@ abbr.geo {
 .table1 { 
   background: #fff;
 }
+
+/* Rules for OpenID logo */
+
+.openid_logo {
+  vertical-align: text-bottom;
+  border: 0;
+}