Introduce new header / footer template for the auth flow
authorMarcel Werk <burntime@woltlab.com>
Fri, 24 Nov 2023 14:30:28 +0000 (15:30 +0100)
committerMarcel Werk <burntime@woltlab.com>
Fri, 24 Nov 2023 14:30:28 +0000 (15:30 +0100)
com.woltlab.wcf/templates/authFlowFooter.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/authFlowHeader.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/login.tpl
ts/WoltLabSuite/Core/Ui/Search.ts
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
wcfsetup/install/files/style/ui/auth.scss [deleted file]
wcfsetup/install/files/style/ui/authFlow.scss [new file with mode: 0644]

diff --git a/com.woltlab.wcf/templates/authFlowFooter.tpl b/com.woltlab.wcf/templates/authFlowFooter.tpl
new file mode 100644 (file)
index 0000000..e11435c
--- /dev/null
@@ -0,0 +1,29 @@
+                       </div>
+               </div>
+       </section>
+       
+       {include file='pageFooter'}
+</div>
+
+{event name='footer'}
+
+<div class="pageFooterStickyNotice">
+       {event name='pageFooterStickyNotice'}
+       
+       <noscript>
+               <div class="info" role="status">
+                       <div class="layoutBoundary">
+                               <span class="javascriptDisabledWarningText">{lang}wcf.page.javascriptDisabled{/lang}</span>
+                       </div>
+               </div>  
+       </noscript>
+</div>
+
+<!-- {$__wcf->getRequestNonce('JAVASCRIPT_RELOCATE_POSITION')} -->
+
+{@FOOTER_CODE}
+
+<span id="bottom"></span>
+
+</body>
+</html>
diff --git a/com.woltlab.wcf/templates/authFlowHeader.tpl b/com.woltlab.wcf/templates/authFlowHeader.tpl
new file mode 100644 (file)
index 0000000..4142c36
--- /dev/null
@@ -0,0 +1,79 @@
+{include file='documentHeader'}
+
+<head>
+       <meta charset="utf-8">
+       {if !$pageTitle|isset}
+               {assign var='pageTitle' value=''}
+               {if (!$__wcf->isLandingPage() || !USE_PAGE_TITLE_ON_LANDING_PAGE) && $__wcf->getActivePage() != null && $__wcf->getActivePage()->getTitle()}
+                       {capture assign='pageTitle'}{$__wcf->getActivePage()->getTitle()}{/capture}
+               {/if}
+       {/if}
+       
+       <title>{if $pageTitle}{@$pageTitle} - {/if}{PAGE_TITLE|phrase}</title>
+       
+       {include file='headInclude'}
+       
+       {if !$canonicalURL|empty}
+               <link rel="canonical" href="{$canonicalURL}">
+       {/if}
+       
+       {if !$headContent|empty}
+               {@$headContent}
+       {/if}
+</head>
+
+<body id="tpl_{$templateNameApplication}_{$templateName}"
+       itemscope itemtype="http://schema.org/WebPage"{if !$canonicalURL|empty} itemid="{$canonicalURL}"{/if}
+       data-template="{$templateName}" data-application="{$templateNameApplication}"{if $__wcf->getActivePage() != null} data-page-id="{@$__wcf->getActivePage()->pageID}" data-page-identifier="{$__wcf->getActivePage()->identifier}"{/if}
+       {if !$__pageDataAttributes|empty}{@$__pageDataAttributes}{/if}
+       class="authFlow{if $__wcf->getActivePage() != null && $__wcf->getActivePage()->cssClassName} {$__wcf->getActivePage()->cssClassName}{/if}{if !$__pageCssClassName|empty} {$__pageCssClassName}{/if}">
+
+<span id="top"></span>
+
+<div id="pageContainer" class="pageContainer">
+       <div id="pageHeaderContainer" class="pageHeaderContainer">
+               <header id="pageHeader" class="pageHeader">
+                       <div id="pageHeaderPanel" class="pageHeaderPanel">
+                               <div class="layoutBoundary">
+                                       {include file='pageHeaderMenu'}
+                                       
+                                       {include file='pageHeaderUser'}
+                               </div>
+                       </div>
+                       
+                       <div id="pageHeaderFacade" class="pageHeaderFacade">
+                               <div class="layoutBoundary">
+                                       {include file='pageHeaderLogo'}
+                               </div>
+                       </div>
+               </header>
+       </div>
+       
+       <section id="main" class="main" role="main"{if !$__mainItemScope|empty} {@$__mainItemScope}{/if}>
+               <div class="layoutBoundary">
+                       <div id="content" class="content">
+                               {if $__disableContentHeader|empty}
+                                       {if !$contentHeader|empty}
+                                               {@$contentHeader}
+                                       {else}
+                                               {if $contentTitle|empty}
+                                                       {if $__wcf->isLandingPage() && USE_PAGE_TITLE_ON_LANDING_PAGE}
+                                                               {capture assign='contentTitle'}{PAGE_TITLE|phrase}{/capture}
+                                                               {capture assign='contentDescription'}{PAGE_DESCRIPTION|phrase}{/capture}
+                                                       {elseif $__wcf->getActivePage() != null && $__wcf->getActivePage()->getTitle()}
+                                                               {capture assign='contentTitle'}{$__wcf->getActivePage()->getTitle()}{/capture}
+                                                       {/if}
+                                               {/if}
+                                               
+                                               {if !$contentTitle|empty}
+                                                       <header class="contentHeader">
+                                                               <div class="contentHeaderTitle">
+                                                                       <h1 class="contentTitle">{@$contentTitle}{if !$contentTitleBadge|empty} {@$contentTitleBadge}{/if}</h1>
+                                                                       {if !$contentDescription|empty}<p class="contentHeaderDescription">{@$contentDescription}</p>{/if}
+                                                               </div>
+                                                       </header>
+                                               {/if}
+                                       {/if}
+                               {/if}
+                               
+                               {include file='userNotice'}
index b74de9419980b0522b7a61cd1a0cd7796bed7d9e..d58ed6c02d11f903803d7c46a13885a5d56821b9 100644 (file)
@@ -2,7 +2,7 @@
        {capture assign='contentDescription'}{lang}wcf.user.login.noAccount{/lang}{/capture}
 {/if}
 
