api security

api security selection

by merganser

HTML

<div id="banner-message">
  <p>Hello World</p>

  <h2>
    api_name
  </h2>

  <table id="apisecurity">
    <thead>
      <tr>
        <th>role</th>
        <th>get</th>
        <th>post</th>
        <th>put</th>
        <th>delete</th>
      </tr>
    </thead>
    <tbody>



    </tbody>
  </table>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var s_json = '[	{		"role": "role1",		"get": true,		"post": false,		"put": true,		"delete": true	},	{		"role": "role2",		"get": false,		"post": true,		"put": false,		"delete": false	}]';
var data = jQuery.parseJSON(s_json);

var table = $("#apisecurity tbody");

$.each(data, function(i, role) {

  var s =
    ' <tr> ' +
    '<td>' + role.role + '</td>' +
    '<td><input class="rolecheckbox" type="checkbox" ' + ((role.get === true) ? "checked" : "") + '  role="' + role.role + '" action="get" /></td>' +
    '<td><input class="rolecheckbox" type="checkbox" ' + ((role.post === true) ? "checked" : "") + '  role="' + role.role + '" action="post" /></td>' +
    '<td><input class="rolecheckbox" type="checkbox" ' + ((role.put === true) ? "checked" : "") + '  role="' + role.role + '" action="put" /></td>' +
    '<td><input class="rolecheckbox" type="checkbox" ' + ((role.delete === true) ? "checked" : "") + '  role="' + role.role + '" action="delete" /></td>' +
    ' </tr> ';
  $("#apisecurity tbody").append(s);
});


$(document).ready(function() {
  $('.rolecheckbox').change(
    function() {
      var role = $(this).attr("role");
      var action = $(this).attr("action");
      var ischecked = this.checked;
      //console.log('role',role);
      //console.log('action',action);
      //console.log('ischecked',ischecked);

      data.forEach((r) => {
        if (r.role == role) {

          if (action == "get") {
            r.get = ischecked;
          } else if (action == "post") {
            r.post = ischecked;
          } else if (action == "put") {
            r.put = ischecked;
          } else if (action == "delete") {
            r.delete = ischecked;
          }

        }
      });

      //console.log('data',data);

    }
  );
});