User Management Pages

When setting up a site that uses membership features, you should style the following pages:

• /login
• /change_password
• /forgot_password
• /access_denied
• /password_sent
• /user_welcome

These pages also exist in non-membership sites, but on such sites they are used primarily by admins, so their styling is sometimes neglected.

These pages are included in all SmartThemes except "Blank", as subpages of the page with the title "System Pages".

Links for User Management

If you are using login features, you should provide links for logging in and logging out. The URLs are simply /login and /logout.

If you want users to be able to edit their profiles, include an Edit Profile link with the URL /admin/profiles/edit_my_profile.

Creating Login/Logout/Profile Links

Typically, you'll want to show a Log In link only if no one is logged in, and Log Out and Edit Profile links only when someone is logged in. You may also want to show an Edit Profile link when someone is logged in.

To do so, you need to test the member role in the user cookie, as described in the article Accessing Current User Information.

Here's some example code to get you started. Put an empty element in your header or footer for the JavaScript to target, such as:

<div id="userinfo"></div>

Here's some JavaScript code that uses the WebvantaAdmin JS object (and assumes you are loading jQuery) that sets the contents of this element:

$(document).ready(function() {
  if(WebvantaAdmin.getUIRValue("r")=="member") {
    $("#userinfo").html("<p>Welcome " + WebvantaAdmin.getUIRValue("name") + " - <a href='/admin/profiles/edit_my_profile'>Edit Profile</a> - <a href='/logout'>Log Out</a></p>");
  }
  else {
    $("#userinfo").html("<p><a href='/login'>Log In</a></p>");
  }
});

This code is wrapped in a standard "document ready" handler to ensure that the targeted HTML element exists before the code runs. Then it checks to see if the user role is set to member, and if so, it sets the contents of the userinfo element to show "Welcome username - Edit Profile - Log Out".

If the user cookie does not indicate that a member is logged in, then the Log In link is shown.

Note that if you have created multiple member roles, then you'll need to replace "member" in this code with the name of the role you want to test for. You can test for multiple roles using a simple JavaScript OR, such as:

if(WebvantaAdmin.getUIRValue("r")=="member" || WebvantaAdmin.getUIRValue("r")=="board-member")