How to display set access permission & display /hide div based on database values

Question

I want to set access permissions page where setting the permissions to the user to only view selected divs only for example:

There are 5 checkboxes in admin page and 5 divs in user page if check 3 div user has to get 3 div only I am mapping userlocation & client location & username for setting access permissions and how to display / hide the div in user page based on the checkbox selection or database values?

There is a user login separately and admin login separately. The admin will disable certain features for certain users. Using wcf rest and sql server as backend.

Solution

Before we get into the answer I have to mention security. You probably know, but for future readers benefit...you must not rely on simply hiding or not generating HTML elements as a means of restricting user access. Why - because when your form submits data to the server this can be observed with simple tools like Fiddlr. If you simply hide important inputs on the web page but still submit them, then a mischievous user could use something like Postman to edit and submit dodgy values to your server INCLUDING for the fields that were not visible on the form. Even if you have some server-side code to restrict the generation of the HTML for the restricted inputs, if a user is able to see a full form submit, or more likely if your API is self-describing or well documented, then they can fire up Postman and start sending your server all manner of hooky data.

For this reason it is vital that you re-validate the user, their role and their right to modify at the server at each interaction. Sermon over.

Assuming the above protection is in place then the way forward is relatively simple. In your HTML you assign classes to the elements that need to show/hide and you send a variable from the server to dictate their hidden or visible state.

For example, say you have two groups of users called usrNormal and usrAdmin. You might have an input defined as:

<input type="text" class="usrNormal usrAdmin" name="somedata" style="display:hidden;"></input>
<input type="text" class="usrAdmin" name="admindata" style="display:hidden;"></input>
<div class="usrNormal usrAdmin" style="display:hidden;">Some important info here....</div> 
<div class="usrAdmin" style="display:hidden;">Some admin-only info here....    </div>

The key to this technique is the css class setting class="usrNormal usrAdmin"

And the accompanying JS function is:

var usrType = "usrNormal"; function protect() { $("." + usrType).show(); } protect();

I have used JQuery here in the line inside the function, you could use plain JS to achieve the same. We start the page with the important inputs, divs and other html elements hidden. The usrType setting comes from the server, and when the protect() function is called it finds all elements with the given user type class and makes them visible.

EDIT: See working snippet below. Though contrived the idea is clear I hope. One point to consider is the use of a generic marker class to indicate that the appropriate elements should take part in the show/hide operation. Let me know if you have any queries.

$( document ).ready(function() { // Important: wait for the document dom to be ready

  // get the value of the server access variable - simulated by the radio buttons in this case
  // var access = <you would put your server value here !>
  var access = ".usrNormal";
  setAccess(access);


  // next part is just to let you play.
  $('.serverVal').on('change', function(e){ 
    setAccess($(this).val()); 
    })

  // key function - this will show pr hide based on classes.
  function setAccess(accessVal) {

    // next line finds all elements with class including 'usrAccess' and shows if they have the request class or otherwise hides.
    $(".usrAccess").each( function() {
      var ele = $(this); // readability

      showHide(ele, accessVal);

    })
  
  }
  
  // show or hide the element based on class
  function showHide(ele, cls){
  
    if ( ele.is(cls) ){ // pay attention - this uses the jquery 'is' feature.
      ele.show();    
    }
    else {
     ele.hide();
    }
     
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1">
  <p>
    <span>This selection simulates the value passed from the server. When changed the elements with the matching classes are shown or hidden.</span><br />
  </p>
  <p>
    <span>
      <input type="radio" class="serverVal" id="usrType1"  name="usrType" value=".usrNormal"  checked="1" />
      <label for="usrType1"> Normal User only</label>
    </span>
    <span>
      <input type="radio" class="serverVal" id="usrType2"  name="usrType" value=".usrAdmin"/>
      <label for="usrType2"> Admin User only </label>
    </span>
    <span>
      <input type="radio" class="serverVal" id="usrType3"  name="usrType" value=".usrAdmin, .usrNormal" name="usrType3"/>
      <label for="usrType3"> Both </label><br />
    </span>
  </p>
  <hr>
  <p class="usrNormal usrAccess" style="display:none;">
    <label for="somedata">Normal only</label>
    <input type="text" name="somedata" />
  </p>
  <p class="usrAdmin usrAccess" style="display:none;">
    <label for="admindata1">Admin only</label>
    <input type="text" class="usrAdmin" name="admindata1"  />
  </p>
  <p class="usrNormal usrAccess" style="display:none;">
    <label for="someinfo">Info 1</label>
    <textarea id="someinfo">This textare is visible to normal users...</textarea> 
  </p>
  <p class="usrAdmin usrAccess" style="display:none;">
    <label for="admininfo">Info 2</label>
    <textarea id="admininfo">This textare is visible to only Admin users...</textarea> 
  </p>
  
</form>