editing login screen

core/forms.py

@@ -3,6 +3,13 @@ from django.contrib.auth.models import User
 from django.utils.translation import gettext_lazy as _
 from django.utils.translation import get_language
 from .models import Profile, Parcel, Country, Governate, City, DriverRating, DriverReport, ParcelType
+from django.contrib.auth.forms import AuthenticationForm
+
+class LoginForm(AuthenticationForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        for field in self.fields.values():
+            field.widget.attrs.update({'class': 'form-control'})
 
 class ContactForm(forms.Form):
     name = forms.CharField(max_length=100, label=_("Name"), widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': _('Your Name')}))

core/templates/core/login.html

@@ -22,17 +22,40 @@
                             <p class="text-muted small">{% trans "Please login with your username and password" %}</p>
                         </div>
 
+                        {% if form.non_field_errors %}
+                            <div class="alert alert-danger shadow-sm border-0 mb-4 py-2 small">
+                                <i class="bi bi-exclamation-circle-fill me-2"></i>
+                                {% for error in form.non_field_errors %}
+                                    {{ error }}
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+
                         <form method="post">
                             {% csrf_token %}
-                            {% for field in form %}
+                            
-                                <div class="mb-3">
+                            <!-- Username Field -->
-                                    <label class="form-label fw-medium">{{ field.label }}</label>
+                            <div class="mb-3">
-                                    {{ field }}
+                                <label for="{{ form.username.id_for_label }}" class="form-label fw-medium">{{ form.username.label }}</label>
-                                    {% if field.errors %}
+                                {{ form.username }}
-                                        <div class="text-danger small mt-1">{{ field.errors }}</div>
+                                {% if form.username.errors %}
-                                    {% endif %}
+                                    <div class="text-danger small mt-1">{{ form.username.errors }}</div>
+                                {% endif %}
+                            </div>
+
+                            <!-- Password Field -->
+                            <div class="mb-3">
+                                <label for="{{ form.password.id_for_label }}" class="form-label fw-medium">{{ form.password.label }}</label>
+                                <div class="input-group">
+                                    {{ form.password }}
+                                    <button class="btn btn-outline-secondary border-start-0" type="button" id="togglePassword" style="border-radius: 0 8px 8px 0; border-color: #dee2e6;">
+                                        <i class="bi bi-eye" id="toggleIcon"></i>
+                                    </button>
                                 </div>
-                            {% endfor %}
+                                {% if form.password.errors %}
+                                    <div class="text-danger small mt-1">{{ form.password.errors }}</div>
+                                {% endif %}
+                            </div>
                             
                             <div class="d-flex justify-content-between align-items-center mb-4">
                                 <div class="form-check">
@@ -67,6 +90,12 @@
     .form-control:focus {
         border-color: var(--accent-orange);
         box-shadow: 0 0 0 0.25rem rgba(255, 126, 21, 0.15);
+        z-index: 3;
+    }
+    /* Fix for input-group with rounded corners */
+    .input-group > .form-control:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
     .btn-masarx-primary {
         background-color: var(--accent-orange);
@@ -86,5 +115,33 @@
     .hover-orange:hover {
         color: var(--accent-orange) !important;
     }
+    /* RTL adjustments for password toggle */
+    [dir="rtl"] #togglePassword {
+        border-radius: 8px 0 0 8px !important;
+        border-right-width: 0 !important;
+        border-left-width: 1px !important;
+    }
+    [dir="rtl"] .input-group > .form-control:not(:last-child) {
+        border-radius: 0 8px 8px 0 !important;
+    }
 </style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const togglePassword = document.querySelector('#togglePassword');
+        const passwordField = document.querySelector('#{{ form.password.id_for_label }}');
+        const toggleIcon = document.querySelector('#toggleIcon');
+
+        if (togglePassword && passwordField) {
+            togglePassword.addEventListener('click', function (e) {
+                // toggle the type attribute
+                const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
+                passwordField.setAttribute('type', type);
+                // toggle the eye / eye slash icon
+                toggleIcon.classList.toggle('bi-eye');
+                toggleIcon.classList.toggle('bi-eye-slash');
+            });
+        }
+    });
+</script>
 {% endblock %}

core/views.py

@@ -5,7 +5,7 @@ from django.contrib.auth.forms import AuthenticationForm
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
 from .models import Parcel, Profile, Country, Governate, City, OTPVerification, PlatformProfile, Testimonial, DriverRating, DriverRejection
-from .forms import UserRegistrationForm, ParcelForm, ContactForm, UserProfileForm, DriverRatingForm, ShipperRegistrationForm, DriverRegistrationForm, DriverReportForm
+from .forms import LoginForm, UserRegistrationForm, ParcelForm, ContactForm, UserProfileForm, DriverRatingForm, ShipperRegistrationForm, DriverRegistrationForm, DriverReportForm
 from django.utils.translation import gettext_lazy as _
 from django.utils.translation import get_language
 
@@ -1110,6 +1110,7 @@ def cancel_parcel(request, parcel_id):
         
     return redirect('dashboard')
 class CustomLoginView(LoginView):
+    authentication_form = LoginForm
     template_name = 'core/login.html'
 
     def form_valid(self, form):