add change password in profile page

mominur-helios · mominur-helios · commit d9917baf0712 · 2023-10-17T13:08:01.000+06:00
diff --git a/apps/users/urls.py b/apps/users/urls.py
@@ -8,10 +8,10 @@
     path('signin/', views.SignInView.as_view(), name="signin"),
     path('signup/', views.SignUpView.as_view(), name="signup"),
     path('signout/', views.signout_view, name="signout"),
-    path('password-change/', views.UserPasswordChangeView.as_view(), name='password_change'),
-    path('password-change-done/', auth_views.PasswordChangeDoneView.as_view(
-        template_name='authentication/password-change-done.html'
-    ), name="password_change_done"),
+    # path('password-change/', views.UserPasswordChangeView.as_view(), name='password_change'),
+    # path('password-change-done/', auth_views.PasswordChangeDoneView.as_view(
+    #     template_name='authentication/password-change-done.html'
+    # ), name="password_change_done"),
     path('password-reset/', views.UserPasswordResetView.as_view(), name="password_reset"),
     path('password-reset-confirm/<uidb64>/<token>/',
         views.UserPasswrodResetConfirmView.as_view(), name="password_reset_confirm"
@@ -25,4 +25,5 @@
 
     path('profile/', views.profile, name='profile'),
     path('upload-avatar/', views.upload_avatar, name='upload_avatar'),
+    path('change-password', views.change_password, name='change_password'),
 ]
diff --git a/apps/users/views.py b/apps/users/views.py
@@ -8,6 +8,8 @@
 from django.contrib.auth import logout
 from django.urls import reverse
 from django.contrib.auth.decorators import login_required
+from django.contrib.auth.hashers import check_password
+from django.contrib import messages
 
 # Create your views here.
 
@@ -57,6 +59,7 @@ def profile(request):
 
         if form.is_valid():
             form.save()
+            messages.success(request, 'Profile updated successfully')
     else:
         form = ProfileForm(instance=profile)
     
@@ -71,4 +74,16 @@ def upload_avatar(request):
     if request.method == 'POST':
         profile.avatar = request.FILES.get('avatar')
         profile.save()
+        messages.success(request, 'Avatar uploaded successfully')
+    return redirect(request.META.get('HTTP_REFERER'))
+
+
+def change_password(request):
+    user = request.user
+    if request.method == 'POST':
+        if check_password(request.POST.get('current_password'), user.password):
+            user.set_password(request.POST.get('new_password'))
+            messages.success(request, 'Password changed successfully')
+        else:
+            messages.error(request, "Password doesn't match!")
     return redirect(request.META.get('HTTP_REFERER'))
diff --git a/core/settings.py b/core/settings.py
@@ -14,6 +14,7 @@
 from pathlib        import Path
 from dotenv         import load_dotenv
 from distutils.util import strtobool 
+from django.contrib import messages
 
 load_dotenv()  # take environment variables from .env.
 
@@ -195,4 +196,12 @@
 }
 
 # risky
-SESSION_COOKIE_HTTPONLY=False
+SESSION_COOKIE_HTTPONLY=False
+
+
+MESSAGE_TAGS = {
+    messages.INFO: 'text-blue-800 border border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800',
+    messages.SUCCESS: 'text-green-800 border border-green-300 bg-green-50 dark:text-green-400 dark:border-green-800',
+    messages.WARNING: 'text-yellow-800 border border-yellow-300 bg-yellow-50 dark:text-yellow-300 dark:border-yellow-800',
+    messages.ERROR: 'text-red-800 border border-red-300 bg-red-50 dark:text-red-400 dark:border-red-800',
+}
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
@@ -12,6 +12,8 @@
 
 <body class="bg-gray-50 dark:bg-gray-800">
 
+  {% block messages %}{% endblock messages %}
+
   {% block navigation %}
     {% include "includes/navigation.html" %}
   {% endblock navigation %}
diff --git a/templates/pages/dashboard/profile.html b/templates/pages/dashboard/profile.html
@@ -1,6 +1,22 @@
 {% extends "layouts/base.html" %}
 {% load static %}
 
+{% block messages %}
+
+{% if messages %}
+    {% for message in messages %}
+        <div class="flex items-center p-4 text-sm rounded-lg dark:bg-gray-800 {{message.tags}}" role="alert">
+            <svg class="flex-shrink-0 inline w-4 h-4 mr-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+            </svg>
+            <span class="sr-only">Info</span>
+            <div>{{ message }}</div>
+        </div>
+    {% endfor %}
+{% endif %}
+
+
+{% endblock messages %}
 
 {% block content %}
 
