Updated password reset views.

app/scripts/templates/complete_reset_password.mustache

@@ -1,7 +1,7 @@
 <header>
   <h1 id='fxa-complete-reset-password-header'>{{#t}}Firefox Accounts{{/t}}</h1>
 
-  <h2>{{#t}}Please create a new password{{/t}}</h2>
+  <h2>{{#t}}Reset password{{/t}}</h2>
 </header>
 
 <section>
@@ -17,8 +17,7 @@
     </div>
 
     <div class="button-row">
-      <button type="submit">{{#t}}Next &gt;{{/t}}</button>
+      <button type="submit">{{#t}}Next{{/t}}</button>
     </div>
   </form>
 </section>
-

app/scripts/templates/confirm_reset_password.mustache

@@ -1,26 +1,17 @@
 <header>
   <h1 id="fxa-confirm-reset-password-header">{{#t}}Firefox Accounts{{/t}}</h1>
 
-  <h2>{{#t}}Password Reset Email Sent{{/t}}</h2>
+  <h2>{{#t}}Reset email sent{{/t}}</h2>
 </header>
 
 <section>
   <div class="error"></div>
 
-  <div class="placeholder email-placeholder">
-    {{#t}}Email{{/t}}
-  </div>
+  <img src="/images/graphic_mail.png" alt="Email" width="150" class="graphic" />
 
-  <p>{{#t}}Your password reset link awates at:{{/t}}
-    <br/>
-    <strong>{{email}}.</strong>
-  </p>
+  <p>{{#t}}A reset link has been sent to:{{/t}}<br/><strong>{{email}}.</strong></p>
 
   <div class="links">
-    {{#t}}Email not arriving?{{/t}} <a>{{#t}}Send again{{/t}}</a>
+    <a>{{#t}}Email not showing up? Send again{{/t}}</a>
   </div>
 </section>
-
-<footer>
-</footer>
-

app/scripts/templates/reset_password.mustache

@@ -8,27 +8,19 @@
   <div class="error"></div>
 
   <form>
-    <label for="email">
-      {{#t}}Enter your email address, and we'll email you instructions on how to reset your password{{/t}}
-    </label>
+    <p>{{#t}}Enter your email address, and we'll email you instructions on how to reset your password{{/t}}</p>
 
     <div class="input-row">
       <input name="email" type="email" class="email" placeholder="{{#t}}Email{{/t}}">
     </div>
 
     <div class="button-row">
-      <button type="submit">{{#t}}Submit{{/t}}</button>
+      <button type="submit" disabled>{{#t}}Submit{{/t}}</button>
     </div>
   </form>
 
   <div class="links">
-    <a href="/signin">{{#t}}Sign In{{/t}}</a>
-    •
-    <a href="/signup">{{#t}}Create Account{{/t}}</a>
+    <a href="/signin" class="left">{{#t}}Sign in{{/t}}</a>
+    <a href="/signup" class="right">{{#t}}Create an account{{/t}}</a>
   </div>
 </section>
-
-<footer>
-</footer>
-
-

app/scripts/templates/reset_password_complete.mustache

@@ -1,22 +1,17 @@
 <header>
   <h1 id='fxa-reset-password-complete-header'>{{#t}}Firefox Accounts{{/t}}</h1>
 
-  <h2>{{#t}}Password Reset!{{/t}}</h2>
+  <h2>{{#t}}Password reset{{/t}}</h2>
 </header>
 
 <section>
   <div class="error"></div>
 
+  <img src="/images/graphic_checkbox.png" width="150" class="graphic" />
 
   {{#redirectTo}}
-    <p>
-      {{#t}}Continue to{{/t}} {{ service }} {{#t}}on the <strong>Initial Client</strong>.{{/t}}
-    </p>
+    <p>{{#t}}Continue to{{/t}} {{ service }} {{#t}}on the <strong>Initial Client</strong>.{{/t}}</p>
 
     <a href="{{ redirectTo }}">Continue</a>
   {{/redirectTo}}
 </section>
-
-<footer>
-</footer>
-

app/scripts/views/reset_password.js

@@ -17,13 +17,14 @@ function (_, BaseView, Template, FxaClient, Session) {
     className: 'reset_password',
 
     events: {
-      'submit form': 'requestPasswordReset'
+      'submit form': 'requestPasswordReset',
+      'keyup input': 'enableButtonWhenValid'
     },
 
     requestPasswordReset: function (event) {
       event.preventDefault();
 
-      if (! this._validateEmail()) {
+      if (! this.isValid()) {
         return;
       }
 
@@ -36,6 +37,10 @@ function (_, BaseView, Template, FxaClient, Session) {
 
     },
 
+    isValid: function () {
+      return this._validateEmail();
+    },
+
     _onRequestResetSuccess: function () {
       Session.email = this._getEmail();
       router.navigate('confirm_reset_password', { trigger: true });