From 7fb985a02e0e2407f466499bae2e363953365243 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Mon, 16 Dec 2013 17:31:05 -0500
Subject: [PATCH] Improve spacing of registration form, and add instructions to
 the password field.

---
 .../controllers/create_account_controller.js   |  4 ++++
 .../modal/create_account.js.handlebars         | 18 +++++++++++-------
 .../views/modal/create_account_view.js         |  1 +
 app/assets/stylesheets/desktop/login.scss      | 17 +++++++++++++++++
 config/locales/client.en.yml                   |  1 +
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/create_account_controller.js b/app/assets/javascripts/discourse/controllers/create_account_controller.js
index a136126c8c5..470d507d7fe 100644
--- a/app/assets/javascripts/discourse/controllers/create_account_controller.js
+++ b/app/assets/javascripts/discourse/controllers/create_account_controller.js
@@ -30,6 +30,10 @@ Discourse.CreateAccountController = Discourse.Controller.extend(Discourse.ModalF
     return this.blank('authOptions.auth_provider');
   }.property('authOptions.auth_provider'),
 
+  passwordInstructions: function() {
+    return I18n.t('user.password.instructions', {count: 6}); // TODO: soon to be configurable
+  }.property(),
+
   // Validate the name
   nameValidation: function() {
 
diff --git a/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars b/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars
index 1898ed890b6..539f1961457 100644
--- a/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars
@@ -3,50 +3,54 @@
     <div>
       <form>
       <table>
-      <tr>
+      <tr class="input">
           <td style="width:80px"><label for='new-account-name'>{{i18n user.name.title}}</label></td>
           <td style="width:496px">
           {{textField value=accountName id="new-account-name" autofocus="autofocus"}}
           &nbsp;{{inputTip validation=nameValidation}}
           </td>
       </tr>
-      <tr>
+      <tr class="instructions">
         <td></td>
         <td><label>{{i18n user.name.instructions}}</label></td>
       </tr>
 
-      <tr>
+      <tr class="input">
             <td><label for='new-account-email'>{{i18n user.email.title}}</label></td>
             <td>
             {{input value=accountEmail id="new-account-email"}}
             &nbsp;{{inputTip validation=emailValidation}}
             </td>
       </tr>
-      <tr>
+      <tr class="instructions">
         <td></td>
         <td><label>{{i18n user.email.instructions}}</label></td>
       </tr>
 
-      <tr>
+      <tr class="input">
             <td><label for='new-account-username'>{{i18n user.username.title}}</label></td>
             <td>
             {{input value=accountUsername id="new-account-username" maxlength="15"}}
             &nbsp;{{inputTip validation=usernameValidation}}
             </td>
       </tr>
-      <tr>
+      <tr class="instructions">
         <td></td>
         <td><label>{{i18n user.username.instructions}}</label></td>
       </tr>
 
       {{#if passwordRequired}}
-      <tr>
+      <tr class="input">
           <td><label for='new-account-password'>{{i18n user.password.title}}</label></td>
           <td>
           {{input type="password" value=accountPassword id="new-account-password"}}
           &nbsp;{{inputTip validation=passwordValidation}}
           </td>
       </tr>
+      <tr class="instructions">
+        <td></td>
+        <td><label>{{passwordInstructions}}</label></td>
+      </tr>
       {{/if}}
 
       <tr class="password-confirmation">
diff --git a/app/assets/javascripts/discourse/views/modal/create_account_view.js b/app/assets/javascripts/discourse/views/modal/create_account_view.js
index ab05edbf5f2..ea6d80f988a 100644
--- a/app/assets/javascripts/discourse/views/modal/create_account_view.js
+++ b/app/assets/javascripts/discourse/views/modal/create_account_view.js
@@ -9,6 +9,7 @@
 Discourse.CreateAccountView = Discourse.ModalBodyView.extend({
   templateName: 'modal/create_account',
   title: I18n.t('create_account.title'),
+  classNames: ['create-account'],
 
   didInsertElement: function(e) {
 
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 71923e1030f..e1d20086ee7 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -23,4 +23,21 @@
 
 #new-account-link {
 	cursor: pointer;
+}
+
+.create-account {
+  tr.input {
+    td {
+      padding-top: 10px;
+    }
+    input, label {
+      margin-bottom: 0;
+    }
+  }
+
+  tr.instructions {
+    label {
+      color: #888;
+    }
+  }
 }
\ No newline at end of file
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 65745f6f12f..681526b103b 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -351,6 +351,7 @@ en:
         title: "Password"
         too_short: "Your password is too short."
         ok: "Your password looks good."
+        instructions: "Must be at least %{count} characters."
 
       ip_address:
         title: "Last IP Address"