letro-authentication-service/templates/pages/device_consent.html

{#
Copyright 2024, 2025 New Vector Ltd.
Copyright 2023, 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 consent_page = true %}

{% extends "base.html" %}

{% block content %}
  {% set client_name = client.client_name or client.client_id %}
  {% set user_agent = grant.user_agent | parse_user_agent() %}

  {% if grant.state == "pending" %}
    <header class="page-heading">
      {% if client.logo_uri %}
        <img class="consent-client-icon image" referrerpolicy="no-referrer" src="{{ client.logo_uri }}" />
      {% else %}
      <div class="consent-client-icon generic">
        {{ icon.web_browser() }}
      </div>
      {% endif %}

      <div class="header">
        <h1 class="title">
          {{ _('mas.consent.continue_to', client_name=client_name) }}
        </h1>

        <p class="text [&>span]:whitespace-nowrap [&>span]:text-[var(--cpd-color-text-link-external)]">
          {{ _("mas.device_consent.this_will_setup", client_name=client_name, client_uri=((client.client_uri or "") | simplify_url), server_name=branding.server_name) }}
        </p>

        <div class="session-card mt-4">
          <div class="card-header" {%- if user_agent %} title="{{ user_agent.raw }}"{% endif %}>
            <div class="device-type-icon">
              {% if user_agent.device_type == "mobile" %}
                {{ icon.mobile() }}
              {% elif user_agent.device_type == "tablet" %}
                {{ icon.web_browser() }}
              {% elif user_agent.device_type == "pc" %}
                {{ icon.computer() }}
              {% else %}
                {{ icon.unknown_solid() }}
              {% endif %}
            </div>

            <div class="content auto">
              {% if user_agent.model %}
                <div>{{ user_agent.model }}</div>
              {% endif %}

              {% if user_agent.os %}
                <div>
                  {{ user_agent.os }}
                  {% if user_agent.os_version %}
                    {{ user_agent.os_version }}
                  {% endif %}
                </div>
              {% endif %}

              {# If we haven't detected a model, it's probably a browser, so show the name #}
              {% if not user_agent.model and user_agent.name %}
                <div>
                  {{ user_agent.name }}
                  {% if user_agent.version %}
                    {{ user_agent.version }}
                  {% endif %}
                </div>
              {% endif %}

              {# If we couldn't detect anything, show a generic "Device" #}
              {% if not user_agent.model and not user_agent.name and not user_agent.os %}
              <div>{{ _("mas.device_card.generic_device") }}</div>
              {% endif %}
            </div>
          </div>
          <div class="metadata">
            {% if grant.ip_address %}
              <div>
                <div class="key">{{ _("mas.device_card.ip_address") }}</div>
                <div class="value">{{ grant.ip_address }}</div>
              </div>
            {% endif %}
            <div>
              <div class="key">{{ _("mas.device_card.access_requested") }}</div>
              <div class="value">{{ _.relative_date(grant.created_at) | title }} {{ _.short_time(grant.created_at) }}</div>
            </div>
            <div>
              <div class="key">{{ _("mas.device_card.device_code") }}</div>
              <div class="value">{{ grant.user_code }}</div>
            </div>
          </div>
        </div>
      </div>
    </header>

    {% call(scopes) scope.unsafe_scopes(scopes=grant.scope.split(" ")) %}
      {% if scopes is not empty %}
        <section class="flex flex-col gap-3">
          <p class="text-center cpd-text-body-md-regular">
            {{ _('mas.consent.scope_list_preface', client_name=client_name) }}
          </p>
          <div class="consent-scope-list">
            {{ scope.list(scopes=scopes) }}
          </div>
        </section>
      {% endif %}
    {% endcall %}

    {% set initial -%}
      {%- if matrix_user.display_name -%}
        {{- matrix_user.display_name[0] | upper -}}
      {%- else -%}
        {{- matrix_user.mxid[1] | upper -}}
      {%- endif -%}
    {%- endset %}

    <section class="flex items-center p-4 gap-4 border border-[var(--cpd-color-gray-400)] rounded-xl">
      <div class="avatar-placeholder" data-color="{{ matrix_user.mxid | id_color_hash }}">{{ initial }}</div>
      <div class="flex flex-col">
        <div class="text-primary cpd-text-body-lg-semibold">{{ matrix_user.display_name or current_session.user.username }}</div>
        <div class="text-secondary cpd-text-body-md-regular">{{ matrix_user.mxid }}</div>
      </div>
    </section>

    <section class="flex flex-col gap-6">
      <form method="POST" class="cpd-form-root">
        <input type="hidden" name="csrf" value="{{ csrf_token }}" />
        <button type="submit" name="action" value="consent" class="cpd-button" data-kind="primary" data-size="lg">
          {{ _("action.continue") }}
        </button>
      </form>

      {% call logout.button(csrf_token=csrf_token, post_logout_action=action) %}
        <button type="submit" class="cpd-button primary flex-1" data-kind="secondary" data-size="lg" type="submit">
          {{ _("mas.consent.use_another_account") }}
        </button>
      {% endcall %}

      <form method="POST" class="cpd-form-root">
        <input type="hidden" name="csrf" value="{{ csrf_token }}" />
        <button type="submit" name="action" value="reject" class="cpd-button" data-kind="tertiary" data-size="lg">
          {{ _("action.cancel") }}
        </button>
      </form>
    </section>
  {% elif grant.state == "rejected" %}
    <header class="page-heading">
      <div class="icon invalid">
        {{ icon.block() }}
      </div>

      <div class="header">
        <h1 class="title">{{ _("mas.device_consent.denied.heading") }}</h1>
        <p class="text">{{ _("mas.device_consent.denied.description", client_name=client_name) }}</p>
      </div>
    </header>
  {% else %}
    <header class="page-heading">
      <div class="icon success">
        {{ icon.check() }}
      </div>

      <div class="header">
        <h1 class="title">{{ _("mas.device_consent.granted.heading") }}</h1>
        <p class="text">{{ _("mas.device_consent.granted.description", client_name=client_name) }}</p>
      </div>
    </header>
  {% endif %}
{% endblock content %}