Add password reset page and update some styles

Django-Shop/static/password_reset/css/styles.css

@@ -0,0 +1,16 @@
+.btn-block {
+    display: block;
+}
+
+.reset-password-form p {
+    margin-bottom: 1rem;
+    font-size: 14px;
+}
+
+/* Style for the login illustration image */
+.reset-password-container img.img-fluid {
+    max-width: 80%; /* Ensure the image is responsive */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 10px; /* Optional: Add rounded corners */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional: Add a soft shadow */
+}

Django-Shop/templates/account/password_reset.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% load static %}
+{% load allauth account %}
+
+{% block title %}Password Reset{% endblock %}
+{% block description %}Reset your password{% endblock %}
+
+{% block extra_meta %}
+    <meta name="robots" content="noindex, nofollow">
+{% endblock %}
+
+{% block extra_styles %}
+    <link rel="stylesheet" href="{% static 'password_reset/css/styles.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="container-fluid reset-password-container">
+    <div class="row">
+        <!-- Left Side - Image -->
+        <div class="col-md-6 d-none d-md-flex align-items-center justify-content-center">
+            <img src="{% static 'password_reset/images/password_reset.jpg' %}" alt="Password Reset Illustration" class="img-fluid">
+        </div>
+
+        <!-- Right Side - Form -->
+        <div class="col-md-6 d-flex align-items-center justify-content-center">
+            <div class="reset-password-form-container">
+                <h1 class="mb-4">Password Reset</h1>
+                {% if user.is_authenticated %}
+                    <div class="alert alert-info">
+                        You are already logged in. If you need to reset your password, please log out first.
+                    </div>
+                {% else %}
+                    <p class="mb-4">
+                        Enter your email below to receive a password reset link.
+                    </p>
+                    <form method="post" action="{% url 'account_reset_password' %}" class="reset-password-form">
+                        {% csrf_token %}
+                        <div class="mb-3">
+                            <input type="email" name="email" class="form-control" placeholder="Email" autocomplete="email" maxlength="320" required="" id="id_email">
+                            <!-- Display errors for email field -->
+                            {% if form.email.errors %}
+                                <div class="text-danger">
+                                    {% for error in form.email.errors %}
+                                        <p>{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
+                        </div>
+
+                        <button type="submit" class="btn btn-primary btn-block w-100">Reset My Password</button>
+                    </form>
+                {% endif %}
+                <p class="mt-4 text-center">
+                    Still need help? Contact us.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}