First Commit

accounts_app/templates/accounts_app/profile.html

@@ -2,17 +2,19 @@
 {% load i18n %}
 
 {% block content %}
-<div class="container m-auto">
+<div class="container m-auto" id="parent">
     <div class="w-full flex flex-col justify-center items-center">
         <h1 id="edit_profile_header" class="mt-10 text-xl">Welcome back, {{ user.full_name }}!</h1>
         <div class="mt-3 flex flex-col w-2/5 bg-white border border-gray-200 shadow-sm rounded-xl p-4 md:p-5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
             <form
-                id="edit_profile_form"
+                id="profile-page"
                 hx-post="{% url 'home' %}"
                 hx-trigger="submit"
-                hx-swap="multi:#edit_profile_form:outerHTML,h1:outerHTML"
-                hx-ext="multi"
+                hx-swap="multi:#edit_profile_header:innerHTML,#username:innerHTML" 
             >
+            <!--Error fixed here, The error was that #edit_profile_form doesn't exist and you are using outerHTML instead of innerHTML for dynamic rendering-->
+
+            {% csrf_token %} <!-- Should never forget to put csrf_token when dealing with django's form -->
                 <div class="mt-3 max-w">
                     <label for="input-label" class="block text-sm font-medium mb-2 dark:text-white">Email</label>
                     <input
