2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00

Login / Signup forms now use Backbone

* Moved most of control code to `core/client`
* Implemented ajax checks
This commit is contained in:
Gabor Javorszky 2013-08-01 02:11:45 +01:00
parent 68cc640d23
commit f36dc3c942
8 changed files with 151 additions and 37 deletions

View file

@ -11,7 +11,18 @@
'settings(/:pane)' : 'settings',
'editor/' : 'editor',
'editor(/:id)' : 'editor',
'debug/' : 'debug'
'debug/' : 'debug',
'register/' : 'register',
'signup/' : 'signup',
'login/' : 'login'
},
signup: function () {
Ghost.currentView = new Ghost.Views.Signup({ el: '.js-login-container' });
},
login: function () {
Ghost.currentView = new Ghost.Views.Login({ el: '.js-login-container' });
},
blog: function () {
@ -456,4 +467,4 @@
//});
}
});
}());
}());

12
core/client/tpl/login.hbs Normal file
View file

@ -0,0 +1,12 @@
<form id="login" method="post">
<div class="email-wrap">
<input class="email" type="text" placeholder="Email Address" name="email">
</div>
<div class="password-wrap">
<input class="password" type="password" placeholder="Password" name="password">
</div>
<button class="button-save" type="submit">Log in</button>
<section class="meta">
<a class="forgotten-password" href="#">Forgotten password?</a> &bull; <a href="/ghost/signup/">Register new user</a>
</section>
</form>

View file

@ -0,0 +1,12 @@
<form id="register" method="post">
<div class="email-wrap">
<input class="email" type="text" placeholder="Email Address" name="email">
</div>
<div class="password-wrap">
<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>
</form>

105
core/client/views/login.js Normal file
View file

@ -0,0 +1,105 @@
/*global window, document, Ghost, $, _, Backbone, JST */
(function () {
"use strict";
Ghost.Views.Login = Ghost.View.extend({
templateName: "login",
events: {
'submit #login': 'submitHandler'
},
initialize: function (options) {
this.render();
},
template: function (data) {
return JST[this.templateName](data);
},
render: function () {
this.$el.html(this.template());
return this;
},
submitHandler: function (event) {
event.preventDefault();
var email = this.$el.find('.email').val(),
password = this.$el.find('.password').val(),
self = this;
$.ajax({
url: '/ghost/login/',
type: 'POST',
data: {
email: email,
password: password
},
success: function (msg) {
window.location.href = msg.redirect;
},
error: function (obj, string, status) {
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: 'Invalid username or password',
status: 'passive'
}]
}));
}
});
}
});
Ghost.Views.Signup = Ghost.View.extend({
templateName: "signup",
events: {
'submit #register': 'submitHandler'
},
initialize: function (options) {
this.render();
},
template: function (data) {
return JST[this.templateName](data);
},
render: function () {
this.$el.html(this.template());
return this;
},
submitHandler: function (event) {
event.preventDefault();
var email = this.$el.find('.email').val(),
password = this.$el.find('.password').val(),
self = this;
$.ajax({
url: '/ghost/signup/',
type: 'POST',
data: {
email: email,
password: password
},
success: function (msg) {
window.location.href = msg.redirect;
},
error: function (obj, string, status) {
var msgobj = $.parseJSON(obj.responseText);
self.addSubview(new Ghost.Views.NotificationCollection({
model: [{
type: 'error',
message: msgobj.message,
status: 'passive'
}]
}));
}
});
}
});
}());

View file

@ -64,11 +64,9 @@ adminControllers = {
'auth': function (req, res) {
api.users.check({email: req.body.email, pw: req.body.password}).then(function (user) {
req.session.user = "ghostadmin";
res.redirect(req.query.r ? '/ghost/' + req.query.r : '/ghost/');
res.json(200, {redirect: req.query.r ? '/ghost/' + req.query.r : '/ghost/'});
}, function (error) {
// Do something here to signal the reason for an error
req.flash('error', error.message);
res.redirect('/ghost/login/');
res.send(401);
});
},
'signup': function (req, res) {
@ -79,7 +77,7 @@ adminControllers = {
});
},
'doRegister': function (req, res) {
var email = req.body.email_address,
var email = req.body.email,
password = req.body.password;
if (email !== '' && password.length > 5) {
@ -87,15 +85,12 @@ adminControllers = {
email_address: email,
password: password
}).then(function (user) {
// console.log('user added', user);
res.redirect('/ghost/login/');
res.json(200, {redirect: '/ghost/login/'});
}, function (error) {
req.flash('error', error.message);
res.redirect('/ghost/signup/');
res.json(401, {message: error.message});
});
} else {
req.flash('error', "The password is too short. Have at least 6 characters in there");
res.redirect('back');
res.json(400, {message: 'The password is too short. Have at least 6 characters in there'});
}
},
'logout': function (req, res) {

View file

@ -72,6 +72,7 @@
<script src="/public/views/dashboard.js"></script>
<script src="/public/views/blog.js"></script>
<script src="/public/views/editor.js"></script>
<script src="/public/views/login.js"></script>
<script src="/public/views/settings.js"></script>
<script src="/public/views/debug.js"></script>
<script src="/public/router.js"></script>

View file

@ -1,15 +1,4 @@
{{!< default}}
<section class="login-box js-login-container">
<form id="login" method="post">
<div class="email-wrap">
<input class="email" type="text" placeholder="Email Address" name="email">
</div>
<div class="password-wrap">
<input class="password" type="password" placeholder="Password" name="password">
</div>
<button class="button-save" type="submit">Log in</button>
<section class="meta">
<a class="forgotten-password" href="#">Forgotten password?</a> &bull; <a href="/ghost/signup/">Register new user</a>
</section>
</form>
</section>

View file

@ -1,15 +1,4 @@
{{!< default}}
<section class="login-box js-login-container">
<form id="register" method="post">
<div class="email-wrap">
<input class="email_address" type="text" placeholder="Email Address" name="email_address">
</div>
<div class="password-wrap">
<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>
</form>
</section>