From f36dc3c942eed35c611b62504b569ab0cba5bbd6 Mon Sep 17 00:00:00 2001
From: Gabor Javorszky <gabor@javorszky.co.uk>
Date: Thu, 1 Aug 2013 02:11:45 +0100
Subject: [PATCH] Login / Signup forms now use Backbone

* Moved most of control code to `core/client`
* Implemented ajax checks
---
 core/client/router.js            |  15 ++++-
 core/client/tpl/login.hbs        |  12 ++++
 core/client/tpl/signup.hbs       |  12 ++++
 core/client/views/login.js       | 105 +++++++++++++++++++++++++++++++
 core/server/controllers/admin.js |  17 ++---
 core/server/views/default.hbs    |   1 +
 core/server/views/login.hbs      |  13 +---
 core/server/views/signup.hbs     |  13 +---
 8 files changed, 151 insertions(+), 37 deletions(-)
 create mode 100644 core/client/tpl/login.hbs
 create mode 100644 core/client/tpl/signup.hbs
 create mode 100644 core/client/views/login.js

diff --git a/core/client/router.js b/core/client/router.js
index 644bde56c6..1157aa77fe 100644
--- a/core/client/router.js
+++ b/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 () {
@@ -456,4 +467,4 @@
             //});
         }
     });
-}());
\ No newline at end of file
+}());
diff --git a/core/client/tpl/login.hbs b/core/client/tpl/login.hbs
new file mode 100644
index 0000000000..e955902bf2
--- /dev/null
+++ b/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>
diff --git a/core/client/tpl/signup.hbs b/core/client/tpl/signup.hbs
new file mode 100644
index 0000000000..d016339f56
--- /dev/null
+++ b/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>
diff --git a/core/client/views/login.js b/core/client/views/login.js
new file mode 100644
index 0000000000..d29e5b336e
--- /dev/null
+++ b/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'
+                        }]
+                    }));
+                }
+            });
+        }
+    });
+}());
diff --git a/core/server/controllers/admin.js b/core/server/controllers/admin.js
index a5444bae85..237aa02462 100644
--- a/core/server/controllers/admin.js
+++ b/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
-            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) {
diff --git a/core/server/views/default.hbs b/core/server/views/default.hbs
index c12af2af04..f266507a02 100644
--- a/core/server/views/default.hbs
+++ b/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>
diff --git a/core/server/views/login.hbs b/core/server/views/login.hbs
index 76826af733..6faca90ae5 100644
--- a/core/server/views/login.hbs
+++ b/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>
diff --git a/core/server/views/signup.hbs b/core/server/views/signup.hbs
index 2c11f313cc..6faca90ae5 100644
--- a/core/server/views/signup.hbs
+++ b/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>