From 1e60758877c5363315ab33f64e0eb01ab70cb316 Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Thu, 12 Sep 2013 09:59:58 +0100
Subject: [PATCH] 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
---
 .../sass/layouts/{login.scss => auth.scss}    |  7 +-
 ghost/admin/assets/sass/screen.scss           |  2 +-
 ghost/admin/router.js                         |  4 +-
 ghost/admin/views/login.js                    | 85 +++++++++++++------
 4 files changed, 66 insertions(+), 32 deletions(-)
 rename ghost/admin/assets/sass/layouts/{login.scss => auth.scss} (98%)

diff --git a/ghost/admin/assets/sass/layouts/login.scss b/ghost/admin/assets/sass/layouts/auth.scss
similarity index 98%
rename from ghost/admin/assets/sass/layouts/login.scss
rename to ghost/admin/assets/sass/layouts/auth.scss
index c19fd491be..c8b67569dc 100644
--- a/ghost/admin/assets/sass/layouts/login.scss
+++ b/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;
diff --git a/ghost/admin/assets/sass/screen.scss b/ghost/admin/assets/sass/screen.scss
index 944eb753ef..9cd8b36ecc 100644
--- a/ghost/admin/assets/sass/screen.scss
+++ b/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";
diff --git a/ghost/admin/router.js b/ghost/admin/router.js
index b3152f7ac9..4ad8dd881f 100644
--- a/ghost/admin/router.js
+++ b/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 () {
diff --git a/ghost/admin/views/login.js b/ghost/admin/views/login.js
index 0ef5ceb0d4..78b8388edc 100644
--- a/ghost/admin/views/login.js
+++ b/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({
-                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'
-                    });
-                }
-            });
+            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',
+                    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",