The Joomla! Community Magazine™

Joomla ACL: Improving usability by customizing the login screen for different access levels

Written by | Thursday, 01 March 2012 00:00 | Published in 2012 March
Improve user experience by customizing login modules, menu items, and other content to provide a consistent, tailored experience for your users.

Thank you to Lo Jen-Chih for translating this article to Traditional Chinese.

Thank you to Katerina Vorobyova for translating this article to Russian.

In my previous article, I walked through an example where we created some content on the front end of the website for students and teachers. Students saw student information when logged in, which teachers saw both student and teacher information.

This worked great and gave the behavior we wanted, but the user experience is definitely lacking. What if I want a different login welcome depending on which user group has logged into the website? Also, depending on whether you log into your Joomla site via a module or a menu link, you'll get a different default experience.

The Login Module

The login module is available on the home page of a Joomla 2.5 site, with or without the sample data installed. When you log in using this box, the login module will direct you to your site's home page by default.

You can change this by editing the module. Go to Extensions - Module Manager - Login (you'll need to find the right login box for the site, located in position-7). Look at the configuration options on the right side of the screen:

loginmodule

Under the Login Redirection Page option above, this is where you set which page the login box should send you when you log into the site. From the dropdown, you can choose any page that's connected via menu to your website. "Default" indicates the default page of the website (typically the home page).

If the login box is located far down toward the bottom of a page, far enough that a user has to scroll, and if the box is located only on the home page of the site (which is where the login module redirects by default on login), then there is potential for confusion. The user logs in and then sees the same screen they were just on. They have to scroll down the page to find the login box has changed to a logout button to be sure the login worked. Unfortunately, this is the default behavior for a user on a 1024x768 monitor using a Joomla site with the sample data.

The Login Menu Link

You can also create a menu link to a page which contains a login form. To do this, go to Menu - Main Menu (or your choice of menu) - Add New Menu Item. Click on Select next to Menu Item Type and choose Login Form located under Users Manager. Look at the right side of the configuration screen, and you will see this:

loginscreen

This login configuration screen does not redirect the user to a page by default. Instead, it redirects users to their profile by default, rather than to a specific page on the website. To configure redirection to a specific page on the site, enter that page's URL in the Login Redirection box.

When logging in with the above login screen, this is what the user sees with the default settings:

loginprofile

Three ways to improve the login/logout user experience

1. Make consistent use of redirects

Are you using both the login module and a login link on your site? Make sure both logins redirect to the same page, providing the same user experience no matter where people log in. Alternatively, offer the login module or a login link to log into the site, and make sure it redirects to a page that makes sense. Likewise, make sure the login module and the login link redirect to the same page on logout.

Even if you're only using one login option on your site, make sure you make use of redirects to improve user experience and make it clear that someone has logged into or out of the website.

2. Customize the login landing page to the group which is logged in

What if you want students to see one message when they log in, but teachers should see another? And what if school administrators should see messages for teachers and students as well as their own login messages?

Joomla allows only one page for a redirect from the login module or page. In that interface, there is no way to specifically state that those who are students should see one page, while teachers should see another. Everyone sees the same page on login.

How can you improve the experience when you only have one page to work with? By making that a very hard-working page, and making use of Joomla's ACL.

Here's how I would set up a login landing page which could cater to three audiences:

  • Set up a category for the login page, and set the access level to Registered (i.e. all three audiences can see content within the category)
  • Now set up an article within the category. Inside of the article, rather than entering content, enter three module positions using [loadposition]. For example: [loadposition student], [loadposition teacher], [loadposition admin] (Substitute curly braces for the square brackets.)
  • Create modules for each access level, with positions of student, teacher, and admin (or corresponding to your loadposition code). These can be custom HTML modules, which can contain content customized to each access level.
  • When a visitor arrives on site, they will see the modules(s) customized to the user's access level.

Here's more detailed instructions for making this work.

Step 1: Make sure users are part of the Registered user group.

Users to your site are assigned one or several user groups. Make sure one of them is the registered user group, so that all users who are logged in can see some content in common. Public users, which are users not logged into the site, will not be able to see the content for Registered users. (See earlier ACL articles to learn about how to configure this.)

Step 2: Create a category, an article, and a menu item for the login landing page.

Create a category for your login landing page, perhaps with a name like Login Landing Page. Set the access level on the category to Registered. (Student and Teacher user groups should be part of the Registered access level.)

Create an article within the category. The article should contain a module position for each access level.

Make a link to the menu in the Menu Manager, choosing Single Article as your type and linking to your login landing page article. Set the menu item's access level to Registered as well.

If you don't want a link to the login page showing up in your navigation, you can always use the hidden menu technique to hide the link.

Step 3: Create modules.

Create individual custom HTML modules within the Module Manager. For each module, assign it an appropriate access level and module position. For example, make a module for the student access level with a position of student, one for the teacher access level with a position of teacher, and one for the registered access level with a position of registered.

When someone then logs into the site, they will see the article, because they are part of the Registered access level. The modules they see will be determined by the access level of the module. In this case, students may see only the student module, teachers see the teachers and student modules, and administrators may see all three modules.

3. Create an easy-to-find logout button

When you log into your Joomla website, the login module converts to a logout button. That's great if the module is displayed on each page of the site, but frequently, the module may only be displayed on one page (or a handful of pages). This means a user will need to go back to that page to log out of the site. Likewise, if there's a login link on the site, the user must return to the login page (which might say "login" in the navigation, even when they want to log out).

Wouldn't it be nice to have a "logout" button on every page of the site?

Or wouldn't it be great if you could have a "logout" link in the navigation?

With ACL, you can have both of these, and you should put them in place for better user experience.

Making the login module work for logging out

If you'd like to have a "logout" button appear on each page of your website when a user is logged in, but you would not like to display a login box on every page of the site, here's how you can make this happen.

Create a second login module. Assign the access level to Registered, and have it appear on each page of the site.

This second login module will only appear when someone is already logged into the site.And when they're already logged in, the module displays as a logout button. If they click the logout button, the module no longer displays — because you've logged out, and you're no longer part of the Registered access level!

Making a "logout" link in the navigation

If you'd like a "logout" link to appear in your navigation, but have it only appear when someone is logged into the site, here's the way to make that happen.

Create a menu item of the type of login. The menu item title can be Logout. Set the access level for this link to Registered.

Now this menu item will only appear when someone is logged into the site. When they click on the Logout link, they will get a page with a logout button on it they can click. This is an extra click relative to the module technique described above, but it may be more intuitive for some users, or it may work better with some site designs. You'll just have to test and see what works best for you!

Read 255819 times
Tagged under Administrators
avatar
Good one. And can we make a direct logout link? i.e. not a link redirecting to a page with a logout button (double-processing), but the link itself logs people out?
VOTES:0
avatar
Hi Dex -- I'd say check out Herman's comment below!
VOTES:1
avatar
Thanks, Jen! Nice article.

For easy editing of the extra modules Peter's (NoNumber)ArticlesAnywherehere can be convenient, for then the modules can be edited as an article using the editor.


Under point 2, the second bullet it now says "enter three module positions using . For example: , , ". Ik think you mean "enter three module positions using loadposition. For example: {loadposition registered}, {loadposition student} and {loadposition teacher}".
VOTES:0
avatar
Thanks Herman! Yes, the text is right in Joomla's back end, but it's rendering it on the page -- should have proofread it more carefully. I have fixed it now. Thanks for pointing this out.
VOTES:0
avatar
This is brilliant! I will test this out for sure!

Thank you Jen!
VOTES:0
avatar
You're welcome! Hope it works out great for you.
VOTES:0
avatar
Thanks Jen for sharing this third article in your series about ACL! This is a powerful feature but it can also be complicated. You are doing a great job in this series of making it simpler for users to understand.

Thanks for serving the community by sharing your knowledge so that others can do more with Joomla!
VOTES:0
avatar
Thanks Paul. Hopefully someone will copy these magazine articles into docs.joomla.org, eh?
VOTES:0
avatar
Jen, I'd encourage you to either copy or link to the wiki with relevant content like this! If you don't feel comfortable doing that yourself, maybe you could talk to Chris on the Documentation team about it.
VOTES:1
avatar
@Dex:
Since Joomla! 1.6 the logout-link must contain the token and the return-url is base64 encoded, so that makes it a little bit more complex than in 1.5. Here is how a direct logout-link would look like (when returning to the " home"-page):

index.php?option=com_users&task=user.logout&=1&return=aHR0cDovL2J2b3R0ZXJzLmNhLwo=

See:
webdesigncr3ator.blogspot.com/2012/01/so...ink-problem-for.html
VOTES:1
avatar
O dear, the PHP-part has fallen out of that line of code I gave (and the link is not automatically a link and a space has slipped into the link). Please see webdesigncr3ator.blogspot.com/2012/01/so...ink-problem-for.html for the code , including the PHP echo of JUtility::getToken();.
VOTES:0
avatar
Hi Jen, I tried the custom landing page and it worked pefectly! As far as the login/logout goes, I will try it on another project. Ended up not needing it after-all.

Thank you very much for sharing your knowledge and love of Joomla! I will follow in your footsteps and share in my little universe :)

