Chrome etc. Password "helper" problem

Post Reply
tony.herstell
Posts: 151
Joined: 29 Nov 2011, 00:40

16 Nov 2020, 05:33

Hi Guys

https://risingstars.co.nz/atlas

login area at top right...

Can't enter text without the panel closing when shrunk down to mobile size OR on a mobile.

Can use "tab" (on PC); but no workaround for a mobile.

Code: Select all

   <div class="topbar">

		 <!-- style="background-color: white" -->
		<div class="logo" style="margin-top:0px; vertical-align: bottom; !important">
			<p:graphicImage name="images/brand/horsebox_white.png" library="atlas-layout" style="width:90%; display: block" />
		</div>

        <p:outputLabel style="font-size:30pt; margin-left:10px; font-weight: bold; color: white">Atlas</p:outputLabel>

        <a id="topbar-menu-button" href="#">
            <i class="fa fa-bars"></i>
        </a>
                        
        <ul class="topbar-menu fadeInDown animated">
            <li class="profile-item">
                <a href="#">
                	<p:outputPanel id="loginDataArea">
	                	<p:outputPanel rendered="#{loginController.isLoggedIn()}">
		                    <div class="profile-info">
		                        <span class="topbar-item-name profile-name"><h:outputText value="#{identityService.name}"/></span>
		                        <p:outputLabel id="user-role" styleClass="topbar-item-name profile-role" value="#{loginController.role()}"/>
		                        <p:tooltip for="user-role" value="#{loginController.roles()}" position="bottom" trackMouse="true" />
		                    </div>
	                    </p:outputPanel>
                    </p:outputPanel>
                </a>
            </li>
            
            <li>
                <p:outputPanel id="loginControlsArea">
		            <h:form id="loginForm" rendered="#{!loginController.isLoggedIn()}">
		            	<p:inputText value="#{loginController.email}"/>
		            	<p:password value="#{loginController.password}"/>
	   		        	<p:commandButton actionListener="#{loginController.login()}" update="loginDataArea loginControlsArea profileControlsArea logoutControlsArea menu-area" style="color:white; vertical-align:middle" value="Login" icon="fa fa-fw fa-sign-in" />
	   		        	<p:commandButton action="#{registrationController.startRegistration()}"  style="color:white; vertical-align:middle" value="Register" icon="fa fa-fw fa-user-plus"/>
		            </h:form>
	            </p:outputPanel>
            </li>
            
            <li>
                <p:outputPanel id="profileControlsArea">
		            <h:form id="ProfileForm" rendered="#{loginController.isLoggedIn() and loginController.isUserInRole('SUPERUSER')}">
			            <i style="color:white; vertical-align:middle" class="fa fa-fw fa-user"></i>
	   		        	<p:commandButton actionListener="#{loginController.profile()}" style="color:white; vertical-align:middle" value="Profile" />
		            </h:form>
	            </p:outputPanel>
            </li>
            
            <li>
                <p:outputPanel id="logoutControlsArea">
		            <h:form id="logoutForm" rendered="#{loginController.isLoggedIn() and loginController.isUserInRole('SUPERUSER')}">
		            	<i style="color:white; vertical-align:middle" class="fa fa-fw fa-sign-out"></i>
	    	        	<p:commandButton action="#{loginController.logout()}" update="loginDataArea loginControlsArea profileControlsArea logoutControlsArea menu-area" style="color:white; vertical-align:middle" value="Logout" />
		            </h:form>
	            </p:outputPanel>
            </li>
            
        </ul>
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

tony.herstell
Posts: 151
Joined: 29 Nov 2011, 00:40

17 Nov 2020, 00:00

The best I can figure is that the class "topbar-menu" calls the js for the button presses inside the pulldown.
How do I move the action to the commandbutton presses only so that clicking to add email/password does not fire.

Its a useful component and I trying to save space on the top bar by having the email/password and login form on the dropdown.

Image
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

Melloware
Posts: 2162
Joined: 22 Apr 2013, 15:48

17 Nov 2020, 14:40

Hmmm this one is tricky without being able to debug it.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 8.0.3 / PF Extensions 8.0.4

tony.herstell
Posts: 151
Joined: 29 Nov 2011, 00:40

17 Nov 2020, 19:50

I guess as its on https://risingstars.co.nz/atlas
you may be able to use the browser tools.
but I think altering the .js is the answer and that's not easy.
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

18 Nov 2020, 08:51

Hi,

Please try;

Code: Select all

//layout.js
...

 _bindEvents: function() {
       ....
       
       this.topbarMenu.find('input').off('click.topbar').on('click.topbar', function(e) { // please add this line
            $this.topbarLinkClick = true;
        });
 }
Best Regards,

tony.herstell
Posts: 151
Joined: 29 Nov 2011, 00:40

18 Nov 2020, 09:56

It worked.
Thank you so much!
I cant see that its broken anything (so far).
:D :D :D
JEE 8 (CDI, JPA etc.) (No Spring)
Target JBoss Wildfly 21+ and Quarkus

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

18 Nov 2020, 13:18

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Atlantis - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest