Skip to content

Commit b51a6c0

Browse files
sandhosesandhose
committed
Tweak the login page to match the design
1 parent aaa842e commit b51a6c0

File tree

5 files changed

+68
-54
lines changed

5 files changed

+68
-54
lines changed

‎frontend/src/components/Layout/Layout.module.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
flex-direction: column;
1212

13-
max-width: calc(420px + var(--cpd-space-5x) * 2);
13+
max-width: calc(378px + var(--cpd-space-5x) * 2);
1414

1515
/* Fallback for browsers that do not support 100svh */
1616
min-height: 100vh;
@@ -21,6 +21,10 @@
2121
padding-block: var(--cpd-space-12x);
2222
gap: var(--cpd-space-8x);
2323

24+
&.consent {
25+
max-width: calc(460px + var(--cpd-space-5x) * 2);
26+
}
27+
2428
&.wide {
2529
max-width: calc(520px + var(--cpd-space-5x) * 2);
2630
}

‎templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
{{ captcha.head() }}
2929
</head>
3030
<body>
31-
<div class="layout-container">
31+
<div class="layout-container{% if consent_page %} consent{% endif %}">
3232
{% block content %}{% endblock content %}
3333
{% include "components/footer.html" %}
3434
</div>

‎templates/pages/consent.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
Please see LICENSE in the repository root for full details.
77
-#}
88

9+
{% set consent_page = true %}
10+
911
{% extends "base.html" %}
1012

1113
{% block content %}

‎templates/pages/device_consent.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
Please see LICENSE in the repository root for full details.
77
-#}
88

9+
{% set consent_page = true %}
10+
911
{% extends "base.html" %}
1012

1113
{% block content %}

‎templates/pages/login.html‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,27 @@
1212

1313
{% block content %}
1414
<main class="flex flex-col gap-10">
15-
{% if features.password_login %}
16-
<header class="page-heading">
17-
<div class="icon">
18-
{{ icon.user_profile_solid() }}
19-
</div>
15+
<header class="page-heading">
16+
<div class="icon">
17+
{{ icon.user_profile_solid() }}
18+
</div>
2019

21-
{% if next and next.kind == "link_upstream" %}
22-
<div class="header">
23-
<h1 class="title">{{ _("mas.login.link.headline") }}</h1>
24-
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
25-
<p class="text">{{ _("mas.login.link.description", provider=name) }}</p>
26-
</div>
27-
{% else %}
28-
<div class="header">
29-
<h1 class="title">{{ _("mas.login.headline") }}</h1>
30-
<p class="text">{{ _("mas.login.description") }}</p>
31-
</div>
32-
{% endif %}
33-
</header>
20+
{% if next and next.kind == "link_upstream" %}
21+
<div class="header">
22+
<h1 class="title">{{ _("mas.login.link.headline") }}</h1>
23+
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
24+
<p class="text">{{ _("mas.login.link.description", provider=name) }}</p>
25+
</div>
26+
{% else %}
27+
<div class="header">
28+
<h1 class="title">{{ _("mas.login.headline") }}</h1>
29+
<p class="text">{{ _("mas.login.description") }}</p>
30+
</div>
31+
{% endif %}
32+
</header>
3433

35-
<form method="POST" class="cpd-form-root">
34+
<form method="POST" class="flex flex-col gap-10">
35+
<div class="cpd-form-root">
3636
{% if form.errors is not empty %}
3737
{% for error in form.errors %}
3838
<div class="text-critical font-medium">
@@ -47,47 +47,47 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
4747
<input {{ field.attributes(f) }} class="cpd-text-control" type="text" autocomplete="username" autocorrect="off" autocapitalize="off" required />
4848
{% endcall %}
4949

50-
{% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
51-
<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
52-
{% endcall %}
50+
{% if features.password_login %}
51+
{% call(f) field.field(label=_("common.password"), name="password", form_state=form) %}
52+
<input {{ field.attributes(f) }} class="cpd-text-control" type="password" autocomplete="password" required />
53+
{% endcall %}
5354

54-
{% if features.account_recovery %}
55-
{{ button.link_text(text=_("mas.login.forgot_password"), href="/recover", class="self-center") }}
55+
{% if features.account_recovery %}
56+
{{ button.link_text(text=_("mas.login.forgot_password"), href="/recover", class="self-center") }}
57+
{% endif %}
5658
{% endif %}
59+
</div>
5760

58-
{{ button.button(text=_("action.continue")) }}
59-
</form>
61+
<div class="cpd-form-root">
62+
{% if features.password_login %}
63+
{{ button.button(text=_("action.continue")) }}
64+
{% endif %}
6065

61-
{% if (not next or next.kind != "link_upstream") and features.password_registration %}
62-
<div class="flex gap-1 justify-center items-center cpd-text-body-md-regular">
63-
<p class="cpd-text-secondary">
64-
{{ _("mas.login.call_to_register") }}
65-
</p>
66+
{% if features.password_login and providers %}
67+
{{ field.separator() }}
68+
{% endif %}
6669

70+
{% if providers %}
6771
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
68-
{{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
69-
</div>
70-
{% endif %}
71-
{% endif %}
72-
73-
{% if providers %}
74-
{% if features.password_login %}
75-
{{ field.separator() }}
76-
{% endif %}
72+
{% for provider in providers %}
73+
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
74+
<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 }}">
75+
{{ logo(provider.brand_name) }}
76+
{{ _("mas.login.continue_with_provider", provider=name) }}
77+
</a>
78+
{% endfor %}
79+
{% endif %}
80+
</div>
81+
</form>
7782

78-
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
79-
{% for provider in providers %}
80-
{% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
81-
<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 }}">
82-
{{ logo(provider.brand_name) }}
83-
{{ _("mas.login.continue_with_provider", provider=name) }}
84-
</a>
85-
{% endfor %}
86-
{% endif %}
83+
{% if (not next or next.kind != "link_upstream") and features.password_registration %}
84+
<div class="flex gap-1 justify-center items-center cpd-text-body-md-regular">
85+
<p class="cpd-text-secondary">
86+
{{ _("mas.login.call_to_register") }}
87+
</p>
8788

88-
{% if not providers and not features.password_login %}
89-
<div class="text-center">
90-
{{ _("mas.login.no_login_methods") }}
89+
{% set params = next["params"] | default({}) | to_params(prefix="?") %}
90+
{{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
9191
</div>
9292
{% endif %}
9393

@@ -101,5 +101,11 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
101101
params=dict(error="access_denied", state=next.grant.state)
102102
) }}
103103
{% endif %}
104+
105+
{% if not providers and not features.password_login %}
106+
<div class="text-center">
107+
{{ _("mas.login.no_login_methods") }}
108+
</div>
109+
{% endif %}
104110
</main>
105111
{% endblock content %}

0 commit comments

Comments
 (0)