Creating a Sign-In Link on Your Blog

A very common element designers want to display to their user is a sign in link that will prompt them to sign in if they are not currently logged in, or to display their username and a sign out link if they are logged in. This is accomplished with some very simple HTML and Javascript:

<div id="signin-content">
    <a href="javascript:void(0)" onclick="return mtSignInOnClick('signin-content')">Sign In</a>
</div>

A sign in link works like any other link on a web page, but instead of sending a user to a URL, it invokes a javascript function to sign a user in when they click on it. The mtSignInOnClick function is provided by Movable Type and takes as a single parameter the ID of the HTML element whose contents will be replaced with HTML indicating the user’s current logged in state.

In the above example, if a user clicks the Sign In link on the blog, Movable Type will take them to the login screen. After they have logged in, Movable Type will direct the user back to the page they originated from. It will then replace the contents of the <div> element with the id of “signin-content” with a very simple welcome message and a link for the user to click to sign out.

The final glue to make this all come together is the javascript you add to the bottom of every page which initializes all of the sign in links on the page and processes requests to login:

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

Here is what the two lines of javascript do:

The first line, mtAttachEvent intercepts requests to login and then invokes the mtUpdateSignInWidget function. The mtUpdateSignInWidget function is found in your JavaScript index template and is responsible for setting the contents of your sign-in link.

The second link forces this mtUpdateSignInWidget function to be run when the page is loaded and ensures that the page properly reflects the visitors current logged in state.