在django中覆盖allauth模板后在allauth中不显示验证消息的问题

Question

您好，我使用 allauth 包来验证表单。在这种情况下，我遇到的问题是我想更改 allauth 包的默认模板并向其中添加我自己的样式和 css 类。我已经这样做了，但我的问题是，当用户输入不完整或不正确的登录信息时，不会向用户显示验证消息。我想更改默认的allauth模板，例如login.html、signup.html等，并且我想显示我自己的身份验证消息。请逐步指导我，因为我正在学习 Django，谢谢。

这是登录.html

{% extends "base.html" %}

{% load i18n %}
{% load account socialaccount %}

{% block head_title %}{% trans "Sign In" %}{% endblock %}

{% block content %}

    <h1 class="head-line">{% trans "Sign In" %}</h1>

    {% get_providers as socialaccount_providers %}

    {% if socialaccount_providers %}
        <div class="container">
            <p class="text-center">{% blocktrans with site.name as site_name %}Please sign in with one
                of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
                for a {{ site_name }} account and sign in below:{% endblocktrans %}
            </p>
        </div>

        <div class="socialaccount_ballot container">

            <ul class="socialaccount_providers text-center border">
                {% include "socialaccount/snippets/provider_list.html" with process="login" %}
            </ul>

            <div class="login-or text-center mt">{% trans 'or' %}</div>

        </div>

        {% include "socialaccount/snippets/login_extra.html" %}

    {% else %}
        <p>{% blocktrans %}If you have not created an account yet, then please
            <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
    {% endif %}

    <div class="container">
        <form class="login" method="POST" action="{% url 'account_login' %}">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_username">Username: </label>
                <input type="text" class="form-control" id="id_username" name="login" placeholder="Username">
            </div>
            <div class="form-group">
                <label for="id_password">Password: </label>
                <input type="password" class="form-control" id="id_password" name="password" placeholder="Password">
            </div>
            {{ form.username }}
            {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
            <a class="button secondaryAction"
               href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
            <button class="primaryAction btn btn-block mt mb" type="submit">{% trans "Sign In" %}</button>
        </form>
    </div>

{% endblock %}

这是signup.html

{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
    <h1 class="head-line">{% trans "Sign Up" %}</h1>

    <p class="text-center">{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}
    </p>

    <div class="container">
        <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_username">Username: </label>
                <input type="text" class="form-control" id="id_username" name="login" placeholder="Username">
            </div>
            <div class="form-group">
                <label for="id_email">Email: </label>
                <input type="text" class="form-control" id="id_username" name="email" placeholder="Emial">
            </div>
            <div class="form-group">
                <label for="id_password1">Password: </label>
                <input type="password" class="form-control" id="id_username" name="password1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="id_password2">Password Again: </label>
                <input type="password" class="form-control" id="id_username" name="password2" placeholder="Password Again">
            </div>
            {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
            <button type="submit" class="btn btn-block mb">{% trans "Sign Up" %} &raquo;</button>
        </form>
    </div>
{% endblock %}

这是 logout.html

{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}{% trans "Sign Out" %}{% endblock %}

{% block content %}
    <h1 class="head-line">{% trans "Sign Out" %}</h1>

    <p class="text-center">{% trans 'Are you sure you want to sign out?' %}</p>

    <div class="container">
        <form method="post" action="{% url 'account_logout' %}">
            {% csrf_token %}
            {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
            <button type="submit" class="btn btn-block mb">{% trans 'Sign Out' %}</button>
        </form>
    </div>

{% endblock %}

Answer 1

我假设您已经创建了一个base.html来覆盖allauth/layouts上的base.html复制所有内容并在那里进行更改 你可以把你的CSS放在那里，Tailwind或Bootstrap 5

我在这个演示中使用了 bootstrap

在您的项目模板/allauth/布局上

制作base.html

我复制了原始包中的所有内容，并做了一些调整，我放入了 bootstrap 5 和任何第三方脚本。

{% load i18n %}
{% load static %} <!-- Don't Forget to load static if you are using static files -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
        <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
        <title>
            {% block head_title %}
            {% endblock head_title %}
        </title>
        {% block extra_head %}
        {% endblock extra_head %}
    </head>
    <body>
        {% block body %}
            {% if messages %}
                <!-- Display messages -->
                    {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}

            {% block content %}
            {% endblock content %}
        {% endblock body %}
        {% block extra_body %}
        {% endblock extra_body %}
    </body>
</html>

现在回到主要问题，您说用户提交表单后没有反馈，并且您想显示身份验证是否有问题

其简单的 Django allauth 扩展了 Django 的内置身份验证系统，为用户身份验证、注册、密码重置等提供视图和表单。当您使用 LoginForm 或 SignupForm 等表单时，这些表单继承自 Django 的表单系统。

因此，如果表单字段未通过验证（例如，必填字段留空，或者密码不正确），Django 的表单系统会将这些验证错误存储在 form.errors 属性中。

那么如何显示用户未通过认证呢？

我使用下面的 Boostrap 5 做了一个简单的警报来显示错误

{% if form.errors %}
    <div class="alert alert-danger">
        <ul>
        {% for field in form %}
            {% for error in field.errors %}
                <li>{{ field.label }}: {{ error }}</li>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <li>{{ error }}</li>
        {% endfor %}
        </ul>
    </div>
{% endif %}

这将解决您手头的问题。