Web Programming, Change link based on cookie existance.

[Scarpozzi]

I'm working with a web portal that's about 15 years old in design. The auth portion is very clunky and doesn't give me many options. When you login, a cookie is set.

I want to create a page that provides 2 links....but only shows clients the one they need....one that links the portal auth page if they're not authenticated, and a second that bypasses it if they already are authenticated.

What's the best method to do this in html and/or javascript these days? I don't have the ability to use php due to server restriction.

Thanks.

 

[Sgraffite]

Doing it client side is a really backwards way of doing it. If you really want to you can do it something like this:

function getCookie(name) {
	var parts = ('; ' + document.cookie).split('; ' + name + '=');
	if (parts.length == 2) return parts.pop().split(';').shift();
}

var authenticatedOnlyLink = document.getElementById('LinkId');
var nonAuthenticatedOnlyLink = document.getElementById('LinkId2');
if(!getCookie('AuthCookie')){
	// Hide the link that requires authentication
	authenticatedOnlyLink.style.display = 'none';
}else{
	// Hide the link that requires no authentication
	nonAuthenticatedOnlyLink.style.display = 'none';
}

 

[Train]

you can check the cookie in jQuery, then show/hide the links.

Probably overkill if you don't have jQuery already, I'm sure this could be written in pure js but I am more used to jQuery lately. Lol, I don't even remember how to do most Dom manipulation in raw JS anymore.

<a id="loginLink" href="blah">Login</a>
<a id="otherLink" href="blah" style="display:none;">Other place</a>

<script>
$(document).ready(function(){   
  if ($.cookie('cookie_name') != null ){
     $("#loginLink, #otherLink").toggle();
  } 
 });
</script>

 

[Scarpozzi]

Doing it client side is a really backwards way of doing it. If you really want to you can do it something like this:

function getCookie(name) {
	var parts = ('; ' + document.cookie).split('; ' + name + '=');
	if (parts.length == 2) return parts.pop().split(';').shift();
}

var authenticatedOnlyLink = document.getElementById('LinkId');
var nonAuthenticatedOnlyLink = document.getElementById('LinkId2');
if(!getCookie('AuthCookie')){
	// Hide the link that requires authentication
	authenticatedOnlyLink.style.display = 'none';
}else{
	// Hide the link that requires no authentication
	nonAuthenticatedOnlyLink.style.display = 'none';
}

The reasoning is because the code exists on a different web server than the one it's accessing. It can't be done server side because the web server doesn't know whether or not the cookie has been set. This is really more of me trying to cater to the stupid masses.

 

[Scarpozzi]

you can check the cookie in jQuery, then show/hide the links.

Probably overkill if you don't have jQuery already, I'm sure this could be written in pure js but I am more used to jQuery lately. Lol, I don't even remember how to do most Dom manipulation in raw JS anymore.

<a id="loginLink" href="blah">Login</a>
<a id="otherLink" href="blah" style="display:none;">Other place</a>

<script>
$(document).ready(function(){   
  if ($.cookie('cookie_name') != null ){
     $("#loginLink, #otherLink").toggle();
  } 
 });
</script>

Thanks. I need to start playing more with JQuery...I've heard good things, but haven't had to do much web anything in years....heck...I don't even have to do this. I just decided to. 😀

 

[purbeast0]

i've never done javascript (professionally) without jquery, and there is no way i would ever do javascript on my own without it either heh. i can't even imagine doing javascript sites without it.

 

[Scarpozzi]

i've never done javascript (professionally) without jquery, and there is no way i would ever do javascript on my own without it either heh. i can't even imagine doing javascript sites without it.

I have a followup question if anyone has an idea...

I've got a table on this page that is hiding rows based on the value of a dropdown box. (select option followed by a case statement)

This was done in javascript to take a 5+ page document and make it fit in a relatively small window by excluding data not needed. It works great in Chrome and Firefox. IE10 is giving me the "Internet Explorer restricted this webpage from running scripts or ActiveX controls" message.

I know the end user can either allow the blocked content, disable the security in their browser, etc... Is there a better way to use a dropdown to fetch table contents dynamically in a page without IE squashing it by default? (or some other method than a dropdown)

 

[Train]

That doesn't sound like default IE behavior. If it really is just JS and is manipulating elements based on a drop down... there should be no issues.

If it is making a server request (especially to a different domain) then this could be seen as a security threat.

 

[purbeast0]

I have a followup question if anyone has an idea...

I've got a table on this page that is hiding rows based on the value of a dropdown box. (select option followed by a case statement)

This was done in javascript to take a 5+ page document and make it fit in a relatively small window by excluding data not needed. It works great in Chrome and Firefox. IE10 is giving me the "Internet Explorer restricted this webpage from running scripts or ActiveX controls" message.

I know the end user can either allow the blocked content, disable the security in their browser, etc... Is there a better way to use a dropdown to fetch table contents dynamically in a page without IE squashing it by default? (or some other method than a dropdown)

not sure why that is happening, but i use angularJS at work and that type of stuff is a piece of cake to do with frameworks such as angular. but again, an entire framework may be overkill for your site/app.

 

[Scarpozzi]

It may just be my browser. It works ok for a few others. I'm going to try to get it up on the web server today and have a few other people test it.

I definitely need to look into this stuff if I get time. I miss doing these kinds of simple web projects and with angularjs/jquery it looks like it's gotten easier since I messed with it 12 years ago.

Thanks for all your help guys.

 

[sourceninja]

i've never done javascript (professionally) without jquery, and there is no way i would ever do javascript on my own without it either heh. i can't even imagine doing javascript sites without it.

I personally only use VanillaJS ( http://vanilla-js.com/ ). It has most of the same features and is way smaller. ;-p

 

[Scarpozzi]

As soon as I got the code up on the webserver, all my security errors went away. I was making no domain references or doing anything weird...this was literally just a simple table manipulation script. Everything is working alright with the page...