netbox/netbox/templates/login.html

{# User login page. Extends base.html directly to override normal UI layout. #}
{% extends 'base/base.html' %}
{% load form_helpers %}
{% load static %}
{% load i18n %}

{% block layout %}

  <div class="page page-center">
    <div class="container container-tight py-4">

      {# NetBox logo #}
      <div class="text-center mb-4">
        <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" height="80" class="hide-theme-dark">
        <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" height="80" class="hide-theme-light">
        <div class="netbox-edition fw-semibold">{{ settings.RELEASE.edition }}</div>
      </div>

      {# Login banner #}
      {% if config.BANNER_LOGIN %}
        <div class="mb-5 text-center">
          {{ config.BANNER_LOGIN|safe }}
        </div>
      {% endif %}

      {# Login form errors #}
      {% if form.non_field_errors %}
        <div class="alert alert-danger" role="alert">
          <h4 class="alert-heading">{% trans "Errors" %}</h4>
          <p>
            {{ form.non_field_errors }}
          </p>
        </div>
      {% endif %}

      <div class="card card-md">
        <div class="card-body">
          <h2 class="text-center mb-4">{% trans "Log In" %}</h2>

          {# Login form #}
          <form action="{% url 'login' %}" method="post">
            {% csrf_token %}

            {# Set post-login URL #}
            {% if 'next' in request.GET %}
              <input type="hidden" name="next" value="{{ request.GET.next }}" />
            {% elif 'next' in request.POST %}
              <input type="hidden" name="next" value="{{ request.POST.next }}" />
            {% endif %}

            <div class="form-group mb-3">
              <label for="id_username" class="form-label">{{ form.username.label }}</label>
              {{ form.username }}
              {% for error in form.username.errors %}
                <div class="alert alert-danger">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="form-group">
              <label for="id_password" class="form-label">{{ form.password.label }}</label>
              {{ form.password }}
              {% for error in form.password.errors %}
                <div class="alert alert-danger">{{ error }}</div>
              {% endfor %}
            </div>

            <div class="form-footer">
              <button type="submit" class="btn btn-primary w-100">
                {% trans "Sign In" %}
              </button>
            </div>
          </form>
        </div>

        {# SSO login #}
        {% if auth_backends %}
          <div class="hr-text">{% trans "Or" context "Denotes an alternative option" %}</div>
          <div class="card-body">
            <div class="row">
              {% for backend in auth_backends %}
                <div class="col">
                  <a href="{{ backend.url }}" class="btn w-100">
                    {% if backend.icon_name %}<i class="mdi mdi-{{ backend.icon_name }}"></i>
                    {% elif backend.icon_img %}<img src="{{ backend.icon_img }}" height="24" {% if backend.display_name %}class="me-2" {% endif %}/>{% endif %}
                    {{ backend.display_name }}
                  </a>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}

      </div>

    </div>
  </div>

{% endblock layout %}