K
VOTES:0
avatar
Thanks Karen! Yes, help those who need it -- the Joomla love goes round and round :-)
VOTES:0
avatar
Dioscouri had a great plugin for Joomla 1.5 called Hider. It would allow you to put all your content into one article, rather than separating it into multiple modules. The user would see whichever content block was applicable to them, e.g public (no login), registered, author, publisher, etc.

I hope that they update it for Joomla 2.5.
VOTES:0
avatar
kataskeui istoselidon Friday, 09 March 2012
thank you for this article...
VOTES:0
avatar
Excellent article and info. Thank you very much for writing it.
VOTES:-1
avatar
Jen Kramer, I love the instruction how to customize the login landing page to the group which is logged in. That's really helpful. Thank you :D
VOTES:1
avatar
You are very welcome! So glad you found it useful!
VOTES:0
avatar
Best Blog On Joomla Saturday, 24 March 2012
The idea of making consistent use of redirects is great. Also, it can be highly helpful to group-wise customize the login landing page
VOTES:0
avatar
Many, many thanks for your great ACL articles. Nice real world use cases and examples... though I miss the previous step. I mean, is there any core solution or workflow for register different types/groups of users? (without heavy 3rd party community scripts ;-) )

How to let people register for a certain group or user-type?
If not directly configurable in the current joomla2.5.x ... what are the future plans for the extended user fields and registration process?
VOTES:0
avatar
Dom wrote:
Dioscouri had a great plugin for Joomla 1.5 called Hider. ...
I hope that they update it for Joomla 2.5.

