Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Merge pull request #654 from JohnONolan/center-login

Browse source 
Center login
This commit is contained in:
Hannah Wolfe 2013-09-08 11:33:34 -07:00
commit 61e5212fd7
8 changed files with 25 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
core/client/assets/sass/layouts/login.scss
View file

@ -18,16 +18,18 @@
background: $darkgrey;
}
main {
top: 0;
main {
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;

6
core/client/router.js
View file

@ -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 () {

2
core/client/tpl/login.hbs
View file

@ -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>

30
core/client/views/login.js
View file

@ -6,37 +6,9 @@
Ghost.SimpleFormView = Ghost.View.extend({
initialize: function () {
this.render();
$(window).trigger('resize');
},
afterRender: function () {
var self = this;
$(window).on('resize', self.centerOnResize);
$(window).one('centered', self.fadeInAndFocus);
},
fadeInAndFocus: function () {
$(".js-login-container").fadeIn(750, function () {
$(".js-login-box").fadeIn(500, 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);
}
});

2
core/server/views/login.hbs
View file

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

2
core/server/views/signup.hbs
View file

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

14
core/test/functional/admin/01_login_test.js
View file

@ -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() {

2
core/test/functional/admin/07_logout_test.js
View file

@ -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() {