Login / Signup forms now use Backbone

* Moved most of control code to `core/client`
* Implemented ajax checks

core/client/router.js

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

core/client/tpl/login.hbs

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

core/client/tpl/signup.hbs

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

core/client/views/login.js

@@ -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'
+                        }]
+                    }));
+                }
+            });
+        }
+    });
+}());

core/server/controllers/admin.js

@@ -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
+            res.send(401);
-            req.flash('error', error.message);
-            res.redirect('/ghost/login/');
         });
     },
     '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.json(200, {redirect: '/ghost/login/'});
-                res.redirect('/ghost/login/');
             }, function (error) {
-                req.flash('error', error.message);
+                res.json(401, {message: error.message});
-                res.redirect('/ghost/signup/');
             });
         } else {
-            req.flash('error', "The password is too short. Have at least 6 characters in there");
+            res.json(400, {message: 'The password is too short. Have at least 6 characters in there'});
-            res.redirect('back');
         }
     },
     'logout': function (req, res) {

core/server/views/default.hbs

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

core/server/views/login.hbs

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

core/server/views/signup.hbs

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