How can I create a link/button that pops up the default log in form/portlet in a Liferay JSF portlet?

Liferay has a Sign In link that can be clicked to pop up the log in form/portlet. I want to emulate that link in my portlet. I've tried configuring the login portlet to pop up in a modal dialog, but it did not behave the same way as the default log in pop up. Specifically, the pop up did not disappear when I logged in (instead the pop up itself was redirected to a different view). How can I pop up the default log in form so that it disappears when a user logs in.

Solution

In order to create a link with the exact same behavior as the default Sign In link, you need to use the Liferay.SignInModal plugin.

First you need to create an h:ouputLink that points to /c/portal/login and includes the layout id.* If the JavaScript fails for some reason, this link will provide nice fallback behavior by sending the user to the login page via GET and redirecting them back to the current page after the user logs in.

<h:outputLink id="logInLink" binding="#{logInLink}"
    value="/c/portal/login?p_l_id=#{bean.getPlid(request)}">
    <h:outputText value="Log In/Register" />
</h:outputLink>

Next you need to plug the sign in modal into that link:

<h:outputScript>
    AUI().use('liferay-sign-in-modal', 'event-outside', 'transition', function(A) {
        A.one('##{logInLink.clientId}'.replace(/:/g,'\\:'))
            .plug(Liferay.SignInModal);
    });
</h:outputScript>

Now your sign-in/log in link will behave exactly like the default version. The pop up should close once a user signs in.

* To get the current layout id, use a method like this:

public long getPlid(PortletRequest portletRequest) {
    ThemeDisplay themeDisplay =
        (ThemeDisplay) portletRequest.getAttribute(WebKeys.THEME_DISPLAY);
    Layout layout = themeDisplay.getLayout();
    return layout.getPlid();
}