@bitpod/p10-platform-bar

p10 platform bar

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@bitpod/p10-platform-bar
Minified + gzip package size for @bitpod/p10-platform-bar in KB

Readme

p10 platformbar

How to install

Before using platform bar, you need to build platformbar bundle files.

  • To create platform bar bundle files,
    • open command prompt move to platformbar root folder where package.json is present.
    • fire npm install (Note you need to have node.js installed on your system) command.
  • After npm install is complete,
    • fire webpack command, after this command you will find the build js files and related files in dist folder.
  • If you want to render Platformbar as a component in React Application use platformbar.p10platformbar.js and platformbar.css, for other JS Applications use show showplatformbar.p10platformbar.js and showplatformbar.css

USE in react Application

  • To use Application in react Application environment import {PlatformBar,PlatformServices} from 'platformbar.p10platformbar.js'.
  • Before using p10platformbar you need to initialize the PlatformService Api(Promise based API, generally called in componentWillMount) which requires following params:
    PlatformServices.initialize({
        client_id: "",
        client_secret: "",
        authorizationUrl: "",
        authorizationToken:"",
        authorizationlogoutUrl:"",
        authorizationuserInfoUrl:"",
        codeFlowEndPoint:{
            authenticateURL:"",
            tokenURL:"",
            refreshTokenURL:"",
            logoutURL:""
        },
        stateVariable: "",
        serviceApiUrl:"",
        logout_redirect_url: "",
        login_redirect_url: "",
        flowType:"",
        hostLabel:"",
        search:{
            onsearchrequest:function,
            searchresults:{
                labelField:"",
                keyField:""
            },
            onsearchresultselect:function
        },
        on_auth_state_change: function
    })
    
  • Params Description:
    1. client_id : client id (String) (required)
    2. client_secret : client secret (String) (required)
    3. authorizationUrl : auth url (String) (required when using implicit flow)
    4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
    5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
    6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
    7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
      • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
      • tokenURL : passport server endpoint to return token (String)(required)
      • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
      • logoutURL : passport server logout endpoint (String)(required)
    8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
    9. serviceApiUrl : platform services api url link (String) (required)
    10. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
    11. login_redirect_url : redirect url after user logins (String) (required)
    12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
    13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
    14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
    15. on_auth_state_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)
  • After initializing p10 platformbar you can render p10 platform bar by Rendering as a jsx component.

USE in JS Application

  • To use Application in JS environment include 'showplatformbar.p10platformbar.js' file in your application.

  • After including file you will get a global object p10platformbar then you need to call platform services api initialize method.

    p10platformbar.PlatformServices.initialize({
        client_id: "",
        client_secret: "",
        authorizationUrl: "",
        logout_redirect_url: "",
        login_redirect_url: "",
        hostLabel:"",
        search:{
            onsearchrequest:function,
            searchresults:{
                labelField:"",
                keyField:""
            },
            onsearchresultselect:function
        },
        on_auth_state_change: function
    })
    
  • Params Description:

    1. client_id : client id (String) (required)
    2. client_secret : client secret (String) (required)
    3. authorizationUrl : auth url (String) (required when using implicit flow)
    4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
    5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
    6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
    7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
      • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
      • tokenURL : passport server endpoint to return token (String)(required)
      • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
      • logoutURL : passport server logout endpoint (String)(required)
    8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
    9. serviceApiUrl : platform services api url link (String) (required)
    10. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
    11. login_redirect_url : redirect url after user logins (String) (required)
    12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
    13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
    14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
    15. on_auth_state_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)
  • After initializing p10 platformbar you can render p10 platform bar by calling p10platformbar.mountPlatformbar() function by providing, element in which platform bar is to be rendered and props.

    e.g.: p10platformbar.mountPlatformbar(document.getElementById("App"),{});

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.