From 841c812ffd4d58ef93c4e461755f6cc89eec6e18 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Fri, 20 Dec 2024 10:24:44 +0100 Subject: [PATCH] Tweak the login page to match the design --- .../src/components/Layout/Layout.module.css | 6 +- templates/base.html | 2 +- templates/pages/consent.html | 2 + templates/pages/device_consent.html | 2 + templates/pages/login.html | 112 +++++++++--------- 5 files changed, 69 insertions(+), 55 deletions(-) diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css index 7c589b52f..79347e4db 100644 --- a/frontend/src/components/Layout/Layout.module.css +++ b/frontend/src/components/Layout/Layout.module.css @@ -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); } diff --git a/templates/base.html b/templates/base.html index 116e7e272..51cb70dad 100644 --- a/templates/base.html +++ b/templates/base.html @@ -28,7 +28,7 @@ Please see LICENSE in the repository root for full details. {{ captcha.head() }} -
+
{% block content %}{% endblock content %} {% include "components/footer.html" %}
diff --git a/templates/pages/consent.html b/templates/pages/consent.html index 3a5593ac8..7b02f76da 100644 --- a/templates/pages/consent.html +++ b/templates/pages/consent.html @@ -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 %} diff --git a/templates/pages/device_consent.html b/templates/pages/device_consent.html index fd6563914..e8abbdb15 100644 --- a/templates/pages/device_consent.html +++ b/templates/pages/device_consent.html @@ -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 %} diff --git a/templates/pages/login.html b/templates/pages/login.html index e94a88d78..cf123ae80 100644 --- a/templates/pages/login.html +++ b/templates/pages/login.html @@ -12,27 +12,27 @@ Please see LICENSE in the repository root for full details. {% block content %}
- {% if features.password_login %} -
-
- {{ icon.user_profile_solid() }} +
+
+ {{ icon.user_profile_solid() }} +
+ + {% if next and next.kind == "link_upstream" %} +
+

{{ _("mas.login.link.headline") }}

+ {% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %} +

{{ _("mas.login.link.description", provider=name) }}

+ {% else %} +
+

{{ _("mas.login.headline") }}

+

{{ _("mas.login.description") }}

+
+ {% endif %} +
- {% if next and next.kind == "link_upstream" %} -
-

{{ _("mas.login.link.headline") }}

- {% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %} -

{{ _("mas.login.link.description", provider=name) }}

-
- {% else %} -
-

{{ _("mas.login.headline") }}

-

{{ _("mas.login.description") }}

-
- {% endif %} -
- -
+ +
{% if form.errors is not empty %} {% for error in form.errors %}
@@ -47,47 +47,47 @@ Please see LICENSE in the repository root for full details. {% endcall %} - {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %} - - {% endcall %} + {% if features.password_login %} + {% call(f) field.field(label=_("common.password"), name="password", form_state=form) %} + + {% 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 %} +
+ +
+ {% if features.password_login %} + {{ button.button(text=_("action.continue")) }} {% endif %} - {{ button.button(text=_("action.continue")) }} - - - {% if (not next or next.kind != "link_upstream") and features.password_registration %} -
-

- {{ _("mas.login.call_to_register") }} -

+ {% 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) }} -
- {% endif %} - {% endif %} + {% for provider in providers %} + {% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %} + + {{ logo(provider.brand_name) }} + {{ _("mas.login.continue_with_provider", provider=name) }} + + {% endfor %} + {% endif %} +
+ - {% if providers %} - {% if features.password_login %} - {{ field.separator() }} - {% endif %} + {% if (not next or next.kind != "link_upstream") and features.password_registration %} +
+

+ {{ _("mas.login.call_to_register") }} +

- {% 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 %} - - {{ logo(provider.brand_name) }} - {{ _("mas.login.continue_with_provider", provider=name) }} - - {% endfor %} - {% endif %} - - {% if not providers and not features.password_login %} -
- {{ _("mas.login.no_login_methods") }} + {% set params = next["params"] | default({}) | to_params(prefix="?") %} + {{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
{% 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 %} +
+ {{ _("mas.login.no_login_methods") }} +
+ {% endif %}
{% endblock content %}