{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% block content %}

<header>
  <nav>
    <div class="logo"><img src="{% static 'img/header-logo.gif' %}" alt="Unicorn ID Manager"></div>
    <div class="nav-right">
      {% if self_modify %}
        <a href="{% url 'end_user_settings' target=target %}">{% trans 'Modify Attributes' %}</a>
      {% endif %}
        <a href="{% url 'end_user_password' target=target %}">{% trans 'Change Password' %}</a>
        <a href="{% url 'end_user_logout' target=target %}">{% trans 'Logout' %}</a>
    </div>
  </nav>
  <div class="page-title">
    <h1>{% trans 'Change Password' %}</h1>
  </div>
</header>


<div class="internal-wrapper">
{% if error_message %}
<div class="error-box">{{ error_message }}</div>
{% endif %}
{% if info_message %}
<div class="info-box">{{ info_message }}</div>
{% endif %}

    <div id="change-password-internal-wrapper">

      <form class="form-box" method="POST">
        <h2>{% trans 'Change Password' %}</h2>
        {% if user_name %}
            <input id="password-name" type="text" name="name" value="{{ user_name }}" readonly tabindex="-1">
        {% else %}
            <input id="password-name" type="text" name="name" placeholder="{% trans 'userName' %}">
        {% endif %}

        {% if require_old_password %}
            <input id="password-old" type="password" name="oldPassword" placeholder="{% trans 'Old Password' %}" required>
        {% endif %}

        <input id="password1" type="password" name="password1" placeholder="{% trans 'New Password' %}" required>
        <input id="password2" type="password" name="password2" placeholder="{% trans 'New Password (Confirm)' %}" required>
        {% csrf_token %}
        <div id="password-bar"></div>
        <button id="password-submit" class="submit-with-confirm" data-confirm="{% trans 'Are you sure you want to change the password?' %}" data-canceled="{% trans 'Canceled' %}" disabled>{% trans 'Change Password' %}</button>
      </form>


      <div id="change-password-policy-rule">
        {% if password_policy_message %}
          {% if password_policy_message_is_html %}
            {{ password_policy_message|safe }}
          {% else %}
            <pre>{{ password_policy_message }}</pre>
          {% endif %}
        {% else %}
          <h2>{% trans 'Password Requirements' %}</h2>
          <p>{% trans 'Password must meet the following requirements.' %}</p>
          <table>
            <tr><td>{% blocktrans context 'pasword policy' %}length{% endblocktrans %}</td>
                <td>{% if password_policy.min > 0 %}
                        {% blocktrans with num=password_policy.min context 'letters' %}{{ num }} or more{% endblocktrans %}
                    {% endif %}
                    {% if password_policy.min > 0 and password_policy.max < 100 %}
                        {% trans ', ' %}
                    {% endif %}
                    {% if password_policy.max < 100 %}
                        {% blocktrans with num=password_policy.max context 'letters' %}{{ num }} or less{% endblocktrans %}</td></tr>
                    {% endif %}
            {% if password_policy.alphabet > 0 %}
            <tr><td>{% blocktrans with s=_('Alphabets') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.alphabet context 'letters' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.upper > 0 %}
            <tr><td>{% blocktrans with s=_('Uppercases') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.upper context 'letters' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.lower > 0 %}
            <tr><td>{% blocktrans with s=_('Lowercases') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.lower context 'letters' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.symbol > 0 %}
            <tr><td>{% blocktrans with s=_('Symbol characters') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.symbol context 'letters' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.digit > 0 %}
            <tr><td>{% blocktrans with s=_('Digits') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.digit context 'letters' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.complexity > 0 %}
            <tr><td>{% blocktrans with s=_('Types of letters') %}Number of {{ s }}{% endblocktrans %}</td>
                <td>{% blocktrans with num=password_policy.complexity context 'types' %}{{ num }} or more{% endblocktrans %}</td></tr>
            {% endif %}
            {% if password_policy.prohibited %}
            <tr><td>{% trans 'Prohibited characters' %}</td><td>{{ password_policy.prohibited }}</td></tr>
            {% endif %}
            {% if password_policy.must_not_contain_name %}
            <tr><td>{% trans 'Must NOT contain your user name' %}</td><td></td></tr>
            {% endif %}
            {% if password_policy.must_be_different_from_old %}
            <tr><td>{% trans 'Must be different from your current password' %}</td><td></td></tr>
            {% endif %}
            {% if password_policy.must_be_various %}
            <tr><td>{% trans 'Must be various' %}</td><td></td></tr>
            {% endif %}
            {% if password_policy.must_be_disorder %}
            <tr><td>{% trans 'Must be disorder' %}</td><td></td></tr>
            {% endif %}
          </table>
        {% endif %}
        <div id="policy-error">
          <p id="policy-error-ok">
            {% trans 'The password satisfies these requirements' %}
          </p>
          <p id="policy-error-availablechars">{% trans 'Please use only letters(a..z and A..Z), numbers(0..9) and allowed special characters' %}</p>
          <p id="policy-error-max">{% trans 'The password is too long' %}</p>
          <p id="policy-error-min">{% trans 'The password is too short' %}</p>
          <p id="policy-error-alphabet">{% trans 'The password does not contain sufficient alphabets' %}</p>
          <p id="policy-error-upper">{% trans 'The password does not contain sufficient uppercases' %}</p>
          <p id="policy-error-lower">{% trans 'The password does not contain sufficient lowercases' %}</p>
          <p id="policy-error-symbol">{% trans 'The password does not contain sufficient symbol characters' %}</p>
          <p id="policy-error-digit">{% trans 'The password does not contain sufficient digit characters' %}</p>
          <p id="policy-error-complexity">{% trans 'The password does not meet the complexity requirements' %}</p>
          <p id="policy-error-prohibited">{% trans 'The password contains prohibited characters' %}</p>
          <p id="policy-error-must-not-contain-name">{% trans 'The password contains user name' %}</p>
          <p id="policy-error-must-be-different-from-old">{% trans 'The password is same as old password' %}</p>
          <p id="policy-error-must-be-various">{% trans 'The password does not contain enough different characters' %}</p>
          <p id="policy-error-must-be-disorder">{% trans 'The password is too simplistic/systematic' %}</p>
          <p id="policy-error-confirmation">{% trans 'Password and Password (Confirm) does not match' %}</p>
        </div>
      </div>
    </div>
</div><!-- internal-wrapper -->


  <script type="application/javascript">
    var passwordPolicy = {{ password_policy_js|safe }};
    var isAdmin = false;
  </script>
  <script type="application/javascript" src="{% static 'js/policy_check.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/password_strength.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/password_random.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/submit_confirm.js' %}"></script>
{% endblock %}