Improve spacing of registration form, and add instructions to the password field.

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() {
 

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">

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) {
 

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;
+    }
+  }
 }

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"