{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Self-service password change. The current password is required even though
   the session is already authenticated — a hijacked session must not be enough
   to lock the real owner out. On success the caller's own session key is
   rotated and every other session for the account is destroyed. {% endcomment %}

{% block title %}Change password{% endblock %}

{% block content %}
<div ng-controller="changePasswordController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Change your password</h1>
      <p class="text-muted mb-0 small">
        For <code>{{ profileUserName }}</code>. You stay signed in here; every
        other session for this account is signed out.
      </p>
    </div>
    <a href="/users/profile" class="btn btn-outline-secondary">
      <i class="fas fa-user me-1"></i>Profile
    </a>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <span ng-bind="errorMessage"></span>
  </div>

  <div class="alert alert-success py-2 px-3" ng-show="successMessage" ng-cloak role="status">
    <i class="fas fa-circle-check me-1"></i>
    <span ng-bind="successMessage"></span>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card">
        <div class="card-body">
          <form novalidate ng-submit="submit()" autocomplete="off">

            <div class="mb-3">
              <label class="form-label" for="cpCurrent">Current password</label>
              <input type="password" class="form-control" id="cpCurrent"
                     ng-model="form.currentPassword" autocomplete="current-password" required>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpNew">New password</label>
              <div class="input-group">
                <input type="{$ showNew ? 'text' : 'password' $}" class="form-control"
                       id="cpNew" ng-model="form.newPassword"
                       ng-change="rate()" autocomplete="new-password" required>
                <button class="btn btn-outline-secondary" type="button"
                        ng-click="showNew = !showNew"
                        aria-label="Toggle password visibility">
                  <i class="fas" ng-class="showNew ? 'fa-eye-slash' : 'fa-eye'"></i>
                </button>
              </div>
              <div class="mt-2" ng-show="form.newPassword" ng-cloak>
                <div class="progress" style="height:.4rem">
                  <div class="progress-bar" ng-class="strength.variant"
                       role="progressbar" aria-label="Password strength"
                       ng-style="{width: strength.percent + '%'}"
                       aria-valuenow="{$ strength.percent $}"
                       aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="form-text" ng-bind="strength.label"></div>
              </div>
              <div class="form-text">
                At least 10 characters, mixing three of: lowercase, uppercase,
                digits, symbols.
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="cpConfirm">Confirm new password</label>
              <input type="password" class="form-control" id="cpConfirm"
                     ng-model="form.confirmPassword" autocomplete="new-password" required>
              <div class="form-text text-danger"
                   ng-show="form.confirmPassword && form.confirmPassword !== form.newPassword"
                   ng-cloak>
                The passwords do not match.
              </div>
            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="busy">
              <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                    role="status" aria-hidden="true"></span>
              <span ng-bind="busy ? 'Changing…' : 'Change password'"></span>
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-circle-info me-1 text-primary"></i>What happens next
          </h2>
          <ul class="small text-muted ps-3 mb-3">
            <li class="mb-2">
              The new password is hashed with Argon2 before it is stored. The
              plaintext is never written to a log or an audit entry.
            </li>
            <li class="mb-2">
              Your session key is rotated, so a stolen session cookie captured
              before the change stops working.
            </li>
            <li class="mb-2">
              Every other session belonging to this account is destroyed &mdash; on
              other browsers and other machines.
            </li>
            <li>
              The change is recorded in the audit log with your username, address
              and how many sessions were ended.
            </li>
          </ul>
          <p class="small text-muted mb-0">
            Locked out after this? An administrator can reset the password from
            <a href="/users/modifyUser">Modify user</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'userManagement/userManagement.js' %}"></script>
{% endblock %}