OG ONE IN SDK

Based on the OG One In token, render HTML based on permissions of the user. The result will be sorted and filtered according to role groups and user groups (i.e. filtered HTML).

Usage

The OG ONE IN SDK is simply a package that accepts HTML data as an input. In return, you will receive...

• filtered data based on user and permissions

Install

    npm i og-one-in-sdk

Examples:

Initialize (INIT):

import { RoleBasedHtml } from "og-one-in-sdk";
const roleBasedHtml = new RoleBasedHtml();

steps

step 1: Assign a data-id to an html element tag

To filter based on user groups or role groups, add data-id=[RESOURCE_NAME] to any div or HTML element

EXAMPLE

<div class="container" data-id="resource1">
  <h1>this is section 1</h1>
</div>
<div class="container" data-id="resource2">
  <h1>this is section 2</h1>
</div>

step 2: use filter to render role base frontend view

Pass the compiled HTML and Og-One-In Token to the filter method

const filterHtml = await roleBasedHtml.filter(page, token);

Note:

• To render the filter view, use the filter response and assign it to the wrapper
• To render the view, convert the response HTML string to HTML

Demo snippet (REACT)

import { RoleBasedHtml } from "og-one-in-sdk";
import React, { useState, useEffect } from "react";
import ReactHtmlParser from "react-html-parser";

const roleBasedHtml = new RoleBasedHtml();
function App() {
  const [html, setHtml] = useState();

  const token =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MDQwN2QyNGJjN2QyNDAwMDFjMTZjZDYiLCJiaWQiOiI1Iiwic3ZjIjoiMSIsInRybSI6IjEiLCJyb2xlcyI6WyJzZXJ2aWNlQWRtaW4iLCJBbGwgQWRtaW4gUm9sZSJdLCJyb2xlQ29sbGVjdGlvbnMiOltdLCJyb2xlc1Jlc291cmNlc1Blcm1pc3Npb25zIjpbeyJSb2xlTmFtZSI6InNlcnZpY2VBZG1pbiIsIlJlc291cmNlUGVybWlzc2lvbnMiOltdfSx7IlJvbGVOYW1lIjoiQWxsIEFkbWluIFJvbGUiLCJSZXNvdXJjZVBlcm1pc3Npb25zIjpbeyJSZXNvdXJjZU5hbWUiOiJBbGwgQWRtaW4gUmVzb3VyY2VzIiwiQ2FuUmVhZCI6dHJ1ZSwiQ2FuQ3JlYXRlIjpmYWxzZSwiQ2FuVXBkYXRlIjpmYWxzZSwiQ2FuRGVsZXRlIjpmYWxzZX1dfV0sImlzcyI6Imh0dHBzOi8vc2VydmljZXMub2dzdGFjay5jb20vb25laW4vYXV0aCIsImp0aSI6IjgxNDI1YTBjLTU1YjUtNGI4NS1iMDllLTBjMDVhYmJmMThkMiIsImV4cCI6MTY0MTQ3MTYyNCwiaWF0IjoxNjQxNDY0NDI0fQ.1O-kEuPbLB_qYG-UkBj2V84rhtfO9pSf6ehU6ETFKfs";

  const stringhtml = `
  <div class="role1" data-id="resource1">
  <h1>this is section 1 for role 1</h1>
  </div>
  
  <div class="role2" data-id="all-admin-resources">
  <h1>this is section 2 for role 2</h1>
  </div>

  <div class="role3" data-id="resource2">
  <h1>this is section 3 for role 3</h1>
  </div>`;

  const fnfilterHtml = async () => {
    const filterHtml = await roleBasedHtml.filter(stringhtml, token);
    return filterHtml;
  };

  useEffect(() => {
    fnfilterHtml().then((data) => {
      setHtml(data);
    });
  }, []);

  return <div className="App">{ReactHtmlParser(html)}</div>;
}

export default App;