Improved Auth screen markup and validation checks

* Signup now focuses on 'name' on load
* Fixed fade in on auth forms to work with `display: table`
* The 'name' field is required on Sign up forms
* The length check on the Signup form is in order of inputs
* Added check for password length
* Changed the auth form class names to better represent individual pages
* Updated CasperJS tests

assets/sass/layouts/auth.scss

@@ -1,5 +1,5 @@
 /*
- * These styles control elements specific to the Ghost admin login screen.
+ * These styles control elements specific to the Ghost admin login / signup screens.
  *
  * Table of Contents:
  * 
@@ -14,6 +14,7 @@
    ============================================================================= */
 
 .ghost-login,
+.ghost-signup,
 .ghost-forgotten {
     color: $midgrey;
     background: $darkgrey;
@@ -28,7 +29,9 @@
 
 }//.ghost-login
 
-.login-box {
+.login-box,
+.signup-box,
+.forgotten-box {
     max-width: 530px;
     height: 90%;
     margin: 0 auto;

assets/sass/screen.scss

@@ -40,7 +40,7 @@
     @import "layouts/editor";
     /* The write/edit post screen. */
 
-    @import "layouts/login";
+    @import "layouts/auth";
     /* The login screen. */
 
     @import "layouts/errors";

router.js

@@ -19,7 +19,7 @@
         },
 
         signup: function () {
-            Ghost.currentView = new Ghost.Views.Signup({ el: '.js-login-box' });
+            Ghost.currentView = new Ghost.Views.Signup({ el: '.js-signup-box' });
         },
 
         login: function () {
@@ -27,7 +27,7 @@
         },
 
         forgotten: function () {
-            Ghost.currentView = new Ghost.Views.Forgotten({ el: '.js-login-box' });
+            Ghost.currentView = new Ghost.Views.Forgotten({ el: '.js-forgotten-box' });
         },
 
         blog: function () {

views/login.js

@@ -2,17 +2,14 @@
 (function () {
     "use strict";
 
+    Ghost.Views.Login = Ghost.View.extend({
 
-    Ghost.SimpleFormView = Ghost.View.extend({
         initialize: function () {
             this.render();
-            $(".js-login-box").fadeIn(500, function () {
+            $(".js-login-box").css({"opacity": 0}).animate({"opacity": 1}, 500, function () {
                 $("[name='email']").focus();
             });
-        }
+        },
-    });
-
-    Ghost.Views.Login = Ghost.SimpleFormView.extend({
 
         templateName: "login",
 
@@ -48,7 +45,14 @@
         }
     });
 
-    Ghost.Views.Signup = Ghost.SimpleFormView.extend({
+    Ghost.Views.Signup = Ghost.View.extend({
+
+        initialize: function () {
+            this.render();
+            $(".js-signup-box").css({"opacity": 0}).animate({"opacity": 1}, 500, function () {
+                $("[name='name']").focus();
+            });
+        },
 
         templateName: "signup",
 
@@ -62,6 +66,25 @@
                 email = this.$el.find('.email').val(),
                 password = this.$el.find('.password').val();
 
+            if (!name) {
+                Ghost.notifications.addItem({
+                    type: 'error',
+                    message: "Please enter a name",
+                    status: 'passive'
+                });
+            } else if (!email) {
+                Ghost.notifications.addItem({
+                    type: 'error',
+                    message: "Please enter an email",
+                    status: 'passive'
+                });
+            } else if (!password) {
+                Ghost.notifications.addItem({
+                    type: 'error',
+                    message: "Please enter a password",
+                    status: 'passive'
+                });
+            } else {
                 $.ajax({
                     url: '/ghost/signup/',
                     type: 'POST',
@@ -82,9 +105,17 @@
                     }
                 });
             }
+        }
     });
 
-    Ghost.Views.Forgotten = Ghost.SimpleFormView.extend({
+    Ghost.Views.Forgotten = Ghost.View.extend({
+
+        initialize: function () {
+            this.render();
+            $(".js-forgotten-box").css({"opacity": 0}).animate({"opacity": 1}, 500, function () {
+                $("[name='email']").focus();
+            });
+        },
 
         templateName: "forgotten",