Bug 1177911 - Determine and implement better password requirements for BMO

6 files changed, 251 insertions, 333 deletions

diff --git a/template/en/default/account/email/confirm-new.html.tmpl b/template/en/default/account/email/confirm-new.html.tmpl
index 3241030e8..f505268f5 100644
--- a/template/en/default/account/email/confirm-new.html.tmpl
+++ b/template/en/default/account/email/confirm-new.html.tmpl
@@ -21,8 +21,10 @@
 
 [% title = BLOCK %]Create a new user account for '[% email FILTER html %]'[% END %]
 [% PROCESS "global/header.html.tmpl"
-           title = title
-           onload = "document.forms['confirm_account_form'].realname.focus();" %]
+   title = title
+   style_urls      = ['skins/standard/admin.css']
+   javascript_urls = ['js/account.js']
+   onload = "document.forms['confirm_account_form'].realname.focus();" %]
 
 [% password_complexity = Param('password_complexity') %]
 
@@ -35,39 +37,36 @@
 <form id="confirm_account_form" method="post" action="token.cgi">
   <input type="hidden" name="t" value="[% token FILTER html %]">
   <input type="hidden" name="a" value="confirm_new_account">
-  <table>
-    <tr>
-      <th align="right">Email Address:</th>
-      <td>[% email FILTER html %]</td>
-    </tr>
-    <tr>
-      <th align="right"><small><i>(OPTIONAL)</i></small> <label for="realname">Real Name</label>:</th>
-      <td><input type="text" id="realname" name="realname" value=""></td>
-    </tr>
-    <tr>
-      <th align="right"><label for="passwd1">Type your password</label>:</th>
-      <td>
-        <input type="password" id="passwd1" name="passwd1" value="">
-        (Password should be a minimum of [% constants.USER_PASSWORD_MIN_LENGTH FILTER none %] characters long
-        [% IF password_complexity == "mixed_letters" %]
-          and must contain at least one UPPER and one lowercase letter
-        [% ELSIF password_complexity == "letters_numbers" %]
-          and must contain at least one UPPER and one lowercase letter and a number
-        [% ELSIF password_complexity == "letters_numbers_specialchars" %]
-          and must contain at least one letter, a number and a special character
-        [% END ~%]
-        .)
-      </td>
-    </tr>
-    <tr>
-      <th align="right"><label for="passwd2">Confirm your password</label>:</th>
-      <td><input type="password" id="passwd2" name="passwd2" value=""></td>
-    </tr>
-    <tr>
-      <th align="right">&nbsp;</th>
-      <td><input type="submit" id="confirm" value="Create"></td>
-    </tr>
-  </table>
+  <div class="flex">
+    <div class="flex-left">
+      <table>
+        <tr>
+          <th align="right">Email Address:</th>
+          <td>[% email FILTER html %]</td>
+        </tr>
+        <tr>
+          <th align="right"><small><i>(OPTIONAL)</i></small> <label for="realname">Real Name</label>:</th>
+          <td><input type="text" id="realname" name="realname" value=""></td>
+        </tr>
+        <tr>
+          <th align="right"><label for="passwd1">Type your password</label>:</th>
+          <td>
+            <input type="password" id="passwd1" name="passwd1" value="" required>
+          </td>
+        </tr>
+        <tr>
+          <th align="right"><label for="passwd2">Confirm your password</label>:</th>
+          <td><input type="password" id="passwd2" name="passwd2" value="" required"></td>
+        </tr>
+        <tr>
+          <th align="right">&nbsp;</th>
+          <td><input type="submit" id="confirm" value="Create"></td>
+        </tr>
+      </table>
+    </div>
+
+    [% INCLUDE "global/password-features.html.tmpl" class="flex-right" password_page="confirm" %]
+  </div>
 </form>
 
 <p>
diff --git a/template/en/default/account/password/set-forgotten-password.html.tmpl b/template/en/default/account/password/set-forgotten-password.html.tmpl
index cfeacbb93..68119252e 100644
--- a/template/en/default/account/password/set-forgotten-password.html.tmpl
+++ b/template/en/default/account/password/set-forgotten-password.html.tmpl
@@ -19,39 +19,47 @@
   #%]
 
 [% title = "Change Password" %]
