Changing main page Pre-login and Post-login

[Jessica]

Hi everyone. I've just begun customizing my network. I've used a couple of text boxes that I put images and code into so that I could display them on the main page of my network before a user logs in. The thing is, I DON'T want these modules displaying after the user logs in. Also, I want to remove many of the other modules from the prelogin page. Our idea is that the prelogin page should be rather sparse, only offering some graphics and text about what the site is for, and sign-in/sign-up buttons. Does anyone know how to specify if a module displays pre or post login?

Thanks for your help!

[Mike Nicholson]

Hello Jessica!

The easiest way to accomplish this is probably through some trickery with JavaScript and a small PHP file on your social network.

I'd make some text boxes that display one set of content to members logged in and another set to visitors that are not logged in. You can then embed flash players (e.g. a photo slideshow) into these boxes conditionally to achieve the rich content.

The PHP you'll need should be named loggedIn.php and will look something like this:

<?phpif(XN_Profile::current()->isLoggedIn()) {
    echo "true";

} else  {

    echo "false";

}

Just copy this file into your social network's file system. Put it into the root directory.

Now you can write JavaScript that makes a quick AJAX call to http://examplenetwork.ning.com/loggedIn.php to see if the current visitor is logged in. This should allow you to display different content to logged in members (even no content to logged in members).

This will, of course, leave the little bars at the top of the text boxes visible. This must be necessary, though, for you to be able to configure these modules! With the bar missing for logged in users you won't be able to access the 'edit' button.

This being said, if you really want to remove it you can use JavaScript to remove it as well.

Cheers!
Mike

[Jessica]

Hi Mike. Thanks so much for your help! Couple of quick questions:

1. Could you give me an example of the JavaScript I'll need to write that calls the php? I'm a designer who knows how to code, but I'm not very advanced with JavaScript just yet.

2. So I can embed the call to this loggedin.php file to the text boxes I create, which allows me to only display them pre or post log in. But what about for the standard modules? Forums, videos, etc? We only want these modules displayed after the user logs in. Is there a way for me to embed this php into those modules by rebuilding them with a text box and including the call to Forums and to the php? This sounds like it could be very buggy...

Thanks again!

- Jessica

[Mike Nicholson]

Hello Jessica!

Sure I can provide a code sample. Here's a quick and dirty sample of some JavaScript that uses Ajax to display different information depending on log in status. When experimenting with this code please be aware that I've only tested it in FireFox and that the logged out view of your network is cached for several minutes.

<div id="loggedOutOnlyText"></div>
<script language="JavaScript"> 

function processLoggedIn(response) {

    var loggedOutOnlyText = document.getElementById("loggedOutOnlyText");

    if(response == 'false') {

        loggedOutOnlyText.innerHTML = "You're not logged in!";

    } else {

        loggedOutOnlyText.innerHTML = "You're logged in!";

    }

}

function ajax(url, vars, callbackFunction) {

  var request = window.XMLHttpRequest ?

      new XMLHttpRequest() :

      new ActiveXObject("MSXML2.XMLHTTP.3.0");

  request.open("POST", url, true);

  request.setRequestHeader("Content-Type",

                           "application/x-www-form-urlencoded"); 

 

  request.onreadystatechange = function() {

    if (request.readyState == 4 && request.status == 200)  {

      if (request.responseText) {

          callbackFunction(request.responseText);

      }

    }

  };

  request.send(vars);

}

ajax("/loggedIn.php", null, processLoggedIn);

</script>

Now to answer your next question: If you'd like to have modules beyond simple text boxes, such as the forum module, behave differently for logged in members versus logged out ones, this will require greater effort. Although you can use a similar technique as described above to manipulate these elements with JavaScript, this is neither very secure nor graceful.

You'll need to dig into the embed templates for these features (which can be found in /widgets/feature name/templates/embed. You'll need to add some PHP code into these embeds that only displays content to members that are logged in. This code will be pretty much the same as the contents of loggedIn.php.

Cheers!
Mike

[Jessica]

Hello Mike, this is very helpful! I've been playing with the code to embed a flash banner when not logged in (one that would get users to join) and then just displaying text when logged in. I use swfobject.js to display the swf which works great. I'll paste my code below.

But I am having issues...

