feat(templates/allauth): style allauth elements

This commit is contained in:
2026-03-10 14:19:20 +01:00
parent 8fb52132bb
commit 12200ad663
29 changed files with 414 additions and 0 deletions

View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
{% load i18n tailwind_tags %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="generator" content="Hugo 0.118.2">
<title>
{% block head_title %}{% endblock %}
</title>
{% tailwind_css %}
{% block extra_head %}
{% endblock extra_head %}
</head>
<body class="min-h-screen flex flex-shrink-0 flex-col">
<a class="sr-only focus:not-sr-only" href="#content">{% translate "Skip to main content" %}</a>
{% include "header.html" %}
{% block body %}
{% block content %}
{% endblock content %}
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</body>
</html>

View File

@@ -0,0 +1,26 @@
{% extends "allauth/layouts/base.html" %}
{% load i18n allauth %}
{% block body %}
<div class="flex flex-grow flex-col justify-center bg-slate-100">
<div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex justify-center">
<div class="w-full max-w-lg">
{% if messages %}
{% for message in messages %}
{% element alert level=message.tags %}
{% slot message %}
{{ message }}
{% endslot %}
{% endelement %}
{% endfor %}
{% endif %}
<div class="bg-white shadow rounded-4">
<div id="content" class="p-5">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,68 @@
{% extends "allauth/layouts/base.html" %}
{% load allauth %}
{% block body %}
<div class="flex flex-grow flex-col md:flex-row">
<aside class="bg-slate-900 md:w-72">
<ul class="flex flex-col gap-1 p-3">
{% url 'account_email' as email_url_ %}
{% if email_url_ %}
<li>
<a class="{% block nav_class_email %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ email_url_ }}">Change Email</a>
</li>
{% endif %}
{% url 'account_change_password' as change_password_url_ %}
{% if change_password_url_ %}
<li>
<a class="{% block nav_class_password %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ change_password_url_ }}">Change Password</a>
</li>
{% endif %}
{% url 'account_change_phone' as phone_url_ %}
{% if phone_url_ %}
<li>
<a class="{% block nav_class_phone %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ phone_url_ }}">Change Phone</a>
</li>
{% endif %}
{% url 'socialaccount_connections' as connections_url_ %}
{% if connections_url_ %}
<li>
<a class="{% block nav_class_socialaccount %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ connections_url_ }}">Third-Party Accounts</a>
</li>
{% endif %}
{% url 'mfa_index' as mfa_index_url_ %}
{% if mfa_index_url_ %}
<li>
<a class="{% block nav_class_mfa %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ mfa_index_url_ }}">Two-Factor Authentication</a>
</li>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url_ %}
{% if usersessions_list_url_ %}
<li>
<a class="{% block nav_class_usersessions %}block rounded-md px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800{% endblock %}"
href="{{ usersessions_list_url_ }}">Sessions</a>
</li>
{% endif %}
</ul>
</aside>
<main class="flex-1">
<div id="content" class="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8">
{% if messages %}
<div class="pt-4">
{% for message in messages %}
{% element alert level=message.tags %}
{% slot message %}
{{ message }}
{% endslot %}
{% endelement %}
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
</main>
</div>
{% endblock %}