Authentication

template django_logikal/components/auth.html.j

Usage:

{% import 'django_logikal/components/auth.html.j' as auth %}
{% block component_head %}{{ component_head('auth') }}{% endblock %}

Components:

macro auth.auth_form(csrf_input, form, header, provider_login_urls=None)

Render an authentication form.

Parameters:

  • csrf_input (str) – The CSRF input element to use.

  • form (django_logikal.forms.account.AuthForm) – The authentication form to use.

  • header (str) – The text to use for the header.

  • provider_login_urls (dict) – The mapping of provider names to login URLs to use.

Example

{{ auth.auth_form(
  csrf_input=csrf_input,
  form=auth_form,
  header=_('Continue to access all content'),
  provider_login_urls={
    'Google': 'auth/google/',
    'Apple': 'auth/apple/',
    'Microsoft': 'auth/microsoft/',
  },
) }}

<div class="form-group">
  <form action="/account/auth/" method="post" id="id_form_auth">
    <h1>Continue to access all content</h1>
    <ul class="errors nonfield"></ul>
    <div class="input-field">
      <label for="id_email">Email address</label
      ><input
        name="email"
        type="email"
        placeholder="email@example.com"
        autocomplete="username"
        spellcheck="false"
        maxlength="320"
        data-hx-post="/account/auth/"
        data-hx-trigger="change, keyup delay:250ms changed"
        data-hx-target="next .errors"
        data-hx-swap="outerHTML"
        data-hx-params="email"
        required
        id="id_email" />
      <ul class="errors"></ul>
    </div>
    <button id="id_form_auth_action">Next</button>
  </form>
  <p>or</p>
  <div class="actions">
    <form action="auth/google/" method="post">
      <button id="id_social_login_google" class="icon neutral google-login">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none">
          <g
            clip-path="url(#clip0_710_6221)"
            id="g12"
            transform="translate(-9.8,-10)">
            <path
              fill="#4285f4"
              id="path4"
              d="m 29.6,20.2273 c 0,-0.7091 -0.0636,-1.3909 -0.1818,-2.0455 H 20 V 22.05 h 5.3818
        c -0.2318,1.25 -0.9363,2.3091 -1.9954,3.0182 v 2.5091 h 3.2318 C 28.5091,25.8364
        29.6,23.2727 29.6,20.2273 Z" />
            <path
              fill="#34a853"
              id="path6"
              d="m 20,30 c 2.7,0 4.9636,-0.8955 6.6181,-2.4227 l -3.2318,-2.5091 c -0.8954,0.6
        -2.0409,0.9545 -3.3863,0.9545 -2.6046,0 -4.8091,-1.7591 -5.5955,-4.1227 h -3.3409 v 2.5909
        C 12.7091,27.7591 16.0909,30 20,30 Z" />
            <path
              fill="#fbbc04"
              id="path8"
              d="m 14.4045,21.9 c -0.2,-0.6 -0.3136,-1.2409 -0.3136,-1.9 0,-0.6591 0.1136,-1.3 0.3136,-1.9
        V 15.5091 H 11.0636 C 10.3864,16.8591 10,18.3864 10,20 c 0,1.6136 0.3864,3.1409
        1.0636,4.4909 z" />
            <path
              fill="#e94235"
              id="path10"
              d="m 20,13.9773 c 1.4681,0 2.7863,0.5045 3.8227,1.4954 l 2.8682,-2.8682 C 24.9591,10.9909
        22.6954,10 20,10 c -3.9091,0 -7.2909,2.2409 -8.9364,5.5091 L 14.4045,18.1 C 15.1909,15.7364
        17.3954,13.9773 20,13.9773 Z" />
          </g>
          <defs id="defs17">
            <clipPath id="clip0_710_6221">
              <rect
                id="rect14"
                x="0"
                y="0"
                width="20"
                height="20"
                fill="#ffffff"
                transform="translate(10,10)" />
            </clipPath>
          </defs>
        </svg>
        <span>Continue with Google</span><span class="counterweight"></span>
      </button>
    </form>
    <form action="auth/apple/" method="post">
      <button id="id_social_login_apple" class="icon neutral apple-login">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="#000000">
          <defs id="defs346" />
          <path
            id="logo"
            fill-rule="nonzero"
            style="stroke: none; stroke-width: 1"
            d="m 10.222656,4.884615 c 0.832031,0 1.875,-0.579784 2.496094,-1.352829 0.5625,-0.700572
      0.972656,-1.678957 0.972656,-2.657342 0,-0.132867 -0.01172,-0.265735 -0.03516,-0.374444
      -0.925781,0.03624 -2.039063,0.640178 -2.707031,1.44946 -0.527344,0.61602 -1.007813,1.582326
      -1.007813,2.57279 0,0.144946 0.02344,0.289892 0.03516,0.338208 0.05859,0.01208
      0.152344,0.02416 0.246094,0.02416 z M 7.292969,19.5 c 1.136718,0 1.640625,-0.785124
      3.058593,-0.785124 1.441407,0 1.757813,0.760966 3.023438,0.760966 1.242187,0
      2.074219,-1.183725 2.859375,-2.343293 0.878906,-1.328671 1.242187,-2.633185
      1.265625,-2.693579 -0.08203,-0.02416 -2.460938,-1.026701 -2.460938,-3.841068 0,-2.439924
      1.875,-3.539097 1.980469,-3.623649 C 15.777344,5.138271 13.890625,5.089955 13.375,5.089955 c
      -1.394531,0 -2.53125,0.869676 -3.246094,0.869676 -0.773437,0 -1.792969,-0.82136 -3,-0.82136
      -2.296875,0 -4.628906,1.95677 -4.628906,5.652892 0,2.294978 0.867187,4.722823
      1.933594,6.293071 C 5.347656,18.412905 6.144531,19.5 7.292969,19.5 Z" />
        </svg>
        <span>Continue with Apple</span><span class="counterweight"></span>
      </button>
    </form>
    <form action="auth/microsoft/" method="post">
      <button
        id="id_social_login_microsoft"
        class="icon neutral microsoft-login">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="21"
          height="21"
          viewBox="0 0 21 21">
          <rect x="1" y="1" width="9" height="9" fill="#f25022" />
          <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
          <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
          <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
        </svg>
        <span>Continue with Microsoft</span><span class="counterweight"></span>
      </button>
    </form>
  </div>
</div>