Merge pull request #323 from javorszky/iss278

Login / Signup forms now use Backbone

ghost/admin/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 () {

ghost/admin/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>

ghost/admin/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>

ghost/admin/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'
+                        }]
+                    }));
+                }
+            });
+        }
+    });
+}());