Conditionally Show/hide Html Based On User Access Level

[Domco]

I am trying to conditionally show/hide HTML elements based what type of user is logged in. I’m not too familiar with how Caspio sessions are handled and how they relate to my HTML pages. I also have very little Javascript experience.

 

There should be three levels of access, Admin, Manager, and User. I currently have an authentication table that has three users and three yes/no fields (admin/manager/user), each user is a different type.

 

My first idea was to use cookie data. On successfully logging into my authentication form it would make a cookie for user type which would have a value of admin, manager, or user. Then I could use that cookie to add the display:none style to certain elements that I don’t want lower access users viewing.

 

My problem is that I’m not sure how to do that with Javascript, or if that is the best practice.

 

I currently have an HTML Datapage linked to my Authentication. On that page is this code:

var type_admin = '[@authfield:admin]';
var type_manager = '[@authfield:manager';
var type_user = '[@authfield:user]';

if (type_admin == "Yes")
{
document.cookie="type=admin";
}
else if (type_manager == “Yesâ€)
{
document.cookie="type=manager";
}
else if (type_user == “Yesâ€)
{
document.cookie="type=user";
}

Then I assume I would just reference the cookie on my HTML pages somewhat like this:

<div class="adminContent">
Show this content if the user is Admin
</div>

<div class=â€managerContentâ€>
Show this content if the user id Manager
</div>

<div class=â€userContentâ€>
Otherwise show this content
</div>

Here are the HTML/PHP files I’m working with:

 

http://domco.us/vita/test/

 

And here is the login page that’s just an embedded Datapage:

 

http://domco.us/vita/page_login.php

 

In the end I would like to be able to filter things like navigation buttons or div blocks. It would be great to have an Admin Tools link in the navigation that only Admins/Managers could see.

 

I’m not sure the specifics of getting something like this to work. Also I don’t know how to keep that @authfield data throughout different HTML pages (not linked to Caspio) and I’m just assuming Cookies are the best option. Any help would be greatly appreciated. 

 

[MayMusic]

Did you try to add a div and give it an ID then hide the div like

 

document.getElementById('DIV ID').style.display = 'none';

 

and show other:

document.getElementById('DIV ID').style.display = 'block';

[Domco]

Thanks for the reply MayMusic!

 

I haven't tried that method for hiding the content yet, but it looks like that will work. Should I just include that in an IF statement?

 

My problem now is just getting my Datapage to create those cookies, I can't figure out why it's not working. Is there any other method of keeping my user access levels throughout my entire site? (multiple HTML pages embedded with DataPages)

[Barbara]

1. In your authenticated HTML DataPage write a script to define variables and values as you already did. For example:

<script>
var type_admin = '[@authfield:admin]';
var type_manager = '[@authfield:manager';
var type_user = '[@authfield:user]';
</script>

2. Embed the HTML DP in every protected web page and hide it. Example:

<div id="htmldp" style="display:none">
Deploy code of HTML DP…
</div>

3. In your HTML web pages where you have the hidden HTML DataPage, write a JavaScript to show/hide content:

<script>
if (type_admin =='yes') {
//show or hide your content
document.getElementById('YourContentID').style.display = 'none';
document.getElementById('YourContentID').style.display = 'block';
}
else if (type_manager='yes'){
…}
…
</script>

[Domco]

Thank you for the reply Barbara! Unfortunately I can't get this solution to work.

 

I did each step correctly and i'm getting an error on my page which shows the variable is not getting defined. I embedded the first code block in both my authentication form header, and the datapage for that form, neither with any luck. I tried to screenshot most of the code so you can see what I mean.

 

[MayMusic]

This line is missing closing "]"

var type_manager = '[@authfield:manager]';

and in your code you have added } by mistake

[Kurumi]

Hi - just wanted to share this solution for conditionally showing/hiding links based on user access. This means that if I'm currently logged in as User A, the link should only show to all the assigned records or submitted data related to my ID/authentication.

Here are the steps:

1. In your HTML Block where you have the link, add an identifier.

<a id="vdetails[@field:Unique_ID]" href="https://google.com">View Details</a>

2. In the same HTML Block, add a JavaScript code to conditionally show or hide the link.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

const link = document.getElementById("vdetails[@field:Unique_ID]");

  if("[@authfield:Employee_ID]" != "[@field:Related_Employee_ID_Field]"){

    link.style.display="none";
  }
  
});
</script>

Sample Result:

I'm currently logged in as Sales A here.

Hope this helps!