You've already forked authentication-service
mirror of
https://github.com/matrix-org/matrix-authentication-service.git
synced 2025-07-31 09:24:31 +03:00
Compoundify the templates
This commit is contained in:
@ -13,9 +13,18 @@
|
||||
// limitations under the License.
|
||||
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { lazy, useEffect } from "react";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import LoadingSpinner from "../components/LoadingSpinner";
|
||||
import BrowserSession from "../pages/BrowserSession";
|
||||
import BrowserSessionList from "../pages/BrowserSessionList";
|
||||
import CompatSessionList from "../pages/CompatSessionList";
|
||||
import OAuth2Client from "../pages/OAuth2Client";
|
||||
import OAuth2SessionList from "../pages/OAuth2SessionList";
|
||||
import Profile from "../pages/Profile";
|
||||
import SessionDetail from "../pages/SessionDetail";
|
||||
import SessionsOverview from "../pages/SessionsOverview";
|
||||
import VerifyEmail from "../pages/VerifyEmail";
|
||||
|
||||
import { getRouteActionRedirection } from "./actions";
|
||||
import { locationAtom, routeAtom } from "./atoms";
|
||||
@ -42,16 +51,6 @@ const useRouteWithRedirect = (): [Route, boolean] => {
|
||||
return [route, redirecting];
|
||||
};
|
||||
|
||||
const SessionsOverview = lazy(() => import("../pages/SessionsOverview"));
|
||||
const SessionDetail = lazy(() => import("../pages/SessionDetail"));
|
||||
const Profile = lazy(() => import("../pages/Profile"));
|
||||
const OAuth2Client = lazy(() => import("../pages/OAuth2Client"));
|
||||
const BrowserSession = lazy(() => import("../pages/BrowserSession"));
|
||||
const BrowserSessionList = lazy(() => import("../pages/BrowserSessionList"));
|
||||
const CompatSessionList = lazy(() => import("../pages/CompatSessionList"));
|
||||
const OAuth2SessionList = lazy(() => import("../pages/OAuth2SessionList"));
|
||||
const VerifyEmail = lazy(() => import("../pages/VerifyEmail"));
|
||||
|
||||
const Router: React.FC = () => {
|
||||
const [route, redirecting] = useRouteWithRedirect();
|
||||
|
||||
|
127
frontend/src/styles/cpd-button.css
Normal file
127
frontend/src/styles/cpd-button.css
Normal file
@ -0,0 +1,127 @@
|
||||
/* 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.
|
||||
*/
|
||||
|
||||
.cpd-button {
|
||||
display: block;
|
||||
text-align: center;
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.cpd-button[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* SIZES
|
||||
*/
|
||||
|
||||
.cpd-button[data-size="lg"] {
|
||||
font: var(--cpd-font-body-lg-semibold);
|
||||
padding: var(--cpd-space-3x) var(--cpd-space-10x);
|
||||
}
|
||||
|
||||
.cpd-button[data-size="sm"] {
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
padding: var(--cpd-space-1x) var(--cpd-space-6x);
|
||||
}
|
||||
|
||||
/**
|
||||
* KINDS
|
||||
*/
|
||||
|
||||
.cpd-button[data-kind="primary"] {
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
background: var(--cpd-color-bg-action-primary-rest);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="primary"]:hover {
|
||||
background: var(--cpd-color-bg-action-primary-hovered);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="primary"]:active {
|
||||
background: var(--cpd-color-bg-action-primary-pressed);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="primary"][disabled] {
|
||||
color: var(--cpd-color-text-disabled);
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="secondary"] {
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="secondary"]:hover {
|
||||
border-color: var(--cpd-color-border-interactive-hovered);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="secondary"]:active {
|
||||
border-color: var(--cpd-color-border-interactive-hovered);
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="secondary"][disabled] {
|
||||
border-color: var(--cpd-color-border-interactive-secondary);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="tertiary"] {
|
||||
border: none;
|
||||
color: var(--cpd-color-text-primary);
|
||||
text-decoration: underline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="tertiary"]:hover {
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="tertiary"]:active {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="tertiary"][disabled] {
|
||||
color: var(--cpd-color-text-disabled);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="destructive"] {
|
||||
border: 1px solid var(--cpd-color-border-critical-primary);
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="destructive"]:hover {
|
||||
border-color: var(--cpd-color-border-critical-hovered);
|
||||
background: var(--cpd-color-bg-critical-subtle);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="destructive"]:active {
|
||||
border-color: var(--cpd-color-border-critical-hovered);
|
||||
background: var(--cpd-color-bg-critical-subtle-hovered);
|
||||
}
|
||||
|
||||
.cpd-button[data-kind="destructive"][disabled] {
|
||||
border-color: var(--cpd-color-border-interactive-secondary);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
51
frontend/src/styles/cpd-link.css
Normal file
51
frontend/src/styles/cpd-link.css
Normal file
@ -0,0 +1,51 @@
|
||||
/* 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.
|
||||
*/
|
||||
|
||||
.cpd-link {
|
||||
display: inline-block;
|
||||
text-decoration: underline;
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-weight: var(--cpd-font-weight-medium);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="primary"] {
|
||||
color: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="critical"] {
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="primary"]:hover {
|
||||
background: var(--cpd-color-gray-300);
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="critical"]:hover {
|
||||
background: var(--cpd-color-red-300);
|
||||
}
|
||||
|
||||
.cpd-link:active {
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="primary"]:active {
|
||||
background: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
.cpd-link[data-kind="critical"]:active {
|
||||
background: var(--cpd-color-text-critical-primary);
|
||||
}
|
@ -19,9 +19,20 @@
|
||||
@import "@fontsource/inter/700.css";
|
||||
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
|
||||
@import "@vector-im/compound-web/dist/style.css";
|
||||
@import "./styles/cpd-button.css";
|
||||
@import "./styles/cpd-link.css";
|
||||
|
||||
@config "../tailwind.templates.config.cjs";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
/* XXX: I'm unsure why this is not part of the tokens */
|
||||
--cpd-radius-pill-effect: 9999px;
|
||||
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
@ -36,9 +36,10 @@ export default defineConfig((env) => ({
|
||||
assetsInlineLimit: 0,
|
||||
sourcemap: true,
|
||||
modulePreload: false,
|
||||
// We don't handle CSS code splitting well yet, so we disable it for now
|
||||
// This means we have to load all the CSS through the `style.css` virtual entrypoint
|
||||
cssCodeSplit: false,
|
||||
|
||||
// We don't exactly handle CSS code splitting well if we're lazy loading components.
|
||||
// We disabled lazy loading for now, but we should fix this at some point.
|
||||
cssCodeSplit: true,
|
||||
|
||||
rollupOptions: {
|
||||
input: [
|
||||
|
@ -28,9 +28,9 @@ limitations under the License.
|
||||
const query = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
function handleChange(list) {
|
||||
if (list.matches) {
|
||||
document.documentElement.classList.add("dark");
|
||||
document.documentElement.classList.add("cpd-theme-dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
document.documentElement.classList.remove("cpd-theme-dark");
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,6 @@ limitations under the License.
|
||||
handleChange(query);
|
||||
})();
|
||||
</script>
|
||||
{{ include_asset(path='style.css') | indent(prefix=" ") | safe }}
|
||||
{{ include_asset(path='src/main.tsx') | indent(prefix=" ") | safe }}
|
||||
</head>
|
||||
|
||||
|
@ -28,10 +28,9 @@ 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='style.css') | indent(prefix=" ") | safe }}
|
||||
{{ include_asset(path='src/templates.css') | indent(prefix=" ") | safe }}
|
||||
</head>
|
||||
<body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
|
||||
<body class="flex flex-col min-h-screen">
|
||||
{% block content %}{% endblock content %}
|
||||
</body>
|
||||
</html>
|
||||
|
@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% macro link(text, class="", uri, mode, params) %}
|
||||
{% macro link(text, uri, mode, params, kind="primary") %}
|
||||
{% if mode == "form_post" %}
|
||||
<form method="post" action="{{ uri }}">
|
||||
{% for key, value in params %}
|
||||
<input type="hidden" name="{{ key }}" value="{{ value }}" />
|
||||
{% endfor %}
|
||||
<button class="{{ class }}" type="submit">{{ text }}</button>
|
||||
<button class="cpd-button" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
|
||||
</form>
|
||||
{% elif mode == "fragment" or mode == "query" %}
|
||||
<a class="{{ class }}" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
|
||||
<a class="cpd-button" 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 %}
|
||||
|
@ -1,5 +1,5 @@
|
||||
{#
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2021-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.
|
||||
@ -14,40 +14,16 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% macro common_class() -%}
|
||||
px-4 py-2 border-2 rounded-lg font-medium text-center focus:ring-0 focus:outline-0 focus:border-black dark:focus:border-white
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro plain_error_class() -%}
|
||||
{{ self::common_class() }} border-alert bg-alert text-white hover:opacity-75
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro outline_error_class() -%}
|
||||
{{ self::common_class() }} border-alert text-alert hover:bg-alert/10
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro plain_class() -%}
|
||||
{{ self::common_class() }} border-accent bg-accent text-white hover:opacity-75
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro outline_class() -%}
|
||||
{{ self::common_class() }} border-accent hover:bg-accent/10 text-accent
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro text_class() -%}
|
||||
{{ self::common_class() }} border-transparent hover:text-accent/70 text-accent
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro link(text, href="#", class="") %}
|
||||
<a class="{{ self::plain_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
|
||||
<a class="cpd-button {{ class }}" data-kind="primary" data-size="lg" href="{{ href }}">{{ text }}</a>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro link_text(text, href="#", class="") %}
|
||||
<a class="{{ self::text_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
|
||||
<a class="cpd-link {{ class }}" data-kind="primary" href="{{ href }}">{{ text }}</a>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro link_outline(text, href="#", class="") %}
|
||||
<a class="{{ self::outline_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
|
||||
<a class="cpd-button {{ class }}" data-kind="secondary" data-size="lg" href="{{ href }}">{{ text }}</a>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro button(
|
||||
@ -65,7 +41,9 @@ limitations under the License.
|
||||
value="{{ value }}"
|
||||
type="{{ type }}"
|
||||
{% if disabled %}disabled{% endif %}
|
||||
class="{{ self::plain_class() }} {{ class }}"
|
||||
class="cpd-button {{ class }}"
|
||||
data-kind="primary"
|
||||
data-size="lg"
|
||||
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
|
||||
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
|
||||
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
|
||||
@ -87,7 +65,8 @@ limitations under the License.
|
||||
value="{{ value }}"
|
||||
type="{{ type }}"
|
||||
{% if disabled %}disabled{% endif %}
|
||||
class="{{ self::text_class() }} {{ class }}"
|
||||
data-kind="primary"
|
||||
class="cpd-link {{ class }}"
|
||||
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
|
||||
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
|
||||
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
|
||||
@ -108,10 +87,12 @@ limitations under the License.
|
||||
name="{{ name }}"
|
||||
value="{{ value }}"
|
||||
type="{{ type }}"
|
||||
class="cpd-button {{ class }}"
|
||||
data-kind="secondary"
|
||||
data-size="lg"
|
||||
{% if disabled %}disabled{% endif %}
|
||||
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
|
||||
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
|
||||
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
|
||||
class="{{ self::outline_class() }} {{ class }}"
|
||||
>{{ text }}</button>
|
||||
{% endmacro %}
|
||||
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% macro button(text, class="", csrf_token, post_logout_action=false) %}
|
||||
{% macro button(text, csrf_token, as_link=false, post_logout_action=false) %}
|
||||
<form method="POST" action="/logout" class="inline">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{% if post_logout_action %}
|
||||
@ -22,7 +22,7 @@ limitations under the License.
|
||||
<input type="hidden" name="{{ key }}" value="{{ value }}" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<button class="{{ class }}" type="submit">{{ text }}</button>
|
||||
<button class="{% if as_link %}cpd-link{% else %}cpd-button{% endif %}" data-kind="critical" type="submit">{{ text }}</button>
|
||||
</form>
|
||||
{% endmacro %}
|
||||
|
||||
|
@ -25,7 +25,7 @@ limitations under the License.
|
||||
</div>
|
||||
|
||||
{{ button::link(text="My account", href="/account/") }}
|
||||
{{ logout::button(text="Sign out", class=button::outline_class(), csrf_token=csrf_token) }}
|
||||
{{ logout::button(text="Sign out", csrf_token=csrf_token) }}
|
||||
{% else %}
|
||||
{{ button::link(text="Sign in", href="/login") }}
|
||||
{{ button::link_outline(text="Create an account", href="/register") }}
|
||||
|
@ -27,13 +27,13 @@ limitations under the License.
|
||||
<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="text-accent">{{ client.client_name | default(value=client.client_id) }}</a></h1>
|
||||
<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>
|
||||
<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="text-accent">{{ client.client_name | default(value=client.client_id) }}</a> to:</p>
|
||||
<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) }}
|
||||
@ -44,13 +44,13 @@ limitations under the License.
|
||||
{% if client.policy_uri or client.tos_uri %}
|
||||
Find out how {{ client.client_name }} will handle your data by reviewing it's
|
||||
{% if client.policy_uri %}
|
||||
<a target="_blank" href="{{ client.policy_uri }}" class="text-accent">privacy policy</a>{% if not client.tos_uri %}.{% endif %}
|
||||
<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="text-accent">terms of service</a>.
|
||||
<a target="_blank" href="{{ client.tos_uri }}" class="cpd-link" data-kind="primary">terms of service</a>.
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
@ -63,7 +63,7 @@ limitations under the License.
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::outline_error_class(),
|
||||
kind="destructive",
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
@ -73,7 +73,7 @@ limitations under the License.
|
||||
</form>
|
||||
<div class="text-center mt-4">
|
||||
Not {{ current_session.user.username }}?
|
||||
{{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=action) }}
|
||||
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -47,7 +47,7 @@ limitations under the License.
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::outline_error_class(),
|
||||
kind="destructive",
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
|
@ -25,10 +25,10 @@ limitations under the License.
|
||||
<div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex items-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 }}" />
|
||||
<img crossorigin="anonymous" class="w-16 h-16" src="{{ client.logo_uri }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<h1 class="text-lg text-center font-medium flex-1"><a target="_blank" href="{{ client.client_uri }}" class="text-accent">{{ client.client_name | default(value=client.client_id) }}</a></h1>
|
||||
<h1 class="text-lg text-center font-medium flex-1"><a target="_blank" href="{{ client.client_uri }}" class="cpd-link" data-kind="primary">{{ client.client_name | default(value=client.client_id) }}</a></h1>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex items-center">
|
||||
@ -36,12 +36,12 @@ limitations under the License.
|
||||
Logged as <span class="font-semibold">{{ current_session.user.username }}</span>
|
||||
</div>
|
||||
|
||||
{{ logout::button(text="Sign out", class=button::plain_error_class(), csrf_token=csrf_token, post_logout_action=action) }}
|
||||
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action) }}
|
||||
</div>
|
||||
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::outline_error_class(),
|
||||
kind="destructive",
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
|
@ -31,7 +31,7 @@ limitations under the License.
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::outline_error_class(),
|
||||
kind="destructive",
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
@ -47,7 +47,7 @@ limitations under the License.
|
||||
<div class="text-center mt-4">
|
||||
Not {{ current_session.user.username }}?
|
||||
{% set post_logout_action = next | safe_get(key="params") %}
|
||||
{{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=post_logout_action) }}
|
||||
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=post_logout_action, as_link=true) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -41,7 +41,7 @@ limitations under the License.
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::outline_error_class(),
|
||||
kind="destructive",
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
|
@ -44,7 +44,7 @@ limitations under the License.
|
||||
</form>
|
||||
<div class="text-center mt-4">
|
||||
Not {{ current_session.user.username }}?
|
||||
{{ logout::button(text="Sign out", class=button::text_class(), csrf_token=csrf_token, post_logout_action=action) }}
|
||||
{{ logout::button(text="Sign out", csrf_token=csrf_token, post_logout_action=action, as_link=true) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -24,7 +24,7 @@ limitations under the License.
|
||||
This upstream account is already linked to another account.
|
||||
</h1>
|
||||
|
||||
<div>{{ logout::button(text="Logout", class=button::outline_class(), csrf_token=csrf_token) }}</div>
|
||||
<div>{{ logout::button(text="Logout", csrf_token=csrf_token) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
@ -31,7 +31,7 @@ limitations under the License.
|
||||
{{ button::button(text="Link", class="flex-1") }}
|
||||
</form>
|
||||
|
||||
<div>Or {{ logout::button(text="Logout", class=button::outline_class(), csrf_token=csrf_token, post_logout_action=post_logout_action) }}</div>
|
||||
<div>Or {{ logout::button(text="Logout", csrf_token=csrf_token, post_logout_action=post_logout_action, as_link=true) }}</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
Reference in New Issue
Block a user