From 52e6b5643310ba1f8b2f1f26ac4f2e03d39b476d Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Sat, 14 Dec 2024 12:14:37 +0000
Subject: [PATCH] Fix Login Page Issues
Closes #5006, #5010, and #5007
Merge request studip/studip!3759
---
app/controllers/login.php | 3 +-
app/views/login/_standard_loginform.php | 3 +-
app/views/login/index.php | 4 +-
.../javascripts/bootstrap/application.js | 20 +-----
resources/assets/stylesheets/scss/index.scss | 61 +++++++++++++------
5 files changed, 50 insertions(+), 41 deletions(-)
diff --git a/app/controllers/login.php b/app/controllers/login.php
index 09a7c6b07fb..1364362e11f 100644
--- a/app/controllers/login.php
+++ b/app/controllers/login.php
@@ -90,9 +90,10 @@ class LoginController extends AuthenticatedController
}
}
-
+ $this->has_login_error = false;
if ($this->error_msg) {
PageLayout::postException(_('Bei der Anmeldung trat ein Fehler auf!'), $this->error_msg);
+ $this->has_login_error = true;
}
$this->uname = (isset($this->auth["uname"]) ? $this->auth["uname"] : Request::username('loginname'));
$this->self_registration_activated = Config::get()->ENABLE_SELF_REGISTRATION;
diff --git a/app/views/login/_standard_loginform.php b/app/views/login/_standard_loginform.php
index 4221dcdb7d1..1353eb8717e 100644
--- a/app/views/login/_standard_loginform.php
+++ b/app/views/login/_standard_loginform.php
@@ -11,8 +11,7 @@ $password_tooltip_text = (string) Config::get()->PASSWORD_TOOLTIP_TEXT;
?>
<form class="default <?= $hidden ? 'hide' : '' ?> <?= $login_form_class ?>" name="login_form" id="login-form" method="post"
- action="<?= URLHelper::getLink(Request::url(), ['cancel_login' => null]) ?>" <? if ($hidden)
- echo 'hidden'; ?>>
+ action="<?= URLHelper::getLink(Request::url(), ['cancel_login' => null]) ?>">
<section>
<? $withTooltip = $username_tooltip_text !== '' || $password_tooltip_text !== ''; ?>
<label class="<?= $withTooltip ? 'with-tooltip' : ''?>">
diff --git a/app/views/login/index.php b/app/views/login/index.php
index b1b3dfab5b6..7e70089022d 100644
--- a/app/views/login/index.php
+++ b/app/views/login/index.php
@@ -1,6 +1,6 @@
<?php
/**
- * @var array $loginerror
+ * @var bool $has_login_error
* @var string $error_msg
*/
@@ -76,7 +76,7 @@ $enable_news = Config::get()->LOGIN_NEWS_VISIBILITY && count($news_entries) > 0;
<? if ($show_hidden_login): ?>
<?= $this->render_partial('login/_standard_loginform', [
- 'hidden' => empty($loginerror),
+ 'hidden' => !$has_login_error,
'login_form_class' => 'login-bottom'
]) ?>
<? endif ?>
diff --git a/resources/assets/javascripts/bootstrap/application.js b/resources/assets/javascripts/bootstrap/application.js
index 97e0fd2c749..4e5eccc96bb 100644
--- a/resources/assets/javascripts/bootstrap/application.js
+++ b/resources/assets/javascripts/bootstrap/application.js
@@ -380,30 +380,14 @@ STUDIP.domReady(function () {
const toggleLogin = document.getElementById('toggle-login');
if (toggleLogin) {
- loginForm.addEventListener('transitionend', (event) => {
- if (event.propertyName !== 'max-height') {
- return;
- }
-
+ toggleLogin.addEventListener('click', (event) => {
+ loginForm.classList.toggle('hide');
if (!loginForm.classList.contains('hide')) {
usernameInput.scrollIntoView({
behavior: 'smooth'
});
usernameInput.focus();
- } else {
- loginForm.setAttribute('hidden', '');
- }
- });
-
- toggleLogin.addEventListener('click', (event) => {
- if (loginForm.classList.contains('hide')) {
- loginForm.removeAttribute('hidden');
}
-
- setTimeout(() => {
- loginForm.classList.toggle('hide');
- }, 0);
-
event.preventDefault();
});
}
diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss
index f41d0d62ab8..695d6015e64 100644
--- a/resources/assets/stylesheets/scss/index.scss
+++ b/resources/assets/stylesheets/scss/index.scss
@@ -17,6 +17,7 @@ $gap-between-boxes: calc($login-page-margin / 2);
row-gap: 20px;
align-items: flex-start;
flex-basis: 450px;
+ height: 100%;
}
}
@@ -75,10 +76,6 @@ $gap-between-boxes: calc($login-page-margin / 2);
padding: 32px;
}
- &.hide {
- display: none;
- }
-
#login-infobox-button-wrapper {
position: absolute;
right: 24px;
@@ -104,13 +101,6 @@ $gap-between-boxes: calc($login-page-margin / 2);
}
}
}
-
- .hidden {
- visibility: hidden;
- height: 0;
- padding: 0;
- overflow: hidden;
- }
}
}
@@ -257,10 +247,20 @@ $gap-between-boxes: calc($login-page-margin / 2);
border-top: none;
border-bottom: solid thin var(--content-color-40);
+
+
&.login-bottom {
border-top: solid thin var(--content-color-40);
border-bottom: none;
- padding-top: 1em;
+ padding-top: 20px;
+ max-height: 180px;
+ overflow: hidden;
+ clip-path: inset(0 0 0 0);
+ transition: clip-path var(--transition-duration) ease-out;
+
+ &.hide {
+ clip-path: inset(0 0 100% 0);
+ }
}
section {
@@ -336,6 +336,7 @@ $gap-between-boxes: calc($login-page-margin / 2);
&.login-bottom {
justify-content: flex-start;
+ margin: 0 1em 1em 1em;
}
}
@@ -418,6 +419,7 @@ html:not(.size-large) {
width: 100%;
top: 0;
#login-content-wrapper {
+ margin-top: 0;
#login-infobox {
max-width: unset;
min-width: unset;
@@ -427,11 +429,26 @@ html:not(.size-large) {
}
}
html:not(.size-medium) {
+ &.responsive-display {
+ body#login {
+ #content-wrapper {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ }
+ }
+
+ body:not(#login) {
+ #content-wrapper {
+ padding: 15px;
+ }
+ }
+ }
#login-wrapper {
margin: 0;
#login-content-wrapper {
height: unset;
-
+ margin-top: 0;
flex-wrap: wrap;
#loginbox {
@@ -439,6 +456,7 @@ html:not(.size-medium) {
width: unset;
min-height: unset;
flex-grow: 1;
+ padding: 16px;
}
#login-infobox {
@@ -446,12 +464,19 @@ html:not(.size-medium) {
padding: 16px 56px 16px 16px;
&.no-toggle {
width: 100%;
- padding: 16px;
+ padding: 16px 0 0 0;
+ }
+ #login-infobox-button-wrapper {
+ top: 16px;
+ right: 16px;
+ }
+ #login-faq-box {
+ height: unset;
+
+ #login-faq-content-wrapper {
+ max-height: unset;
+ }
}
- #login-infobox-button-wrapper {
- top: 16px;
- right: 16px;
- }
}
}
--
GitLab