I assume, Jen wanted to demonstrate a 100% Joomla native solution, without any extra extension.

@Don There is a similar free extension, have a look here:
here
VOTES:0
avatar
Dom wrote:
Dioscouri had a great plugin for Joomla 1.5 called Hider. ...
I hope that they update it for Joomla 2.5.

Ooops, just found a nice alternative (lite/pro):
extensions.joomla.org/extensions/access-...access-control/19367
VOTES:0
avatar
Hello jen,
I am a newbie to joomla (2.5),
and building a site for academical reasons , for 5 user groups.
According to this article (after reading all the previous ones on ACL, the're very good !),
the trick with the [position ] in the article does not work for me-
the page i land after login displays what is written in the article= [position-12 honeh] and etc..(position-12 is the position i chose, relativley to my template and honeh is the name of one of my groups)
What am i doing wrong or missing here?
Thank you so much!
Liora
VOTES:0
avatar
In order for a module to display in an article, you must establish the module position in the article AND a matching module assigned to that position.

I think you are confused by my use of user group names as module positions.

So if you call for [loadposition studentmodposition]

You need to create a module (say a custom HTML module) which is assigned the studentmodposition position.

That module assigned the studentmodposition position must then be assigned the appropriate access level so it displays (or not) appropriately within the article.

Hope this helps.
Jen
VOTES:0
avatar
Corinna Müller Tuesday, 10 July 2012
Hi Jen, I follow your excellent courses on lynda.com. I remember you describe this in one of your titles, and I found this very clever. -- Is it possible to use a similar approach for individual users in a user group, i. e. when a user logs in, their article shows up?
VOTES:0
avatar
Corinna Müller Monday, 16 July 2012
Never mind. :) I've found the User Article Manager extension, and that'll have to do.
VOTES:0
avatar
awsome man!~

hats off

Great Advice

:)
VOTES:0
avatar
I find your articles well written and easy for the beginner to understand. Do you have all of the steps from when you first started the school website until it was finished? I would very much be interested in these particular steps.
VOTES:0
avatar
Hi, I am using the default login form in Joomla 2.5 , but when I try to register a new user and click register button without filling any of the fields, the form just stays there with no error message or red error indicator. Perhaps the client side validation is missing. Is there a way to address this problem.
VOTES:0
avatar
Hi Jen,
Thanks a lot for your article. I'm a big fan of Joomla and have become a pretty proficient user while my background is hobby computing/ internet and not programmer/developer. I'm using j2.5.8 up to date and on a localhost MAMP setup.

So, when I saw this article, I thought "this is just what I was looking for!". Now, I appear to have followed all the steps correctly, but the user types (all equal children of editor) don't discriminate. I end up seeing all 3-4 positions/ modules no matter which of the users I login with.

User groups are appropriately associated with distinct custom access levels, component/menu assignments are set. Categories are created and correct and content article inside common category: "landing page with 4 modules" is set at registered (level checked for all user groups). The only doubt I have is the scripting in the article for the positions/ logos. When I use what you suggest, I only see this: "[loadposition client][loadposition mod][loadposition sala][loadposition recruit]", if I use joomla recommended syntaxis ( { } ), then all 4 modules show up, regardless of whether i loadposition or loadmodule. I would give you a URL, but it's localhost.

I am wondering whether it's a localhost/ mac/ htaccess.txt confusion!?!?!?! Any quick ideas? Thanks again.
VOTES:0
avatar
Joomla Development Tuesday, 08 January 2013
I read your blogs and got it’s a very useful information for me I know it’s a very difficult task to do comment but it’s a way to what you think and I think everyone can share own knowledge through blog so thanks for this your grateful posting.
VOTES:0
avatar
well found this page from google while i was searching for a suggestion on a joomla project .. normally i never made comment to say thanks but just because of some information at your blog my one big bug got solved so i would like to thank you here for same.
VOTES:0