letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Compoundify the consent screens

Browse Source
This commit is contained in:
Quentin Gliech
2023-09-06 13:58:00 +02:00
parent edbc1769e0
commit cb6d89e308
9 changed files with 332 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
crates/templates/src/functions.rs
View File

@@ -14,7 +14,10 @@
//! Additional functions, tests and filters used in templates
use std::{collections::HashMap, str::FromStr};
use std::{
collections::{BTreeSet, HashMap},
str::FromStr,
};
use camino::Utf8Path;
use mas_router::UrlBuilder;
@@ -196,6 +199,12 @@ impl tera::Function for IncludeAsset {
let path = args.get("path").ok_or(tera::Error::msg(
"Function `include_asset` was missing parameter `path`",
))?;
let preload = args
.get("preload")
.and_then(Value::as_bool)
.unwrap_or(false);
let path: &Utf8Path = path
.as_str()
.ok_or_else(|| {
@@ -212,12 +221,16 @@ impl tera::Function for IncludeAsset {
)
})?;
let preloads = self.vite_manifest.preload_for(path).map_err(|e| {
tera::Error::chain(
"Invalid assets manifest while calling function `include_asset`",
e.to_string(),
)
})?;
let preloads = if preload {
self.vite_manifest.preload_for(path).map_err(|e| {
tera::Error::chain(
"Invalid assets manifest while calling function `include_asset`",
e.to_string(),
)
})?
} else {
BTreeSet::new()
};
let tags: Vec<String> = preloads
.iter()

91
frontend/src/templates.css
View File

@@ -38,3 +38,94 @@ body {
color: var(--cpd-color-text-primary);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
}
.cpd-text-body-lg-regular {
font: var(--cpd-font-body-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-lg);
}
.cpd-text-heading-xl-semibold {
font: var(--cpd-font-heading-xl-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
}
.cpd-text-body-md-regular {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
}
.cpd-text-primary {
color: var(--cpd-color-text-primary);
}
.cpd-text-secondary {
color: var(--cpd-color-text-secondary);
}
.consent-client-icon {
display: block;
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
margin: 0 auto;
&.generic {
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: var(--cpd-radius-pill-effect);
color: var(--cpd-color-icon-primary);
& svg {
margin: var(--cpd-space-4x);
height: var(--cpd-space-8x);
width: var(--cpd-space-8x);
}
}
&.image {
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
border-radius: var(--cpd-space-2x);
overflow: hidden;
}
}
.consent-scope-list {
--border-radius: var(--cpd-space-4x);
& ul {
display: flex;
flex-direction: column;
gap: var(--cpd-space-1x);
& > li {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-secondary);
padding: var(--cpd-space-3x) var(--cpd-space-5x);
display: flex;
gap: var(--cpd-space-4x);
line-height: var(--cpd-space-6x);
&:first-of-type {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
&:last-of-type {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
& > p {
flex: 1;
}
& > svg {
display: block;
height: var(--cpd-space-6x);
width: var(--cpd-space-6x);
color: var(--cpd-color-icon-quaternary);
}
}
}
}

2
templates/app.html
View File

@@ -38,7 +38,7 @@ limitations under the License.
handleChange(query);
})();
</script>
{{ include_asset(path='src/main.tsx') | indent(prefix=" ") | safe }}
{{ include_asset(path='src/main.tsx', preload=true) | indent(prefix=" ") | safe }}
</head>
<body>

3
templates/base.html
View File

@@ -20,6 +20,7 @@ limitations under the License.
{% import "components/logout.html" as logout %}
{% import "components/navbar.html" as navbar %}
{% import "components/errors.html" as errors %}
{% import "components/icon.html" as icon %}
{% import "components/scope.html" as scope %}
<!DOCTYPE html>
@@ -28,7 +29,7 @@ limitations under the License.
<meta charset="utf-8">
<title>{% block title %}matrix-authentication-service{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ include_asset(path='src/templates.css') | indent(prefix=" ") | safe }}
{{ include_asset(path='src/templates.css', preload=true) | indent(prefix=" ") | safe }}
</head>
<body class="flex flex-col min-h-screen">
{% block content %}{% endblock content %}

14
templates/components/back_to_client.html
View File

