From 68f32772d2d2f3abdb28bdc84f0e40c2a1268638 Mon Sep 17 00:00:00 2001
From: Hannah Wolfe <erisds@gmail.com>
Date: Mon, 30 Mar 2015 19:52:48 +0200
Subject: [PATCH] Improve the forgotten password flow

- if the user has filled out their email already when they hit 'forgotten password' then automatically  fill out and submit the form
- this will look better when we have spinners on the buttons
---
 core/client/app/controllers/forgotten.js   | 11 +++++++----
 core/client/app/controllers/signin.js      |  9 +++++++++
 core/client/app/styles/layouts/auth.scss   | 12 ++++++++++++
 core/client/app/templates/signin.hbs       |  2 +-
 core/test/functional/client/signin_test.js | 13 +++++++------
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/core/client/app/controllers/forgotten.js b/core/client/app/controllers/forgotten.js
index ed1bc2ac28..f78f165637 100644
--- a/core/client/app/controllers/forgotten.js
+++ b/core/client/app/controllers/forgotten.js
@@ -11,9 +11,12 @@ var ForgottenController = Ember.Controller.extend(ValidationEngine, {
 
     actions: {
         submit: function () {
-            var self = this,
-                data = self.getProperties('email');
-
+            var data = this.getProperties('email');
+            this.send('doForgotten', data, true);
+        },
+        doForgotten: function (data, delay) {
+            var self = this;
+            this.set('email', data.email);
             this.toggleProperty('submitting');
             this.validate({format: false}).then(function () {
                 ajax({
@@ -26,7 +29,7 @@ var ForgottenController = Ember.Controller.extend(ValidationEngine, {
                     }
                 }).then(function () {
                     self.toggleProperty('submitting');
-                    self.notifications.showSuccess('Please check your email for instructions.', {delayed: true});
+                    self.notifications.showSuccess('Please check your email for instructions.', {delayed: delay});
                     self.set('email', '');
                     self.transitionToRoute('signin');
                 }).catch(function (resp) {
diff --git a/core/client/app/controllers/signin.js b/core/client/app/controllers/signin.js
index 36462c8d16..0cf94b49b2 100644
--- a/core/client/app/controllers/signin.js
+++ b/core/client/app/controllers/signin.js
@@ -3,6 +3,7 @@ import ValidationEngine from 'ghost/mixins/validation-engine';
 
 var SigninController = Ember.Controller.extend(SimpleAuth.AuthenticationControllerMixin, ValidationEngine, {
     authenticator: 'simple-auth-authenticator:oauth2-password-grant',
+    forgotten: Ember.inject.controller(),
 
     validationType: 'signin',
 
@@ -31,6 +32,14 @@ var SigninController = Ember.Controller.extend(SimpleAuth.AuthenticationControll
             }).catch(function (errors) {
                 self.notifications.showErrors(errors);
             });
+        },
+
+        forgotten: function () {
+            if (this.get('model.identification')) {
+                return this.get('forgotten').send('doForgotten', {email: this.get('model.identification')}, false);
+            }
+
+            this.transitionToRoute('forgotten');
         }
     }
 });
diff --git a/core/client/app/styles/layouts/auth.scss b/core/client/app/styles/layouts/auth.scss
index fe9c79b823..fec2f99918 100644
--- a/core/client/app/styles/layouts/auth.scss
+++ b/core/client/app/styles/layouts/auth.scss
@@ -140,6 +140,18 @@
         color: $midgrey;
     }
 
+    .forgotten-link {
+        display: inline-block;
+        height: auto;
+        width: auto;
+        margin: 0;
+        padding: 0;
+        font-size: 1.25rem;
+        color: darken($midgrey, 10%);
+        text-transform: none;
+        letter-spacing: 0;
+    }
+
     a {
         color: darken($midgrey, 10%);
         font-size: 0.9em;
diff --git a/core/client/app/templates/signin.hbs b/core/client/app/templates/signin.hbs
index 6b505101c1..3ca687094e 100644
--- a/core/client/app/templates/signin.hbs
+++ b/core/client/app/templates/signin.hbs
@@ -12,7 +12,7 @@
         </div>
         <button class="btn btn-blue" type="submit" {{action "validateAndAuthenticate"}} {{bind-attr disabled=submitting}}>Log in</button>
         <section class="meta">
-            {{#link-to 'forgotten' class="forgotten-password"}}Forgotten password?{{/link-to}}
+            <button {{action 'forgotten'}} class="forgotten-link btn btn-link">Forgotten password?</button>
         </section>
     </form>
 </section>
diff --git a/core/test/functional/client/signin_test.js b/core/test/functional/client/signin_test.js
index 2b28289f4f..dcc7276e31 100644
--- a/core/test/functional/client/signin_test.js
+++ b/core/test/functional/client/signin_test.js
@@ -3,19 +3,20 @@
 
 /*globals CasperTest, casper, url, user, falseUser */
 
-CasperTest.begin('Ghost admin will load login page', 3, function suite(test) {
+CasperTest.begin('Ghost admin will load login page', 4, function suite(test) {
     CasperTest.Routines.signout.run(test);
     casper.thenOpenAndWaitForPageLoad('signin', function testTitleAndUrl() {
         test.assertTitle('Sign In - Test Blog', 'Ghost admin has incorrect title');
         test.assertUrlMatch(/ghost\/signin\/$/, 'We should be presented with the signin page.');
 
         casper.then(function testLink() {
-            var link = this.evaluate(function (selector) {
-                return document.querySelector(selector).getAttribute('href');
-            }, '.forgotten-password');
+            var text = this.evaluate(function (selector) {
+                return document.querySelector(selector).innerHTML;
+            }, '.forgotten-link');
 
-            casper.echoConcise('LINK' + link);
-            test.assert(link === '/ghost/forgotten/', 'Has correct forgotten password link');
+            casper.echoConcise('Text' + text);
+            test.assertExists('.forgotten-link');
+            test.assertEqual(text, 'Forgotten password?');
         });
     });
 }, true);