장고 allauth 디자인

템플릿 오버라이드

allauth가 제공하는 템플릿 대신 직접 작성한 템플릿을 사용하려면
templates폴더 안에 account폴더를 만들고 그 안에 템플릿을 넣으면 오버라이드가 된다.
템플릿 파일의 이름은 allauth가 제공하는 템플릿 파일의 이름과 동일해야 한다.

파일 이름들

• email_confirmation_done.html
  이메일 인증 완료 페이지
• login.html
  로그인 페이지
• password_change.html
  로그인 후 비밀번호 변경 페이지
• password_reset_done.html
  비밀번호 재설정 메일 전송 완료 페이지
• password_reset_from_key_done.html
  비밀번호 재설정 완료 페이지
• password_reset_from_key.html
  비밀번호 재설정 페이지
• password_reset.html
  비밀번호 재설정 메일 작성 페이지
• signup.html
  회원가입 페이지

이때 INSTALLED_APPS에서 오버라이드할 템플릿을 적용할 앱의 이름이 allauth보다 위에 있어야 한다.
그래야 allauth의 템플릿이 아니라 앱에서 오버라이드한 템플릿이 적용된다.

혹시 디렉토리 구조를 변경하고 나서 템플릿 적용이 제대로 돼지 않는다면 urls.py에서 변경된 구조에 맞게 수정하고 다시 확인해보자.

장고 폼에 속성 추가

pip install django-widget-tweaks
설치후 템플릿에서 사용할 때는 상단에
{% load widget_tweaks %}를 작성해야 한다.

{% load widget_tweaks %}

<div>
    {{form.email|add_class:"cp-input"|attr:"placeholder:이메일"|add_error_class:"error"}}
    {% for error in form.email.errors %}
        <div class="error-message">{{error}}</div>
    {% endfor %}
</div>

이런식으로 속성을 추가해 주면 된다.
폼 필드의 이름은

---

• 페이지
  회원가입 (‘account_signup’)
• 템플릿 이름
  signup.html
• 필드
  • 유저네임: {{ form.username }}
  • 이메일: {{ form.email }}
  • 비밀번호: {{ form.password1 }}
  • 비밀번호 확인: {{ form.password2 }}
  • 추가 필드(extra_field): {{ form.extra_field }}

---

• 페이지
  로그인 (‘account_login’)
• 템플릿 이름
  login.html
• 필드
  • 로그인 (유저네임/이메일/둘 다 허용): {{ form.login }}
  • 비밀번호: {{ form.password }}

---

• 페이지
  비밀번호 변경 (‘account_change_password’)
• 템플릿 이름
  password_change.html
• 필드
  • 현재 비밀번호: {{ form.oldpassword }}
  • 새 비밀번호: {{ form.password1 }}
  • 새 비밀번호 확인: {{ form.password2 }}

---

• 페이지
  비밀번호 찾기 (‘account_reset_password’)
• 템플릿 이름
  password_reset.html
• 필드
  • 이메일: {{ form.email }}

---

• 페이지
  비밀번호 재설정 이메일 발송 완료 (‘account_reset_password_done’)
• 템플릿 이름
  password_reset_done.html
• 필드
  없음

---

• 페이지
  비밀번호 재설정 (‘account_reset_password_from_key’)
• 템플릿 이름
  password_reset_from_key.html
• 필드
  • 새 비밀번호: {{ form.password1 }}
  • 새 비밀번호 확인: {{ form.password2 }}

---

• 페이지
  비밀번호 재설정 완료 (‘account_reset_password_from_key_done’)
• 템플릿 이름
  password_reset_from_key_done.html
• 필드
  없음

---

non_field_errors

하나의 특정 필드에만 종속된 오류가 아니라 로그인 페이지 같이 폼 전체에 대한 오류를 사용할 때 사용한다.

{% for error in form.non_field_errors %}
    <div class="form-error error-message">{{error}}</div>
{% endfor %}

이렇게 작성하면 된다.

메시지

메시지

allauth에서는 로그아웃, 로그인 등등의 액션이 있을 때 마다 메시지가 생성된다.
이 메시지를 사용하지 않으면 계속 쌓여서 어드민 페이지에 들어갈 때 한번에 출력되기 때문에 비활성화 시켜둔다.
방법은 templates/account/messages 폴더에 빈 템플릿을 생성해 오버라이드한다.

파일 이름
cannot_delete_primary_email.txt
email_confirmation_sent.txt
email_confirmed.txt
email_deleted.txt
logged_in.txt
logged_out.txt
password_changed.txt
password_set.txt
primary_email_set.txt
unverified_primary_email.txt

이메일

allauth가 발송하는 이메일의 내용을 변경하려면
templates/account/email 폴더에 텍스트파일을 작성한다.

파일 이름

• email_confirmation_signup_message.txt
  회원가입 인증 메일 내용
  • 이메일 인증링크
    {{activate_url}}
• email_confirmation_signup_subject.txt
  회원가입 인증 메일 제목
• password_reset_key_message.txt
  비밀번호 재설정 메일 내용
  • 비밀번호 재설정 링크
    {{password_reset_url}}
• password_reset_key_subject.txt
  비밀번호 재설정 메일 제목

ACCOUNT_EMAIL_SUBJECT_PREFIX = ‘’
allauth가 발송하는 이메일 제목에는 오버라이딩을 해도 웹사이트의 도메인이 앞에 붙게 돼기 때문에 빈 문자열로 대체해 제거한다.