Merge pull request #656 from JohnONolan/signup-screen

Signup screen

core/client/assets/sass/layouts/login.scss

@@ -3,14 +3,18 @@
  *
  * Table of Contents:
  * 
+ * 0. General
+ * 1. Login
+ * 2. Signup
  *
  */
 
 /* =============================================================================
-   Login
+   0. General
    ============================================================================= */
 
-.ghost-login {
+.ghost-login,
+.ghost-forgotten {
     color: $midgrey;
     background: $darkgrey;
 
@@ -37,6 +41,11 @@
     }
 }
 
+
+/* =============================================================================
+   1. Login
+   ============================================================================= */
+
 #login {
     @include box-sizing(border-box);
     max-width: 530px;
@@ -160,3 +169,156 @@
 }
 
 
+/* =============================================================================
+   2. Signup
+   ============================================================================= */
+
+#signup {
+    @include box-sizing(border-box);
+    max-width: 280px;
+    color: lighten($midgrey, 15%);
+    display: table-cell;
+    vertical-align: middle;
+
+    @include breakpoint(630px) {
+        max-width: 264px;
+    }
+
+    div { // Yes. Really.
+        position:relative;
+        margin:0 0 1em 0;
+        background: lighten($darkgrey, 10%);
+        float: left;
+        display: table;
+    }
+
+    input {
+        margin:0;
+        padding: 8px 10px;
+        position: relative;
+        border: none;
+        color: #fff;
+        font-size: 1.1em;
+        font-weight: 200;
+        background: transparent;
+        box-shadow: none;
+        @include transition(background ease 0.25s);
+
+        @include breakpoint(630px) {
+            @include transition(none);
+            max-width: 244px;
+        }
+
+        &:focus { 
+           background: lighten($darkgrey, 15%); 
+        }
+
+    }
+
+    .name-wrap {
+        position:relative;
+        border-radius: 2px;
+
+        .name {
+            border-radius: 2px;
+        }
+    }
+
+    .email-wrap {
+        position:relative;
+        border-radius: 2px;
+
+        .email {
+            border-radius: 2px;
+        }
+    }
+
+    .password-wrap {
+        position:relative;
+        border-radius: 2px;
+
+        .password {
+            border-radius: 2px;
+        }
+    }
+
+    button {
+        @include box-sizing(border-box);
+        width: 100%;
+        height: 36px;
+        margin: 0 0 1em 0;
+        padding: 0.5em 1.37em;
+        min-height: 30px;
+        min-width: 80px;
+        box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
+    }
+
+}
+
+
+/* =============================================================================
+   3. Forgotten
+   ============================================================================= */
+
+#forgotten {
+    @include box-sizing(border-box);
+    max-width: 280px;
+    color: lighten($midgrey, 15%);
+    display: table-cell;
+    vertical-align: middle;
+
+    @include breakpoint(630px) {
+        max-width: 264px;
+    }
+
+    div { // Yes. Really.
+        position:relative;
+        margin:0 0 1em 0;
+        background: lighten($darkgrey, 10%);
+        float: left;
+    }
+
+    input {
+        margin:0;
+        padding: 8px 10px;
+        position: relative;
+        border: none;
+        color: #fff;
+        font-size: 1.1em;
+        font-weight: 200;
+        background: transparent;
+        box-shadow: none;
+        @include transition(background ease 0.25s);
+
+        @include breakpoint(630px) {
+            @include transition(none);
+            max-width: 244px;
+        }
+        
+        &:focus { 
+            background: lighten($darkgrey, 15%); 
+        }
+
+    }
+
+    .email-wrap {
+        position:relative;
+        border-radius: 2px;
+
+        .email {
+            border-radius: 2px;
+        }
+    }
+
+    button {
+        @include box-sizing(border-box);
+        width: 100%;
+        height: 36px;
+        margin: 0 0 1em 0;
+        padding: 0.5em 1.37em;
+        min-height: 30px;
+        min-width: 80px;
+        box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
+    }
+
+}

core/client/tpl/forgotten.hbs

@@ -3,7 +3,4 @@
         <input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
     </div>
     <button class="button-save" type="submit">Send new password</button>
-    <section class="meta">
-        <a href="/ghost/login/">Log in</a>
-    </section>
 </form>

core/client/tpl/signup.hbs

@@ -1,12 +1,12 @@
-<form id="register" method="post" novalidate="novalidate">
+<form id="signup" method="post" novalidate="novalidate">
+    <div class="name-wrap">
+        <input class="name" type="text" placeholder="Full Name" name="name" autocorrect="off" />
+    </div>
     <div class="email-wrap">
-        <input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
+        <input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" />
     </div>
     <div class="password-wrap">
-        <input class="password" type="password" placeholder="Password" name="password">
+        <input class="password" type="password" placeholder="Password" name="password" />
     </div>
-    <button class="button-save" type="submit">Register</button>
-    <section class="meta">
-        <a href="/ghost/login/">Log in</a>
-    </section>
+    <button class="button-save" type="submit">Sign Up</button>
 </form>

core/client/views/login.js

@@ -53,18 +53,20 @@
         templateName: "signup",
 
         events: {
-            'submit #register': 'submitHandler'
+            'submit #signup': 'submitHandler'
         },
 
         submitHandler: function (event) {
             event.preventDefault();
-            var email = this.$el.find('.email').val(),
+            var name = this.$el.find('.name').val(),
+                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
                 },

core/server/controllers/admin.js

@@ -140,10 +140,12 @@ adminControllers = {
     },
 
     'doRegister': function (req, res) {
-        var email = req.body.email,
+        var name = req.body.name,
+            email = req.body.email,
             password = req.body.password;
 
         api.users.add({
+            full_name: name,
             email_address: email,
             password: password
         }).then(function (user) {

core/test/functional/admin/01_login_test.js

@@ -24,7 +24,7 @@ casper.test.begin('Ensure a User is Registered', 2, function suite(test) {
                 && window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
         });
     }, function then() {
-        this.fill("#register", user, true);
+        this.fill("#signup", user, true);
     });
 
     casper.waitForSelectorTextChange('.notification-error', function onSuccess() {

core/test/functional/admin/07_logout_test.js

@@ -74,7 +74,7 @@ casper.test.begin("Ghost signup fails properly", 5, function suite(test) {
     }).viewport(1280, 1024);
 
     casper.then(function signupWithShortPassword() {
-        this.fill("#register", {email: email, password: 'test'}, true);
+        this.fill("#signup", {email: email, password: 'test'}, true);
     });
 
     // should now throw a short password error
@@ -87,7 +87,7 @@ casper.test.begin("Ghost signup fails properly", 5, function suite(test) {
     });
 
     casper.then(function signupWithLongPassword() {
-        this.fill("#register", {email: email, password: 'testing1234'}, true);
+        this.fill("#signup", {email: email, password: 'testing1234'}, true);
     });
 
     // should now throw a 1 user only error