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
ログインの処理を行うページ。
![スクリーンショット 2022-05-19 0.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/2ccb4abc-f7e7-c0e1-69a0-2cf2cfc48186.png)
### form

```html: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
新規登録の処理を行うページ。
![スクリーンショット 2022-05-19 0.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/ffc65755-8fae-fa3a-4fb5-dd0aa280bc9f.png)

### form

```html: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`のページで入力したメールアドレスへ認証用のメールを送信したことを表示するページ。
![スクリーンショット 2022-05-19 0.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/c006afaa-aacc-eb8d-8526-8315b6b6c8a3.png)

## email_confirm.html
新規登録の際にメールが確認されたときに表示されるページ。
![スクリーンショット 2022-05-19 0.51.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/0085fad8-423a-2de0-6584-677605b664f8.png)

```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を送付する。
![スクリーンショット 2022-05-19 0.20.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/f42754a3-3234-8f3f-7308-518f15f30237.png)

### form

```html: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`のページでメールアドレス宛にメールを送信したことを表示するページ。
![スクリーンショット 2022-05-19 0.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/b3db294b-d56d-711d-ef10-76ae1485639a.png)

## password_reset_from_key.html
`password_reset_done.html`で送信されたメールに添付されているURLからアクセスしたページ。
![スクリーンショット 2022-05-19 0.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/441a6356-ef9f-fc6f-1e2f-3877fb8a4260.png)

### form

```html: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
パスワードの変更が完了したページ。
![スクリーンショット 2022-05-19 0.21.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547651/229e40a4-a23b-beca-c3d3-0afdbcff34bd.png)

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

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