@@ -14,16 +14,24 @@ See the License for the specific language governing permissions and
limitations under the License.
#}
{% macro link(text, uri, mode, params, kind="primary") %}
{% macro link(text, uri, mode, params, type="button", kind="primary") %}
{% if type == "button" %}
{% set class = "cpd-button" %}
{% elif type == "link" %}
{% set class = "cpd-link" %}
{% else %}
{{ throw(message="Invalid type") }}
{% endif %}
{% if mode == "form_post" %}
<form method="post" action="{{ uri }}">
{% for key, value in params %}
<input type="hidden" name="{{ key }}" value="{{ value }}" />
{% endfor %}
<button class="cpd-button" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
<button class="{{ class }}" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
</form>
{% elif mode == "fragment" or mode == "query" %}
<a class="cpd-button" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
<a class="{{ class }}" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
{% else %}
{{ throw(message="Invalid mode") }}
{% endif %}

124
templates/components/icon.html Normal file
View File

@@ -0,0 +1,124 @@
{#
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
#}
{# Regenrate with the following shell script:
for i in frontend/node_modules/@vector-im/compound-design-tokens/assets/web/icons/*.svg; do
NAME=$(basename "$i" | sed 's/\.svg//' | tr '-' '_')
CONTENT=$(cat "$i")
cat <<EOF
{% macro ${NAME}() %}
${CONTENT}
{% endmacro %}
EOF
done
#}
{% macro chat() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="m2.975 16.3-1.45 4.95a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.612-1.958 2.137-3.175a9.738 9.738 0 0 0 .788-3.9 9.738 9.738 0 0 0-.787-3.9A10.099 10.099 0 0 0 19.1 4.925c-.9-.9-1.958-1.612-3.175-2.137a9.738 9.738 0 0 0-3.9-.788 9.738 9.738 0 0 0-3.9.788A10.099 10.099 0 0 0 4.95 4.925c-.9.9-1.613 1.958-2.138 3.175a9.738 9.738 0 0 0-.787 3.9 10.179 10.179 0 0 0 .95 4.3Z"/>
</svg>
{% endmacro %}
{% macro check_circle() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
</svg>
{% endmacro %}
{% macro check() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
</svg>
{% endmacro %}
{% macro chevron() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 14.95c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L6.675 10.05a.892.892 0 0 1-.263-.688.977.977 0 0 1 .288-.687.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.925-3.925a.892.892 0 0 1 .688-.263.977.977 0 0 1 .687.288.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"/>
</svg>
{% endmacro %}
{% macro close() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="m12 13.4-4.9 4.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.9-4.9-4.9-4.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.9 4.9 4.9-4.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L13.4 12l4.9 4.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275L12 13.4Z"/>
</svg>
{% endmacro %}
{% macro computer() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"/>
</svg>
{% endmacro %}
{% macro delete() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7Zm2-5c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"/>
</svg>
{% endmacro %}
{% macro error() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
</svg>
{% endmacro %}
{% macro info() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"/>
</svg>
{% endmacro %}
{% macro lock() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"/>
</svg>
{% endmacro %}
{% macro mobile() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"/>
</svg>
{% endmacro %}
{% macro thread() %}
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>
{% endmacro %}
{% macro user() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" stroke="currentColor" stroke-width=".025" d="m5.84 17.108.008.01.01-.008a10.422 10.422 0 0 1 2.846-1.536A9.725 9.725 0 0 1 12 15.012c1.149 0 2.247.188 3.296.562a10.42 10.42 0 0 1 2.846 1.536l.01.007.008-.009a7.742 7.742 0 0 0 1.364-2.329A7.85 7.85 0 0 0 20.012 12c0-2.22-.78-4.11-2.34-5.671C16.11 4.768 14.22 3.988 12 3.988c-2.22 0-4.11.78-5.671 2.34C4.768 7.89 3.988 9.78 3.988 12c0 .985.162 1.911.488 2.78.325.867.78 1.644 1.364 2.328Zm6.16-4.12c-.98 0-1.806-.337-2.479-1.01-.672-.672-1.009-1.498-1.009-2.478 0-.98.337-1.806 1.01-2.479.672-.672 1.498-1.008 2.478-1.008.98 0 1.806.336 2.479 1.008.672.673 1.009 1.499 1.009 2.479s-.337 1.806-1.01 2.479c-.672.672-1.498 1.009-2.478 1.009Zm0 9a9.725 9.725 0 0 1-3.895-.787 10.087 10.087 0 0 1-3.171-2.135 10.087 10.087 0 0 1-2.135-3.171A9.725 9.725 0 0 1 2.013 12c0-1.382.262-2.68.786-3.895a10.086 10.086 0 0 1 2.135-3.171 10.086 10.086 0 0 1 3.171-2.135A9.725 9.725 0 0 1 12 2.013c1.382 0 2.68.262 3.895.786a10.087 10.087 0 0 1 3.171 2.135c.899.899 1.61 1.956 2.135 3.171A9.725 9.725 0 0 1 21.988 12a9.73 9.73 0 0 1-.787 3.895 10.087 10.087 0 0 1-2.135 3.171 10.087 10.087 0 0 1-3.171 2.135 9.725 9.725 0 0 1-3.895.787Z"/>
</svg>
{% endmacro %}
{% macro visibility_invisible() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="m19.3 16.5-3.2-3.2c.133-.283.233-.57.3-.863.067-.291.1-.604.1-.937 0-1.25-.438-2.312-1.313-3.187C14.313 7.438 13.25 7 12 7a4.2 4.2 0 0 0-.938.1 4.24 4.24 0 0 0-.862.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.888 1.9 1.258 3.325 2.895 4.275 4.912.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 11.49 11.49 0 0 1-1.438 2.375A10.467 10.467 0 0 1 19.3 16.5Zm-.2 5.4-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.687c0-.275.1-.513.3-.713a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM12 16a4.9 4.9 0 0 0 .512-.025c.159-.017.33-.05.513-.1l-5.4-5.4c-.05.183-.083.354-.1.513a4.81 4.81 0 0 0-.025.512c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm2.65-4.15-3-3c.95-.15 1.725.117 2.325.8.6.683.825 1.417.675 2.2Z"/>
</svg>
{% endmacro %}
{% macro visibility_visible() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.313.438-3.188 1.313C7.939 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.687 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.262-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962.05.083.083.188.1.313a2.925 2.925 0 0 1 0 .774.812.812 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Z"/>
</svg>
{% endmacro %}
{% macro web_browser() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill="currentColor" d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"/>
</svg>
{% endmacro %}

20
templates/components/scope.html
View File

@@ -15,24 +15,24 @@ limitations under the License.
#}
{% macro list(scopes) %}
<ul class="list-disc">
<ul>
{% for scope in scopes | split(pat=" ") %}
{% if scope == "openid" %}
<li>See your profile info and contact details</li>
<li>{{ icon::user() }}<p>See your profile info and contact details</p></li>
{% elif scope == "urn:mas:graphql:*" %}
<li>Edit your profile and contact details</li>
<li>Manage your devices and sessions</li>
<li>{{ icon::info() }}<p>Edit your profile and contact details</p></li>
<li>{{ icon::computer() }}<p>Manage your devices and sessions</p></li>
{% elif scope == "urn:matrix:org.matrix.msc2967.client:api:*" %}
<li>View your existing messages and data</li>
<li>Send new messages on your behalf</li>
<li>{{ icon::chat() }}<p>View your existing messages and data</p></li>
<li>{{ icon::check_circle() }}<p>Send new messages on your behalf</p></li>
{% elif scope == "urn:synapse:admin:*" %}
<li>Administer the Synapse homeserver</li>
<li>{{ icon::error() }}<p>Administer the Synapse homeserver</p></li>
{% elif scope == "urn:mas:graphql:admin" %}
<li>Administer any user on the MAS authentication server</li>
<li>{{ icon::error() }}<p>Administer any user on the MAS authentication server</p></li>
{% elif scope is matching("^urn:matrix:org.matrix.msc2967.client:device:") %}
{# <li>{{ scope }}</li> #}
{# We hide this scope #}
{% else %}
<li>{{ scope }}</li>
<li>{{ icon::info() }}<p>{{ scope }}</p></li>
{% endif %}
{% endfor %}
</ul>

96
templates/pages/consent.html
View File

@@ -17,61 +17,59 @@ limitations under the License.
{% extends "base.html" %}
{% block content %}
{% set client_name = client.client_name | default(value=client.client_id) %}
<section class="flex items-center justify-center flex-1">
<div class="w-96 m-2">
<form method="POST" class="grid grid-cols-1 gap-6">
<div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col">
<div class="text-center">
<div class="bg-white rounded w-16 h-16 overflow-hidden mx-auto">
{% if client.logo_uri %}
<img class="w-16 h-16" src="{{ client.logo_uri }}" />
{% endif %}
</div>
<h1 class="text-center font-medium"><a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a></h1>
<h1>at {{ grant.redirect_uri | simplify_url }}</h1>
<h1>wants to access your account</h1>
<div class="w-96 mx-2 my-8 flex flex-col gap-6">
<div class="flex flex-col gap-2 text-center">
{% if client.logo_uri %}
<div class="consent-client-icon image">
<img src="{{ client.logo_uri }}" />
</div>
<div class="flex items-center m-2">
<div class="px-4 flex-1">
<p>This will allow <a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a> to:</p>
<p class="my-2">
{{ scope::list(scopes=grant.scope) }}
</p>
<p class="font-semibold my-2">Make sure that you trust {{ client.client_name | default(value=client.client_id) }}.</p>
<p>
You may be sharing sensitive information with this site or app.
{% if client.policy_uri or client.tos_uri %}
Find out how {{ client.client_name }} 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 %}
{% endif %}
</p>
</div>
{% else %}
<div class="consent-client-icon generic">
{{ icon::web_browser() }}
</div>
</div>
{% endif %}
<h1 class="cpd-text-primary cpd-text-heading-xl-semibold"><a target="_blank" href="{{ client.client_uri }}">{{ client_name }}</a></h1>
<p class="cpd-text-secondary cpd-text-body-lg-regular"><span class="whitespace-nowrap">at {{ grant.redirect_uri | simplify_url }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
</div>
<div class="consent-scope-list">
{{ scope::list(scopes=grant.scope) }}
</div>
<div class="my-2 text-center cpd-text-body-md-regular">
<span class="font-semibold">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
You may be sharing sensitive information with this site or app.
{% if client.policy_uri or client.tos_uri %}
Find out how {{ client_name }} 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 %}
{% endif %}
</div>
<form method="POST" class="flex flex-col">
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
<div class="grid grid-cols-2 gap-4">
{{ back_to_client::link(
text="Cancel",
kind="destructive",
uri=grant.redirect_uri,
mode=grant.response_mode,
params=dict(error="access_denied", state=grant.state)
) }}
{{ button::button(text="Allow") }}
</div>
{{ button::button(text="Continue") }}
</form>
<div class="text-center mt-4">
{{ back_to_client::link(
text="Cancel",
kind="tertiary",
uri=grant.redirect_uri,
mode=grant.response_mode,
params=dict(error="access_denied", state=grant.state)
) }}
<div class="text-center">
Not {{ current_session.user.username }}?
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
</div>

46
templates/pages/sso.html
View File

@@ -17,32 +17,38 @@ limitations under the License.
{% extends "base.html" %}
{% block content %}
{% set client_name = login.redirect_uri | simplify_url %}
<section class="flex items-center justify-center flex-1">
<div class="w-96 m-2">
<form method="POST" class="grid grid-cols-1 gap-6">
<div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col">
<div class="text-center">
<h1 class="text-lg text-center font-medium">{{ login.redirect_uri | simplify_url }}</h1>
<h1>wants to access your account</h1>
<div class="w-96 mx-2 my-8 flex flex-col gap-6">
<div class="flex flex-col gap-2 text-center">
{% if client.logo_uri %}
<div class="consent-client-icon image">
<img src="{{ client.logo_uri }}" />
</div>
<div class="flex items-center m-2">
<div class="px-4 flex-1">
<p>This will allow it to:</p>
<p class="my-2">
{{ scope::list(scopes="openid urn:matrix:org.matrix.msc2967.client:api:*") }}
</p>
<p class="font-semibold my-2">Make sure that you trust it.</p>
</div>
{% else %}
<div class="consent-client-icon generic">
{{ icon::web_browser() }}
</div>
</div>
{% endif %}
<p class="cpd-text-secondary cpd-text-body-lg-regular"><span class="whitespace-nowrap">{{ client_name }}</span> wants to access your account. This will allow <span class="whitespace-nowrap">{{ client_name }}</span> to:</p>
</div>
<div class="consent-scope-list">
{{ scope::list(scopes="openid urn:matrix:org.matrix.msc2967.client:api:*") }}
</div>
<div class="my-2 text-center cpd-text-body-md-regular">
<span class="font-semibold">Make sure that you trust <span class="whitespace-nowrap">{{ client_name }}</span>.</span>
You may be sharing sensitive information with this site or app.
</div>
<form method="POST" class="flex flex-col">
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
{{ button::button(text="Allow") }}
{{ button::button(text="Continue") }}
</form>
<div class="text-center mt-4">
<div class="text-center">
Not {{ current_session.user.username }}?
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
</div>