1. The call to the loggedin or loggedout parameter isn't really working. It's always displaying the second parameter whether logged in or not. But even when I play around with it, having the first instance as "if(response == 'true')" it always goes to the "else", whether logged in or not. Either my php is bad, or there is something wrong with the javascript. Here's my php file: http://liveon.ning.com/loggedin.php

2. Form code. I want to use this javascript in another text box, that will give you the form code for the signup only when logged out, and when logged in maybe I'll just put an image there. How do I generate the form code into the javascript? I can't just paste the html form code can I?

Here's my swf embed code for logged out users. Let me know if you see any errors which may be causing the text box to always display the "else". I'm new at js:

script type="text/javascript" src="swfobject.js">

script language="JavaScript" type="text/javascript">

function processLoggedIn(response) {

var loggedOutOnlyText = document.getElementById("loggedOutOnlyText");

if(response == 'false') {

loggedOutOnlyText.innerHTML = new SWFObject('http://api.ning.com/files/bYkSVgwejIwMGF9TcVjavhDgK6zUbLVsIjJ5ryyLeM8kqKUqrgZvlOt2tz6LTCMwSM0WWvV9Dlm-3YWMKyZX8LLdO0Xdob*3/introbanner.swf','mpl','500','350','7');
so.addVariable('autostart','true');
so.write('loggedOutOnlyText');

} else {

loggedOutOnlyText.innerHTML = "You are on the LiveOnNetwork. Browse our Forums to find out about all of our new products and services. Hear feedback from other members, or post questions you may have.";


}

}

function ajax(url, vars, callbackFunction) {

var request = window.XMLHttpRequest ?

new XMLHttpRequest() :

new ActiveXObject("MSXML2.XMLHTTP.3.0");

request.open("POST", url, true);

request.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");



request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {

if (request.responseText) {

callbackFunction(request.responseText);

}

}

};

request.send(vars);

}

ajax("/loggedin.php", null, processLoggedIn);



So in my next text box, I need to put form code where I currently have the SWFObject call, I need to include the sign in form. Also, what's the best way to make it display an image?

Thanks for all this, it's great!!

- Jessica

[Jessica]

Ok, I've got the php switch working, woo! It's displaying the flash banner when logged out, and a message when logged in.

Now for the other text box. I need it to display the signup form code when logged out, and something else when logged in. I thought I could do this by putting the form html inside the div, which the js would replace when logged in. But it's not working. Just displays the form code at all times.

This is what I've got. Ideas on how to make it work??

form action="http://liveon.ning.com/main/authorization/doSignIn?target=http%3A%2F%2Fliveon.ning.com%2F" method="post">

Forgot password? Problems signing in?

script language="JavaScript" type="text/javascript">






function processLoggedIn(response) {

var loggedOutOnlyText = document.getElementById("loggedOutOnlyText");

if(response == 'true') {

loggedOutOnlyText.innerHTML = "You are logged in!";

}
}

function ajax(url, vars, callbackFunction) {

var request = window.XMLHttpRequest ?

new XMLHttpRequest() :

new ActiveXObject("MSXML2.XMLHTTP.3.0");

request.open("POST", url, true);

request.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");



request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {

if (request.responseText) {

callbackFunction(request.responseText);

}

}

};

request.send(vars);

}

ajax("/loggedIn.php", null, processLoggedIn);

[Mike Nicholson]

Hey Jessica!

It looks like you may have one typo and one namespace collision. First, the php on your social network that determines logged in status is actually loggedin.php not loggedIn.php. It's case sensitive!

Next, it looks like you're using this same function name, processLoggedIn, a couple places on the same page. This makes it a bit confused. If you rename the function to something like processLoggedIn_signin, it should work fine.

I've attached the tweaked code to this reply. Check it out!

Cheers!
Mike

[Dustin]

I have a way that you may be abler to this a little bit easier but i am not sure if you are willing to spend the money i am a member of a site called Widget Laboratory and a friend of mine his user name is evil genius may be able to help you with this that site have made a software you can add to your network and then buy there products they are great and there product don't cost much except for 2 of them they are expensive. but have a look WidgetLaboratory.com

[Jessica]

Thanks, I'll look into it. We'd be willing to spend a little money perhaps.