-{include file='header' __disableAds=true}
+{include file='authFlowHeader'}
 
 {if $forceLoginRedirect}
        <woltlab-core-notice type="info">{lang}wcf.user.login.forceLogin{/lang}</woltlab-core-notice>
        {/hascontent}
 </form>
 
-{include file='footer' __disableAds=true}
+{include file='authFlowFooter'}
index ae55b5fe43d723964816cfc325795261f2e519a6..d104c04e2691b85ad3cf36bca315ee7b6c7b7a18 100644 (file)
@@ -188,7 +188,7 @@ function closeSearch(): void {
  */
 export function init(): void {
   // The search bar is unavailable during WCFSetup or the login.
-  if (_isAcp && _pageHeaderSearch === null) {
+  if (_pageHeaderSearch === null) {
     return;
   }
 
index b8b364d662a25b0d53a91e25c3067927e0eb70a1..28f1fded8ced13d1c505b054a22031edfdb4e4b2 100644 (file)
@@ -158,7 +158,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
      */
     function init() {
         // The search bar is unavailable during WCFSetup or the login.
-        if (_isAcp && _pageHeaderSearch === null) {
+        if (_pageHeaderSearch === null) {
             return;
         }
         initSearchBar();
diff --git a/wcfsetup/install/files/style/ui/auth.scss b/wcfsetup/install/files/style/ui/auth.scss
deleted file mode 100644 (file)
index ef3c52c..0000000
+++ /dev/null
@@ -1,99 +0,0 @@
-#tpl_wcf_login {
-       .content {
-               max-width: 500px;
-               margin-left: auto;
-               margin-right: auto;
-       }
-
-       .contentHeader {
-               text-align: center;
-       }
-
-       input[type="submit"] {
-               width: 100%;
-       }
-}
-
-.thirdPartySsoButtons {
-       margin-top: 30px;
-}
-
-.thirdPartySsoButtons__separator {
-       display: flex;
-       align-items: center;
-       text-align: center;
-       gap: 10px;
-       margin-bottom: 30px;
-
-       &::before {
-               content: "";
-               flex: 1;
-               border-bottom: 1px solid var(--wcfContentBorderInner);
-       }
-
-       &::after {
-               content: "";
-               flex: 1;
-               border-bottom: 1px solid var(--wcfContentBorderInner);
-       }
-}
-
-.thirdPartySsoButtons__buttonList {
-       display: flex;
-       flex-direction: column;
-       gap: 10px;
-}
-
-.button.thirdPartyLoginButton {
-       border-width: 0;
-       color: rgba(255, 255, 255, 1);
-       display: flex;
-       width: 100%;
-
-       &:hover {
-               color: rgba(255, 255, 255, 1);
-       }
-
-       /* branding */
-       &.googleLoginButton {
-               background-color: rgb(255, 255, 255);
-               border: 1px solid rgb(233, 233, 233);
-               color: rgb(51, 51, 51);
-
-               &:hover {
-                       background-color: rgb(255, 255, 255);
-                       color: rgb(51, 51, 51);
-               }
-
-               fa-brand {
-                       background-image: url(data:image/png;base64,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);
-                       background-repeat: no-repeat;
-                       background-size: contain;
-                       color: transparent;
-               }
-       }
-
-       &.facebookLoginButton {
-               background-color: rgb(59, 89, 152);
-
-               &:hover {
-                       background-color: rgb(48, 72, 123);
-               }
-       }
-
-       &.twitterLoginButton {
-               background-color: rgb(20, 23, 26);
-
-               &:hover {
-                       background-color: rgb(20 23 26 / 87%);
-               }
-       }
-
-       &.githubLoginButton {
-               background-color: rgb(68, 68, 68);
-
-               &:hover {
-                       background-color: rgb(48, 48, 48);
-               }
-       }
-}
diff --git a/wcfsetup/install/files/style/ui/authFlow.scss b/wcfsetup/install/files/style/ui/authFlow.scss
new file mode 100644 (file)
index 0000000..28fee31
--- /dev/null
@@ -0,0 +1,117 @@
+.authFlow {
+       @include screen-lg {
+               .pageHeaderContainer {
+                       padding-top: 0;
+               }
+       }
+
+       .pageHeaderPanel {
+               display: none;
+       }
+
+       .pageHeaderLogo {
+               text-align: center;
+       }
+
+       .pageHeaderSearchMobile {
+               display: none;
+       }
+
+       .content {
+               max-width: 500px;
+               margin-left: auto;
+               margin-right: auto;
+       }
+
+       .contentHeader {
+               text-align: center;
+       }
+
+       input[type="submit"] {
+               width: 100%;
+       }
+}
+
+.thirdPartySsoButtons {
+       margin-top: 30px;
+}
+
+.thirdPartySsoButtons__separator {
+       display: flex;
+       align-items: center;
+       text-align: center;
+       gap: 10px;
+       margin-bottom: 30px;
+
+       &::before {
+               content: "";
+               flex: 1;
+               border-bottom: 1px solid var(--wcfContentBorderInner);
+       }
+
+       &::after {
+               content: "";
+               flex: 1;
+               border-bottom: 1px solid var(--wcfContentBorderInner);
+       }
+}
+
+.thirdPartySsoButtons__buttonList {
+       display: flex;
+       flex-direction: column;
+       gap: 10px;
+}
+
+.button.thirdPartyLoginButton {
+       border-width: 0;
+       color: rgba(255, 255, 255, 1);
+       display: flex;
+       width: 100%;
+
+       &:hover {
+               color: rgba(255, 255, 255, 1);
+       }
+
+       /* branding */
+       &.googleLoginButton {
+               background-color: rgb(255, 255, 255);
+               border: 1px solid rgb(233, 233, 233);
+               color: rgb(51, 51, 51);
+
+               &:hover {
+                       background-color: rgb(255, 255, 255);
+                       color: rgb(51, 51, 51);
+               }
+
+               fa-brand {
+                       background-image: url(data:image/png;base64,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);
+                       background-repeat: no-repeat;
+                       background-size: contain;
+                       color: transparent;
+               }
+       }
+
+       &.facebookLoginButton {
+               background-color: rgb(59, 89, 152);
+
+               &:hover {
+                       background-color: rgb(48, 72, 123);
+               }
+       }
+
+       &.twitterLoginButton {
+               background-color: rgb(20, 23, 26);
+
+               &:hover {
+                       background-color: rgb(20 23 26 / 87%);
+               }
+       }
+
+       &.githubLoginButton {
+               background-color: rgb(68, 68, 68);
+
+               &:hover {
+                       background-color: rgb(48, 48, 48);
+               }
+       }
+}