@@ -55,7 +57,59 @@ <h1 id="edit_profile_header" class="mt-10 text-xl">Welcome back, {{ user.full_na
                 </div>
             </form>
         </div>
+        <!-- Modal Trigger -->
+        <button id="openModal" class="mt-10">Invite User</button>
+
+    </div>
+
+    <!-- Custom Modal -->
+    <div id="modal" class="modal fixed inset-0 border-gray-800 bg-opacity-50 justify-center items-center ">
+        <div class="bg-white rounded-lg p-6 mx-4 md:mx-0 md:max-w-md border-gray-200">
+            <h2 class="text-lg font-semibold mb-4">Invite User</h2>
+            <form method="post" action="{% url 'invite_user' %}">
+                {% csrf_token %}
+                <h2 class="text-sm font-medium mb-2">Enter the email address of the user you would like to invite</h2>
+                <div class="mb-4">
+                    <input type="email" id="email" name="email" value="{{ inviteForm.email.value }}" 
+                           class="mt-1 block w-full border-2 border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500" 
+                           required>
+                </div>
+                <div class="flex justify-end">
+                    <button type="button" id="closeModal" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
+                    <button type="submit" id="submitBtn" class="ml-2 px-4 py-2 bg-blue-500 text-black rounded hover:bg-blue-600">Submit</button>
+                </div>
+            </form>            
+        </div>
     </div>
+
 <div>
+    <!--External script-->
+    <script>
+
+        const modal = document.getElementById('modal');
+        const openModalBtn = document.getElementById('openModal');
+        const closeModalBtn = document.getElementById('closeModal');
+        const submitBtn = document.getElementById('submitBtn');
+        const logout = document.getElementById('logout')
+
+        openModalBtn.addEventListener('click', () => {
+            modal.classList.add('active');
+
+        });
+
+        closeModalBtn.addEventListener('click', () => {
+            modal.classList.remove('active');
+        });
+
+        submitBtn.addEventListener('click', () => {
+            location.reload();
+        });
+
+        logout.addEventListener('click', () => {
+            location.reload();
+        });
+    </script>
+
+
+{% endblock content %}
 
-{% endblock content %}

accounts_app/views/invite_user.py

@@ -1,20 +1,21 @@
 from django.shortcuts import render
 from django.views import View
 from django.contrib.auth.mixins import LoginRequiredMixin
-
 from accounts_app.forms import InviteUserForm
 from accounts_app.models import UserInvitation
 
 
 class InviteUserView(LoginRequiredMixin, View):
     def get(self, request, *args, **kwargs):
-        # This would be the view where the invited user can join.
-        # Here we have to check if the provided token points to an invitation which is valid and not expired.
-        ...
+        # Instantiate the form for the GET request 
+        form = InviteUserForm()
+
+        # Render the template and pass the form to the context
+        return render(request, "accounts_app/profile.html", {"inviteForm": form})
 
     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()
@@ -24,6 +25,6 @@ def post(self, request, *args, **kwargs):
 
             invitation.send_invitation_email()
 
-            return render(request, "accounts_app/profile.html", {"invite_user_form": form, "invited": True})
+            return render(request, "accounts_app/profile.html", {"inviteForm": form, "invited": True})
         else:
-            return render(request, "accounts_app/profile.html", {"invite_user_form": form})
+            return render(request, "accounts_app/profile.html", {"inviteForm": form})

accounts_app/views/profile.py

@@ -1,4 +1,4 @@
-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.views import View
 from django.contrib.auth.mixins import LoginRequiredMixin
 
@@ -8,12 +8,11 @@
 class ProfileView(LoginRequiredMixin, View):
     def get(self, request, *args, **kwargs):
         return render(request, "accounts_app/profile.html", {"form": EditUserForm(instance=request.user), "invite_user_form": InviteUserForm() })
-
     def post(self, request, *args, **kwargs):
         form = EditUserForm(request.POST, instance=request.user)
         invite_user_form = InviteUserForm()
-
         if form.is_valid():
             form.save()
-
-        return render(request, "accounts_app/profile.html", {"form": form, "invite_user_form": invite_user_form})
+            return redirect('home')
+        return render(request, "accounts_app/profile.html", {"form": form, "invite_user_form": invite_user_form})
+

accounts_app/views/sign_in.py

@@ -3,18 +3,17 @@
 from django.contrib import messages
 from django.contrib.auth import login, authenticate
 from django.utils.translation import gettext as _
-
-
 from accounts_app.forms import SignInForm
-
+from accounts_app.forms import InviteUserForm
 
 def sign_in(request: HttpRequest) -> HttpResponse:
     if request.method == "GET":
         if request.user.is_authenticated:
             return redirect("home")
 
         form = SignInForm()
-        return render(request, "accounts_app/sign_in.html", {"form": form})
+        inviteForm = InviteUserForm() #I've added this form 
+        return render(request, "accounts_app/sign_in.html", {"form": form, "inviteForm":inviteForm})
 
     elif request.method == "POST":
         form = SignInForm(request.POST)

staticfiles/src/styles.css

@@ -1657,3 +1657,7 @@ img.dragging {
     padding: 1.25rem;
   }
 }
+
+/* Modal form */
+#modal { display: none; }
+#modal.active { display: flex; }

templates/base.html

@@ -22,13 +22,13 @@
         <script src="{% static 'src/hyperscript.js' %}"></script>
         <script src="{% static 'src/preline_patches.js' %}"></script>
     </head>
-    <body class="bg-gray-50 dark:bg-slate-900"
-          hx-ext="multi-swap">
+    <body class="bg-gray-50 dark:bg-slate-900" 
+          hx-ext="multi-swap" hx-boost="true">
         <div class="w-full mx-auto">
-            {% include "navbar/navbar.html" %}
-            {% block content %}
-                This is an empty page and should never be seen.
-            {% endblock content %}
+                {% include "navbar/navbar.html" %}
+                {% block content %}
+                    This is an empty page and should never be seen.
+                {% endblock content %}
         </div>
         <script>
             // noinspection JSUnresolvedReference

templates/navbar/account.html

@@ -3,7 +3,7 @@
         <button type="button"
                 id="account-button"
                 class="sm:py-3 flex items-center w-full text-gray-600 hover:text-gray-400 font-medium dark:text-gray-400 dark:hover:text-gray-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
-            <span class="flex gap-2 items-center text-white">
+            <span id="username" class="flex gap-2 items-center text-white">
                 {% include 'navbar/user.svg' %}
                 {% if request.user.first_name and request.user.last_name %}
                     {{ request.user.full_name }}
@@ -16,9 +16,12 @@
             <div class="flex flex-col">
                 <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                    href="{% url 'home' %}">Manage Profile</a>
-                <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                <a id="logout" class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                    href="{% url 'sign_out' %}">Sign Out</a>
             </div>
         </div>
     </div>
+
+
+
 {% endif %}

templates/navbar/navbar.html

@@ -3,4 +3,5 @@
         <div class="flex justify-center items-center">{% include "navbar/logo.html" %}</div>
         <div class="flex grow justify-end">{% include "navbar/account.html" %}</div>
     </div>
+
 </header>