Wagtailのサイトにユーザ認証機能を追加する ②テンプレート編

こんにちは。

Wagtailのサイトにdjango-allauthというパッケージを使って、ユーザ認証機能を追加しましたが、ログインページなどの見た目の整え方をご紹介しようと思います。

こちらもご覧ください。

Wagtailのサイトにユーザ認証機能を追加する ①設定編

テンプレートの変更方法

django-allauthのgithubサイトより変更したいTemplateファイルを持ってきます。 https://github.com/pennersr/django-allauth/tree/master/allauth/templates/account

プロジェクトのtemplateフォルダの中に入れて、こちらのファイルを書き換えていけばＯＫです。

変更例

私はbootstrap4を使っているので、以下のように書き換えました。

1
2
3
4
5
6
7
8
9
<form class="login" method="POST" action="{% url 'account_login' %}">
  {% csrf_token %}
  {{ form.as_p }}
  {% 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" type="submit">{% trans "Sign In" %}</button>
</form>

ちょっと味気ないログイン画面ですね。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container">
    <div class="col-md-6 mt-md-2 mt-0 mx-auto">
        <form class="login" method="POST" action="{% url 'account_login' %}">
            {% csrf_token %}

            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}

            {% for field in form.visible_fields %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {% render_field field|add_class:"form-control" placeholder=field.label%}
                    {% for error in field.errors %}
                        <span class="help-block">{{ error }}</span>
                    {% endfor %}
                </div>
            {% endfor %}

            {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
            {% endif %}

            <div class="form-group">
                <button class="primaryAction btn btn-primary" type="submit">{% trans "Sign In" %}</button>
            </div>

            <div class="form-group">
                <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
            </div>
        </form>
    </div>
</div>

こんな感じで整います。

テンプレートのオーバーライド方法

基本的には、htmlファイルを書き換えるだけでＯＫなのですが、以下パスワード変更画面の後の「パスワードを変更しました」的なhtmlがありません。（なんでですかね？？）

なので、パスワードを忘れた時にリセットした後に呼び出される「password_reset_done.html」を呼び出すようにします。

適切なフォルダにviews.pyを作成します。

1
2
3
4
from allauth.account.views import PasswordChangeView

class CustomPasswordChangeView(PasswordChangeView):
    success_url = '/password/reset/key/done'

urls.pyのurlpatternsに追加(色付き部分)します。

1
2
3
4
5
6
7
8
from auth.views import CustomPasswordChangeView

urlpatterns = [
    ...
    path('password/change/', CustomPasswordChangeView.as_view(), name='account_password_change'),
    path('', include('allauth.urls')),
    ...
]

これでパスワード変更時に「password_reset_done.html」が呼び出されるようになりました。