Simplify the consent screens

This commit is contained in:
Quentin Gliech
2025-12-02 18:10:12 +01:00
parent 6bf811a7f4
commit 580767f2dd
5 changed files with 173 additions and 123 deletions

View File

@@ -6,9 +6,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
-#}
{# Macro to remove 'unsafe' scope from a scope list. Usage:
{% call(scopes) scope.unsafe_scopes(scopes=["openid", "urn:synapse:admin:*"]) %}
{{ scopes }}
{% endcall %}
#}
{% macro unsafe_scopes(scopes) -%}
{% set ns = namespace(unsafe_scopes=[]) %}
{% set safe_scope_prefixes = ["openid", "urn:matrix:client:api:", "urn:matrix:org.matrix.msc2967.client:api:", "urn:matrix:client:device:", "urn:matrix:org.matrix.msc2967.client:device:"] %}
{% for scope in scopes %}
{% set ns.is_safe = False %}
{% for safe_scope_prefix in safe_scope_prefixes %}
{% if scope.startswith(safe_scope_prefix) %}
{% set ns.is_safe = True %}
{% endif %}
{% endfor %}
{% if not ns.is_safe %}
{% set ns.unsafe_scopes = ns.unsafe_scopes + [scope] %}
{% endif %}
{% endfor %}
{{ caller(ns.unsafe_scopes) }}
{%- endmacro %}
{% macro list(scopes) %}
<ul>
{% for scope in (scopes | split(" ")) %}
{% for scope in scopes %}
{% if scope == "openid" %}
<li>{{ icon.user_profile() }}<p>{{ _("mas.scope.view_profile") }}</p></li>
{% elif scope == "urn:mas:graphql:*" %}
@@ -18,9 +41,9 @@ Please see LICENSE files in the repository root for full details.
<li>{{ icon.chat() }}<p>{{ _("mas.scope.view_messages") }}</p></li>
<li>{{ icon.send() }}<p>{{ _("mas.scope.send_messages") }}</p></li>
{% elif scope == "urn:synapse:admin:*" %}
<li class="dangerous">{{ icon.room() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
<li class="dangerous">{{ icon.room() }}<p>{{ _("mas.scope.synapse_admin", scope=scope) }}</p></li>
{% elif scope == "urn:mas:admin" %}
<li class="dangerous">{{ icon.admin() }}<p>{{ _("mas.scope.mas_admin") }}</p></li>
<li class="dangerous">{{ icon.admin() }}<p>{{ _("mas.scope.mas_admin", scope=scope) }}</p></li>
{% elif scope is startingwith("urn:matrix:client:device:") or scope is startingwith("urn:matrix:org.matrix.msc2967.client:device:") %}
{# We hide this scope #}
{% else %}

View File

@@ -12,6 +12,7 @@ Please see LICENSE files in the repository root for full details.
{% block content %}
{% set client_name = client.client_name or client.client_id %}
<header class="page-heading">
{% if client.logo_uri %}
<img class="consent-client-icon image" referrerpolicy="no-referrer" src="{{ client.logo_uri }}" />
@@ -22,33 +23,42 @@ Please see LICENSE files in the repository root for full details.
{% endif %}
<div class="header">
<h1 class="title">{{ _("mas.consent.heading") }}</h1>
<p class="text [&>span]:whitespace-nowrap">
{{ _("mas.consent.client_wants_access", client_name=client_name, redirect_uri=(grant.redirect_uri | simplify_url)) }}
{{ _("mas.consent.this_will_allow", client_name=client_name) }}
<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.consent.this_will_setup", client_name=client_name, client_uri=(client.client_uri | simplify_url), server_name=branding.server_name) }}
</p>
</div>
</header>
<section class="consent-scope-list">
{{ scope.list(scopes=grant.scope) }}
</section>
<section class="text-center cpd-text-secondary cpd-text-body-md-regular [&>span]:whitespace-nowrap">
<strong class="font-semibold cpd-text-primary [&>span]:whitespace-nowrap">{{ _("mas.consent.make_sure_you_trust", client_name=client_name) }}</strong>
{{ _("mas.consent.you_may_be_sharing") }}
{% if client.policy_uri or client.tos_uri %}
Find out how <span>{{ client_name }}</span> will handle your data by reviewing its
{% if client.policy_uri %}
<a target="_blank" href="{{ client.policy_uri }}" class="cpd-link" data-kind="primary">privacy policy</a>{% if not client.tos_uri %}.{% endif %}
{% endif %}
{% if client.policy_uri and client.tos_uri%}
and
{% endif %}
{% if client.tos_uri %}
<a target="_blank" href="{{ client.tos_uri }}" class="cpd-link" data-kind="primary">terms of service</a>.
{% endif %}
{% 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">
@@ -57,13 +67,11 @@ Please see LICENSE files in the repository root for full details.
{{ button.button(text=_("action.continue")) }}
</form>
<div class="flex gap-1 justify-center items-center">
<p class="cpd-text-secondary cpd-text-body-md-regular">
{{ _("mas.not_you", username=current_session.user.username) }}
</p>
{{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
</div>
{% call logout.button(csrf_token=csrf_token, post_logout_action=action) %}
<button type="submit" class="cpd-button primary" data-kind="secondary" data-size="lg" type="submit">
{{ _("mas.consent.use_another_account") }}
</button>
{% endcall %}
{{ back_to_client.link(
text=_("action.cancel"),

View File

@@ -25,9 +25,15 @@ Please see LICENSE files in the repository root for full details.
{% endif %}
<div class="header">
<h1 class="title">{{ _("mas.consent.heading") }}</h1>
<h1 class="title">
{{ _('mas.consent.continue_to', client_name=client_name) }}
</h1>
<div class="session-card my-4">
<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 | 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" %}
@@ -88,33 +94,36 @@ Please see LICENSE files in the repository root for full details.
</div>
</div>
</div>
<p class="text [&>span]:whitespace-nowrap">
{{ _("mas.device_consent.another_device_access") }}
{{ _("mas.consent.this_will_allow", client_name=client_name) }}
</p>
</div>
</header>
<section class="consent-scope-list">
{{ scope.list(scopes=grant.scope) }}
</section>
<section class="text-center text-balance cpd-text-secondary cpd-text-body-md-regular [&>span]:whitespace-nowrap">
<strong class="font-semibold cpd-text-primary [&>span]:whitespace-nowrap">{{ _("mas.consent.make_sure_you_trust", client_name=client_name) }}</strong>
{{ _("mas.consent.you_may_be_sharing") }}
{% if client.policy_uri or client.tos_uri %}
Find out how <span>{{ client_name }}</span> will handle your data by reviewing its
{% if client.policy_uri %}
<a target="_blank" href="{{ client.policy_uri }}" class="cpd-link" data-kind="primary">privacy policy</a>{% if not client.tos_uri %}.{% endif %}
{% endif %}
{% if client.policy_uri and client.tos_uri%}
and
{% endif %}
{% if client.tos_uri %}
<a target="_blank" href="{{ client.tos_uri }}" class="cpd-link" data-kind="primary">terms of service</a>.
{% endif %}
{% 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">
@@ -123,18 +132,20 @@ Please see LICENSE files in the repository root for full details.
<button type="submit" name="action" value="consent" class="cpd-button" data-kind="primary" data-size="lg">
{{ _("action.continue") }}
</button>
<button type="submit" name="action" value="reject" class="cpd-button destructive" data-kind="secondary" data-size="lg">
</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>
<div class="flex gap-1 justify-center items-center">
<p class="cpd-text-secondary cpd-text-body-md-regular">
{{ _("mas.not_you", username=current_session.user.username) }}
</p>
{{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
</div>
</section>
{% elif grant.state == "rejected" %}
<header class="page-heading">

View File

@@ -17,18 +17,29 @@ Please see LICENSE files in the repository root for full details.
</div>
<div class="header">
<h1 class="title">Allow access to your account?</h1>
<p class="text"><span class="whitespace-nowrap">{{ client_name }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
<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.legacy_consent.this_will_setup", client_name=client_name, server_name=branding.server_name) }}
</p>
</div>
</header>
<section class="consent-scope-list">
{{ scope.list(scopes="openid urn:matrix:client:api:*") }}
</section>
{% set initial -%}
{%- if matrix_user.display_name -%}
{{- matrix_user.display_name[0] | upper -}}
{%- else -%}
{{- matrix_user.mxid[1] | upper -}}
{%- endif -%}
{%- endset %}
<section class="text-center cpd-text-secondary cpd-text-body-md-regular">
<span class="font-semibold cpd-text-primary">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
You may be sharing sensitive information with this site or app.
<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">
@@ -37,12 +48,10 @@ Please see LICENSE files in the repository root for full details.
{{ button.button(text=_("action.continue")) }}
</form>
<div class="flex gap-1 justify-center items-center">
<p class="cpd-text-secondary cpd-text-body-md-regular">
{{ _("mas.not_you", username=current_session.user.username) }}
</p>
{{ logout.button(text=_("action.sign_out"), csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
</div>
{% call logout.button(csrf_token=csrf_token, post_logout_action=action) %}
<button type="submit" class="cpd-button primary" data-kind="secondary" data-size="lg" type="submit">
{{ _("mas.consent.use_another_account") }}
</button>
{% endcall %}
</section>
{% endblock content %}

View File

@@ -6,11 +6,11 @@
},
"cancel": "Cancel",
"@cancel": {
"context": "pages/consent.html:69:11-29, pages/device_consent.html:127:13-31, pages/policy_violation.html:44:13-31"
"context": "pages/consent.html:77:11-29, pages/device_consent.html:146:13-31, pages/policy_violation.html:44:13-31"
},
"continue": "Continue",
"@continue": {
"context": "form_post.html:25:28-48, pages/consent.html:57:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:68:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:77:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/registration_token.html:41:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:37:28-48"
"context": "form_post.html:25:28-48, pages/consent.html:67:28-48, pages/device_consent.html:133:13-33, pages/device_link.html:40:26-46, pages/login.html:68:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:77:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/registration_token.html:41:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:48:28-48"
},
"create_account": "Create Account",
"@create_account": {
@@ -22,7 +22,7 @@
},
"sign_out": "Sign out",
"@sign_out": {
"context": "pages/account/logged_out.html:22:28-48, pages/consent.html:65:28-48, pages/device_consent.html:136:30-50, pages/index.html:28:28-48, pages/policy_violation.html:38:28-48, pages/sso.html:45:28-48, pages/upstream_oauth2/link_mismatch.html:24:24-44, pages/upstream_oauth2/suggest_link.html:32:26-46"
"context": "pages/account/logged_out.html:22:28-48, pages/index.html:28:28-48, pages/policy_violation.html:38:28-48, pages/upstream_oauth2/link_mismatch.html:24:24-44, pages/upstream_oauth2/suggest_link.html:32:26-46"
},
"skip": "Skip",
"@skip": {
@@ -165,8 +165,6 @@
"@current": {
"description": "Field for the user's current password"
},
"description": "This will change the password on your account.",
"@description": {},
"heading": "Change my password",
"@heading": {
"description": "Heading on the change password page"
@@ -189,43 +187,39 @@
}
},
"consent": {
"client_wants_access": "<span>%(client_name)s</span> at <span>%(redirect_uri)s</span> wants to access your account.",
"@client_wants_access": {
"context": "pages/consent.html:27:11-122"
"continue_to": "Continue to <span>%(client_name)s</span>?",
"@continue_to": {
"context": "pages/consent.html:27:11-64, pages/device_consent.html:29:13-66, pages/sso.html:21:11-64"
},
"heading": "Allow access to your account?",
"@heading": {
"context": "pages/consent.html:25:27-51, pages/device_consent.html:28:29-53"
"scope_list_preface": "By continuing, you allow <span>%(client_name)s</span> to:",
"@scope_list_preface": {
"context": "pages/consent.html:39:13-73, pages/device_consent.html:104:15-75"
},
"make_sure_you_trust": "Make sure that you trust <span>%(client_name)s</span>.",
"@make_sure_you_trust": {
"context": "pages/consent.html:38:81-142, pages/device_consent.html:104:83-144"
"this_will_setup": "This will set up %(client_name)s (<span>%(client_uri)s</span>) with your <span>%(server_name)s</span> account.",
"@this_will_setup": {
"context": "pages/consent.html:30:11-149"
},
"this_will_allow": "This will allow <span>%(client_name)s</span> to:",
"@this_will_allow": {
"context": "pages/consent.html:28:11-68, pages/device_consent.html:94:13-70"
},
"you_may_be_sharing": "You may be sharing sensitive information with this site or app.",
"@you_may_be_sharing": {
"context": "pages/consent.html:39:7-42, pages/device_consent.html:105:9-44"
"use_another_account": "Use another account",
"@use_another_account": {
"context": "pages/consent.html:72:11-47, pages/device_consent.html:139:13-49, pages/sso.html:53:11-47"
}
},
"device_card": {
"access_requested": "Access requested",
"@access_requested": {
"context": "pages/device_consent.html:82:34-71"
"context": "pages/device_consent.html:88:34-71"
},
"device_code": "Code",
"@device_code": {
"context": "pages/device_consent.html:86:34-66"
"context": "pages/device_consent.html:92:34-66"
},
"generic_device": "Device",
"@generic_device": {
"context": "pages/device_consent.html:70:22-57"
"context": "pages/device_consent.html:76:22-57"
},
"ip_address": "IP address",
"@ip_address": {
"context": "pages/device_consent.html:77:36-67"
"context": "pages/device_consent.html:83:36-67"
}
},
"device_code_link": {
@@ -239,29 +233,29 @@
}
},
"device_consent": {
"another_device_access": "Another device wants to access your account.",
"@another_device_access": {
"context": "pages/device_consent.html:93:13-58"
},
"denied": {
"description": "You denied access to %(client_name)s. You can close this window.",
"@description": {
"context": "pages/device_consent.html:147:27-94"
"context": "pages/device_consent.html:158:27-94"
},
"heading": "Access denied",
"@heading": {
"context": "pages/device_consent.html:146:29-67"
"context": "pages/device_consent.html:157:29-67"
}
},
"granted": {
"description": "You granted access to %(client_name)s. You can close this window.",
"@description": {
"context": "pages/device_consent.html:158:27-95"
"context": "pages/device_consent.html:169:27-95"
},
"heading": "Access granted",
"@heading": {
"context": "pages/device_consent.html:157:29-68"
"context": "pages/device_consent.html:168:29-68"
}
},
"this_will_setup": "Another device wants to set up %(client_name)s (<span>%(client_uri)s</span>) with your <span>%(server_name)s</span> account. Make sure you recognise that device.",
"@this_will_setup": {
"context": "pages/device_consent.html:33:13-158"
}
},
"device_display_name": {
@@ -416,6 +410,12 @@
"context": "components/field.html:32:11-45"
}
},
"legacy_consent": {
"this_will_setup": "This will set up <span>%(client_name)s</span> with your <span>%(server_name)s</span> account.",
"@this_will_setup": {
"context": "pages/sso.html:24:11-109"
}
},
"login": {
"call_to_register": "Don't have an account yet?",
"@call_to_register": {
@@ -485,7 +485,6 @@
},
"not_you": "Not %(username)s?",
"@not_you": {
"context": "pages/consent.html:62:11-67, pages/device_consent.html:133:13-69, pages/sso.html:42:11-67",
"description": "Suggestions for the user to log in as a different user"
},
"or_separator": "Or",
@@ -656,36 +655,36 @@
"scope": {
"edit_profile": "Edit your profile and contact details",
"@edit_profile": {
"context": "components/scope.html:15:35-62",
"context": "components/scope.html:38:35-62",
"description": "Displayed when the 'urn:mas:graphql:*' scope is requested"
},
"manage_sessions": "Manage your devices and sessions",
"@manage_sessions": {
"context": "components/scope.html:16:39-69",
"context": "components/scope.html:39:39-69",
"description": "Displayed when the 'urn:mas:graphql:*' scope is requested"
},
"mas_admin": "Manage users (urn:mas:admin)",
"@mas_admin": {
"context": "components/scope.html:23:54-78",
"context": "components/scope.html:46:54-91",
"description": "Displayed when the 'urn:mas:admin' scope is requested"
},
"send_messages": "Send new messages on your behalf",
"@send_messages": {
"context": "components/scope.html:19:35-63"
"context": "components/scope.html:42:35-63"
},
"synapse_admin": "Administer the server (urn:synapse:admin:*)",
"@synapse_admin": {
"context": "components/scope.html:21:53-81",
"context": "components/scope.html:44:53-94",
"description": "Displayed when the 'urn:synapse:admin:*' scope is requested"
},
"view_messages": "View your existing messages and data",
"@view_messages": {
"context": "components/scope.html:18:35-63",
"context": "components/scope.html:41:35-63",
"description": "Displayed when the 'urn:matrix:client:api:*' scope is requested"
},
"view_profile": "See your profile info and contact details",
"@view_profile": {
"context": "components/scope.html:13:43-70",
"context": "components/scope.html:36:43-70",
"description": "Displayed when the 'openid' scope is requested"
}
},
@@ -800,4 +799,4 @@
}
}
}
}
}