Not a developer? Go to MovableType.com

MovableType.org
Documentation
Home / Documentation / Designer's Guide

Showing and Hiding Content Based Upon a Login State

One fundamental component of running a community based web site is the ability to show and hide forms and page elements based upon whether a user is currently logged in or not. The most ubiquitous example of this pattern on a blog is the commenting form. If you require authentication from your users then you do not want to display the comment form unless they have signed in.

What follows is an explanation of how this is accomplished in Movable Type using javascript.

IfLoggedIn Template Tag

Central to making this work is the IfLoggedIn template tag which is used to wrap content you want to display if and only if the user is logged in. You can also use in conjunction with this tag an Else tag to encapsulate content you want displayed if the user is not logged in. Here is a very basic example:

<mt:IfLoggedIn script="is_loggedin" class="foo">
    <p id="logged_in">You are logged in!</p>
<mt:Else>
    <p id="login_prompt"></p>
</mt:IfLoggedIn>

The Javascript

The final piece to this puzzle is the javascript that will show and hide content as well as conditionally provide some feedback to the user regarding their login state. Here is the javascript in its entirety which would need to be added to the <head> section of any page needing to conditionally show and hide content. Next we will step through this code to help you understand what it is doing.

<script type="text/javascript">
<!-- 
function is_loggedin() {
    var u = mtGetUser();
    var loggedin = u && u.is_authenticated && u.is_author ? true : false;
    var eid = 'logged_in';
    conditional_block(loggedin, eid);
    if (!loggedin) {
        var p = document.getElementById('login_message');
        if (!p) return;
        if (u && !u.is_author) 
            p.innerHTML = "In order to create an entry on this blog you must first register.";
        else
            if (u && !u.can_post)
                p.innerHTML = "You do not have permission to post.";
            else
                p.innerHTML = '<a href="javascript:void(0)" onclick="return mtSignInOnClick(\'login_message\')">Sign in to create an entry.</a>';
    }
}
//-->
</script>

Now let’s step through the code.

var u = mtGetUser();
var loggedin = u && u.is_authenticated && u.is_author ? true : false;

The mtGetUser function returns a user object. Subsequently we look at the current user’s attributes (e.g. ‘is_authenticated’) to create a variable called loggedin to store true or false depending upon whether the user is logged in or not.

var eid = 'logged_in';
conditional_block(loggedin, eid);

The conditional_block javascript function is a core function that comes bundled with your JavaScript template. It is responsible for showing and hiding elements on the pages based upon whether a condition is true or not. It takes to parameters as input. The first is a boolean value and the second is a string or element ID. The element identified by the second variable will be made visible if the first parameter is true and will be hidden otherwise.

if (!loggedin) {
    var p = document.getElementById('login_message');
    if (!p) return;

This template code is invoked if the user is logged in. If an element on the page can be found with an id of “login_message” then the script is permitted to run. Otherwise, the javascript aborts.

If the script continues to run, then it encounters the following code:

if (u && !u.is_author) 
    p.innerHTML = "In order to create an entry on this blog you must first register.";
else
    if (u && !u.can_post)
        p.innerHTML = "You do not have permission to post.";
    else
        p.innerHTML = '<a href="javascript:void(0)" onclick="return mtSignInOnClick(\'login_message\')">Sign in to create an entry.</a>';

The code above sets the contents of the login prompt based upon the users current state. In the above example if displays different messages depending upon:

  • if the user is logged in
  • if the user is not logged in
  • if the user is logged in, but doesn’t not have permission to create a post

Finally once this code has been setup and customized according to your needs, then you need to execute it when the page is loaded. This is done by adding the following HTML/Javascript to the tail end of your page:

<script type="text/javascript">
/* <![CDATA[ */
mtAttachEvent('usersignin', is_loggedin);
/* ]]> */
</script>
Back