matrix-authentication-service/templates/components/field.html

{#
Copyright 2025, 2026 Element Creations Ltd.
Copyright 2024, 2025 New Vector Ltd.
Copyright 2021-2024 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
-#}

{% set cnt = counter() %}

{% macro new_id() -%}
  form-{{- cnt.next() -}}
{%- endmacro %}

{% macro attributes(field, default_value=None) -%}
  {%- set value = field.value | default(default_value) -%}
  name="{{ field.name }}" id="{{ field.id }}"
  {%- if field.errors is not empty %} data-invalid{% endif %}
  {%- if value %} value="{{ value }}" {% endif %}
{%- endmacro %}

{% macro error(error, field_name="", hidden=false) %}
  <div class="cpd-form-message cpd-form-error-message
    {%- if hidden %} hidden{% endif %}" data-error-kind="{{ error.kind }}"
    {%- if error.code is defined %}data-error-code="{{ error.code }}"{% endif %}>
    {% if error.kind == "required" %}
      {{ _("mas.errors.field_required") }}
    {% elif error.kind == "exists" and field_name == "username" %}
      {{ _("mas.errors.username_taken") }}
    {% elif error.kind == "mismatch" and field_name == "token" %}
      {{ _("mas.errors.registration_token_mismatch") }}
    {% elif error.kind == "policy" %}
      {% if error.code == "username-too-short" %}
        {{ _("mas.errors.username_too_short") }}
      {% elif error.code == "username-too-long" %}
        {{ _("mas.errors.username_too_long") }}
      {% elif error.code == "username-invalid-chars" %}
        {{ _("mas.errors.username_invalid_chars") }}
      {% elif error.code == "username-all-numeric" %}
        {{ _("mas.errors.username_all_numeric") }}
      {% elif error.code == "username-banned" %}
        {{ _("mas.errors.username_banned") }}
      {% elif error.code == "username-not-allowed" %}
        {{ _("mas.errors.username_not_allowed") }}
      {% elif error.code == "email-domain-not-allowed" %}
        {{ _("mas.errors.email_domain_not_allowed") }}
      {% elif error.code == "email-domain-banned" %}
        {{ _("mas.errors.email_domain_banned") }}
      {% elif error.code == "email-not-allowed" %}
        {{ _("mas.errors.email_not_allowed") }}
      {% elif error.code == "email-banned" %}
        {{ _("mas.errors.email_banned") }}
      {% else %}
        {{ _("mas.errors.denied_policy", policy=error.message) }}
      {% endif %}
    {% elif error.kind == "password_mismatch" %}
      {{ _("mas.errors.password_mismatch") }}
    {% elif error.kind == "invalid" %}
      {{ _("mas.errors.field_invalid") }}
    {% else %}
      {{ error.kind }}
    {% endif %}
  </div>
{% endmacro %}

{% macro field(label, name, form_state=false, class="", inline=false) %}
  {% set field_id = new_id() %}
  {% if not form_state %}
    {% set form_state = {"fields": {}} %}
  {% endif %}

  {% set state = form_state.fields[name] | default({"errors": [], "value": ""}) %}
  {% set field = {
    "id": new_id(),
    "name": name,
    "errors": state.errors,
    "value": state.value,
  } %}

  <div class="{% if inline %}cpd-form-inline-field{% else %}cpd-form-field{% endif %} {{ class }}">
    {% if not inline %}
      <label class="cpd-form-label" for="{{ field.id }}"
        {%- if field.errors is not empty %} data-invalid{% endif -%}
      >{{ label }}</label>

      {{ caller(field) }}
    {% else %}
      <div class="cpd-form-inline-field-control">
        {{ caller(field) }}
      </div>

      <div class="cpd-form-inline-field-body">
        <label class="cpd-form-label" for="{{ field.id }}"
          {%- if field.errors is not empty %} data-invalid{% endif -%}
        >{{ label }}</label>
    {% endif %}


    {% if field.errors is not empty %}
      {% for field_error in field.errors %}
        {% if field_error.kind != "unspecified" %}
          {{ error(error=field_error, field_name=field.name) }}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if inline %}
      </div>
    {% endif %}
  </div>
{% endmacro %}


{% macro separator() %}
  <div class="separator">
    <hr />
    <p>{{ _("mas.or_separator") }}</p>
    <hr />
  </div>
{% endmacro %}