From b0226abbff3ecdcf2baed3e711c5957d779c1cb6 Mon Sep 17 00:00:00 2001
From: laykusero04 <laykusero04@gmail.com>
Date: Mon, 1 Dec 2025 19:58:44 +0800
Subject: [PATCH] Add occupation field to EditUserForm and update profile
 template; implement EmailBackend for authentication

---
 accounts_app/backends.py                      | 27 +++++++
 accounts_app/forms/edit_user_form.py          |  2 +-
 .../templates/accounts_app/profile.html       | 72 ++++++++++++++++++-
 accounts_app/views/invite_user.py             | 35 +++++++--
 django_htmx_coding_challenge/settings.py      |  4 ++
 5 files changed, 132 insertions(+), 8 deletions(-)
 create mode 100644 accounts_app/backends.py

diff --git a/accounts_app/backends.py b/accounts_app/backends.py
new file mode 100644
index 0000000..7cf0fe5
--- /dev/null
+++ b/accounts_app/backends.py
@@ -0,0 +1,27 @@
+from django.contrib.auth.backends import ModelBackend
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+
+class EmailBackend(ModelBackend):
+    """
+    Custom authentication backend that authenticates users using email instead of username.
+    """
+
+    def authenticate(self, request, email=None, password=None, **kwargs):
+        if email is None or password is None:
+            return None
+
+        try:
+            user = User.objects.get(email=email)
+        except User.DoesNotExist:
+            # Run the default password hasher once to reduce timing attacks
+            User().set_password(password)
+            return None
+
+        if user.check_password(password) and self.user_can_authenticate(user):
+            return user
+
+        return None
+
diff --git a/accounts_app/forms/edit_user_form.py b/accounts_app/forms/edit_user_form.py
index 53fbcef..4469eac 100644
--- a/accounts_app/forms/edit_user_form.py
+++ b/accounts_app/forms/edit_user_form.py
@@ -6,4 +6,4 @@
 class EditUserForm(forms.ModelForm):
     class Meta:
         model = User
