django-allauthでページをカスタマイズする際のファイル名一覧

はじめに

当記事はdjango-allauthでページをカスタマイズする際のファイル名が検索しても一部しか載っていなかったりしたので、備忘録を兼ねて一覧を記しています。
Djangoやdjango-allauthの導入方法などは触れていませんのでご注意ください。
また、漏れやミス等ありましたらご指摘していただけると幸いです。

django-allauthバージョン

pip list|grep django-allauth
django-allauth                     0.50.0

ページと対応するファイル名一覧

以下に、ページ名と作成すべきファイル名の一覧を示しています。

ページ名	ファイル名	ページ機能概要
Sign In	login.html	ログインページ
Sign Up	signup.html	新規登録ページ
Verify Your E-mail Address	verification_sent.html	新規登録ページからメールが送信された際のページ
Confirm E-mail Address	email_confirm.html	新規登録でメールが認証されたページ
Possword Reset	password_reset.html	パスワードを忘れた際に表示するページ
Possword Reset	password_reset_done.html	入力したメールアドレス宛にメールの送信が完了した際のページ
Change Password	password_reset_from_key.html	新しいパスワードを入力するページ
Change Password	password_reset_from_key_done.html	パスワードの変更が完了したページ

django-allauthでのデフォルトのページは以下になっている。

login.html

ログインの処理を行うページ。

form

login.htmlのform部分を抽出

<form class="login" method="POST" action="/accounts/login/">
  <input type="hidden" name="csrfmiddlewaretoken" value="ZFlTnIKELKRPw8jQueeNEeeTdm0ZDOZCeyVEKjUiK3A7Cu8oJGEJ0tmfw0XMNpiI">
  <p><label for="id_login">E-mail:</label> <input type="email" name="login" placeholder="E-mail address" autocomplete="email" required="" id="id_login"></p>
<p><label for="id_password">Password:</label> <input type="password" name="password" placeholder="Password" autocomplete="current-password" required="" id="id_password"></p>
<p><label for="id_remember">Remember Me:</label> <input type="checkbox" name="remember" id="id_remember"></p>
  
  <a class="button secondaryAction" href="/accounts/password/reset/">Forgot Password?</a>
  <button class="primaryAction" type="submit">Sign In</button>
</form>

signup.html

新規登録の処理を行うページ。

form

signup.htmlのform部分を抽出

<form class="signup" id="signup_form" method="post" action="/accounts/signup/">
  <input type="hidden" name="csrfmiddlewaretoken" value="HLWG7OZypHxfVEuecnPo9fZjmeceaYOVWEwrup9co0gx10jMrPfkvu7FFS91kz71">
  <p><label for="id_email">E-mail:</label> <input type="email" name="email" placeholder="E-mail address" autocomplete="email" required="" id="id_email"></p>
  <p><label for="id_password1">Password:</label> <input type="password" name="password1" placeholder="Password" autocomplete="new-password" required="" id="id_password1"></p>
  <p><label for="id_password2">Password (again):</label> <input type="password" name="password2" placeholder="Password (again)" autocomplete="new-password" required="" id="id_password2"></p>
  
  <button type="submit">Sign Up »</button>
</form>

verification_sent.html

新規登録の際にsignup.htmlのページで入力したメールアドレスへ認証用のメールを送信したことを表示するページ。

email_confirm.html

新規登録の際にメールが確認されたときに表示されるページ。

email_confirm.htmlのform部分を抽出

<form method="post" action="/accounts/confirm-email/MTM:1nrM7J:k9xM5kX3IKuutQnHM-DL4Ezq3KItEud2hsDxAtLC_VE/">
  <input type="hidden" name="csrfmiddlewaretoken" value="6UYQR7PccSNIpbUWRaDhReHz9uDnPB4clNyBeIZQbbw0vxJu6C3ddtPVs8AaZcni">
  <button type="submit">Confirm</button>
</form>

password_reset.html

パスワードを忘れた際にこのページからパスワードの変更をすることができる。
メールアドレスを入力して入力されたメールアドレス宛にパスワード変更用のページのURLを送付する。

form

password_reset.htmlのform部分を抽出

<form method="POST" action="/accounts/password/reset/" class="password_reset">
  <input type="hidden" name="csrfmiddlewaretoken" value="YOCixhKwdK6CPTW16kpDqvcxRGtfbKbTdHc3USUac3PUVfLzlMPzMKkTakq2lluZ">
  <p><label for="id_email">E-mail:</label> <input type="email" name="email" placeholder="E-mail address" autocomplete="email" required="" id="id_email"></p>
  <input type="submit" value="Reset My Password">
</form>

password_reset_done.html

password_reset.htmlのページでメールアドレス宛にメールを送信したことを表示するページ。

password_reset_from_key.html

password_reset_done.htmlで送信されたメールに添付されているURLからアクセスしたページ。

form

password_reset_from_key.htmlのform部分を抽出

<form method="POST" action="/accounts/password/reset/key/c-set-password/">
  <input type="hidden" name="csrfmiddlewaretoken" value="WSdUd3dUAMyWqsCY9JSdumA785vV5SKLbLNFAEnyz5hewOrwobi9QBItrJsIft3R">
  <p><label for="id_password1">New Password:</label> <input type="password" name="password1" placeholder="New Password" autocomplete="new-password" required="" id="id_password1"></p>
  <p><label for="id_password2">New Password (again):</label> <input type="password" name="password2" placeholder="New Password (again)" required="" id="id_password2"></p>
  <input type="submit" name="action" value="change password">
</form>

password_reset_from_key_done.html

パスワードの変更が完了したページ。

その他

formのhidden要素について

各formにあるinputタグのhidden属性の要素はhtml中に{% csrf_token %}を記述することで自動的にHTML中に埋め込んでくれる。

form中の各入力項目について

各入力項目は{{ form.as_p }}を記述することで自動的にHTML中に項目を作成してくれる。
しかし、見栄えはあまりよろしくないので注意。