1. Home
  2. Development
  3. Liferay Theme: Login popup when clicking button

Liferay Theme: Login popup when clicking button

Amar Grabus, modified 7 Years ago.
Liferay Theme: Login popup when clicking button
New Member Posts: 5 Join Date: 4/4/18 Recent Posts
Hey,

I know how to popup the login portlat by klicking on 'Sign in':

main.js:
AUI().ready(
	'liferay-sign-in-modal',
	function(A) {	
		var signIn = A.one('.sign_in > .menuText > a');
		if (signIn && signIn.getData('redirect') !== 'true') {
			     signIn.plug(Liferay.SignInModal);
		}
	}
);


in ftl file:
<#if !is_signed_in>
			<div class="sign_in">
			<div class="menuText"><a href="${sign_in_url}" rel="nofollow" data-redirect="false" id="sign_in" class="sign_in_custom" ">${sign_in_text}
			</a></div>
			</div>
		<!--#if-->


But how can I do the same with button somewhere in my theme (just popping up the login without going to the login page)? I'm working with Liferay 6.2.
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay Theme: Login popup when clicking button
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Amar,

I'm not sure I understand your question. In your theme you can detect whether or not the user is signed in, and then based on that, you can add the button and js (as you have above) to trigger the behavior. Provided the login portlet is on the page then it should work. What I am not sure of off hand is whether or not the login portlet would be there (but I am assuming no). If it is not, then you can add a runtime portlet embedding inside the block as well.

Or is there something I am missing?
Amar Grabus, modified 7 Years ago.
RE: Liferay Theme: Login popup when clicking button
New Member Posts: 5 Join Date: 4/4/18 Recent Posts
Hi Andrew,

yes, that's what I did. But I am not sure how to trigger the popup of the login when a user clicks on the button. With onClick and then specify what?
thumbnail
Andrew Jardine, modified 7 Years ago.
RE: Liferay Theme: Login popup when clicking button
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hi Amar,

In the markup for the page you should be able to find the portlet. I would assume that the div is being hidden? or perhaps you need to call the render() method on the sign-in module?
Amar Grabus, modified 7 Years ago.
RE: Liferay Theme: Login popup when clicking button
New Member Posts: 5 Join Date: 4/4/18 Recent Posts
Hi Andrew,

thanks.

I have one more question. How can i let the popup come instantly without first going to the login page and then by klicking on 'Sign in' the login popup appears. Currently when I click on the button, he directs me to the login page of the login portlet.
Olaf Kock, modified 6 Years ago.
RE: Liferay Theme: Login popup when clicking button
New Member Posts: 19 Join Date: 7/28/10 Recent Posts
Amar GrabusHi Andrew,

thanks.

I have one more question. How can i let the popup come instantly without first going to the login page and then by klicking on 'Sign in' the login popup appears. Currently when I click on the button, he directs me to the login page of the login portlet.


Hi Armar,

Did you ever get an answer on how to force the login popup without directing to the login page first?   I am facing the same issue.

​​​​​​​Philip
thumbnail
Andrew Jardine, modified 6 Years ago.
RE: Liferay Theme: Login popup when clicking button
Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Good question. Without digging too deep into the source, I was able to find this block of code
AUI().ready(
   'liferay-hudcrumbs', 'liferay-navigation-interaction', 'liferay-sign-in-modal',
   function(A) {
      var navigation = A.one('#navigation');

      if (navigation) {
         navigation.plug(Liferay.NavigationInteraction);
      }

      var siteBreadcrumbs = A.one('#breadcrumbs');

      if (siteBreadcrumbs) {
         siteBreadcrumbs.plug(A.Hudcrumbs);
      }

      var signIn = A.one('li.sign-in a');

      if (signIn &amp;&amp; signIn.getData('redirect') !== 'true') {
         signIn.plug(Liferay.SignInModal);
      }
   }
);


which you will find in the main.js in the classic theme. So I think if you have an li, with a class "sign-in" and the link of course in an <a> it should trigger the modal. Careful though, there is also a property that you can set to disable the modals --
​​​​​​​
#
# Set this to true to disable the login popup dialog. This should only be
# set to true if there is a custom login portlet that needs the "Sign In"
# link to redirect to another page.
#
login.dialog.disabled=false

let me know if that helps.​​​​​