actually use labels, html5 validations, etc [ci skip]

app/assets/stylesheets/new_styles/_registration.scss

@@ -42,6 +42,10 @@
   form#user_new {
     display : inline-block;
 
+    label {
+      color : #555;
+    }
+
     fieldset {
       @include border-radius(5px);
 
@@ -54,6 +58,7 @@
       border : 1px solid #888;
 
       input[type=text],
+      input[type=email],
       input[type=password] {
         @include box-shadow(0,0,0,0);
         @include border-radius(0);
@@ -63,13 +68,23 @@
         padding : 10px;
 
         margin-bottom : 0;
-        display : block;
         border : none;
+      }
+
+      /* mainly bootstrap overrides */
+      .control-group {
+        margin : 0;
         border-bottom : 1px solid #ddd;
 
-        &:last-child {
+        .control-label,
-          border-bottom : none;
+        input[type=text],
+        input[type=password] {
+          padding : 10px;
+          margin : 0;
         }
+
+        .controls { margin-left : 100px; }
+        .control-label { width : 80px; }
       }
     }
 
@@ -82,7 +97,6 @@
   }
 }
 
-
 /* buttons to be extracted? */
 .new-btn {
   @include transition(box-shadow);
@@ -94,6 +108,7 @@
   color : #888;
   border : 1px solid #888;
 
+  //font-family : Roboto-Bold;
   font-size : 14px;
   text-shadow : 0 1px 2px #eee;
 

app/views/registrations/new.html.erb

@@ -19,12 +19,37 @@
       SIGN UP
     </h4>
 
-    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
+    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal", :autocomplete => "off"}) do |f| %>
         <fieldset>
-          <%= f.text_field :email, :placeholder => "EMAIL", :title => t('registrations.new.enter_username') %>
+          <div class="control-group">
-          <%= f.text_field :username, :placeholder => "USERNAME", :title => t('registrations.new.enter_username') %>
+            <label class="control-label" for="user_email">
-          <%= f.password_field :password, :placeholder => "PASSWORD", :title => t('registrations.new.enter_password') %>
+                EMAIL
-          <%= invite_hidden_tag(invite) %>
+            </label>
+
+            <div class="controls">
+                <%= f.email_field :email, :placeholder => "luke@hoth.net", :title => t('registrations.new.enter_email'), :required => true %>
+            </div>
+          </div>
+
+          <div class="control-group">
+              <label class="control-label" for="user_username">
+                USERNAME
+              </label>
+
+              <div class="controls">
+                <%= f.text_field :username, :placeholder => "jedi_guy", :title => t('registrations.new.enter_username'), :required => true, :pattern => "[A-Za-z0-9_]+" %>
+              </div>
+          </div>
+
+          <div class="control-group">
+            <label class="control-label" for="user_password">
+                PASSWORD
+            </label>
+
+            <%= f.password_field :password, :placeholder => "••••••••", :title => t('registrations.new.enter_password'), :required => true, :pattern => "......+" %>
+              <%= invite_hidden_tag(invite) %>
+
+          </div>
         </fieldset>
 
         <%= f.submit "Continue", :class => "new-btn" %>

config/locales/diaspora/en.yml

@@ -721,7 +721,7 @@ en:
 
       enter_email: "Enter an email"
       enter_username: "Pick a username (only letters, numbers, and underscores)"
-      enter_password: "Enter a password"
+      enter_password: "Enter a password (six character minimum)"
       enter_password_again: "Enter the same password as before"
     create:
       success: "You've joined Diaspora!"