Merge pull request #654 from JohnONolan/center-login

Center login

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

@@ -19,15 +19,17 @@
     }
 
     main {
-        top: 0;
+        top: 15px;
     }
+
 }//.ghost-login
 
 .login-box {
     max-width: 530px;
+    height: 90%;
     margin: 0 auto;
     padding: 0;
-    display: none;
+    display: table;
 
     @include breakpoint(630px) {
         max-width: 264px;
@@ -39,6 +41,8 @@
     @include box-sizing(border-box);
     max-width: 530px;
     color: lighten($midgrey, 15%);
+    display: table-cell;
+    vertical-align: middle;
 
     @include breakpoint(630px) {
         max-width: 264px;

core/client/router.js

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

core/client/tpl/login.hbs

@@ -7,6 +7,6 @@
     </div>
     <button class="button-save" type="submit">Log in</button>
     <section class="meta">
-        <a class="forgotten-password" href="/ghost/forgotten/">Forgotten password?</a> &bull; <a href="/ghost/signup/">Register new user</a>
+        <a class="forgotten-password" href="/ghost/forgotten/">Forgotten password?</a>{{! &bull; <a href="/ghost/signup/">Register new user</a>}}
     </section>
 </form>

core/client/views/login.js

@@ -6,37 +6,9 @@
     Ghost.SimpleFormView = Ghost.View.extend({
         initialize: function () {
             this.render();
-            $(window).trigger('resize');
+            $(".js-login-box").fadeIn(500, function () {
-        },
-
-        afterRender: function () {
-            var self = this;
-
-            $(window).on('resize', self.centerOnResize);
-
-            $(window).one('centered', self.fadeInAndFocus);
-        },
-
-        fadeInAndFocus: function () {
-            $(".js-login-container").fadeIn(750, function () {
                 $("[name='email']").focus();
             });
-        },
-
-        centerOnResize: _.debounce(function (e) {
-            var container = $(".js-login-container");
-            container.css({
-                'position': 'relative'
-            }).animate({
-                'top': Math.round($(window).height() / 2) - container.outerHeight() / 2 + 'px'
-            });
-            $(window).trigger("centered");
-        }, 100),
-
-        remove: function () {
-            var self = this;
-            $(window).off('resize', self.centerOnResize);
-            $(window).off('centered', self.fadeInAndFocus);
         }
     });
 

core/server/views/login.hbs

@@ -1,4 +1,4 @@
 {{!< default}}
-<section class="login-box js-login-container">
+<section class="login-box js-login-box">
 
 </section>

core/server/views/signup.hbs

@@ -1,4 +1,4 @@
 {{!< default}}
-<section class="login-box js-login-container">
+<section class="login-box js-login-box">
 
 </section>

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

@@ -15,12 +15,12 @@ casper.test.begin('Ensure Session is Killed', 1, function suite(test) {
 casper.test.begin('Ensure a User is Registered', 2, function suite(test) {
     test.filename = 'login_user_registered_test.png';
 
-    casper.start(url + 'ghost/signup/');
+    casper.start(url + 'ghost/signup/').viewport(1280, 1024);
 
     casper.waitFor(function checkOpaque() {
         return this.evaluate(function () {
             var loginBox = document.querySelector('.login-box');
-            return window.getComputedStyle(loginBox).getPropertyValue('display') === "block"
+            return window.getComputedStyle(loginBox).getPropertyValue('display') === "table"
                 && window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
         });
     }, function then() {
@@ -90,11 +90,13 @@ casper.test.begin("Can't spam it", 4, function suite(test) {
         return this.evaluate(function () {
             var loginBox = document.querySelector('.login-box');
 
-            return window.getComputedStyle(loginBox).getPropertyValue('display') === "block"
+            return window.getComputedStyle(loginBox).getPropertyValue('display') === "table"
                 && window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
         });
     }, function then() {
         this.fill("#login", falseUser, true);
+    }, function onTimeout() {
+        test.fail('Sign in form didn\'t fade in.');
     });
 
     casper.wait(200, function doneWait() {
@@ -109,6 +111,10 @@ casper.test.begin("Can't spam it", 4, function suite(test) {
         test.assert(false, 'Spamming the login did not result in an error notification');
     });
 
+    // This test causes the spam notification
+    // add a wait to ensure future tests don't get tripped up by this.
+    casper.wait(1000);
+
     casper.run(function () {
         test.done();
     });
@@ -124,7 +130,7 @@ casper.test.begin("Can login to Ghost", 4, function suite(test) {
     casper.waitFor(function checkOpaque() {
         return casper.evaluate(function () {
             var loginBox = document.querySelector('.login-box');
-            return window.getComputedStyle(loginBox).getPropertyValue('display') === "block"
+            return window.getComputedStyle(loginBox).getPropertyValue('display') === "table"
                 && window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
         });
     }, function then() {

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

@@ -43,7 +43,7 @@ casper.test.begin("Can't spam signin", 3, function suite(test) {
     casper.waitFor(function checkOpaque() {
         return this.evaluate(function () {
             var loginBox = document.querySelector('.login-box');
-            return window.getComputedStyle(loginBox).getPropertyValue('display') === "block"
+            return window.getComputedStyle(loginBox).getPropertyValue('display') === "table"
                 && window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
         });
     }, function then() {