Using Weebly and Caspio - Show/Hide Weebly Menus using Caspio authentication

[ClayG]

Has anyone else used Weebly as your CMS for your Caspio datapages with the desire to leverage Caspio authentication to show/hide menus?

Weebly has its own built-in login/registration functionality, which includes the ability to create user groups, and if you do, you can set Weebly website pages to only be accessible for certain groups. When one of those pages is in the navigation menu, it remains visible, and users are prompted to login if they click on it. And when you use Weebly for user login/registration, it's a pretty basic registration process that just asks users to enter an email and password.

I'm building a Weebly website which contains a mix of datapages. Some datapages don't require authentication, but most do require authentication.  This howto article from Caspio on restricting access to users based on their role was very helpful, and I'm leveraging it. What I wish I could do, is show/hide Weebly menu choices based on a user's role within my Caspio application. I'm somewhat close to figuring things out, but it feels rather kludgy. Is there a more elegant / secure way?

Within the particular Weebly theme I'm using, a main navigation choice can be hidden with a line of CSS like the following:

     .wsite-menu-item-wrap.wsite-nav-4 {  display: none; }   /* THIS HIDES MAIN MENU CHOICE #4  */

And this would restore/show that main navigation choice:

     .wsite-menu-item-wrap.wsite-nav-4 {  display: inline-block; }   /* THIS RESTORES MAIN MENU CHOICE #4  */

And as an aside, you can even hide the entire Weebly menu with a line of CSS like this:  div#navlist { display: none; }

With the above in mind, one tactic I've tried is to edit the Weebly theme's main CSS so that a particular menu option is hidden by default, and then I have a page with a Caspio datapage that is configured to require authentication, and within the "Configure Fields" screen of that datapage, I'll have a Header/Footer with the CSS that restores the menu choice to visibility.

Kludgy? Yes.   Secure? No. 

The pages that I want to hide from people who haven't logged in don't have Caspio datapages on them, otherwise this would be easier. Has anyone else tackled this, or have any suggestions?

 

[EvSam]

Hi Clay,

I encountered the same issue actually and followed a similar path to use CSS to hide and reveal the nav. So far it has worked pretty well and I have integrated the approach into my site using the authentication object (i.e. under "Authentica" in the caspio bridge).  In my authentication object for the datapages I added a header\footer and in the footer I placed the following javascript:

<script>

if("[@authfield:tbl_Users_OfficeReadAll]" == "Yes"){
}
else if ("[@authfield:tbl_Users_FieldTechnician]" == "Yes"){
}
else{
        var nav = document.getElementsByClassName("wsite-menu-default");
        nav[0].style.visibility = "hidden";
        nav[1].style.visibility = "hidden";
}

</script>

The javascript DOM call document.getElementsByClassName refers to the classname used by Weebly for the nav, and this approach allows you to hide the nav in both the mobile and desktop style browsers. The script will hide the nav unless the authenticated user is of a particular type (in my case one of two types). You can the same portion of the script to reveal the nav as well if necessary:

<script>

  var nav = document.getElementsByClassName("wsite-menu-default");
  nav[0].style.visibility = "visible";
  nav[1].style.visibility = "visible";

</script>

good luck! hope that helps

 

 

[ClayG]

Thank you for sharing!