t3solution / t3sbootstrap

Startup extension to use bootstrap 5 classes, components and more out of the box.
GNU General Public License v2.0
24 stars 20 forks source link

[Feature Request] Expand usage of constant navbar.feUserName = 1 (with proposal) #116

Closed HenryAveMedi closed 3 years ago

HenryAveMedi commented 3 years ago

Hi there, I have the extension femanager installed so i can let users register themselves and change their profiles etc. I guess there's many more extensions to cover this usage, but the point is, t3sbootstrap has always been missing a proper navigation for websites with FE- users…

I built a very generic template and constants that you could use in your extension, i just wanted to post it to you because maybe i thought it would be interesting to have this feature in your extension.

(I was trying to create a fork in github, soi would just push it and let u look at it and either merge it or not, but i'm very noob with github on projects of other people) :(

so, basically in the navbar, i moved your code of feusername:

<f:if condition="{settings.navbar.feUserName}">
  <f:security.ifAuthenticated>
    <li class="nav-item fe-user">
      <span class="nav-link ml-1"><i class="fas fa-user mr-1"></i> <t3sb:getUsername /></span>
    </li>
  </f:security.ifAuthenticated>
</f:if>

to next to the language conditional, because it's like an extra point in a navigation, like the info pages

and then created some conditionals based on the constants that admins using your extension would use. maybe you can find a better place to put it, based on the types of navigations that are available, but for now, this is where i put it

<f:if condition="{settings.config.navbarExtraRow} || {config.navbar.alignment} == 'right'">
  <f:if condition="{config.navbar.searchbox}">
    <f:render partial="Page/Searchbox" arguments="{_all}" />
  </f:if>
####### this is where my code starts
  <f:if condition="{settings.navbar.feUserName}">
    <f:render section="FEuser" arguments="{_all}" />
  </f:if>
####### this is where my code ends
  <f:if condition="{languageNavigation} && {config.lang.uid} && {config.lang.hreflang} && {config.lang.title}">
    <f:render partial="Page/Navbar/Language" arguments="{_all}" />
  </f:if>
</f:if>

##### and this is the section
<f:section name="FEuser">
  <f:security.ifAuthenticated>
    <f:then>
      <f:if condition="{UserMenu.0} || {settings.config.userLogoutPid}">
        <f:then>
          <f:render partial="Page/Navbar/UserMenu" arguments="{_all}" />
        </f:then>
        <f:else>
          <li class="nav-item fe-user">
            <span class="nav-link ml-1"><i class="fas fa-user mr-1"></i><t3sb:getUsername /></span>
          </li>
        </f:else>
      </f:if>
    </f:then>
    <f:else>
      <f:if condition="{settings.config.userLoginPid}">
        <li id="user-menu" id="nav-item-{settings.config.userLoginPid}" class="nav-item">
          <f:link.typolink class="nav-link" parameter="{settings.config.userLoginPid}" title="{f:translate(key: 'login', extensionName: 't3sbootstrap')}">
            <i class="fa-fw fas fa-sign-in-alt"></i> {f:translate(key: 'login', extensionName: 't3sbootstrap')}
          </f:link.typolink>
        </li>
      </f:if>
    </f:else>
  </f:security.ifAuthenticated>
</f:section>

so, basically, if u only use the feUsername constant, it stays the same as before……… but, if you use the constants of userMenuList (pid list) and userLoginPid/userLogoutPid, it creates a login link if u're not logged in, a dropdown if u have a list, and this dropdown also has a logout link. it looks like this: when not logged in and userLoginPid constant is given:

image

when logged in and no userMenuList or userLogoutPid constants are given (same as you had till now, but next to language instead of in the main navigation):

image

when logged in and userLogoutPid constant is given:

image

when logged in and userMenuList and userLogoutPid constants are given:

image

for this to work i've sepparated a partial for the user menu -> Partials/Page/Navbar/UserMenu.html with the following code:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:t3sb="http://typo3.org/ns/T3SBS/T3sbootstrap/ViewHelpers" data-namespace-typo3-fluid="true">
  <li id="user-menu" class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
       <i class="fas fa-user"></i><span class="nav-label"><t3sb:getUsername /></span>
    </a>
    <div class="dropdown-menu dropdown-menu-right mt-0 user-menu dd-animate slideIn">
      <f:if condition="{UserMenu.0}">
        <f:for each="{UserMenu}" as="navbarItem">
          <f:if condition="{navbarItem.spacer}">
            <f:then>
              <span class="dropdown-divider"></span>
            </f:then>
            <f:else>
              <f:if condition="{navbarItem.children} && {config.navbar.enable} != 'slide'">
                <f:then>
                  <f:render partial="Page/Navbar/Navbar" section="Dropdown" arguments="{_all}" />
                </f:then>
                <f:else>
                  <f:link.typolink class="dropdown-item dropdown-item-{navbarItem.data.uid}{f:if(condition: navbarItem.current, then:' active')}" parameter="{navbarItem.link}"
                title="{navbarItem.title}"
                target="{f:if(condition: '{navbarItem.target}',then: '{navbarItem.target}', else: '_self')}">
                    <f:render partial="Page/Navbar/Navbar" section="Title" arguments="{item: navbarItem}" />
                  </f:link.typolink>
                </f:else>
              </f:if>
            </f:else>
          </f:if>
        </f:for>
      </f:if>
      <f:if condition="{UserMenu.0} && {settings.config.userLogoutPid}">
        <span class="dropdown-divider"></span>
      </f:if>
      <f:if condition="{settings.config.userLogoutPid}">
        <f:link.page class="dropdown-item" pageUid="{settings.config.userLogoutPid}" additionalParams="{logintype:'logout'}">
          <i class="fa-fw fas fa-sign-out-alt"></i> {f:translate(key: 'logout', extensionName: 't3sbootstrap')}
        </f:link.page>
      </f:if>
    </div>
  </li>
</html>

the additional constants needed are:

bootstrap {
  navbar {
    # type=pid; page ID where the felogin form to login is
    userLoginPid = 
    # type=pid; page ID where the felogin form to logout is (usually the same login pid)
    userLogoutPid = 
    # type=pidlist; list of page IDs that should be shown in the dropdown menu in the navigation
    userMenuList = 
  }
}

and the setup needed is:

page.10 {
  dataProcessing {
    ##### Render User menu if a list of page IDs is given
    15 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    15 {
      special = list
      special.value = {$bootstrap.navbar.userMenuList}
      includeSpacer.cObject = TEXT
      includeSpacer.cObject.value = {$bootstrap.config.navbarIncludespacer}
      includeSpacer.cObject.override = {$bootstrap.config.navbarIncludespacer}
      includeSpacer.cObject.override.if.isTrue = {$bootstrap.config.navbarIncludespacer}
      as = UserMenu
    }
    15.if.isTrue = {$bootstrap.navbar.userMenuList}
    ##### User menu END
  }
  settings {
    config {
      #### Additional constants for Usermenu
      userLoginPid = {$bootstrap.navbar.userLoginPid}
      userLogoutPid = {$bootstrap.navbar.userLogoutPid}
    }
  }
}

and of course had to add the language keys:

If u like this feature and use it, i would be happy about it, i love ur extension and making it better, if not, then i guess i'll just keep updating the navbar template each time u make an update xD

thanks for reading :) was a long post, i know…

t3solution commented 3 years ago

New version 5 - new issues!