Estilizando reset de senha

Faaala Raul, como vai?

Para personalizar as views, precisamos criar um arquivo html com o visual desejado e passarmos para as rotas o atributo template_name. Por exemplo:

path('reset_password/', auth_views.PasswordResetView.as_view(template_name="usuarios/password_reset.html"), name="reset_password"),
path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(template_name="usuarios/password_reset_sent.html"), name="password_reset_done"),
path('reset/<uidb64>/<token>', auth_views.PasswordResetConfirmView.as_view(template_name="usuarios/password_reset_form.html"), name="password_reset_confirm"),
path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name="usuarios/password_reset_done.html"), name="password_reset_complete"),

Quanto ao name no formulário para a alteração de senha, são eles: new_password1 e new_password2. E para o formulário de cadastro de e-mail o name é email. São definidos por padrão.

Como as outras visualizações são apenas mensagens de confirmação, não precisamos nos preocupar com o name.

Deixo abaixo códigos html de exemplos das visualizações que foram personalizados tendo como base o projeto Alura Receita:

password_reset.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Preloader -->
<div id="preloader">
    <i class="circle-preloader"></i>
    <img src="{% static 'img/core-img/pizza.png' %}" alt="">
</div>

{% include 'partials/_busca.html' %}

{% include 'partials/_menu.html' %}

<!-- ##### Contact Form Area Start ##### -->
<div class="contact-area section-padding-0-80">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading">
                    <h2>Esqueceu sua senha?</h2>
                    <p> Digite seu endereço de e-mail cadastrado e enviaremos
                    as intruções para que você possa cadastrar uma nova senha. </p>
                </div>
            </div>
        </div>
        {% include 'partials/_alertas.html' %}
        <div class="row">
            <div class="col-12">
                <div class="contact-form-area">
                    <form method="POST">
                    {% csrf_token %}
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                <label for="email"><b>Email</b></label>
                                <input type="text" id="email" class="form-control" name="email" placeholder="Entre com o email cadastrado" required>
                                <div class="col-12 text-center">
                                    <button class="btn btn-success" type="submit">Enviar</button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'partials/_footer.html' %}
{% endblock %}

password_reset_sent.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Preloader -->
<div id="preloader">
    <i class="circle-preloader"></i>
    <img src="{% static 'img/core-img/pizza.png' %}" alt="">
</div>

{% include 'partials/_busca.html' %}

{% include 'partials/_menu.html' %}

<!-- ##### Contact Form Area Start ##### -->
<div class="contact-area section-padding-0-80">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading">
                    <h5>E-mail de recuperação enviado</h5>
                    <p> Te enviamos um email com instruções para configurar sua senha. Se uma conta existe com o email fornecido, você receberá a mensagem em breve. </p>
                    <p> Se você não recebeu um email, por favor certifique-se que você forneceu o endereço que você está cadastrado, e verifique sua pasta de spam. </p>
                </div>
            </div>
        </div>
</div>

{% include 'partials/_footer.html' %}
{% endblock %}

password_reset_form.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Preloader -->
<div id="preloader">
    <i class="circle-preloader"></i>
    <img src="{% static 'img/core-img/pizza.png' %}" alt="">
</div>

{% include 'partials/_busca.html' %}

{% include 'partials/_menu.html' %}

<!-- ##### Contact Form Area Start ##### -->
<div class="contact-area section-padding-0-80">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading">
                    <h5>Digite a nova senha</h5>
                    <p>Por favor, informe sua nova senha duas vezes para que possamos verificar se você a digitou corretamente.</p>
                </div>
            </div>
        </div>
        {% include 'partials/_alertas.html' %}
        <div class="row">
            <div class="col-12">
                <div class="contact-form-area">
                    <form method="POST">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-12 col-lg-12">
                                {{ form.new_password1.errors }}
                                <label for="password"><b>Senha</b></label>
                                <input type="password" class="form-control" name="new_password1" placeholder="Digite sua senha" required>
                            </div>
                            <div class="col-12 col-lg-12">
                                {{ form.new_password2.errors }}
                                <label for="password2" class="mt-2"><b>Confirmação de senha</b></label>
                                <input type="password" class="form-control" name="new_password2" placeholder="Digite sua senha mais uma vez" required>
                            </div>
                            <div class="col-12 text-center">
                                <button class="btn btn-success" type="submit">Alterar minha senha</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'partials/_footer.html' %}
{% endblock %}

password_reset_done.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Preloader -->
<div id="preloader">
    <i class="circle-preloader"></i>
    <img src="{% static 'img/core-img/pizza.png' %}" alt="">
</div>

{% include 'partials/_busca.html' %}

{% include 'partials/_menu.html' %}

<!-- ##### Contact Form Area Start ##### -->
<div class="contact-area section-padding-0-80">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading">
                    <h5>Redefinição de senha completa</h5>
                    <p>Sua senha foi definida. Você pode prosseguir e se autenticar agora.</p>
                    <div class="col-12 text-center">
                        <button class="btn btn-success" type="submit" onclick="location.href='/usuarios/login'">Acessar sua conta</button>
                    </div>
                </div>
            </div>
        </div>
</div>

{% include 'partials/_footer.html' %}
{% endblock %}

Qualquer dúvida me avise, estou por aqui, tá bom?

Abraços e bons estudos!

Vou tentar, obrigado.