CMSgov/dpc-app

<% title "Change your password" %>


<div class="ds-l-column">
  <div class="ds-l-col--12 ds-l-md-col--6 ds-u-margin-bottom--1 ds-u-margin-x--auto">
    <div class="card card--border-top card--shadow">
      <h2 class="ds-u-margin-top--0">Change your password</h2>

      <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
        <%= render "devise/shared/error_messages", resource: resource %>
        <%= f.hidden_field :reset_password_token %>

        <div class="field">
          <%= f.label :password, "New password", class: "ds-c-label" %>
          <div class="password-check-list">
            Password must contain at least:<br />
            <div id="password-char-set" class="invalid">
              <%= @minimum_password_length %> characters minimum
            </div>
            <div id="password-lower-set" class="invalid">
              1 lowercase letter
            </div>
            <div id="password-upper-set" class="invalid">
              1 uppercase letter
            </div>
            <div id="password-num-set" class="invalid">
              1 number
            </div>
            <div id="password-special-set" class="invalid">
              1 special character (!@#$&*-)
            </div>
          </div>
          <%= f.password_field :password, class: "ds-c-field", onkeyup: "passwordCheck('user_password')" %>

        <div class="field">
          <%= f.label :password_confirmation, "Confirm new password", class: "ds-c-label" %>
          <div class="password-check-list">
            <div id="password-confirm-set" class="invalid">
              Confirm password
            </div>
          </div>
          <%= f.password_field :password_confirmation, class: "ds-c-field", onkeyup: "passwordCheck('user_password_confirmation')" %>
        </div>

        <div class="actions ds-u-margin-top--3">
          <%= f.submit "Change password", class: "ds-c-button ds-c-button--primary", data: { test: "submit" } %>
        </div>
      <% end %>
    </div>
  </div>
</div>

<div class="ds-l-row">
  <div class="ds-l-col--12 ds-l-md-col--6 ds-u-margin-x--auto">
    <div class="card">
      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>