Improve phone number input style on signup form and fix bugs in users…

… models.

Django-Shop/static/signup/js/script.js

@@ -0,0 +1,30 @@
+// This script modifies the display of the phone prefix dropdown (id_phone_0) to show only the country code after selection.
+// The full country name and code are restored when the dropdown is clicked for a better user experience.
+document.addEventListener("DOMContentLoaded", function() {
+    const phoneSelect = document.getElementById("id_phone_0");
+
+    // Function to update the display after selection
+    function updateDisplay() {
+        const selectedOption = phoneSelect.options[phoneSelect.selectedIndex];
+        const countryCode = selectedOption.text.match(/\+[\d]+/); // Extracts the country code
+        if (countryCode) {
+            phoneSelect.style.width = "auto"; // Allow the width to adjust to the content
+            selectedOption.textContent = countryCode[0]; // Show only the country code
+        }
+    }
+
+    // Initial update
+    updateDisplay();
+
+    // Restore full text when the dropdown is clicked
+    phoneSelect.addEventListener("click", function() {
+        Array.from(phoneSelect.options).forEach(option => {
+            option.textContent = option.getAttribute("data-full-text") || option.textContent;
+        });
+    });
+
+    // Update the display after selection
+    phoneSelect.addEventListener("change", function() {
+        updateDisplay();
+    });
+});

Django-Shop/users/forms.py

@@ -1,11 +1,19 @@
-from django import forms
+from django.core.exceptions import ValidationError
 from allauth.account.forms import SignupForm
 from phonenumber_field.formfields import SplitPhoneNumberField
+from .models import CustomUser
 
 
 class CustomSignupForm(SignupForm):
     phone = SplitPhoneNumberField()
 
+    # Check if a user with the same phone number already exists
+    def clean_phone(self):
+        phone = self.cleaned_data.get('phone')
+        if CustomUser.objects.filter(phone=phone).exists():
+            raise ValidationError("A user with this phone number already exists.")
+        return phone
+
     def save(self, request):
         user = super(CustomSignupForm, self).save(request)
         user.phone = self.cleaned_data['phone']

Django-Shop/users/migrations/0001_initial.py

@@ -1,11 +1,10 @@
-# Generated by Django 5.1 on 2024-08-27 18:50
+# Generated by Django 5.1 on 2024-08-31 07:12
 
 import django.core.validators
 import django.utils.timezone
 import phonenumber_field.modelfields
-from django.db import migrations, models
-
 import users.models
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
@@ -87,7 +86,7 @@ class Migration(migrations.Migration):
                 (
                     "phone",
                     phonenumber_field.modelfields.PhoneNumberField(
-                        max_length=128, region=None
+                        max_length=128, region=None, unique=True
                     ),
                 ),
                 (

Django-Shop/users/models.py

@@ -19,11 +19,12 @@ class CustomUser(AbstractUser):
     email = models.EmailField(("email address"), unique=True)
     USERNAME_FIELD = "email"
 
-    # will be required when creating a superuser.
-    REQUIRED_FIELDS = ["first_name", "last_name"]
+    # will be required when creating a superuser and must contain all required fields on your user model.
+    # https://docs.djangoproject.com/en/5.1/topics/auth/customizing/#django.contrib.auth.models.CustomUser.REQUIRED_FIELDS
+    REQUIRED_FIELDS = ["first_name", "last_name", "phone",]
 
     objects = CustomUserManager()
-    phone = PhoneNumberField()
+    phone = PhoneNumberField(unique=True)
 
     # TODO: Process image before saving
     profile_picture = models.ImageField(