change-password-current.html

{% extends "layout.html" %}


{% block content %}


        <div class="grid-row">
            <div class="column-two-thirds">
                <h1 class="heading-xlarge">
                    Change password
                </h1>
            </div>
        </div>

        <div class="row">
            <div class="col-9">
                <form method="post" action="/change-password-new" id="form-current-password" novalidate="novalidate">
                  <fieldset>
                      <legend class="vh">Enter your current password</legend>
                      <div class="form-group">
                          <label class="form-label-bold" for="current-password">Enter your current password</label>
                          <span class="error-message"></span>
                        <div class="show-password">
                          <input class="form-control" id="current-password" name="current-password" type="password" required="required" pattern=".{8,}" data-validation="Enter a password in the following format">
                        </div>
                      </div>
                      <hr>
                      <div class="form-group">
                        <label for="new-password" class="form-label-bold">Create new password</label>
                        <div class="form-hint">
                          <p>Your password must:</p>
                          <ul class="list-bullet">
                            <li>be at least 8 characters</li>
                            <li>have at least one number (0-9)</li>
                            <li>have at least one letter (a-z)</li>
                            <li>not contain common words (e.g. password)</li>
                          </ul>
                        </div>
                        <div class="show-password">
                          <input class="form-control" id="new-password" name="new-password" type="password" required="required">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="form-label-bold" for="confirm-password">Confirm your new password</label>
                        <div class="show-password">
                          <input class="form-control" id="confirm-password" name="confirm-password" type="password" required="required">
                        </div>
                      </div>
                      <div class="form-submit">
                          <button type="submit" class="button">Continue</button>
                      </div>
                  </fieldset>
                </form>
            </div>
        </div>

{% endblock %}