From b187d0962459520a5a67ab5ff743e6395d943bd6 Mon Sep 17 00:00:00 2001
From: weeman <weeman@frankfurt.ccc.de>
Date: Sun, 22 Dec 2024 19:14:08 +0100
Subject: [PATCH] =?UTF-8?q?=C3=9Cberarbeite=20Login,=20Sign-up=20und=20PW-?=
=?UTF-8?q?Reset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/plainui/jinja2/plainui/header.html.j2 | 1 -
src/plainui/jinja2/plainui/login.html.j2 | 25 +++++-----
.../jinja2/plainui/password_change.html.j2 | 25 +++++-----
.../plainui/password_reset_complete.html.j2 | 26 ++++------
.../plainui/password_reset_confirm.html.j2 | 46 +++++++++--------
.../plainui/password_reset_done.html.j2 | 37 ++++++--------
.../registration/password_reset_form.html.j2 | 35 ++++++-------
src/plainui/jinja2/plainui/signup.html.j2 | 29 +++++------
.../jinja2/plainui/signup_done.html.j2 | 17 +++----
.../styles/components/_landingpage.scss | 49 ++-----------------
src/plainui/styles/utils/_layout.scss | 20 ++++++--
11 files changed, 129 insertions(+), 181 deletions(-)
diff --git a/src/plainui/jinja2/plainui/header.html.j2 b/src/plainui/jinja2/plainui/header.html.j2
index 37fec65dd..c4037c976 100644
--- a/src/plainui/jinja2/plainui/header.html.j2
+++ b/src/plainui/jinja2/plainui/header.html.j2
@@ -5,7 +5,6 @@
{% set view_name = request.resolver_match.view_name %}
<nav class="navbar navbar-expand-lg border-bottom border-bottom">
<div class="container-fluid">
- {% set base_url = "" %}
{{ logoMacro.logo(base_url, conf.name + " logo", conf.name + " logo") }}
<button class="navbar-toggler"
type="button"
diff --git a/src/plainui/jinja2/plainui/login.html.j2 b/src/plainui/jinja2/plainui/login.html.j2
index 96d2fd675..60a9a3a3e 100644
--- a/src/plainui/jinja2/plainui/login.html.j2
+++ b/src/plainui/jinja2/plainui/login.html.j2
@@ -8,13 +8,13 @@
{% endblock title %}
{% block fullpage %}
- <article class="container">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + "
- logo", "rounded mx-auto d-block") }}
- </figure>
- <div class="mw-320 mx-auto">
- <h2>{{ _("Login") }}</h2>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
+
+ <div class="hub-card mw-md-22rem pt-2 mx-auto">
+ <h1 class="h3">{{ _("Login") }}</h1>
{% if not archive_mode %}
<form method="post" id="login" class="hub-landing__form">
<!--<h1 class="text-center bg-secondary p-2 text-dark h3 m-0">{{ _("login") }}</h1>-->
@@ -29,15 +29,16 @@
<div class="d-grid gap-2 my-3">
<button type="submit" class="btn btn-primary" form="login">{{ _("Login") }}</button>
- <span class="text-center">oder</span>
+ <div class="text-center">{{ _("or") }}</div>
<a href="{{ url('plainui:password_reset') }}"
- class="btn btn-secondary"
+ class="btn btn-outline-secondary"
title="{{ _('Reset Password') }}">{{ _('Reset Password') }}</a>
</div>
<p class="mb-2 text-white">{{ _("login--cookie_info") }}</p>
<hr class="hub-spacer">
- <h3>{{ _("New here?") }}</h3>
+
+ <h1 class="h3 mb-3">{{ _("New here?") }}</h1>
<div class="d-grid">
<a href="{{ url('plainui:signup') }}"
class="btn btn-primary"
@@ -46,11 +47,9 @@
</div>
</form>
{% else %}
- <p class="mb-2 text-white">{{ _("archive_mode_no_login") }}</p>
+ <p class="my-5">{{ _("archive_mode_no_login") }}</p>
{% endif %}
</div>
-
- <hr class="hub-spacer">
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/password_change.html.j2 b/src/plainui/jinja2/plainui/password_change.html.j2
index 9ab7f71e0..68a327b1f 100644
--- a/src/plainui/jinja2/plainui/password_change.html.j2
+++ b/src/plainui/jinja2/plainui/password_change.html.j2
@@ -6,25 +6,22 @@
{% endblock title %}
{% block content %}
- <div class="row justify-content-center px-6 mt-11 mb-8">
- <div class="col-auto">{{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo") }}</div>
- </div>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
- <form method="post"
- class="mw-810 border p-0 mx-auto mb-11{% if error %} border-danger{% endif %} mt-6">
- <h2 class="bg-secondary text-center text-dark m-0 px-3 py-1">{{ _("Change password") }}</h2>
- <div class="p-3">
+ <form method="post" class="hub-content hub-content__landing">
+ <h1 class="h3">{{ _("Change password") }}</h1>
{{ csrf_input }}
{{ form_elements.password(form, 'old_password') }}
{{ form_elements.password(form, 'new_password1') }}
{{ form_elements.password(form, 'new_password2') }}
- <ul class="d-flex justify-content-center list-unstyled mb-0 pt-3">
- <li class="mx-2">
- <button type="submit" class="btn btn-primary">{{ _("Change Password") }}</button>
- </li>
- </ul>
{{ form_elements.errors(form) }}
- </div>
- </form>
+ <div class="mt-3">
+ <button type="submit" class="btn btn-primary">{{ _("Change Password") }}</button>
+ </div>
+ </form>
+ </article>
{% endblock content %}
diff --git a/src/plainui/jinja2/plainui/password_reset_complete.html.j2 b/src/plainui/jinja2/plainui/password_reset_complete.html.j2
index 3b8305dd5..5820bf182 100644
--- a/src/plainui/jinja2/plainui/password_reset_complete.html.j2
+++ b/src/plainui/jinja2/plainui/password_reset_complete.html.j2
@@ -5,23 +5,17 @@
{% endblock title %}
{% block fullpage %}
- <article class="hub-landing">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo") }}
- </figure>
-
- <div class="mw-664 border p-0 mx-auto">
- <h2 class="text-center bg-secondary m-0 text-dark py-1">{{ title }}</h2>
- <div class="p-3">
- <p class="mt-5 mb-3 text-white text-center">{{ _("Your password has been set. You may go ahead and log in now.") }}</p>
- <p class="text-center">
- <a href="{{ url('plainui:login') }}"
- title="{{ _('Login') }}"
- class="btn btn-primary">{{ _('Login') }}</a>
- </p>
- </div>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
</div>
- <hr class="hub-spacer">
+ <div class="hub-card mw-md-22rem pt-2 mx-auto">
+ <h1 class="h3">{{ title }}</h1>
+ <p class="mb-3">{{ _("Your password has been set. You may go ahead and log in now.") }}</p>
+ <a href="{{ url('plainui:login') }}"
+ title="{{ _('Login') }}"
+ class="btn btn-primary">{{ _('Login') }}</a>
+ </div>
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/password_reset_confirm.html.j2 b/src/plainui/jinja2/plainui/password_reset_confirm.html.j2
index e58765772..69bc22a64 100644
--- a/src/plainui/jinja2/plainui/password_reset_confirm.html.j2
+++ b/src/plainui/jinja2/plainui/password_reset_confirm.html.j2
@@ -6,32 +6,30 @@
{% endblock title %}
{% block fullpage %}
- <article class="hub-landing">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo") }}
- </figure>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
- <form method="post" id="login-change" class="mw-664 hub-landing__form">
- <!--<h1 class="text-center bg-secondary p-3 text-dark h3">{{ _("enter new password") }}</h1>-->
- <div>
- <input type="hidden" name="next" value="{{ next }}">
- {{ csrf_input }}
- {{ form_elements.password(form, 'new_password1') }}
- {{ form_elements.password(form, 'new_password2') }}
- <ul class="d-flex justify-content-center list-unstyled mb-0">
- <li class="mx-2 mb-3 mb-lg-0">
- <a href="{{ url('plainui:login') }}"
- title="{{ _('Login') }}"
- class="btn btn-transparent">{{ _('Login') }}</a>
- </li>
- <li class="mx-2">
- <button type="submit" class="btn btn-primary" form="login-change">{{ _("Change Password") }}</button>
- </li>
- </ul>
- {{ form_elements.errors(form) }}
+ <form method="post"
+ id="login-change"
+ class="hub-card mw-md-44rem pt-2 mx-auto">
+ <h1 class="h3">{{ _("enter new password") }}</h1>
+ <input type="hidden" name="next" value="{{ next }}">
+ {{ csrf_input }}
+ {{ form_elements.password(form, 'new_password1') }}
+ {{ form_elements.password(form, 'new_password2') }}
+ {{ form_elements.errors(form) }}
+
+ <div class="d-flex flex-column flex-sm-row align-items-center gap-3 mt-3">
+ <button type="submit"
+ class="btn btn-primary w-100 w-sm-auto"
+ form="login-change">{{ _("Change Password") }}</button>
+ <div>{{ _("or") }}</div>
+ <a href="{{ url('plainui:login') }}"
+ title="{{ _('Login') }}"
+ class="btn btn-outline-secondary w-100 w-sm-auto">{{ _('Login') }}</a>
</div>
</form>
-
- <hr class="hub-spacer">
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/password_reset_done.html.j2 b/src/plainui/jinja2/plainui/password_reset_done.html.j2
index 404a9cc02..dff38c4b7 100644
--- a/src/plainui/jinja2/plainui/password_reset_done.html.j2
+++ b/src/plainui/jinja2/plainui/password_reset_done.html.j2
@@ -5,30 +5,23 @@
{% endblock title %}
{% block fullpage %}
- <article class="hub-landing">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo") }}
- </figure>
-
- <h1 class="text-center hub-landing__title">welcome to {{ conf.name }}</h1>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
- <div class="mw-664 border p-0 mx-auto">
- <h2 class="text-center bg-secondary m-0 text-dark py-1">{{ title }}</h2>
- <div class="p-3">
- <p class="mt-5 mb-3 text-white text-center">
- {{ _("We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.") }}
- </p>
- <p class="mb-5 text-white text-center">
- {{ _("If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.") }}
- </p>
- <p class="text-center">
- <a href="{{ url('plainui:login') }}"
- title="{{ _('Login') }}"
- class="btn btn-primary">{{ _('Login') }}</a>
- </p>
- </div>
+ <div class="hub-card mw-md-22rem mx-auto">
+ <h1 class="h3 mb-3">{{ title }}</h1>
+ <p>
+ {{ _("We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.") }}
+ </p>
+ <p>
+ {{ _("If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.") }}
+ </p>
+ <a href="{{ url('plainui:login') }}"
+ title="{{ _('Login') }}"
+ class="btn btn-primary w-100">{{ _('Login') }}</a>
</div>
- <hr class="hub-spacer">
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/registration/password_reset_form.html.j2 b/src/plainui/jinja2/plainui/registration/password_reset_form.html.j2
index dc1720129..fcee3858b 100644
--- a/src/plainui/jinja2/plainui/registration/password_reset_form.html.j2
+++ b/src/plainui/jinja2/plainui/registration/password_reset_form.html.j2
@@ -5,14 +5,15 @@
{{ _("%(conf)s - Reset Password", conf=conf.name) }}
{% endblock title %}
{% block fullpage %}
- <article class="hub-landing">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo") }}
- </figure>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
- <h1 class="text-center hub-landing__title">{{ _("reset password") }}</h1>
-
- <form method="post" id="login-reset" class="mw-664 hub-landing__form">
+ <form method="post"
+ id="login-reset"
+ class="hub-card mw-md-22rem pt-2 mx-auto">
+ <h1 class="h3">{{ _("reset password") }}</h1>
<div>
{% if retry %}
<ul class="list-unstyled text-left mb-2">
@@ -26,20 +27,16 @@
{{ formElements.text(form, 'email') }}
<p class="mb-2 text-white">{{ _("You will receive an e-mail with a reset link.") }}</p>
<p class="mb-2 text-white">{{ _("If you have no configured e-mail address, revisit your ticket activation link") }}</p>
- <ul class="d-flex justify-content-center list-unstyled mb-0">
- <li class="ml-3 mb-3 md-md-0">
- <a href="{{ url('plainui:login') }}"
- title="{{ _('Login') }}"
- class="btn btn-transparent">{{ _('Login') }}</a>
- </li>
- <li class="ml-3">
- <button type="submit" class="btn btn-primary" form="login-reset">{{ _("Reset Password") }}</button>
- </li>
- </ul>
+
+ <div class="d-flex flex-column justify-content-center gap-2 mb-0">
+ <button type="submit" class="btn btn-primary" form="login-reset">{{ _("Reset Password") }}</button>
+ <div class="text-center">{{ _("or") }}</div>
+ <a href="{{ url('plainui:login') }}"
+ title="{{ _('Login') }}"
+ class="btn btn-outline-secondary">{{ _('Login') }}</a>
+ </div>
{{ formElements.errors(form) }}
</div>
</form>
-
- <hr class="hub-spacer">
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/signup.html.j2 b/src/plainui/jinja2/plainui/signup.html.j2
index 8403e4661..0a687a8f5 100644
--- a/src/plainui/jinja2/plainui/signup.html.j2
+++ b/src/plainui/jinja2/plainui/signup.html.j2
@@ -6,16 +6,17 @@
{% endblock title %}
{% block fullpage %}
- <article class="container">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo", "rounded mx-auto d-block") }}
- </figure>
- <h2>{{ _("Registration") }}</h2>
-
- <p>{{ _("Registration Info Text") }}</p>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
{% if not archive_mode %}
- <form method="post" id="registration" class="mw-664 hub-landing__form">
+ <form method="post"
+ id="registration"
+ class="hub-card mw-md-44rem pt-2 mx-auto">
+ <h1 class="h3">{{ _("Registration") }}</h1>
+ <p>{{ _("Registration Info Text") }}</p>
<div>
<input type="hidden" name="next" value="{{ next }}">
@@ -26,18 +27,14 @@
{{ formElementsMacro.password(form, 'password2') }}
{{ formElementsMacro.input(form, 'email', 'email') }}
- <ul class="d-flex flex-column flex-sm-row justify-content-center list-unstyled mb-0">
- <li class="mx-2">
- <button type="submit" class="btn btn-block btn-primary" form="registration">{{ _("Create Account") }}</button>
- </li>
- </ul>
+ <button type="submit"
+ class="btn btn-block btn-primary mt-3"
+ form="registration">{{ _("Create Account") }}</button>
</div>
</form>
{% else %}
- <p class="mb-2 text-white">{{ _("archive_mode_no_login") }}</p>
+ <p class="my-5 text-white">{{ _("archive_mode_no_login") }}</p>
{% endif %}
-
- <hr class="hub-spacer">
</article>
{% endblock fullpage %}
diff --git a/src/plainui/jinja2/plainui/signup_done.html.j2 b/src/plainui/jinja2/plainui/signup_done.html.j2
index 01ab9bdcd..c52341a04 100644
--- a/src/plainui/jinja2/plainui/signup_done.html.j2
+++ b/src/plainui/jinja2/plainui/signup_done.html.j2
@@ -6,15 +6,14 @@
{% endblock title %}
{% block fullpage %}
- <article class="container">
- <figure class="hub-landing__logo">
- {{ logoMacro.logo(url('plainui:index') , conf.name + " logo", conf.name + " logo", "rounded mx-auto d-block") }}
- </figure>
- <h2>{{ _("SignUp Complete") }}</h2>
+ <article class="hub-content hub-content__landing">
+ <div class="text-center d-md-none mb-5">
+ {{ logoMacro.logo(conf, base_url, conf.name + " logo", conf.name + " logo") }}
+ </div>
- <p>{{ _("SignUp Mail sent") }}</p>
-
- <hr class="hub-spacer">
+ <div class="hub-card mw-md-22rem pt-2 mx-auto">
+ <h1 class="h3">{{ _("SignUp Complete") }}</h1>
+ <p>{{ _("SignUp Mail sent") }}</p>
+ </div>
</article>
-
{% endblock fullpage %}
diff --git a/src/plainui/styles/components/_landingpage.scss b/src/plainui/styles/components/_landingpage.scss
index 8aa1dceb7..3e5779cb8 100644
--- a/src/plainui/styles/components/_landingpage.scss
+++ b/src/plainui/styles/components/_landingpage.scss
@@ -1,48 +1,9 @@
-.hub-landing {
- position: relative;
- overflow: hidden;
- min-height: calc(100vh - 72px);
- max-width: 51.875rem;
- margin: 0 auto;
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
- padding: 1rem;
+.hub-landing__logo {
+ .hub-logo {
+ max-width: none;
- &__logo {
- .hub-logo {
- max-width: none;
-
- img {
- width: 12rem;
- }
- }
- }
-
- &__content {
- position: absolute;
- top: map-get($spacers, 10);
- left: 50%;
- width: 100%;
- text-align: center;
- padding: $spacer;
- z-index: 6;
- transform: translate(-50%, 0);
- }
-
- &__title {
- font-size: 3.5rem;
- }
-
- @include media-breakpoint-up("md") {
- width: 90%;
- &__title {
- font-size: 7rem;
+ img {
+ width: 12rem;
}
}
-
- @include media-breakpoint-up("xxl") {
- max-width: 59.188rem;
- }
}
diff --git a/src/plainui/styles/utils/_layout.scss b/src/plainui/styles/utils/_layout.scss
index 625a13ce0..2ca0e4301 100644
--- a/src/plainui/styles/utils/_layout.scss
+++ b/src/plainui/styles/utils/_layout.scss
@@ -107,16 +107,26 @@
.hub-hlayout-l {
flex-direction: row;
}
-}
-.mw-320 {
- max-width: 20rem;
+ .mw-md-22rem {
+ max-width: 22rem;
+ }
+
+ .mw-md-44rem {
+ max-width: 44rem;
+ }
}
.w-100px {
width: 6.25rem;
}
+@include media-breakpoint-up(sm) {
+ .w-sm-auto {
+ width: auto !important;
+ }
+}
+
.hub-content {
padding: map-get($spacers, 2) map-get($spacers, 3);
padding-top: $hub-mobile-navbar-height;
@@ -128,6 +138,10 @@
padding: map-get($spacers, 3) map-get($spacers, 5);
}
+ .hub-content__landing {
+ padding-top: $hub-mobile-navbar-height;
+ }
+
.hub-main {
height: 100vh;
}
--
GitLab