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="row vh-100 d-flex justify-content-center align-items-center">
        <div class="col-md-6 col-xl-4 col-12">
          {% settings "DEMO" as demo_mode %}
          {% if demo_mode %}
            <div class="card shadow mb-3">
              <div class="card-body">
                <h1 class="h5 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 text-bg-secondary user-select-all">demo@demo.com</span></p>
                <p>{% trans 'Password' %}: <span class="badge text-bg-secondary user-select-all">wygiwyhdemo</span></p>
              </div>
            </div>
          {% endif %}
          <div class="card shadow-lg">
            <div class="card-body">
              <h1 class="h2 card-title text-center mb-4">Login</h1>
              {% crispy form %}

              <div class="mt-3">
                <h2>{% translate "Or login with:" %}</h2>
                {% get_providers as socialaccount_providers %}
                {% if socialaccount_providers %}
                    <ul class="socialaccount_providers list-unstyled">
                        {% for provider in socialaccount_providers %}
                            {% if provider.id == 'oidc' %}
                            <li class="mt-2">
                                <a title="{{provider.name}}" class="btn btn-outline-primary w-100 socialaccount_provider {{provider.id}}" href="{% provider_login_url provider.id process="login" %}">
                                    Login with {{provider.name}}
                                </a>
                            </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                {% else %}
                    <p>{% translate "Social login is not configured." %}</p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}