Fix Login Page Issues

Closes #5006, #5010, and #5007

Merge request studip/studip!3759

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;

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' :  ''?>">

app/views/login/index.php

 <?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 ?>

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();
         });
     }

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;
+                    }
+                }
 
             }
         }