@@ -117,41 +133,36 @@ <h3 class="mb-4 text-xl font-semibold dark:text-white">General information</h3>
         </div>
         <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
             <h3 class="mb-4 text-xl font-semibold dark:text-white">Password information</h3>
-            <form action="#">
+            <form method="post" action="{% url "change_password" %}">
+                {% csrf_token %}
+
                 <div class="grid grid-cols-6 gap-6">
                     <div class="col-span-6 sm:col-span-3">
-                        <label for="current-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current password</label>
-                        <input type="text" name="current-password" id="current-password" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="••••••••" required>
+                        <label for="current_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current password</label>
+                        <div class="relative w-full">
+                            <input type="password" id="current_password" name="current_password" class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-lg border-l-gray-100 border-l-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="Current password" required>
+                            <button type="button" id="show_current_password" class="absolute top-0 right-0 p-2.5 h-full text-sm font-thin text-white rounded-r-lg">
+                                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
+                                    <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                      <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
+                                      <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z"/>
+                                    </g>
+                                </svg>
+                            </button>
+                        </div>
                     </div>
                     <div class="col-span-6 sm:col-span-3">
-                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New password</label>
-                        <input data-popover-target="popover-password" data-popover-placement="bottom" type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="••••••••" required>
-                        <div data-popover id="popover-password" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
-                            <div class="p-3 space-y-2">
-                                <h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
-                                <div class="grid grid-cols-4 gap-2">
-                                    <div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
-                                    <div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
-                                    <div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
-                                    <div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
-                                </div>
-                                <p>It’s better to have:</p>
-                                <ul>
-                                    <li class="flex items-center mb-1">
-                                        <svg class="w-4 h-4 mr-2 text-green-400 dark:text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
-                                        Upper & lower case letters
-                                    </li>
-                                    <li class="flex items-center mb-1">
-                                        <svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                                        A symbol (#$&)
-                                    </li>
-                                    <li class="flex items-center">
-                                        <svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                                        A longer password (min. 12 chars.)
-                                    </li>
-                                </ul>
-                        </div>
-                        <div data-popper-arrow></div>
+                        <label for="new_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current password</label>
+                        <div class="relative w-full">
+                            <input type="password" id="new_password" name="new_password" class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-lg border-l-gray-100 border-l-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" placeholder="New password" required>
+                            <button type="button" id="show_new_password" class="absolute top-0 right-0 p-2.5 h-full text-sm font-thin text-white rounded-r-lg">
+                                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
+                                    <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                      <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
+                                      <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z"/>
+                                    </g>
+                                </svg>
+                            </button>
                         </div>
                     </div>
                     <div class="col-span-6 sm:col-full">
@@ -164,4 +175,55 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 cha
     
 </div>
 
-{% endblock content %}
+{% endblock content %}
+
+
+{% block extra_js %}
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const currentPasswordInput = document.getElementById('current_password');
+        const newPasswordInput = document.getElementById('new_password');
+        const showCurrentPasswordButton = document.getElementById('show_current_password');
+        const showNewPasswordButton = document.getElementById('show_new_password');
+
+        showCurrentPasswordButton.addEventListener('click', function () {
+            togglePasswordVisibility(currentPasswordInput, showCurrentPasswordButton);
+        });
+
+        showNewPasswordButton.addEventListener('click', function () {
+            togglePasswordVisibility(newPasswordInput, showNewPasswordButton);
+        });
+
+        function togglePasswordVisibility(input, button) {
+            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
+            input.setAttribute('type', type);
+
+            toggleEyeIcon(button, type);
+        }
+
+        function toggleEyeIcon(button, type) {
+            const eyeIcon = button.querySelector('svg');
+
+            if (type === 'password') {
+                eyeIcon.innerHTML = `
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
+                    <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                      <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
+                      <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z"/>
+                    </g>
+                </svg>
+                `;
+            } else {
+                eyeIcon.innerHTML = `
+                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1.933 10.909A4.357 4.357 0 0 1 1 9c0-1 4-6 9-6m7.6 3.8A5.068 5.068 0 0 1 19 9c0 1-3 6-9 6-.314 0-.62-.014-.918-.04M2 17 18 1m-5 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                </svg>
+                `;
+            }
+        }
+    });
+</script>
+
+
+{% endblock extra_js %}
