fix(client): Remove the ability for IE8 and IE10+ to show the passwor…

…d field.

Add the `no-toggle-pw` class to the body if the browser does not support toggling the password field type.
Add the `reveal-pw` which indicates the browser has its own password show mechanism. Hard coded to >= IE10.

fixes #1114
fixes #1015

.

app/scripts/lib/password-mixin.js

@@ -22,7 +22,12 @@ define([
 
     setPasswordVisibility: function (isVisible) {
       var type = isVisible ? 'text' : 'password';
-      this.$('.password').attr('type', type);
+      try {
+        this.$('.password').attr('type', type);
+      } catch(e) {
+        // IE8 blows up when changing the type of the input field. Other
+        // browsers might too. Ignore the error.
+      }
     }
   };
 });

app/scripts/vendor/env-test.js

@@ -1,13 +1,18 @@
-/*!
- * This code comes from Modernizr v2.7.1
- * www.modernizr.com
- *
- * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
- * Available under the BSD and MIT licenses: www.modernizr.com/license/
- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 (function() {
   'use strict';
 
+  // BEGIN MODERNIZR BASED CODE
+  /*!
+   * This code comes from Modernizr v2.7.1
+   * www.modernizr.com
+   *
+   * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
+   * Available under the BSD and MIT licenses: www.modernizr.com/license/
+   */
   var docElement = document.documentElement;
 
   // JS check. If Javascript is enabled, the `no-js` class on the
@@ -20,5 +25,28 @@
   } else {
     docElement.className += ' no-touch';
   }
-}());
+  // END MODERNIZR BASED CODE
+
+  // Code below here is our own.
+  try {
+    var pwElement = document.createElement('input');
+    pwElement.setAttribute('type', 'text');
+    docElement.className += ' toggle-pw';
+  } catch(e) {
+    docElement.className += ' no-toggle-pw';
+  }
 
+  /**
+   * I feel so dirty doing this. I have been unable to find a way
+   * to reliably check whether a browser supports the ::-reveal
+   * pseudo-element. IE >= 10 has an ::-ms-reveal pseudo-element.
+   * If I use window.getComputedStyle(pwElement, '::-ms-reveal'), I get
+   * some info back, but info is also returned for
+   * window.getComputedStyle(pwElement, '::nonexistent').
+   */
+  if (document.documentMode && document.documentMode >= 10) {
+    docElement.className += ' reveal-pw';
+  } else {
+    docElement.className += ' no-reveal-pw';
+  }
+}());

app/styles/_variables.scss

@@ -14,6 +14,7 @@ $input-row-border-color: #8a9ba8;
 $input-row-focus-border-color: #0095dd;
 $input-row-hover-border-color: #424f59;
 $input-row-box-shadow-color: #f2f2f2;
+$input-left-right-padding: 20px;
 $link-color: #0095dd;
 $marketing-background-color: #f5f5f5;
 $marketing-border-color: #c3cfd8;

app/styles/main.scss

@@ -296,7 +296,7 @@ strong.email {
   font-size: 18px;
   height: 45px;
   outline: none;
-  padding: 0 20px;
+  padding: 0 $input-left-right-padding;
   position: relative;
   transition-duration: 150ms;
   transition-property: border-color;
@@ -333,7 +333,7 @@ strong.email {
   color: $input-placeholder-color;
   height: auto;
   outline: none;
-  padding: 10px 20px;
+  padding: 10px $input-left-right-padding;
   // Some hackery for Firefox since moz-appearance: none doesn't remove the arrow
   text-indent: 0.01px;
   text-overflow: "";
@@ -471,7 +471,7 @@ label:focus ~ .input-help-focused {
   font-size: 18px;
   height: auto;
   outline: none;
-  padding: 8px 0 9px 20px;
+  padding: 8px 0 9px $input-left-right-padding;
   text-indent: 0.01px;
   text-overflow: "";
   user-select: none;
@@ -674,6 +674,7 @@ ul.links li {
   z-index: 3;
 }
 
+
 .password-row > .password:hover {
   border-color: $input-border-color;
 }
@@ -695,6 +696,21 @@ ul.links li {
   position: absolute;
 }
 
+/**
+ * IE8 blows up when changing the type of the password field
+ * to a text field. Hide the show/hide button and reset 
+ * the password field's padding.
+ */
+.no-toggle-pw, .reveal-pw {
+  .password-row input[type='password'] {
+    padding-right: $input-left-right-padding;
+  }
+
+  .show-password-label, .show-password {
+    display: none;
+  }
+}
+
 .show-password-label:hover,
 .show-password-label:active,
 .show-password-label:focus,