-[% PROCESS global/header.html.tmpl %]
+ [% PROCESS global/header.html.tmpl
+    style_urls      = ['skins/standard/admin.css']
+    javascript_urls = ['js/account.js']
+ %]
 
 <p>
   To change your password, enter a new password twice:
 </p>
 
-<form method="post" action="token.cgi">
-  <input type="hidden" name="t" value="[% token FILTER html %]">
-  <input type="hidden" name="a" value="chgpw">
-  <table>
-    <tr>
-      <th align="right">New Password:</th>
-      <td>
-        <input type="password" name="password">
-        (minimum [% constants.USER_PASSWORD_MIN_LENGTH FILTER none %] characters)
-      </td>
-    </tr>
+<div class="flex">
+  <div class="flex-left">
+    <form method="post" action="token.cgi">
+      <input type="hidden" name="t" value="[% token FILTER html %]">
+      <input type="hidden" name="a" value="chgpw">
+      <table>
+        <tr>
+          <th align="right">New Password:</th>
+          <td>
+            <input type="password" name="password" id="new_password1" required>
+          </td>
+        </tr>
 
-    <tr>
-      <th align="right">New Password Again:</th>
-      <td>
-        <input type="password" name="matchpassword">
-      </td>
-    </tr>
+        <tr>
+          <th align="right">New Password Again:</th>
+          <td>
+            <input type="password" name="matchpassword" id="new_password2" required>
+          </td>
+        </tr>
 
-    <tr>
-      <th align="right">&nbsp;</th>
-      <td>
-        <input type="submit" id="update" value="Submit">
-        [% INCLUDE mfa/protected.html.tmpl user=token_user %]
-      </td>
-    </tr>
-  </table>
-</form>
+        <tr>
+          <th align="right">&nbsp;</th>
+          <td>
+            <input type="submit" id="update" value="Submit">
+            [% INCLUDE mfa/protected.html.tmpl user=token_user %]
+          </td>
+        </tr>
+      </table>
+    </form>
+  </div>
+
+  [% INCLUDE "global/password-features.html.tmpl" class="flex-right" password_page="forgot" %]
+</div>
 
 [% PROCESS global/footer.html.tmpl %]
