django change password by CBV

url 설정

config/urls.py

urlpatterns = [
    path("users", include("users.urls", namespace="users")),
]

users/urls.py

from django.urls import path
from . import views

app_name = "users"

urlpatterns = [path(
        "<int:pk>/change-password/",
        views.ChangePasswordView.as_view(),
        name="change-password",
    )]

{% url %}

  update_profile.html의 일부다. Change Password button을 누르면 password를 수정할 수 있는 page로 간다. url template tag를 이용해서 update_profile page로 갈 수 있게 한다. {% url 'users:change-password' user.pk %}는 /users/<int:pk>/change-password/와 같다.

CBV(Class Based View)

users/views.py

  CBV는 django에서 정의한 여러가지 View들을 이용한다. 그 중 PasswordChangeView를 이용해서 change-password page를 작성한다. PasswordChangeView는 FormView와는 다르게 forms.py를 작성하지 않는다. 이미 old password, new password와 verify password가 다 정의되어 있기 때문이다..

  get_form method를 이용해서 form의 속성을 제어할 수 있다. PasswordChangeView는 password 설정 정책이 있는데, 변경하는 password의 길이가 짧거나 흔하거나 숫자만 있을 경우 password를 변경할 수 없다. 해당 사항이 감지되었을 때 error message를 보여주는데 이 메시지는 form.error_message를 통해서 변경할 수 있다.

from django.contrib.auth.views import PasswordChangeView
from django.contrib.messages.views import SuccessMessageMixin
from . import mixins


class ChangePasswordView(
    mixins.LoginOnlyView,
    mixins.EmailLoginOnlyView,
    SuccessMessageMixin,
    PasswordChangeView,
):
    template_name = "pages/users/change_password.html"
    success_message = "Password changed"

    def get_form(self, form_class=None):
        form = super().get_form(form_class=form_class)
        form.fields["old_password"].widget.attrs = {"placeholder": "Old password"}
        form.error_messages["password_mismatch"] = "The two password didn't match"
        form.fields["new_password1"].widget.attrs = {"placeholder": "New password"}
        form.fields["new_password2"].widget.attrs = {
            "placeholder": "Verify your new password"
        }
        return form

    def get_success_url(self):
        return self.request.user.get_absolute_url()

templates

pages/users/update_profile.html

  코드 길이는 달라지지 않았다. 물론 {{form}} 한 줄로 <form><form/> 안을 압축할 수 있지만 제어를 하기 위해서 일일이 {{form.*}}로 했다. FBV template과는 다르게 errors가 추가되었다.

{% extends 'base.html' %}


{% block page_title %}
  Change {{user.first_name}}'s Password
{% endblock page_title %}
  
{% block search-bar %}
<div></div>
{% endblock search-bar %}

{% block content %}
  <div class="background">
    <div class="wrap">
      <h1 class="font-bold text-xl mb-6">Change password of {{user.email}}</h1>
      <form method="post" class="form">
        {% csrf_token %}
        <div class="form_input rounded-tl-lg rounded-tr-lg">
          {{form.old_password}}
          {% if form.old_password.errors %}
            {{form.old_password.errors}}
          {% endif %}
        </div>

        <div class="form_input">
          {{form.new_password1}}
        </div>

        <div class="form_input rounded-bl-lg rounded-br-lg">
          {{form.new_password2}}
          {% if form.new_password2.errors %}
            {{form.new_password2.errors}}
          {% endif %}
          
        </div>
        <button class="form_button bg-red-500">Change Password</button>
      </form>
      <button class="button bg-gray-700">
        <a href="{% url 'users:profile' user.pk %}">Back</a>
      </button>
    </div>
  </div>

{% endblock content %}
  

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• PasswordChangeView

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/f36b45bacbdd2ced290e1dfc73b06159c13f599c