You've already forked authentication-service
mirror of
https://github.com/matrix-org/matrix-authentication-service.git
synced 2025-07-29 22:01:14 +03:00
Core page wording and flow
Remove redundant buttons/links Make wording more directive Describe scope of access
This commit is contained in:
Hugh Nimmo-Smith
committed by
Quentin Gliech
Quentin Gliech
parent
be37b0db81
commit
d0ec744b33
45
crates/templates/src/res/account-base.html
Normal file
45
crates/templates/src/res/account-base.html
Normal file
@ -0,0 +1,45 @@
|
||||
{#
|
||||
Copyright 2021 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.
|
||||
#}
|
||||
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<nav class="container mx-auto py-2 flex-initial flex items-center px-2" role="navigation" aria-label="main navigation">
|
||||
{% block navbar_start %}{% endblock navbar_start %}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{% block navbar_end %}
|
||||
<div class="grid grid-flow-col auto-cols-max gap-4 place-items-center">
|
||||
{% if current_session %}
|
||||
<div class="text-grey-200 dark:text-grey-250 mx-2">
|
||||
Logged in as <span class="font-bold">{{ current_session.user.username }}</span>.
|
||||
</div>
|
||||
|
||||
{{ button::link(text="My account", href="/account") }}
|
||||
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{{ button::button_ghost(text="Sign out", name="logout", type="submit") }}
|
||||
</form>
|
||||
{% else %}
|
||||
{{ button::link(text="Sign in", href="/login") }}
|
||||
{{ button::link_ghost(text="Create an account", href="/register") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock navbar_end %}
|
||||
</nav>
|
||||
{% endblock content %}
|
||||
@ -27,32 +27,6 @@ limitations under the License.
|
||||
<link rel="stylesheet" href="/tailwind.css">
|
||||
</head>
|
||||
<body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
|
||||
<nav class="container mx-auto py-2 flex-initial flex items-center px-2" role="navigation" aria-label="main navigation">
|
||||
{% block navbar_start %}{% endblock navbar_start %}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{% block navbar_end %}
|
||||
<div class="grid grid-flow-col auto-cols-max gap-4 place-items-center">
|
||||
{% if current_session %}
|
||||
<div class="text-grey-200 dark:text-grey-250 mx-2">
|
||||
Logged in as <span class="font-bold">{{ current_session.user.username }}</span>.
|
||||
</div>
|
||||
|
||||
{{ button::link(text="My account", href="/account") }}
|
||||
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{{ button::button_ghost(text="Log out", name="logout", type="submit") }}
|
||||
</form>
|
||||
{% else %}
|
||||
{{ button::link(text="Sign in", href="/login") }}
|
||||
{{ button::link_ghost(text="Register", href="/register") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock navbar_end %}
|
||||
</nav>
|
||||
|
||||
{% block content %}{% endblock content %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% extends "account-base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
{% if current_session.user.primary_email %}
|
||||
{% set primary_email = current_session.user.primary_email.email %}
|
||||
{% else %}
|
||||
|
||||
@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% extends "account-base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 p-2">
|
||||
<div class="rounded border-2 border-grey-50 dark:border-grey-450 p-4 grid gap-4 xl:grid-cols-2 grid-cols-1 place-content-start">
|
||||
<h1 class="text-2xl font-bold xl:col-span-2">Manage my account</h1>
|
||||
|
||||
@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% extends "account-base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<section class="container mx-auto grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 p-2">
|
||||
<form class="rounded border-2 border-grey-50 dark:border-grey-450 p-4 grid gap-4 xl:grid-cols-2 grid-cols-1 place-content-start" method="POST">
|
||||
<h2 class="text-xl font-bold xl:col-span-2">Change my password</h2>
|
||||
|
||||
@ -16,81 +16,81 @@ limitations under the License.
|
||||
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block navbar_start %}
|
||||
{{ back_to_client::link(
|
||||
text="← Back",
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="flex items-center justify-center flex-1">
|
||||
<form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
|
||||
<div class="text-center">
|
||||
<h1 class="text-lg text-center font-medium">Authorize <em>{{ grant.client.client_name | default(value=grant.client.client_id) }}</em></h1>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-grey-25 dark:bg-grey-450 p-2 flex flex-col">
|
||||
<div class="flex items-center m-2">
|
||||
<div class="bg-white rounded w-16 h-16 overflow-hidden">
|
||||
{% if grant.client.logo_uri %}
|
||||
<img class="w-16 h-16" src="{{ grant.client.logo_uri }}" />
|
||||
{% endif %}
|
||||
<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 grant.client.logo_uri %}
|
||||
<img class="w-16 h-16" src="{{ grant.client.logo_uri }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<h1 class="text-lg text-center font-medium"><a target="_blank" href="{{ grant.client.client_uri }}" class="text-accent">{{ grant.client.client_name | default(value=grant.client.client_id) }}</a></h1>
|
||||
<h1>at {{ grant.redirect_uri }}</h1>
|
||||
<h1>wants to access your Matrix account</h1>
|
||||
</div>
|
||||
<div class="px-4 flex-1">
|
||||
<div class="text-xl font-medium leading-6">
|
||||
{{ grant.client.client_name }}
|
||||
</div>
|
||||
<div class="flex items-center m-2">
|
||||
<div class="px-4 flex-1">
|
||||
<p>This will allow <a target="_blank" href="{{ grant.client.client_uri }}" class="text-accent">{{ grant.client.client_name | default(value=grant.client.client_id) }}</a> to:</p>
|
||||
|
||||
{% if grant.client.client_uri %}
|
||||
<div class="underline text-sm leading-6">
|
||||
<a target="_blank" href="{{ grant.client.client_uri }}">{{ grant.client.client_uri }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<p class="my-2">
|
||||
<ul class="list-disc">
|
||||
{% for scope in grant.scope | split(pat=" ") %}
|
||||
{% if scope == "openid" %}
|
||||
<li>See your profile info and contact details</li>
|
||||
{% elif scope is matching("^urn:matrix:device:") %}
|
||||
<li>View your existing messages and data</li>
|
||||
<li>Send new messages on your behalf</li>
|
||||
{% else %}
|
||||
<li>{{ scope }}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</p>
|
||||
<p class="font-bold my-2">Make sure that you trust {{ grant.client.client_name }}</p>
|
||||
<p>
|
||||
You may be sharing sensitive information with this site or app.
|
||||
{% if grant.client.policy_uri or grant.client.tos_uri %}
|
||||
Find out how {{ grant.client.client_name }} will handle your data by reviewing it's
|
||||
{% if grant.client.policy_uri %}
|
||||
<a target="_blank" href="{{ grant.client.policy_uri }}" class="text-accent">privacy policy</a>{% if not grant.client.tos_uri %}.{% endif %}
|
||||
{% endif %}
|
||||
{% if grant.client.policy_uri and grant.client.tos_uri%}
|
||||
and
|
||||
{% endif %}
|
||||
{% if grant.client.tos_uri %}
|
||||
<a target="_blank" href="{{ grant.client.tos_uri }}" class="text-accent">terms of service</a>.
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if grant.client.policy_uri or grant.client.tos_uri %}
|
||||
<div class="flex my-2">
|
||||
{% if grant.client.policy_uri %}
|
||||
{{ button::link_ghost(href=grant.client.policy_uri, text="Privacy policy", class="flex-auto mx-2") }}
|
||||
{% endif %}
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
|
||||
{% if grant.client.tos_uri %}
|
||||
{{ button::link_ghost(href=grant.client.tos_uri, text="Terms of services", class="flex-auto mx-2") }}
|
||||
{% endif %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
) }}
|
||||
{{ button::button(text="Allow") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
<div class="text-center mt-4">
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
<div>
|
||||
Not {{ current_session.user.username }}?
|
||||
{{ button::button_text(text="Sign out", name="logout", type="submit") }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>Scope: {{ grant.scope }}</div>
|
||||
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ button::button(text="Allow") }}
|
||||
|
||||
{{ back_to_client::link(
|
||||
text="Deny",
|
||||
class=button::plain_error_class(),
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
) }}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="self-center my-6">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=grant.redirect_uri,
|
||||
mode=grant.response_mode,
|
||||
params=dict(error="access_denied", state=grant.state)
|
||||
) }}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
#}
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% extends "account-base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{{ super() }}
|
||||
<section class="flex-1 flex flex-col items-center justify-center">
|
||||
<div>
|
||||
<h1 class="my-2 text-5xl font-extrabold leading-tight">Matrix Authentication Service</h1>
|
||||
|
||||
@ -34,30 +34,32 @@ limitations under the License.
|
||||
<form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
|
||||
<div class="text-center">
|
||||
<h1 class="text-lg text-center font-medium">Sign in</h1>
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<p>to continue to <em>{{ next.grant.client.client_name | default(value=next.grand.client.client_id) }}</em></p>
|
||||
{% else %}
|
||||
<p>Use your existing account</p>
|
||||
{% endif %}
|
||||
<p>Please sign in to continue:</p>
|
||||
</div>
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{# TODO: errors #}
|
||||
{{ field::input(label="Username", name="username") }}
|
||||
{{ field::input(label="Password", name="password", type="password") }}
|
||||
{{ button::button(text="Next") }}
|
||||
{{ button::link_text(text="Create account", href=register_link) }}
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="text-center mt-4">
|
||||
Don't have an account yet?
|
||||
{{ button::link_text(text="Create an account", href=register_link) }}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<section class="self-center my-6">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
||||
@ -16,32 +16,47 @@ limitations under the License.
|
||||
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block navbar_start %}
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
{{ back_to_client::link(
|
||||
text="← Back",
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="flex items-center justify-center flex-1">
|
||||
<form method="POST" class="grid grid-cols-1 gap-6 w-96 m-4">
|
||||
<div class="text-center">
|
||||
<h1 class="text-lg text-center font-medium">Hi {{ current_session.user.username }}</h1>
|
||||
<p>To continue, first verify it's you:</p>
|
||||
<div class="w-96 m-4">
|
||||
<form method="POST" class="grid grid-cols-1 gap-6">
|
||||
<div class="text-center">
|
||||
<h1 class="text-lg text-center font-medium">Hi {{ current_session.user.username }}</h1>
|
||||
<p>To continue, please verify it's you:</p>
|
||||
</div>
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{# TODO: errors #}
|
||||
{{ field::input(label="Password", name="password", type="password") }}
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
<div class="text-center mt-4">
|
||||
<form method="POST" action="/logout">
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
<div>
|
||||
Not {{ current_session.user.username }}?
|
||||
{{ button::button_text(text="Sign out", name="logout", type="submit") }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{# TODO: errors #}
|
||||
{{ field::input(label="Password", name="password", type="password") }}
|
||||
{{ button::button(text="Next") }}
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<!-- <div class="flex justify-center">
|
||||
<div class="w-96 m-2">
|
||||
<h3 class="title is-3">Current session data:</h3>
|
||||
<pre class="text-sm whitespace-pre-wrap"><code>{{ current_session | json_encode(pretty=True) | safe }}</code></pre>
|
||||
@ -52,18 +67,6 @@ limitations under the License.
|
||||
<pre class="text-sm whitespace-pre-wrap"><code>{{ next | json_encode(pretty=True) | safe }}</code></pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<section class="self-center my-6">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
</section>
|
||||
{% endif %}
|
||||
</div> -->
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
@ -33,31 +33,37 @@ limitations under the License.
|
||||
<section class="flex items-center justify-center flex-1">
|
||||
<form method="POST" class="grid grid-cols-1 gap-6 w-96">
|
||||
<div class="text-center">
|
||||
<h1 class="text-lg text-center font-medium">Create your account</h1>
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<p>to continue to <em>{{ next.grant.client.client_name | default(value=next.grand.client.client_id) }}</em></p>
|
||||
{% endif %}
|
||||
<h1 class="text-lg text-center font-medium">Create an account</h1>
|
||||
<p>Please create an account to get started:</p>
|
||||
</div>
|
||||
<input type="hidden" name="csrf" value="{{ csrf_token }}" />
|
||||
{# TODO: errors #}
|
||||
{{ field::input(label="Username", name="username") }}
|
||||
{{ field::input(label="Password", name="password", type="password") }}
|
||||
{{ field::input(label="Confirm Password", name="password_confirm", type="password") }}
|
||||
{{ button::button(text="Next") }}
|
||||
{# TODO: proper link #}
|
||||
{{ button::link_text(text="Sign in instead", href=login_link) }}
|
||||
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{{ button::button(text="Next") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="text-center mt-4">
|
||||
Already have an account?
|
||||
{# TODO: proper link #}
|
||||
{{ button::link_text(text="Sign in instead", href=login_link) }}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{% if next and next.kind == "continue_authorization_grant" %}
|
||||
<section class="self-center my-6">
|
||||
{{ back_to_client::link(
|
||||
text="Cancel",
|
||||
class=button::text_class(),
|
||||
uri=next.grant.redirect_uri,
|
||||
mode=next.grant.response_mode,
|
||||
params=dict(error="access_denied", state=next.grant.state)
|
||||
) }}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user