diff --git a/template/en/default/account/prefs/account.html.tmpl b/template/en/default/account/prefs/account.html.tmpl
index 3f838691b..c41ea116f 100644
--- a/template/en/default/account/prefs/account.html.tmpl
+++ b/template/en/default/account/prefs/account.html.tmpl
@@ -27,129 +27,133 @@
 [%# BMO - add hook for displaying user-profile link %]
 [% Hook.process('start') %]
 
-<table>
-  <tr>
-    <th align="right" width="150">Your real name:</th>
-    <td>
-      <input size="35" name="realname" value="[% realname FILTER html %]">
-      <i>optional, but encouraged</i>
-    </td>
-  </tr>
-
-  [%# BMO - moved field hook from end of file to here to group with other account fields %]
-  [% Hook.process('field') %]
-
-  [% SET can_change = [] %]
-  [% IF user.authorizer.can_change_password %]
-    [% can_change.push('password') %]
-  [% END %]
-  [% IF user.authorizer.can_change_email && Param('allowemailchange') %]
-    [% can_change.push('email address') %]
-  [% END %]
-
-  [% IF can_change.size %]
-    <tr>
-      <td></td>
-      <td><hr></td>
-    </tr>
-    <tr>
-      <td colspan="3">
-        Your current password is required to
-        confirm [% can_change.join(' or ') FILTER html %]
-        changes.
-      </td>
-    </tr>
-    <tr>
-      <th align="right">Current password:</th>
-      <td>
-        <input type="hidden" name="old_login" value="[% user.login FILTER html %]">
-        <input type="password" name="old_password">
-        <a href="#" id="forgot-password">I forgot my password</a>
-      </td>
-    </tr>
-    [% IF user.authorizer.can_change_password %]
+<div class="flex">
+  <div class="flex-left">
+    <table>
       <tr>
-        <th align="right">New password:</th>
+        <th align="right" width="150">Your real name:</th>
         <td>
-          <input type="password" name="new_password1">
-          [% INCLUDE "mfa/protected.html.tmpl" %]
+          <input size="35" name="realname" value="[% realname FILTER html %]"
+                 placeholder="optional, but encouraged">
         </td>
       </tr>
 
-      <tr>
-        <th align="right">Confirm new password:</th>
-        <td>
-          <input type="password" name="new_password2">
-        </td>
-      </tr>
-    [% END %]
+      [%# BMO - moved field hook from end of file to here to group with other account fields %]
+      [% Hook.process('field') %]
 
-    [% IF user.authorizer.can_change_email && Param('allowemailchange') %]
-      [% IF login_change_date %]
-        [% IF new_login_name %]
-          <tr>
-            <th align="right">Pending email address:</th>
-            <td>[% new_login_name FILTER html %]</td>
-          </tr>
-          <tr>
-            <th align="right">Change request expires:</th>
-            <td>[% login_change_date FILTER time %]</td>
-          </tr>
-        [% ELSE %]
+      [% SET can_change = [] %]
+      [% IF user.authorizer.can_change_password %]
+        [% can_change.push('password') %]
+      [% END %]
+      [% IF user.authorizer.can_change_email && Param('allowemailchange') %]
+        [% can_change.push('email address') %]
+      [% END %]
+
+      [% IF can_change.size %]
+        <tr>
+          <td></td>
+          <td><hr></td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            Your current password is required to
+            confirm [% can_change.join(' or ') FILTER html %]
+            changes.
+          </td>
+        </tr>
+        <tr>
+          <th align="right">Current password:</th>
+          <td>
+            <input type="hidden" name="old_login" value="[% user.login FILTER html %]">
+            <input type="password" name="old_password" id="old_password">
+            <a href="#" id="forgot-password">I forgot my password</a>
+          </td>
+        </tr>
+        [% IF user.authorizer.can_change_password %]
           <tr>
-            <th align="right">Confirmed email address:</th>
-            <td>[% user.login FILTER html %]</td>
+            <th align="right">New password:</th>
+            <td>
+              <input type="password" name="new_password1" id="new_password1">
+              [% INCLUDE "mfa/protected.html.tmpl" %]
+            </td>
           </tr>
           <tr>
-            <th align="right">Completion date:</th>
-            <td>[% login_change_date FILTER time %]</td>
+            <th align="right">Confirm new password:</th>
+            <td>
+              <input type="password" name="new_password2" id="new_password2">
+            </td>
           </tr>
         [% END %]
-      [% ELSE %]
+
+        [% IF user.authorizer.can_change_email && Param('allowemailchange') %]
+          [% IF login_change_date %]
+            [% IF new_login_name %]
+              <tr>
+                <th align="right">Pending email address:</th>
+                <td>[% new_login_name FILTER html %]</td>
+              </tr>
+              <tr>
+                <th align="right">Change request expires:</th>
+                <td>[% login_change_date FILTER time %]</td>
+              </tr>
+            [% ELSE %]
+              <tr>
+                <th align="right">Confirmed email address:</th>
+                <td>[% user.login FILTER html %]</td>
+              </tr>
+              <tr>
+                <th align="right">Completion date:</th>
+                <td>[% login_change_date FILTER time %]</td>
+              </tr>
+            [% END %]
+          [% ELSE %]
+            <tr>
+              <th align="right">New email address:</th>
+              <td>
+                <input size="35" name="new_login_name" id="new_login_name">
+                [% INCLUDE "mfa/protected.html.tmpl" %]
+              </td>
+            </tr>
+          [% END %]
+        [% END %]
         <tr>
-          <th align="right">New email address:</th>
-          <td>
-            <input size="35" name="new_login_name">
-            [% INCLUDE "mfa/protected.html.tmpl" %]
-          </td>
+          <td></td>
+          <td><hr></td>
         </tr>
       [% END %]
-    [% END %]
-    <tr>
-      <td></td>
-      <td><hr></td>
-    </tr>
-  [% END %]
 
-  <tr>
-    <td></td>
-    <td>
-      <a href="#" id="account-disable-toggle"><span id="account-disable-spinner">&#9656;</span> Disable My Account</a>
-    </td>
-  </tr>
-  <tr id="account-disable" style="display:none">
-    <td></td>
-    <td>
-      <p>
-        Your contributions on bugzilla.mozilla.org will still be visible;
-        however, your email address and name will be removed in most locations.
-        We are not able to remove your details that are part of comment text.
-      </p>
-      <p>
-        <input type="checkbox" id="account-disable-confirm">
-        I acknowledge that my account will not be functional after it has been
-        disabled.
-      </p>
-      <input type="hidden" name="account_disable" id="account_disable">
-      <button type="button" id="account-disable-button" disabled>Disable Account</button>
-    </td>
-  </tr>
-  <tr>
-    <td></td>
-    <td><hr></td>
-  </tr>
+      <tr>
+        <td></td>
+        <td>
+          <a href="#" id="account-disable-toggle"><span id="account-disable-spinner">&#9656;</span> Disable My Account</a>
+        </td>
+      </tr>
+      <tr id="account-disable" style="display:none">
+        <td></td>
+        <td>
+          <p>
+            Your contributions on bugzilla.mozilla.org will still be visible;
+            however, your email address and name will be removed in most locations.
+            We are not able to remove your details that are part of comment text.
+          </p>
+          <p>
+            <input type="checkbox" id="account-disable-confirm">
+            I acknowledge that my account will not be functional after it has been
+            disabled.
+          </p>
+          <input type="hidden" name="account_disable" id="account_disable">
+          <button type="button" id="account-disable-button" disabled>Disable Account</button>
+        </td>
+      </tr>
+      <tr>
+        <td></td>
+        <td><hr></td>
+      </tr>
+    </table>
+  </div>
 
-</table>
+  [% INCLUDE "global/password-features.html.tmpl" class="flex-right" password_page="account" %]
+</div>
 
 [% tab_footer = BLOCK %]
   <form action="token.cgi" method="post" id="forgot-form">
diff --git a/template/en/default/account/reset-password.html.tmpl b/template/en/default/account/reset-password.html.tmpl
index 2b1d297dc..ec57f19dd 100644
--- a/template/en/default/account/reset-password.html.tmpl
+++ b/template/en/default/account/reset-password.html.tmpl
@@ -52,78 +52,6 @@
 
 [% inline_js = BLOCK %]
 $(function() {
-
-  $('#old_password, #new_password1, #new_password2')
-    .keyup(function() {
-      var errors = [];
-      var old = $('#old_password').val();
-      var new1 = $('#new_password1').val();
-      var new2 = $('#new_password2').val();
-
-      if (old === '') {
-        errors.push('Missing current password');
-      }
-      if (new1 === '' || new2 === '') {
-        errors.push('Missing new password');
-      }
-      else if (new1 !== new2) {
-        errors.push('New passwords do not match');
-      }
-      else if (new1 === old) {
-        errors.push('Your new password must be different from your old password');
-      }
-      else if (new1.length < [% constants.USER_PASSWORD_MIN_LENGTH FILTER none %]) {
-        errors.push('Your password must be at least [% constants.USER_PASSWORD_MIN_LENGTH FILTER none %] long');
-      }
-      else {
-        var complexity_fn;
-        [% SWITCH Param('password_complexity') %]
-          [% CASE 'no_constraints' %]
-            complexity_fn = function() {};
-          [% CASE 'mixed_letters' %]
-            complexity_fn = function(pass, errors) {
-              if (
-                pass.search(/[a-z]/) == -1 ||
-                pass.search(/[A-Z]/) == -1
-              ) {
-                errors.push('New password is not complex enough');
-              }
-            };
-          [% CASE 'letters_numbers' %]
-            complexity_fn = function(pass, errors) {
-              if (
-                pass.search(/[a-z]/) == -1 ||
-                pass.search(/[A-Z]/) == -1 ||
-                pass.search(/[0-9]/) == -1
-              ) {
-                errors.push('New password is not complex enough');
-              }
-            };
-          [% CASE 'letters_numbers_specialchars' %]
-            complexity_fn = function(pass, errors) {
-              if (
-                pass.search(/[a-z]/) == -1 ||
-                pass.search(/[A-Z]/) == -1 ||
-                pass.search(/[0-9]/) == -1 ||
-                pass.search(/\W/) == -1
-              ) {
-                errors.push('New password is not complex enough');
-              }
-            };
-        [% END %]
-        complexity_fn(new1, errors);
-      }
-
-      $('#submit').attr('disabled', errors.length > 0);
-      if ((old !== '' || new1 !== '' || new2 !== '') && errors.length) {
-        $('#errors').html('<ul><li>' + errors.join('</li><li>') + '</li></ul>');
-      }
-      else {
-        $('#errors').html('');
-      }
-    })
-    .keyup();
-
   $('#forgot_password')
     .click(function(event) {
       event.preventDefault();
@@ -134,9 +62,11 @@ $(function() {
 [% END %]
 
 [% PROCESS global/header.html.tmpl
-    title      = "Password change required"
-    style      = inline_style
-    javascript = inline_js
+    title           = "Password change required"
+    style           = inline_style
+    style_urls      = ['skins/standard/admin.css']
+    javascript      = inline_js
+    javascript_urls = ['js/account.js']
 %]
 
 <h1>Password Reset</h1>
@@ -149,58 +79,48 @@ $(function() {
 <input type="hidden" name="token" value="[% token FILTER html %]">
 <input type="hidden" name="do_save" value="1">
 
-<div id="password-reset">
-  <div class="field-hr">&nbsp;</div>
-  <div class="field-row">
-    <div class="field-name">Email</div>
-    <div class="field-value">
-      [% user.login FILTER html %]
+<div class="flex">
+  <div id="password-reset" class="flex-left">
+    <div class="field-hr">&nbsp;</div>
+    <div class="field-row">
+      <div class="field-name">Email</div>
+      <div class="field-value">
+        [% user.login FILTER html %]
+      </div>
     </div>
-  </div>
-  <div class="field-row">
-    <div class="field-name">Current Password</div>
-    <div class="field-value">
-      <input type="password" name="old_password" id="old_password" size="30">
+    <div class="field-row">
+      <div class="field-name">Current Password</div>
+      <div class="field-value">
+        <input type="password" name="old_password" id="old_password" size="30" required>
+      </div>
     </div>
-  </div>
-  <div class="field-hr">&nbsp;</div>
-  <div id="errors"></div>
-  <div class="field-row">
-    <div class="field-name">New Password</div>
-    <div class="field-value">
-      <input type="password" name="new_password1" id="new_password1" size="30">
+    <div class="field-hr">&nbsp;</div>
+    <div id="errors"></div>
+    <div class="field-row">
+      <div class="field-name">New Password</div>
+      <div class="field-value">
+        <input type="password" name="new_password1" id="new_password1" size="30" required>
+      </div>
     </div>
-  </div>
-  <div class="field-row">
-    <div class="field-name">New Password</div>
-    <div class="field-value">
-      <input type="password" name="new_password2" id="new_password2" size="30">
-      (again)
+    <div class="field-row">
+      <div class="field-name">New Password</div>
+      <div class="field-value">
+        <input type="password" name="new_password2" id="new_password2" size="30" required>
+        (again)
+      </div>
     </div>
-  </div>
-  <div class="field-hr">&nbsp;</div>
-  <div class="field-row">
-    <div class="field-value">
-      <input type="submit" id="submit" value="Update Password">
-      <a id="forgot_password" href="#">Forgot Password</a>
+    <div class="field-hr">&nbsp;</div>
+    <div class="field-row">
+      <div class="field-value">
+        <input type="submit" id="submit" value="Update Password">
+        <a id="forgot_password" href="#">Forgot Password</a>
+      </div>
     </div>
   </div>
+  [% INCLUDE "global/password-features.html.tmpl" class="flex-right" password_page="reset_password" %]
 </div>
-
 </form>
 
-<p id="complexity_rules">
-  Your password must be a minimum of [% constants.USER_PASSWORD_MIN_LENGTH FILTER none %] characters long
-  [% SWITCH Param('password_complexity') %]
-    [% CASE 'mixed_letters' %]
-      and must contain at least one UPPER and one lowercase letter
-    [% CASE 'letters_numbers' %]
-      and must contain at least one UPPER and one lowercase letter and a number
-    [% CASE 'letters_numbers_specialchars' %]
-      and must contain at least one letter, a number and a special character
-  [% END ~%].
-</p>
-
 <form action="token.cgi" method="post" id="forgot-form">
   <input type="hidden" name="loginname" value="[% user.login FILTER html %]">
   <input type="hidden" name="a" value="reqpw">
diff --git a/template/en/default/global/password-features.html.tmpl b/template/en/default/global/password-features.html.tmpl
new file mode 100644
index 000000000..5d6c0f8c1
--- /dev/null
+++ b/template/en/default/global/password-features.html.tmpl
@@ -0,0 +1,27 @@
+[%# 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/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+<div id="password-features"
+     style="display: none"
+     class="[% class FILTER html %]"
+     data-password-page="[% password_page FILTER html %]"
+     data-password-complexity="[% Param("password_complexity") FILTER html %]">
+  Password must be 8 characters or longer,
+  and match at least 3 of the following requirements:
+
+  <ul>
+    <li id="password-feature-upper">uppercase letters</li>
+    <li id="password-feature-lower">lowercase letters</li>
+    <li id="password-feature-numbers">numbers</li>
+    <li id="password-feature-symbols">symbols</li>
+    <li id="password-feature-length12">longer than 12 characters</li>
+  </ul>
+  <div id="password-msg"></div>
+
+  <div id="password-meter-label" style="display: none">Strength: <span id="password-meter" class="meter"></span></div>
+</div>
\ No newline at end of file
diff --git a/template/en/default/global/user-error.html.tmpl b/template/en/default/global/user-error.html.tmpl
index 6996832aa..14399f010 100644
--- a/template/en/default/global/user-error.html.tmpl
+++ b/template/en/default/global/user-error.html.tmpl
@@ -1503,59 +1503,19 @@
 
   [% ELSIF error == "password_not_complex" %]
     [% title = "Password Fails Requirements" %]
-    [% passregex = Param('password_complexity') %]
-    The password must contain at least one:
+    The Password must meet three of the following requirements
     <ul>
-      [% IF passregex == 'letters_numbers_specialchars' %]
-        <li>letter</li>
-        <li>special character</li>
-      [% ELSIF passregex.search('letters') %]
-        <li>UPPERCASE letter</li>
-        <li>lowercase letter</li>
-      [% END %]
-      [% IF passregex.search('numbers') %]
-        <li>digit</li>
-      [% END %]
+      <li>uppercase letters</li>
+      <li>lowercase letters</li>
+      <li>numbers</li>
+      <li>symbols</li>
+      <li>longer than 12 characters</li>
     </ul>
     [% IF locked_user %]
       You must <a href="token.cgi?a=reqpw&amp;loginname=[% locked_user.email FILTER uri %]&amp;token=[% issue_hash_token(['reqpw']) FILTER uri %]">
       request a new password</a> in order to log in again.
     [% END %]
 
-  [% ELSIF error == "password_not_complex" %]
-     [% title = "Password Fails Requirements" %]
-     [% passregex = Param('password_complexity') %]
-     Password must contain at least one:
-     <ul>
-       [% IF passregex.search('letters') %]
-         <li>UPPERCASE letter</li>
-         <li>lowercase letter</li>
-       [% END %]
-       [% IF passregex.search('numbers') %]
-         <li>digit</li>
-       [% END %]
-       [% IF passregex.search('specialchars') %]
-         <li>special character</li>
-       [% END %]
-     </ul>
-
-  [% ELSIF error == "password_not_complex" %]
-     [% title = "Password Fails Requirements" %]
-     [% passregex = Param('password_complexity') %]
-     Password must contain at least one:
-     <ul>
-       [% IF passregex.search('letters') %]
-         <li>UPPERCASE letter</li>
-         <li>lowercase letter</li>
-       [% END %]
-       [% IF passregex.search('numbers') %]
-         <li>digit</li>
-       [% END %]
-       [% IF passregex.search('specialchars') %]
-         <li>special character</li>
-       [% END %]
-     </ul>
-
   [% ELSIF error == "product_access_denied" %]
     [% title = "Product Access Denied" %]
     Either the product