customize the arrangement of components in liferay login portlet

[John Voltaire Maximo, modificado 8 Anos atrás.]

Hey guys,

I'm making a login form right now, but according to the requirements, the login page should look different. see the attached image.
how can I customize the login page to look like this?

[Alexey Kakunin, modificado 8 Anos atrás.]

Hi!

Answer is "JSP Hook" - Look Dev Docs for details: https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/customizing-jsps-by-extending-the-original

In your case you will need customize pages:
* html/portlet/login/login.jsp
* html/portlet/login/navigation.jsp

[John Voltaire Maximo, modificado 8 Anos atrás.]

Hey sir thanks, may I ask why I need to modify navigation.jsp?
after all I just need to rearrange some elements in the log in page..

[Andew Jardine, modificado 8 Anos atrás.]

The reference to navigation.jsp is not for the "page navigation" but for the items that are below the button to sign in. These include the SSO stuff like (facebook, open id, etc) that might be enabled and the create account link.

[John Voltaire Maximo, modificado 8 Anos atrás.]

oh I just figured that out myself,,
how can I adjust the forgot password link just like the sample screenshot? Is it in the JSP? if it's not is it in the css?
where do I find the styling for this?

[Andew Jardine, modificado 8 Anos atrás.]

You can find it under /html/portlet/login/naavigtion/forgot_password.jsp. The CSS you can see of course, as always, using the Chrome inspector or Firebug. If you have a custom theme that you have built then you can override the classes in your custom.css file -- or you can hook the JSP and change it however you like (including adding your own custom CSS classes)

[John Voltaire Maximo, modificado 8 Anos atrás.]

yeah my plan now was to create a different link to forgot password on the fieldset above...
then remove some of the icons under... I'll remove the openId and the forgotpassword from the icon-list below...

I'll try it now... my problem is that the calling of the links is in a loop,, this was the code right.. how do I call only the needed links if it's like this?
<liferay-util:buffer var="navigation">
<liferay-ui:icon-list>
<%
for (String section : PropsValues.LOGIN_FORM_NAVIGATION_PRE) {
%>
<liferay-util:include page='<%= "/html/portlet/login/navigation/" + _getSectionJsp(section) + ".jsp" %>' portletId="<%= portletDisplay.getRootPortletId() %>" />
<%
}
for (String section : PropsValues.LOGIN_FORM_NAVIGATION_POST) {
%>
<liferay-util:include page='<%= "/html/portlet/login/navigation/" + _getSectionJsp(section) + ".jsp" %>' portletId="<%= portletDisplay.getRootPortletId() %>" />
<%
}
%>
</liferay-ui:icon-list>
</liferay-util:buffer>

and on the link on my page,, how do I call only the forgot password jsp.. hope you guys can help

[Andew Jardine, modificado 8 Anos atrás.]

I think what you are looking to do can be done with the portal-ext.properties configuration. These properties can be set/unset to control some of that stuff. By default the properties referenced in that code are --

    #
    # Input a list of sections that will be included in login form navigation.
    #
    login.form.navigation.pre=anonymous,sign-in,facebook,open-id
    login.form.navigation.post=create-account,forgot-password

If you want to eliminate all the "navigation items" for example, you can probably just do this --

    #
    # Input a list of sections that will be included in login form navigation.
    #
    login.form.navigation.pre=
    login.form.navigation.post=create-account,forgot-password

[John Voltaire Maximo, modificado 8 Anos atrás.]

Oh I get it,
then how about using an anchor tag to call the forgot password.jsp?
can I do this?

login.jsp
...code here.
...code here....
<a href = '<%= "/html/portlet/login/navigation/forgot_password.jsp" %>'> Forgot Password? </a>


After doing it I got a content encoding error haha,, how do I reach the forgot password page using this?

[Andew Jardine, modificado 8 Anos atrás.]

Not quite. Don't forget that you are using portlets so you need to use a portlet URL (in this case). The forgot_password.jsp has the following --

<c:if test="<%= showForgotPasswordIcon %>">
	<portlet:renderurl var="forgotPasswordURL">
		<portlet:param name="struts_action" value="/login/forgot_password" />
	</portlet:renderurl>

	<liferay-ui:icon image="help" message="forgot-password" url="<%= forgotPasswordURL %>" />
</c:if>

.. and from this snippet you will find that this block --

	<portlet:renderurl var="forgotPasswordURL">
		<portlet:param name="struts_action" value="/login/forgot_password" />
	</portlet:renderurl>

.. generates the URL that the user goes to in order to see the forgot password stuff.

[John Voltaire Maximo, modificado 8 Anos atrás.]

when I added the code sir, the sign-in portlet disappeared haha..

I have another problem sir,,, can I somehow put the portal-ext code you mentioned somewhere in the hook project instead?
Because after I do this I have to give the output to my boss,,
but then his portal-ext properties would be different from mine.... is there any way to make it easier?

[Anil T, modificado 8 Anos atrás.]

Hi John,

You can give set of properties to be updated in portal-ext.proerpties file to your boss. Otherwise you have to include it in ext enviroment and deploy it. but it is not the better option.

Thanks,
Anil T

[John Voltaire Maximo, modificado 8 Anos atrás.]

what's the difference between navigation.pre and navigation.post? just asking, because they almost look the same

[John Voltaire Maximo, modificado 8 Anos atrás.]

I added the code just like this..

Andrew Jardine:

<c:if test="<%= showForgotPasswordIcon %>">
	<portlet:renderurl var="forgotPasswordURL">
		<portlet:param name="struts_action" value="/login/forgot_password" />
	</portlet:renderurl>

	<liferay-ui:icon image="help" message="forgot-password" url="<%= forgotPasswordURL %>" />
</c:if>

but after deploying it sir, the sign-in portlet disappeared altogether.. can you tell me what I did wrong?

[Andew Jardine, modificado 8 Anos atrás.]

I'll need a few more details. Which jsp did you put that in? did you alter any other jsps?

Perhaps provide your entire solution here including all the pages that you are overriding. It's hard to say waht might be wrong from just one code snippet.

[Kiran Yalavali, modificado 7 Anos atrás.]

Hi John,

I'm also facing the same problem so if you resolved this issue,
please tell me how to separate "create_account and forget_password " url links in liferay login hook .

which jsp your saperate two url links like("create_account and forget_password ").

Please help me.


Thanks,
Kiran.