digitalfabrik/integreat-cms

{% extends "authentication/_base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% block heading %}
    {% translate "Reset password" %}
{% endblock heading %}
{% block content %}
    <form method="post" class="flex flex-col">
        {% csrf_token %}
        {% if form.errors %}
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 -mt-2 mb-5 password_reset_errors"
                 role="alert">
                <p>
                    {{ form.new_password1.errors }}
                    {{ form.new_password2.errors }}
                </p>
            </div>
        {% endif %}
        <div class="mb-4">
            <label class="block text-gray-600 font-bold mb-2"
                   for="{{ form.new_password1.id_for_label }}">
                {{ form.new_password1.label }}
            </label>
            {% translate "Password" as new_password1_placeholder %}
            {% render_field form.new_password1|add_error_class:"border-red-500" placeholder=new_password1_placeholder class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 leading-tight focus:shadow-outline" %}
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 font-bold mb-2"
                   for="{{ form.new_password2.id_for_label }}">
                {{ form.new_password2.label }}
            </label>
            {% translate "Repeat password" as new_password2_placeholder %}
            {% render_field form.new_password2|add_error_class:"border-red-500" placeholder=new_password2_placeholder class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-600 leading-tight focus:shadow-outline" %}
        </div>
        <button class="btn">
            {% translate "Set new password" %}
        </button>
        <div class="text-right mt-4">
            <a href="{% url 'public:login' %}"
               class="text-gray-600 hover:text-gray-200 hover:bg-gray-600 rounded py-2 px-3 font-bold">
                <i icon-name="arrow-left-circle" class="align-top"></i> {% translate "Back to log in" %}
            </a>
        </div>
    </form>
{% endblock content %}