Add show/hide buttons to password fields in /delete_account and /settings

fixes #329

app/scripts/templates/delete_account.mustache

@@ -13,8 +13,14 @@
       <input type="email" class="email" placeholder="{{#t}}Email{{/t}}" autofocus>
     </div>
 
-    <div class="input-row">
-      <input type="password" class="password" placeholder="{{#t}}Password{{/t}}" pattern=".{8,}">
+    <div class="input-row password-row">
+      <input type="password" class="password" placeholder="{{#t}}Password{{/t}}" pattern=".{8,}" required>
+
+      <label for="show-password">
+        <span class="show-password-label-text">{{#t}}Show{{/t}}</span>
+        <input id="show-password" type="checkbox" class="show-password">
+      </label>
+
     </div>
 
     <div class="button-row">

app/scripts/templates/settings.mustache

@@ -10,12 +10,24 @@
   <p>{{#t}}You are signed in as:{{/t}}<br /> {{ email }}</p>
 
   <form>
-    <div class="input-row">
+    <div class="input-row password-row">
       <input type="password" class="password" id="old_password" placeholder="{{#t}}Old password{{/t}}" pattern=".{8,}" autofocus required>
+
+      <label for="show-password">
+        <span class="show-password-label-text">{{#t}}Show{{/t}}</span>
+        <input id="show-password" type="checkbox" class="show-password">
+      </label>
+
     </div>
 
-    <div class="input-row">
+    <div class="input-row password-row">
       <input type="password" class="password" id="new_password" placeholder="{{#t}}New password{{/t}}" pattern=".{8,}" required>
+
+      <label for="show-password">
+        <span class="show-password-label-text">{{#t}}Show{{/t}}</span>
+        <input id="show-password" type="checkbox" class="show-password">
+      </label>
+
     </div>
 
     <div class="button-row">

app/scripts/views/delete_account.js

@@ -5,12 +5,14 @@
 'use strict';
 
 define([
+  'underscore',
   'views/base',
   'stache!templates/delete_account',
   'lib/session',
-  'lib/fxa-client'
+  'lib/fxa-client',
+  'lib/password-mixin'
 ],
-function (BaseView, Template, Session, FxaClient) {
+function (_, BaseView, Template, Session, FxaClient, PasswordMixin) {
   var View = BaseView.extend({
     // user must be authenticated to delete their account
     mustAuth: true,
@@ -23,7 +25,8 @@ function (BaseView, Template, Session, FxaClient) {
       'keyup #back': 'backOnEnter',
       'submit form': 'deleteAccount',
       'keyup input': 'enableButtonWhenValid',
-      'change input': 'enableButtonWhenValid'
+      'change input': 'enableButtonWhenValid',
+      'change .show-password': 'onPasswordVisibilityChange'
     },
 
     deleteAccount: function (event) {
@@ -62,6 +65,8 @@ function (BaseView, Template, Session, FxaClient) {
     }
   });
 
+  _.extend(View.prototype, PasswordMixin);
+
   return View;
 });
 

app/scripts/views/settings.js

@@ -9,9 +9,10 @@ define([
   'views/base',
   'stache!templates/settings',
   'lib/fxa-client',
-  'lib/session'
+  'lib/session',
+  'lib/password-mixin'
 ],
-function (_, BaseView, Template, FxaClient, Session) {
+function (_, BaseView, Template, FxaClient, Session, PasswordMixin) {
   var View = BaseView.extend({
     // user must be authenticated to see Settings
     mustAuth: true,
@@ -29,7 +30,8 @@ function (_, BaseView, Template, FxaClient, Session) {
       'submit form': 'changePassword',
       'keyup input': 'enableButtonWhenValid',
       'change input': 'enableButtonWhenValid',
-      'click #signout': 'signOut'
+      'click #signout': 'signOut',
+      'change .show-password': 'onPasswordVisibilityChange'
     },
 
     isValid: function () {
@@ -91,5 +93,7 @@ function (_, BaseView, Template, FxaClient, Session) {
     }
   });
 
+  _.extend(View.prototype, PasswordMixin);
+
   return View;
 });