packages/fxa-content-server/app/scripts/templates/complete_reset_password.mustache

<div class="card">
  {{#isLinkExpired}}
  <header class="mb-4">
    <h1 id="fxa-reset-link-expired-header" class="card-header">{{#t}}Reset password link expired{{/t}}</h1>
  </header>

  <section>
    <div class="error"></div>
    <div class="success"></div>

    <p>
      {{#t}}The link you clicked to reset your password is expired.{{/t}}
    </p>

    <div class="links">
      <a id="resend" class="resend-email link-blue mt-2" href="#">{{#t}}Receive new link{{/t}}</a>
    </div>
  </section>
  {{/isLinkExpired}}

  {{#isLinkDamaged}}
  <header>
    <h1 id="fxa-reset-link-damaged-header" class="card-header">{{#t}}Reset password link damaged{{/t}}</h1>
  </header>

  <section>
    <p>
      {{#t}}The link you clicked was missing characters, and may have been broken by your email client. Copy the address carefully, and try again.{{/t}}
    </p>
  </section>
  {{/isLinkDamaged}}

  {{#isLinkValid}}
  <header>
    <h1 id="fxa-complete-reset-password-header" class="card-header">{{#t}}Create new password{{/t}}</h1>
  </header>

  <section>
    <div class="error"></div>

    <form novalidate>
        {{#showSyncWarning}}
            <p class="reset-warning">
                {{#unsafeTranslate}}<span>REMEMBER:</span> When you reset your password, you reset your account. You may lose some of your personal information (including history, bookmarks, and passwords). That’s because we encrypt your data with your password to protect your privacy. You’ll still keep any subscriptions you may have and Pocket data will not be affected.{{/unsafeTranslate}}
            </p>
        {{/showSyncWarning}}

        {{#showAccountRecoveryInfo}}
            <p class="mb-5 mt-4">
                {{#t}}You have successfully restored your account using your account recovery key. Create a new password to secure your data, and store it in a safe location.{{/t}}
            </p>
        {{/showAccountRecoveryInfo}}

      <!-- hidden email field is to allow Fx password manager
           to correctly save the updated password. Without it,
           the password manager tries to save the old password
           as the username. -->
      <input type="email" value="{{email}}" class="hidden" />

      <div class="tooltip-container mb-5">
        <input type="password" class="input-text tooltip-below" id="password" placeholder="{{#t}}New password{{/t}}" pattern=".{8,}" required autofocus data-synchronize-show="true"/>
        <div id="password-strength-balloon-container" tabindex="-1"></div>
      </div>


      <div class="tooltip-container mb-5">
        <input type="password" class="tooltip-below input-text" id="vpassword" placeholder="{{#t}}Re-enter password{{/t}}" required pattern=".{8,}" data-synchronize-show="true"/>
      </div>

      <div class="flex">
          <button type="submit" class="cta-primary cta-xl">{{#t}}Reset password{{/t}}</button>
      </div>
      <div class="links">
        <a href="#" id="remember-password" class="link-blue mt-5">{{#t}}Remember password? Sign in{{/t}}</a>
      </div>
    </form>
  </section>
  {{/isLinkValid}}
</div>