Log in in a modal

apps/participation/templates/participation/create_team_modal.html

@@ -1,6 +1,6 @@
 {% load crispy_forms_filters i18n %}
 
-<div id="createTeamModal" class="modal" tabindex="-1" role="dialog">
+<div id="createTeamModal" class="modal fade" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <form method="post" action="{% url "participation:create_team" %}">
             <div class="modal-content">

apps/participation/templates/participation/join_team_modal.html

@@ -1,6 +1,6 @@
 {% load crispy_forms_filters i18n %}
 
-<div id="joinTeamModal" class="modal" tabindex="-1" role="dialog">
+<div id="joinTeamModal" class="modal fade" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <form method="post" action="{% url "participation:join_team" %}">
             <div class="modal-content">

apps/registration/templates/registration/login_modal.html

@@ -0,0 +1,21 @@
+{% load crispy_forms_filters i18n %}
+
+<div id="loginModal" class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <form method="post" action="{% url "login" %}">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{% trans "Log in" %}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">{% trans "Log in" %}</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Close" %}</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

templates/base.html

@@ -102,7 +102,9 @@
                         <a class="nav-link" href="{% url "registration:signup" %}"><i class="fas fa-user-plus"></i> {% trans "Register" %}</a>
                     </li>
                     <li class="nav-item active">
-                        <a class="nav-link" href="{% url "login" %}"><i class="fas fa-sign-in-alt"></i> {% trans "Log in" %}</a>
+                        <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">
+                            <i class="fas fa-sign-in-alt"></i> {% trans "Log in" %}
+                        </a>
                     </li>
                 {% else %}
                     <li class="nav-item active">
@@ -159,6 +161,7 @@
     </div>
 </footer>
 
+{% include "registration/login_modal.html" %}
 {% if user.is_authenticated %}
     {% include "participation/create_team_modal.html" %}
     {% include "participation/join_team_modal.html" %}
@@ -168,6 +171,11 @@
     CSRF_TOKEN = "{{ csrf_token }}";
 
     $(document).ready(function () {
+        $('a[data-target="#loginModal"]').click(function() {
+            let modalBody = $("#loginModal div.modal-body");
+            if (!modalBody.html().trim())
+                modalBody.load("{% url "login" %} #form-content")
+        });
         $('a[data-target="#createTeamModal"]').click(function() {
             let modalBody = $("#createTeamModal div.modal-body");
             if (!modalBody.html().trim())

templates/registration/login.html

@@ -17,9 +17,11 @@ SPDX-License-Identifier: GPL-2.0-or-later
         </p>
     {% endif %}
     <form method="post" id="login-form">
-        {% csrf_token %}
+        <div id="form-content">
-        {{ form | crispy }}
+            {% csrf_token %}
+            {{ form | crispy }}
+            <a href="{% url 'password_reset' %}" class="badge badge-light">{% trans 'Forgotten your password or username?' %}</a>
+        </div>
         <input type="submit" value="{% trans 'Log in' %}" class="btn btn-primary">
-        <a href="{% url 'password_reset' %}" class="badge badge-light">{% trans 'Forgotten your password or username?' %}</a>
     </form>
 {% endblock %}