From ac113b582f3c0f97fd8e266f42bc0de28b15855f Mon Sep 17 00:00:00 2001
From: Peter Szel <peter_szel@epam.com>
Date: Sat, 29 Mar 2014 02:02:23 +0100
Subject: [PATCH] Added fancy fade-in effect and autofocus to the login pages
 (signin, signup, forgotten, reset).

- Added CSS to implement the fade in effect.
- Added 'autofocus' to the attribute bindings of the TextField so they accept it.
---
 ghost/admin/app.js                     |  1 +
 ghost/admin/assets/css/ember-hacks.css | 39 ++++++++++++++++++++++++++
 ghost/admin/templates/forgotten.hbs    |  4 +--
 ghost/admin/templates/reset.hbs        |  4 +--
 ghost/admin/templates/signin.hbs       |  4 +--
 ghost/admin/templates/signup.hbs       |  4 +--
 ghost/admin/utils/text-field.js        |  3 ++
 7 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 ghost/admin/utils/text-field.js

diff --git a/ghost/admin/app.js b/ghost/admin/app.js
index ecee1b0e4f..b7160f4698 100755
--- a/ghost/admin/app.js
+++ b/ghost/admin/app.js
@@ -2,6 +2,7 @@ import Resolver from 'ember/resolver';
 import initFixtures from 'ghost/fixtures/init';
 import {currentUser, injectCurrentUser} from 'ghost/initializers/current-user';
 import 'ghost/utils/link-view';
+import 'ghost/utils/text-field';
 
 var App = Ember.Application.extend({
     /**
diff --git a/ghost/admin/assets/css/ember-hacks.css b/ghost/admin/assets/css/ember-hacks.css
index c51698f1c1..ecd98ecffa 100644
--- a/ghost/admin/assets/css/ember-hacks.css
+++ b/ghost/admin/assets/css/ember-hacks.css
@@ -17,4 +17,43 @@
     -webkit-transition: none;
     -moz-transition: none;
     transition: none;
+}
+
+.fade-in {
+    animation: fadein 0.5s;
+    -moz-animation: fadein 0.5s; /* Firefox */
+    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
+    -o-animation: fadein 0.5s; /* Opera */
+}
+@keyframes fadein {
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-moz-keyframes fadein { /* Firefox */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity:1;
+    }
+}
+@-o-keyframes fadein { /* Opera */
+    from {
+        opacity:0;
+    }
+    to {
+        opacity: 1;
+    }
 }
\ No newline at end of file
diff --git a/ghost/admin/templates/forgotten.hbs b/ghost/admin/templates/forgotten.hbs
index 833db5f620..4fde70da52 100644
--- a/ghost/admin/templates/forgotten.hbs
+++ b/ghost/admin/templates/forgotten.hbs
@@ -1,7 +1,7 @@
-<section class="forgotten-box js-forgotten-box">
+<section class="forgotten-box js-forgotten-box fade-in">
     <form id="forgotten" class="forgotten-form" method="post" novalidate="novalidate" {{action "submit" on="submit"}}>
         <div class="email-wrap">
-            {{input value=email class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off"}}
+            {{input value=email class="email" type="email" placeholder="Email Address" name="email" autofocus="autofocus" autocapitalize="off" autocorrect="off"}}
         </div>
         <button class="button-save" type="submit">Send new password</button>
     </form>
diff --git a/ghost/admin/templates/reset.hbs b/ghost/admin/templates/reset.hbs
index b41c1bdbfb..a255a11fe3 100644
--- a/ghost/admin/templates/reset.hbs
+++ b/ghost/admin/templates/reset.hbs
@@ -1,7 +1,7 @@
-<section class="reset-box js-reset-box">
+<section class="reset-box js-reset-box fade-in">
     <form id="reset" class="reset-form" method="post" novalidate="novalidate" {{action "submit" on="submit"}}>
         <div class="password-wrap">
-            {{input value=passwords.newPassword class="password" type="password" placeholder="Password" name="newpassword" }}
+            {{input value=passwords.newPassword class="password" type="password" placeholder="Password" name="newpassword" autofocus="autofocus" }}
         </div>
         <div class="password-wrap">
             {{input value=passwords.ne2Password class="password" type="password" placeholder="Confirm Password" name="ne2password" }}
diff --git a/ghost/admin/templates/signin.hbs b/ghost/admin/templates/signin.hbs
index 67835bccf8..13813a0dfb 100644
--- a/ghost/admin/templates/signin.hbs
+++ b/ghost/admin/templates/signin.hbs
@@ -1,7 +1,7 @@
-<section class="login-box js-login-box" style="opacity: 1;">
+<section class="login-box js-login-box fade-in">
     <form id="login" class="login-form" method="post" novalidate="novalidate">
         <div class="email-wrap">
-            {{input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" value=email}}
+            {{input class="email" type="email" placeholder="Email Address" name="email" autofocus="autofocus" autocapitalize="off" autocorrect="off" value=email}}
         </div>
         <div class="password-wrap">
             {{input class="password" type="password" placeholder="Password" name="password" value=password}}
diff --git a/ghost/admin/templates/signup.hbs b/ghost/admin/templates/signup.hbs
index 39d2ff7cf8..c1143d6384 100644
--- a/ghost/admin/templates/signup.hbs
+++ b/ghost/admin/templates/signup.hbs
@@ -1,7 +1,7 @@
-<section class="signup-box js-signup-box">
+<section class="signup-box js-signup-box fade-in">
     <form id="signup" class="signup-form" method="post" novalidate="novalidate">
         <div class="name-wrap">
-            <input class="name" type="text" placeholder="Full Name" name="name" autocorrect="off" />
+            <input class="name" type="text" placeholder="Full Name" name="name" autofocus autocorrect="off" />
         </div>
         <div class="email-wrap">
             <input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" />
diff --git a/ghost/admin/utils/text-field.js b/ghost/admin/utils/text-field.js
new file mode 100644
index 0000000000..6862aacf88
--- /dev/null
+++ b/ghost/admin/utils/text-field.js
@@ -0,0 +1,3 @@
+Ember.TextField.reopen({
+    attributeBindings: ['autofocus']
+});