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

ghost/admin/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;

ghost/admin/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";

ghost/admin/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 () {

ghost/admin/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,29 +66,56 @@
                 email = this.$el.find('.email').val(),
                 password = this.$el.find('.password').val();
 
-            $.ajax({
+            if (!name) {
-                url: '/ghost/signup/',
+                Ghost.notifications.addItem({
-                type: 'POST',
+                    type: 'error',
-                data: {
+                    message: "Please enter a name",
-                    name: name,
+                    status: 'passive'
-                    email: email,
+                });
-                    password: password
+            } else if (!email) {
-                },
+                Ghost.notifications.addItem({
-                success: function (msg) {
+                    type: 'error',
-                    window.location.href = msg.redirect;
+                    message: "Please enter an email",
-                },
+                    status: 'passive'
-                error: function (xhr) {
+                });
-                    Ghost.notifications.addItem({
+            } else if (!password) {
-                        type: 'error',
+                Ghost.notifications.addItem({
-                        message: Ghost.Views.Utils.getRequestErrorMessage(xhr),
+                    type: 'error',
-                        status: 'passive'
+                    message: "Please enter a password",
-                    });
+                    status: 'passive'
-                }
+                });
-            });
+            } else {
+                $.ajax({
+                    url: '/ghost/signup/',
+                    type: 'POST',
+                    data: {
+                        name: name,
+                        email: email,
+                        password: password
+                    },
+                    success: function (msg) {
+                        window.location.href = msg.redirect;
+                    },
+                    error: function (xhr) {
+                        Ghost.notifications.addItem({
+                            type: 'error',
+                            message: Ghost.Views.Utils.getRequestErrorMessage(xhr),
+                            status: 'passive'
+                        });
+                    }
+                });
+            }
         }
     });
 
-    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",