{% extends "base.html" %}
{% from "components/ui.html" import csrf_field with context %}
{% block title %}Password · {{ APP_NAME }}{% endblock %}
{% block heading %}Password{% endblock %}
{% block subheading %}<div class="sub">{% if must_change %}Your password was set for you. Choose one of your own to go on.{% else %}Changing it signs out your other sessions.{% endif %}</div>{% endblock %}
{% block content %}
<form method="post" action="/ui/password">
  {{ csrf_field() }}
  <input type="hidden" name="name" value="{{ me.name }}" autocomplete="username" />
  <section class="card">
    <header><h2>Change your password</h2><span class="meta">At least 15 characters. A few words in a row make a good one.</span></header>
    <div class="body">
      <div class="form-grid">
        <div class="field">
          <label for="f-current">Current password</label>
          <input id="f-current" name="current_password" type="password" autocomplete="current-password" required autofocus />
        </div>
        <div class="field">
          <label for="f-new">New password</label>
          <input id="f-new" name="new_password" type="password" autocomplete="new-password" minlength="15" maxlength="256" required />
        </div>
        <div class="field">
          <label for="f-repeat">New password again</label>
          <input id="f-repeat" name="repeat_password" type="password" autocomplete="new-password" minlength="15" maxlength="256" required />
        </div>
      </div>
    </div>
  </section>
  <div class="form-actions"><button class="primary" type="submit">Change password</button></div>
</form>
{% endblock %}