article

Sunday, May 24, 2020

Change Password - How to Use Django Messages Framework


Change Password - How to Use Django Messages Framework

Django project already comes with the messages framework installed.  In this article I will show How to Use Django Messages Framework

INSTALLED_APPS
django.contrib.messages

MIDDLEWARE or MIDDLEWARE_CLASSES in older versions:
django.contrib.sessions.middleware.SessionMiddleware
django.contrib.messages.middleware.MessageMiddleware

TEMPLATES
context_processors
django.contrib.messages.context_processors.messages

Settings.py
#settings.py
from django.contrib.messages import constants as messages

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger',
}
Usage views.py
#views.py
from django.shortcuts import render, redirect

from django.contrib.auth.decorators import login_required
from django.contrib import messages
from django.contrib.auth import update_session_auth_hash
from django.contrib.auth.forms import PasswordChangeForm
 
@login_required
def password(request):
    if request.method == 'POST':
        form = PasswordChangeForm(request.user, request.POST)
        if form.is_valid():
            user = form.save()
            update_session_auth_hash(request, user)  # Important!
            messages.success(request, 'Your password was successfully updated!')
            return redirect('/password')
        else:
            messages.error(request, 'Please correct the error below.')
    else:
        form = PasswordChangeForm(request.user)
    return render(request, 'change_password.html', {'form': form })
the template change_password.html
//templates/change_password.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>{% block title %} Change Password {% endblock title %}</title>
  {% load static %} 
</head>
<body>
<div style="padding:25px;">
<p><h1>Change Password - How to Use Django Messages Framework</h1></p>
{% if messages %}
  <ul class="messages">
    {% for message in messages %}
      <li class="{{ message.tags }}">{{ message }}</li>
    {% endfor %}
  </ul>
{% endif %}
<form method="post">
  {% csrf_token %}
  {{ form }}
  <button type="submit">Save changes</button>
</form>
</div>
<style>
ul {list-style:none;}
.alert-success, .alert-warning, .alert-info, .alert-danger {
 background-repeat: no-repeat;
 background-position: 10px center;
 height: 20px;
 text-transform: uppercase;
 font-size: 11px;
 line-height: 22px;
 margin-bottom: 20px;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 50px;
 
}
.alert-success     {
 background-color: #EBF8D6;
 border: 1px solid #A6DD88;
 color: #539B2D;
 background-image: url({% static 'img/accept00.png' %});
}
.alert-warning      {
 background-color: #FFECE6;
 border: 1px solid #FF936F;
 color: #842100;
 background-image: url({% static 'img/delete00.png' %});
}
.alert-info    {
 background-color: #D3EEF1;
 border: 1px solid #81CDD8;
 color: #369CAB;
 background-image: url({% static 'img/info0000.png' %});
}
.alert-danger   {
 background-color: #FFFBCC;
 border: 1px solid #FFF35E;
 color: #C69E00;
 background-image: url({% static 'img/warning0.png' %});
}
.close-notification     {
 width: 16px;
 height: 16px;
 position: absolute;
 background: url({% static 'img/close000.png' %}) no-repeat;
 top: 4px;
 right: 4px;
 cursor: pointer;
}
</style>
</body>
</html>
//If the error message was added, the output would be something like that:
<ul class="messages">
    <li class="alert-danger">Please correct the error below.</li>
</ul>
 
#urls.py
from django.contrib import admin  
from django.urls import path
from myapp import views  
from django.conf.urls import url

urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('password',views.password),
]

Related Post