The mobile menu was bricking the login/reauthentication view
authorAlexander Ebert <ebert@woltlab.com>
Fri, 31 Dec 2021 13:58:12 +0000 (14:58 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 31 Dec 2021 13:58:12 +0000 (14:58 +0100)
ts/WoltLabSuite/Core/Ui/Mobile.ts
wcfsetup/install/files/acp/style/layout.scss
wcfsetup/install/files/acp/templates/pageHeader.tpl
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
wcfsetup/install/files/lib/acp/form/LoginForm.class.php
wcfsetup/install/files/lib/acp/form/ReauthenticationForm.class.php

index 7af8c4d6da4536984f3b9d539b3eae5c2b295cee..ec04d873463cb1a1263654a4df74e968aa027974 100644 (file)
@@ -19,6 +19,7 @@ import { PageMenuMainProvider } from "./Page/Menu/Main/Provider";
 import { hasValidUserMenu, PageMenuUser } from "./Page/Menu/User";
 import * as UiScreen from "./Screen";
 
+const _isAcp = document.body.classList.contains("wcfAcp");
 let _dropdownMenu: HTMLUListElement | null = null;
 let _dropdownMenuMessage: HTMLElement | null = null;
 let _enabled = false;
@@ -51,6 +52,11 @@ function initSearchButton(): void {
   const searchBar = document.getElementById("pageHeaderSearch")!;
   const searchInput = document.getElementById("pageHeaderSearchInput")!;
 
+  // The search bar is unavailable during WCFSetup or the login.
+  if (_isAcp && searchBar === null) {
+    return;
+  }
+
   let scrollTop: number | null = null;
   const searchButton = document.getElementById("pageHeaderSearchMobile")!;
   searchButton.addEventListener("click", (event) => {
@@ -97,9 +103,7 @@ function initSearchButton(): void {
   });
 
   UiCloseOverlay.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => {
-    const isAcp = document.body.classList.contains("wcfAcp");
-
-    if (!isAcp && origin === Origin.DropDown) {
+    if (!_isAcp && origin === Origin.DropDown) {
       const button = document.getElementById("pageHeaderSearchTypeSelect")!;
       if (button.dataset.target === identifier) {
         return;
@@ -107,7 +111,7 @@ function initSearchButton(): void {
     }
 
     closeSearch(searchBar, scrollTop);
-    if (!isAcp) {
+    if (!_isAcp) {
       closeSearchBar();
     }
 
index 6230b5a354bfb935f75eae9cb0b5d39071d3bae1..d86f982435632c436fb0af8dd9736c54a9ce15ac 100644 (file)
@@ -295,6 +295,11 @@ $wcfAcpSubMenuWidth: 300px;
        .pageHeader {
                grid-template-areas: "logo woltlab jumpToPage search menu user";
                grid-template-columns: auto repeat(5, max-content);
+
+               &[data-is-login="true"] {
+                       grid-template-areas: "logo";
+                       grid-template-columns: auto;
+               }
        }
 
        .pageHeaderPanel > .layoutBoundary {
index e05b968e397c609101a7163536670fc2cbd7ff6e..99e2f5b9ed28f72ebe546e3e8cf1155a7a0a93fb 100644 (file)
@@ -1,5 +1,5 @@
 <div class="pageHeaderContainer{if !$__isLogin|empty} pageHeaderContainerIsLogin{/if}">
-       <header id="pageHeader" class="pageHeader">
+       <header id="pageHeader" class="pageHeader" data-is-login="{if !$__wcfAcpIsLogin|empty}true{else}false{/if}">
                <div id="pageHeaderPanel" class="pageHeaderPanel">
                        <div class="layoutBoundary">
                                {include file='pageHeaderLogo'}
index e0c431903909d6197742d2e548ed8595572fa1d6..2fce71ff8d91ea1f5a73c3bdf24b7aac6944bc52 100644 (file)
@@ -17,6 +17,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../
     CloseOverlay_1 = (0, tslib_1.__importStar)(CloseOverlay_1);
     UiDropdownReusable = (0, tslib_1.__importStar)(UiDropdownReusable);
     UiScreen = (0, tslib_1.__importStar)(UiScreen);
+    const _isAcp = document.body.classList.contains("wcfAcp");
     let _dropdownMenu = null;
     let _dropdownMenuMessage = null;
     let _enabled = false;
@@ -44,6 +45,10 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../
     function initSearchButton() {
         const searchBar = document.getElementById("pageHeaderSearch");
         const searchInput = document.getElementById("pageHeaderSearchInput");
+        // The search bar is unavailable during WCFSetup or the login.
+        if (_isAcp && searchBar === null) {
+            return;
+        }
         let scrollTop = null;
         const searchButton = document.getElementById("pageHeaderSearchMobile");
         searchButton.addEventListener("click", (event) => {
@@ -80,15 +85,14 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "../
             }
         });
         CloseOverlay_1.default.add("WoltLabSuite/Core/Ui/MobileSearch", (origin, identifier) => {
-            const isAcp = document.body.classList.contains("wcfAcp");
-            if (!isAcp && origin === CloseOverlay_1.Origin.DropDown) {
+            if (!_isAcp && origin === CloseOverlay_1.Origin.DropDown) {
                 const button = document.getElementById("pageHeaderSearchTypeSelect");
                 if (button.dataset.target === identifier) {
                     return;
                 }
             }
             closeSearch(searchBar, scrollTop);
-            if (!isAcp) {
+            if (!_isAcp) {
                 (0, Fixed_1.closeSearchBar)();
             }
             searchButton.setAttribute("aria-expanded", "false");
index 845e9f724cb2683b336b7911b7a61572d0582b83..83a78b383d0231404a01418a30f8da4a500d8f54 100755 (executable)
@@ -276,6 +276,7 @@ class LoginForm extends AbstractCaptchaForm
             'username' => $this->username,
             'password' => $this->password,
             'url' => $this->url,
+            '__wcfAcpIsLogin' => true,
         ]);
     }
 }
index 6b755db92fff35dbca423f37c0e489ea61f6de5c..2bcc99ec775a7c472fa4a69d45840d7de08f25a5 100644 (file)
@@ -2,6 +2,8 @@
 
 namespace wcf\acp\form;
 
+use wcf\system\WCF;
+
 /**
  * Represents the reauthentication form.
  *
@@ -13,4 +15,10 @@ namespace wcf\acp\form;
  */
 class ReauthenticationForm extends \wcf\form\ReauthenticationForm
 {
+    public function assignVariables()
+    {
+        parent::assignVariables();
+
+        WCF::getTPL()->assign(['__wcfAcpIsLogin' => true]);
+    }
 }