Otherlogins block in login.html

[afsangujarati93]

Adding a block in the login template so the users can extend the login template and add the logic to add login buttons for other providers e.g. Google, Microsoft, Auth0, etc.

This is required because if the user tries to extend the login template and add the login option as follows

{% extends 'admin/login.html' %}

{% load i18n static socialaccount %}

{% block base %}
{{ block.super }}
<div class="oauth-buttons flex justify-center">
    {% if USE_GOOGLE_ALLAUTH_FOR_ADMIN %}
    <div class="mt-1 w-full sm:w-96">
        <form method="post" action="{% url 'google_login' %}">
            {% csrf_token %}
            <div class="submit-row">
                <button type="submit" class="border flex flex-row font-semibold group items-center justify-center py-2 rounded-md text-sm w-full">
                    <i class="material-symbols-outlined mr-2 relative text-lg transition-all fab fa-google"></i>
                    Sign in with Google
                </button>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}

the button is pushed towards the bottom of the page and there's no clean way to put it right below the current login button. See the screenshot below

[afsangujarati93]

@lukasvinclav @HenrichHanusovsky @gernathlub Can I please get your eyes on this?

[lukasvinclav]

@afsangujarati93 correct me if I'm wrong but this block is not available in default django admin at all, right? From my perspective this feature seems to be quite specific. If you want to add custom button into a form, you can override login.html coming from Unfold.

[afsangujarati93]

@lukasvinclav Yes, my plan is to override the unfold login template, but there's NO empty block in the unfold login template that I can override. The PR adds a block in the unfold login template which I can extend to add my logic. If I have the otherlogins block then I can extend the unfold login template and add the login to enable allauth login button right after the current Log In button.

I also explained in the PR description what is the issue if I simply extend the current unfold login template and add the button.

[afsangujarati93]

and just for context, the only way for me to get the Signin with Google button appear right after the login button is to copy and paste the entire content from the base block like so

{% extends 'admin/login.html' %}

{% load i18n static socialaccount %}

{% block base %}
<div class="flex min-h-screen">
    <div class="flex flex-grow items-center justify-center mx-auto px-4 relative">
        <div class="w-full sm:w-96">
            <h1 class="font-semibold mb-10">
                <span class="block text-gray-700 dark:text-gray-200">{% trans 'Welcome back to' %}</span>
                <span class="block text-primary-600 text-xl">{{ site_title }}</span>
            </h1>

            {% include "unfold/helpers/messages/errornote.html" with errors=form.errors %}

            {% include "unfold/helpers/messages/error.html" with errors=form.non_field_errors %}

            {% if user.is_authenticated %}
                {% blocktranslate trimmed asvar message %}
                    You are authenticated as {{ username }}, but are not authorized to
                    access this page. Would you like to login to a different account?
                {% endblocktranslate %}

                {% include "unfold/helpers/messages/error.html" with error=message %}
            {% endif %}

            <form action="{{ app_path }}" method="post" id="login-form">
                {% csrf_token %}

                {% include "unfold/helpers/field.html" with field=form.username %}

                {% include "unfold/helpers/field.html" with field=form.password %}

                {% url 'admin_password_reset' as password_reset_url %}

                {% if password_reset_url %}
                    <div class="password-reset-link">
                        <a href="{{ password_reset_url }}">
                            {% translate 'Forgotten your password or username?' %}
                        </a>
                    </div>
                {% endif %}

                <div class="submit-row">
                    <button type="submit" class="bg-primary-600 border border-transparent flex flex-row font-semibold group items-center justify-center py-2 rounded-md text-sm text-white w-full">
                        {% translate 'Log in' %}

                        <i class="material-symbols-outlined ml-2 relative right-0 text-lg transition-all group-hover:-right-1">arrow_forward</i>
                    </button>
                </div>
            </form>

            {% comment %} THIS IS MY SIGNIN BUTTON {% endcomment %}
            <div class="oauth-buttons flex justify-center">
                {% if USE_GOOGLE_ALLAUTH_FOR_ADMIN %}
                <div class="mt-1 w-full sm:w-96">
                    <form method="post" action="{% url 'google_login' %}">
                        {% csrf_token %}
                        <div class="submit-row">
                            <button type="submit" class="border flex flex-row font-semibold group items-center justify-center py-2 rounded-md text-sm w-full shadow-md">
                                <i class="material-symbols-outlined mr-2 relative text-lg transition-all fab fa-google"></i>
                                Sign in with Google
                            </button>
                        </div>
                    </form>
                </div>
                {% endif %}
            </div>
        </div>

        <div class="absolute flex flex-row items-center justify-between left-0 m-4 right-0 top-0">
            {% if site_url %}
                <a href="{{ site_url }}" class="flex font-medium items-center text-sm text-primary-600">
                    <span class="material-symbols-outlined mr-2">arrow_back</span> {% trans 'Return to site' %}
                </a>
            {% endif %}

            {% if not theme %}
                {% include "unfold/helpers/theme_switch.html" %}
            {% endif %}
        </div>
    </div>

    {% if image %}
        <div class="bg-cover flex-grow hidden max-w-3xl xl:max-w-4xl xl:block" style="background-image: url('{{ image }}')">
        </div>
    {% endif %}
</div>
{% endblock %}

However, if I have that otherlogins block I can simply extend that block

{% extends 'admin/login.html' %}

{% load i18n static socialaccount %}

{% block otherlogins %}
{{ block.super }}
<div class="oauth-buttons flex justify-center">
    {% if USE_GOOGLE_ALLAUTH_FOR_ADMIN %}
    <div class="mt-1 w-full sm:w-96">
        <form method="post" action="{% url 'google_login' %}">
            {% csrf_token %}
            <div class="submit-row">
                <button type="submit" class="border flex flex-row font-semibold group items-center justify-center py-2 rounded-md text-sm w-full">
                    <i class="material-symbols-outlined mr-2 relative text-lg transition-all fab fa-google"></i>
                    Sign in with Google
                </button>
            </div>
        </form>
    </div>
    {% endif %}
</div>
{% endblock %}

I believe this would make life easier for whoever else is using django all auth in their admin.