[%# 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.
  #%]

[% inline_style = BLOCK %]

.field-hr, .field-row {
  clear: both;
}

.field-row {
  height: 2.5em;
}

.field-name {
  text-align: right;
  width: 150px;
  float: left;
  padding-top: 2px;
  font-weight: bold;
}

.field-value {
  margin-left: 160px;
}

#errors, #complexity_rules {
  margin-left: 160px;
  max-width: 500px;
}

#errors {
  color: #dd4848;
  position: absolute;
  margin-left: 500px;
}

#errors ul {
  padding: 0;
  margin: 0;
}

#complexity_rules {
  margin-bottom: 50px;
}

[% END %]

[% inline_js = BLOCK %]
$(function() {
  $('#forgot_password')
    .click(function(event) {
      event.preventDefault();
      $('#forgot-form').submit();
    });
});

[% END %]

[% PROCESS global/header.html.tmpl
    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>

<p>
  [% user.password_change_reason || "You are required to update your password." FILTER html %]
</p>

<form method="POST" action="reset_password.cgi">
<input type="hidden" name="token" value="[% token FILTER html %]">
<input type="hidden" name="do_save" value="1">

<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 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 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 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 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>

<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">
  <input type="hidden" name="token" value="[% issue_hash_token(['reqpw']) FILTER html %]">
</form>

[% PROCESS global/footer.html.tmpl %]