Log in in a modal

apps/registration/templates/registration/login.html

@@ -1,25 +0,0 @@
-{% extends "base.html" %}
-{% comment %}
-SPDX-License-Identifier: GPL-2.0-or-later
-{% endcomment %}
-{% load i18n crispy_forms_filters %}
-
-{% block title %}{% trans "Log in" %}{% endblock %}
-{% block contenttitle %}<h1>{% trans "Log in" %}</h1>{% endblock %}
-
-{% block content %}
-    {% if user.is_authenticated %}
-        <p class="errornote">
-            {% blocktrans trimmed %}
-                You are authenticated as {{ user }}, but are not authorized to
-                access this page. Would you like to login to a different account?
-            {% endblocktrans %}
-        </p>
-    {% endif %}
-    <form method="post" id="login-form">
-        {% csrf_token %}
-        {{ form | crispy }}
-        <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 %}

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>