-        fields = ["first_name", "last_name"]
\ No newline at end of file
+        fields = ["first_name", "last_name", "occupation"]
\ No newline at end of file
diff --git a/accounts_app/templates/accounts_app/profile.html b/accounts_app/templates/accounts_app/profile.html
index 31b5137..ea59233 100644
--- a/accounts_app/templates/accounts_app/profile.html
+++ b/accounts_app/templates/accounts_app/profile.html
@@ -10,9 +10,10 @@ <h1 id="edit_profile_header" class="mt-10 text-xl">Welcome back, {{ user.full_na
                 id="edit_profile_form"
                 hx-post="{% url 'home' %}"
                 hx-trigger="submit"
-                hx-swap="multi:#edit_profile_form:outerHTML,h1:outerHTML"
+                hx-swap="multi:#edit_profile_form:outerHTML,#edit_profile_header:outerHTML"
                 hx-ext="multi"
             >
+                {% csrf_token %}
                 <div class="mt-3 max-w">
                     <label for="input-label" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
                     <input
@@ -45,6 +46,16 @@ <h1 id="edit_profile_header" class="mt-10 text-xl">Welcome back, {{ user.full_na
                         required
                     >
                 </div>
+                <div class="mt-3 max-w">
+                    <label for="occupation" class="block text-sm font-medium mb-2 dark:text-white">Occupation</label>
+                    <input
+                        type="text"
+                        id="occupation"
+                        name="occupation"
+                        class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-primary focus:ring-primary-500 disabled:opacity-50 disabled:pointer-events-none"
+                        value="{{ form.occupation.value|default:'' }}"
+                    >
+                </div>
                 <div class="flex justify-center">
                     <button
                         type="submit"
@@ -55,7 +66,64 @@ <h1 id="edit_profile_header" class="mt-10 text-xl">Welcome back, {{ user.full_na
                 </div>
             </form>
         </div>
+        <!-- Invite User Link -->
+        <button type="button" class="mt-6 py-2 px-4 text-gray-700 hover:text-primary" style="text-decoration: underline;" onclick="document.getElementById('invite-user-modal').classList.remove('hidden')">
+            Invite User
+        </button>
+    </div>
+</div>
+
+<!-- Invite User Modal -->
+<div id="invite-user-modal" class="hidden fixed inset-0 z-[80] overflow-y-auto" role="dialog" aria-modal="true">
+    <!-- Backdrop -->
+    <div class="fixed inset-0" style="background-color: rgba(0, 0, 0, 0.5);" onclick="document.getElementById('invite-user-modal').classList.add('hidden')"></div>
+    
+    <!-- Modal Content -->
+    <div class="fixed inset-0 flex items-center justify-center p-4">
+        <div class="relative bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div class="flex justify-between items-center py-3 px-4 border-b">
+                <h3 class="font-bold text-gray-800">
+                    Invite User
+                </h3>
+                <button type="button" class="size-8 inline-flex justify-center items-center rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200" onclick="document.getElementById('invite-user-modal').classList.add('hidden')">
+                    <span class="sr-only">Close</span>
+                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M18 6 6 18"></path>
+                        <path d="m6 6 12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <div class="p-4">
+                <p class="text-gray-600 mb-4">
+                    Enter the email address of the user you would like to invite.
+                </p>
+                <form id="invite-user-form" hx-post="{% url 'invite_user' %}" hx-trigger="submit" hx-swap="innerHTML" hx-target="#invite-form-content">
+                    {% csrf_token %}
+                    <div id="invite-form-content">
+                        <div class="mb-4">
+                            <label for="invite-email" class="block text-sm font-medium mb-2 text-gray-700">Email</label>
+                            <input
+                                type="email"
+                                id="invite-email"
+                                name="email"
+                                class="py-3 px-4 block w-full border border-gray-300 rounded-lg text-sm focus:border-primary focus:ring-primary"
+                                placeholder="test@test.com"
+                                required
+                            >
+                        </div>
+                    </div>
+                    <div class="flex justify-end items-center gap-x-2 pt-3 border-t">
+                        <button type="button" class="py-2 px-4 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50" onclick="document.getElementById('invite-user-modal').classList.add('hidden')">
+                            Close
+                        </button>
+                        <button type="submit" class="py-2 px-4 text-sm font-medium rounded-lg border border-transparent bg-primary text-white hover:bg-primary-700">
+                            Invite User
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
-<div>
+</div>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/accounts_app/views/invite_user.py b/accounts_app/views/invite_user.py
index 40eb85f..332a6a5 100644
--- a/accounts_app/views/invite_user.py
+++ b/accounts_app/views/invite_user.py
@@ -1,4 +1,5 @@
 from django.shortcuts import render
+from django.http import HttpResponse
 from django.views import View
 from django.contrib.auth.mixins import LoginRequiredMixin
 
@@ -16,14 +17,38 @@ def post(self, request, *args, **kwargs):
         form = InviteUserForm(request.POST)
         
         if form.is_valid():
-            # We could further improve this here to first check if an invitation for this email already exists and is not expired
-            UserInvitation.objects.filter(email=form.cleaned_data["email"]).delete()
+            email = form.cleaned_data["email"]
+            
+            # Delete any existing invitation for this email
+            UserInvitation.objects.filter(email=email).delete()
 
-            invitation = UserInvitation(email=form.cleaned_data["email"], invited_by=request.user)
+            # Create new invitation
+            invitation = UserInvitation(email=email, invited_by=request.user)
             invitation.save()
 
+            # Send invitation email
             invitation.send_invitation_email()
 
-            return render(request, "accounts_app/profile.html", {"invite_user_form": form, "invited": True})
+            # Return success message for HTMX swap
+            return HttpResponse(
+                '<div class="p-4 text-center">'
+                '<div class="text-green-600 mb-2">'
+                '<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">'
+                '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>'
+                '</svg>'
+                '</div>'
+                f'<p class="text-gray-800 font-medium">Invitation sent to {email}!</p>'
+                '<p class="text-gray-500 text-sm mt-1">The user will receive an email with instructions to join.</p>'
+                '</div>'
+            )
         else:
-            return render(request, "accounts_app/profile.html", {"invite_user_form": form})
\ No newline at end of file
+            # Return form with errors
+            error_html = '<div class="mb-4">'
+            error_html += '<label for="invite-email" class="block text-sm font-medium mb-2 dark:text-white">Email</label>'
+            error_html += '<input type="email" id="invite-email" name="email" '
+            error_html += 'class="py-3 px-4 block w-full border-red-500 rounded-lg text-sm focus:border-primary focus:ring-primary" '
+            error_html += f'value="{form.data.get("email", "")}" required>'
+            for error in form.errors.get("email", []):
+                error_html += f'<p class="text-red-500 text-sm mt-1">{error}</p>'
+            error_html += '</div>'
+            return HttpResponse(error_html)
\ No newline at end of file
diff --git a/django_htmx_coding_challenge/settings.py b/django_htmx_coding_challenge/settings.py
index fd0af68..4636228 100644
--- a/django_htmx_coding_challenge/settings.py
+++ b/django_htmx_coding_challenge/settings.py
@@ -113,6 +113,10 @@
 ]
 AUTH_USER_MODEL = 'accounts_app.User'
 
+AUTHENTICATION_BACKENDS = [
+    'accounts_app.backends.EmailBackend',
+]
+
 LOGIN_URL = '/sign-in'
 LOGOUT_REDIRECT_URL = '/sign-in'