Skip to content

Added some guidance on how to build custom templates to implementing.rst #696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Magnie wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added some guidance on how to build custom templates to implementing.rst #696

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3e0b83
Added some guidance on how to build custom templates to implementing.rst
Magnie Jan 19, 2024
c119638
Apply suggestions from code review
Magnie Feb 6, 2024
258052b
Update implementing.rst to fix formatting from applied suggestions
Magnie Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions docs/implementing.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,36 @@ Users who only have a smartphone will have difficulty scanning the QR code
during setup. You can directly show the secret key within the QR code in text
form during setup by providing your own ``two_factor/core/setup.html`` template
and using the ``secret_key`` context variable.

Custom Templates
--------------------------------
To create a custom template, add a template called ``two_factor/_base.html``.
As a bare minimum, its contents should contain a ``content`` block to load the
login forms into.

Some plugins, such as WebAuthn, have additional JavaScript that is necessary to
work properly. These are dynamically loaded in via the ``extra_media`` block
which should be located in the ``<head>`` tag::

<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
{% block extra_media %}{% endblock %}
</head>
<body>
{% block content_wrapper %}
<div class="container">
{% block content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>

You can also use an existing template by extending it::

{% extends "your_app_name/base.html" %}