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

Tweak the login page to match the design

Browse Source
This commit is contained in:
Quentin Gliech
2024-12-20 10:24:44 +01:00
parent a0b73fa222
commit 841c812ffd
5 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Layout/Layout.module.css
View File

@@ -10,7 +10,7 @@
display: flex;
flex-direction: column;
max-width: calc(420px + var(--cpd-space-5x) * 2);
max-width: calc(378px + var(--cpd-space-5x) * 2);
/* Fallback for browsers that do not support 100svh */
min-height: 100vh;
@@ -21,6 +21,10 @@
padding-block: var(--cpd-space-12x);
gap: var(--cpd-space-8x);
&.consent {
max-width: calc(460px + var(--cpd-space-5x) * 2);
}
&.wide {
max-width: calc(520px + var(--cpd-space-5x) * 2);
}

2
templates/base.html
View File

@@ -28,7 +28,7 @@ Please see LICENSE in the repository root for full details.
{{ captcha.head() }}
</head>
<body>
<div class="layout-container">
<div class="layout-container{% if consent_page %} consent{% endif %}">
{% block content %}{% endblock content %}
{% include "components/footer.html" %}
</div>

2
templates/pages/consent.html
View File

@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
-#}
{% set consent_page = true %}
{% extends "base.html" %}
{% block content %}

2
templates/pages/device_consent.html
View File

@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
-#}
{% set consent_page = true %}
{% extends "base.html" %}
{% block content %}

112
templates/pages/login.html
View File

@@ -12,27 +12,27 @@ Please see LICENSE in the repository root for full details.
{% block content %}
<main class="flex flex-col gap-10">
{% if features.password_login %}
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
</div>
{% if next and next.kind == "link_upstream" %}
<div class="header">
<h1 class="title">{{ _("mas.login.link.headline") }}</h1>
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
<p class="text">{{ _("mas.login.link.description", provider=name) }}</p>
</div>
{% else %}
<div class="header">
<h1 class="title">{{ _("mas.login.headline") }}</h1>
<p class="text">{{ _("mas.login.description") }}</p>
</div>
{% endif %}
</header>
{% if next and next.kind == "link_upstream" %}
<div class="header">
<h1 class="title">{{ _("mas.login.link.headline") }}</h1>
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
<p class="text">{{ _("mas.login.link.description", provider=name) }}</p>
</div>
{% else %}
<div class="header">
<h1 class="title">{{ _("mas.login.headline") }}</h1>
<p class="text">{{ _("mas.login.description") }}</p>
</div>
{% endif %}
</header>
<form method="POST" class="cpd-form-root">
<form method="POST" class="flex flex-col gap-10">
<div class="cpd-form-root">
{% if form.errors is not empty %}
{% for error in form.errors %}
<div class="text-critical font-medium">
@@ -47,47 +47,47 @@ Please see LICENSE in the repository root for full details.
<input {{ field.attributes(f) }} class="cpd-text-control" type="text" autocomplete="username" autocorrect="off" autocapitalize="off" required />
{% endcall %}
{% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
{% endcall %}
{% if features.password_login %}
{% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
{% endcall %}
{% if features.account_recovery %}
{{ button.link_text(text=_("mas.login.forgot_password"), href="/recover", class="self-center") }}
{% if features.account_recovery %}
{{ button.link_text(text=_("mas.login.forgot_password"), href="/recover", class="self-center") }}
{% endif %}
{% endif %}
</div>
<div class="cpd-form-root">
{% if features.password_login %}
{{ button.button(text=_("action.continue")) }}
{% endif %}
{{ button.button(text=_("action.continue")) }}
</form>
{% if (not next or next.kind != "link_upstream") and features.password_registration %}
<div class="flex gap-1 justify-center items-center cpd-text-body-md-regular">
<p class="cpd-text-secondary">
{{ _("mas.login.call_to_register") }}
</p>
{% if features.password_login and providers %}
{{ field.separator() }}
{% endif %}
{% if providers %}
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
{{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
</div>
{% endif %}
{% endif %}
{% for provider in providers %}
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
<a class="cpd-button {%- if provider.brand_name %} has-icon {%- endif %}" data-kind="secondary" data-size="lg" href="{{ ('/upstream/authorize/' ~ provider.id ~ params) | prefix_url }}">
{{ logo(provider.brand_name) }}
{{ _("mas.login.continue_with_provider", provider=name) }}
</a>
{% endfor %}
{% endif %}
</div>
</form>
{% if providers %}
{% if features.password_login %}
{{ field.separator() }}
{% endif %}
{% if (not next or next.kind != "link_upstream") and features.password_registration %}
<div class="flex gap-1 justify-center items-center cpd-text-body-md-regular">
<p class="cpd-text-secondary">
{{ _("mas.login.call_to_register") }}
</p>
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
{% for provider in providers %}
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
<a class="cpd-button {%- if provider.brand_name %} has-icon {%- endif %}" data-kind="secondary" data-size="lg" href="{{ ('/upstream/authorize/' ~ provider.id ~ params) | prefix_url }}">
{{ logo(provider.brand_name) }}
{{ _("mas.login.continue_with_provider", provider=name) }}
</a>
{% endfor %}
{% endif %}
{% if not providers and not features.password_login %}
<div class="text-center">
{{ _("mas.login.no_login_methods") }}
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
{{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
</div>
{% endif %}
@@ -101,5 +101,11 @@ Please see LICENSE in the repository root for full details.
params=dict(error="access_denied", state=next.grant.state)
) }}
{% endif %}
{% if not providers and not features.password_login %}
<div class="text-center">
{{ _("mas.login.no_login_methods") }}
</div>
{% endif %}
</main>
{% endblock content %}