WYGIWYH/app/templates/users/login.html

{% extends "layouts/base_auth.html" %}
{% load i18n %}
{% load settings %}
{% load crispy_forms_tags %}
{% load socialaccount %}

{% block title %}Login{% endblock %}

{% block content %}
  <div>
    <div class="container">
      <div class="grid h-dvh flex justify-center items-center">
        <div class="col-span-12 md:col-span-6 xl:col-span-4">
          {% settings "DEMO" as demo_mode %}
          {% if demo_mode %}
            <div class="card bg-base-100 shadow-xl mb-3">
              <div class="card-body">
                <h1 class="text-lg card-title text-center mb-4">{% trans "Welcome to WYGIWYH's demo!" %}</h1>
                <p>{% trans 'Use the credentials below to login' %}:</p>
                <p>{% trans 'E-mail' %}: <span class="badge badge-secondary select-all">demo@demo.com</span></p>
                <p>{% trans 'Password' %}: <span class="badge badge-secondary select-all">wygiwyhdemo</span></p>
              </div>
            </div>
          {% endif %}
          <div class="card bg-base-100 shadow-2xl">
            <div class="card-body">
              <h1 class="text-2xl card-title text-center mb-4">Login</h1>
              {% crispy form %}

              {% get_providers as socialaccount_providers %}
              {% if socialaccount_providers %}
                <div class="mt-3">
                  <hr class="hr">
                  <ul class="socialaccount_providers list-none">
                    {% for provider in socialaccount_providers %}
                      <li class="mt-2">
                        <a title="{{ provider.name }}"
                           class="btn btn-outline btn-primary w-full socialaccount_provider {{ provider.id }}"
                           href="{% provider_login_url provider %}">
                          {% translate 'Login with' %} {{ provider.name }}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}