From 1a567257954382a13348502ceb574955fbfb62a2 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Tue, 22 Sep 2020 20:58:18 +0200
Subject: [PATCH] Log in in a modal

---
 .../participation/create_team_modal.html      |  2 +-
 .../participation/join_team_modal.html        |  2 +-
 .../templates/registration/login_modal.html   | 21 +++++++++++++++++++
 templates/base.html                           | 10 ++++++++-
 .../registration/login.html                   |  8 ++++---
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 apps/registration/templates/registration/login_modal.html
 rename {apps/registration/templates => templates}/registration/login.html (75%)

diff --git a/apps/participation/templates/participation/create_team_modal.html b/apps/participation/templates/participation/create_team_modal.html
index 3e0d738..242c645 100644
--- a/apps/participation/templates/participation/create_team_modal.html
+++ b/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">
diff --git a/apps/participation/templates/participation/join_team_modal.html b/apps/participation/templates/participation/join_team_modal.html
index bc5c5d6..9b9deee 100644
--- a/apps/participation/templates/participation/join_team_modal.html
+++ b/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">
diff --git a/apps/registration/templates/registration/login_modal.html b/apps/registration/templates/registration/login_modal.html
new file mode 100644
index 0000000..6601779
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 23dff3d..b08b694 100644
--- a/templates/base.html
+++ b/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())
diff --git a/apps/registration/templates/registration/login.html b/templates/registration/login.html
similarity index 75%
rename from apps/registration/templates/registration/login.html
rename to templates/registration/login.html
index 64c5c26..db50a06 100644
--- a/apps/registration/templates/registration/login.html
+++ b/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 %}
-        {{ form | crispy }}
+        <div id="form-content">
+            {% 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 %}