Jump to content
  • 0
Domco

Conditionally Show/hide Html Based On User Access Level

Question

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. 

 

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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)

Share this post


Link to post
Share on other sites
  • 0

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>

Share this post


Link to post
Share on other sites
  • 0

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.

 

example_2.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...