How to apply django-two-factor-auth in custom login page?

Question

I am using Django Two-Factor Authentication for secure my admin login. I enforced OTP Required login for my every admin. Now I want to implement this for my normal users. If any user activated two factor on his account then every time he will be redirected to otp page like admin users if two factor not enabled then he will redirect to my account page. here is my login view:

def login_view(request):
     username = None
     password = None
     if request.user.is_authenticated:
         return redirect('blog:my-account')
     else:
         if request.method == 'POST':
            username = request.POST.get('username')
            password =request.POST.get('password')

            user = authenticate(request, username=username, password=password)

            if user is not None:
                login(request, user)
                messages.add_message(request, messages.INFO,'Login Sucessfull')
                return redirect('members:user-profile-private')


**urls.py**

 path('login/',views.login_view, name='login'),

I also want to know how to get back Django default admin login page. After implement django-two-factor-auth my admin login page look like this

is there any way to redesign custom Two-Factor Authentication login html page ???

Answer 1

@Patrick 's answer worked for me to get bootstrap into the two-factor pages and keep the admin site urls using the base django admin template. However, I wanted to use the django admin default styling on the 2FA pages too and I had some custom styling in the base django admin template, _base_site.html that was getting clobbered by the bootstrap stylesheets.

This was my solution:

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrahead %}
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <script defer src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script defer src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{% endblock %}

CSS stylesheets are ordered in precedence, most important last. So here I am adding the django admin base.css again explicitly as the last stylesheet so it will take precedence over the bootstrap styling.

I also needed to update my custom styling in _base_site.html to take explicit precedence with the !important tag:

{% block extrastyle %}
<style>
  :root {
  --primary: #204724 !important ;
  --secondary: #164713 !important ;
}

Answer 2

Just to show how I have fixed it in the end.

I wanted to use the default django styles as much as possible, to make the users (in my case admins only) look-and-feel consistent.

Therefore, in my main template folder (see: https://docs.djangoproject.com/en/3.2/topics/templates/) I added the following folder/file: [templates]/two_factor/_base.html

That file has the following content:

{% extends "admin/base_site.html" %}

{% block extrahead %}
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <script defer src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script defer src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% endblock %}

{% block content %}{% endblock %}

This basically just refers the template back to use the default Django Admin template. However, since the 2FA templates rely on Bootstrap 4 (which is a really stupid design decision if you ask me), I had to include the relevant headers.