npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@infomaker/imid-gui

v3.3.1

Published

Utility lib to simplify implementation of IMID related views, such aas 'sign in', 'Unauthorized', 'Session expired' etc.

Downloads

24

Readme

Utils and GUI components for IMID

This library is intended to be used along side IM.ID and IMSG.

The lib is two parts, a React-app and a 'server'-part that generates the HTML

How to use as static files

Each scene is set up to either use the window.settings global variable or fetch these settings from a Base64 encoded JSON object set as the value for the the settings-query parameter. This could be useful in an environment where these scenes are not served by a node server, such as writer-client.

e.g. unitswitcher.html?settings=eyJsb2NhbGUiOiJzdl9TRSIsInVuaXRzIjpbImltbmV3cyIsIm5hdmlnYW5ld3MiXSwiY2hhbmdlVW5pdFBhdGgiOiIvaW1zZy1zZXJ2aWNlL3YxL3VuaXQiLCJzZXNzaW9uU3RvcmFnZU5hbWUiOiJkYi1jdXJyZW50LXVuaXQiLCJzZXRVbml0QXNRdWVyeSI6ZmFsc2UsInJlZGlyZWN0UGF0aCI6Ii93aGVyZS10aGUtdXNlci13YW50cy10by1nby13aGVuLXVuaXQtaXMtc2V0In0=

How to use with Express

When using this module with Expess the built html files are served by your backend, and the settings are injected before they are served. This is the best solution when your application is served using Express, Hapi, or something similar.

Unit selection

The following props should be used to render a "UnitSelector" screen

| Property | Description | Type | Optional | | -------------------|:-----------------:|:---------:| ---------:| | locale | Language to use (defaults to 'sv_SE') | String | true | units | Units to select from | array[string] | false | | changeUnitPath | IMSG path to use in POST-request (defaults to '/imsg-service/v1/unit') | String | true | | sessionStorageName | Session storage key (defaults to 'imid-gui-selected-unit') | String | true | | setUnitAsQuery | If unit should be set as query param in redirect (defaults to false) | boolen | true | | redirectPath | Where to redirect after selection (defaults to '/') | String | true |

Static File Example

const settingsQuery = btoa(
    JSON.stringify({
        locale: 'sv_SE',
        units: ['imnews', 'naviganews'],
        changeUnitPath: 'https://backend-service.infomaker.io/imsg-service/v1/unit',
        sessionStorageName: 'db-current-unit',
        setUnitAsQuery: false,
        redirectPath: '/where-the-user-wants-to-go-when-unit-is-set'
    })
)

window.location.assign(`https://static-files.infomaker.io/scenes/unitswitcher.html?settings=${settingsQuery}`)

NodeJS Server Example

This code demonstrates how to get html/js/css for "UnitSelector" screen

const {getHTMLForUnitSwitch} = require('@infomaker/imid-gui')

const settings = {
    locale: 'sv_SE',
    units: ['imnews', 'naviganews'],
    changeUnitPath: '/imsg-service/v1/unit',
    sessionStorageName: 'db-current-unit',
    setUnitAsQuery: false,
    redirectPath: '/where-the-user-wants-to-go-when-unit-is-set'
}

const result = getHTMLForUnitSwitch(settings)

res.type('html').status(200).send(result)

Unauthorized screen

The following props should be used to render a "Unauthorized" screen

| Property | Description | Type | Optional | | -------------------|:-----------------:|:---------:| ---------:| | locale | Language to use (defaults to 'sv_SE') | String | true | user | Ojbect containg information about the current user| Object | false | | logoutURL | Logout endpoint | string | false |

Static File Example

const settingsQuery = btoa(
    JSON.stringify({
        locale: 'sv_SE',
        user: {
            email: '[email protected]',
            picture: 'url-to-image'
        },
        logoutURL: 'path/to/logout'
    })
)

window.location.assign(`https://static-files.infomaker.io/scenes/unauthorized.html?settings=${settingsQuery}`)

NodeJS Server Example

This code demonstrates how to get html/js/css for "Unauthorized" screen

const {getHTMLForUnauthorized} = require('@infomaker/imid-gui')

const settings = {
    locale: 'sv_SE',
    user: {
        email: '[email protected]',
        picture: 'url-to-image'
    },
    logoutURL: 'path/to/logout'
}

const result = getHTMLForUnauthorized(settings)

res.type('html').status(200).send(result)

Login expired screen

The following props should be used to render a "Login expired" screen


If the login expired screen is rendered within an iframe. The redirect to the loginURL should be handled by the parent window. When a press on the button is registered a post message called login-expired-button-pressed' is fired to the parent window.


| Property | Description | Type | Optional | | -------------------|:-----------------:|:---------:| ---------:| | locale | Language to use (defaults to 'sv_SE') | String | true | org | Organization name | String | false | | loginURL | Login endpoint | String | true |

Static File Example


const {user} = fetchLocallyCachedUserinfo()

const settingsQuery = btoa(
    JSON.stringify({
        locale: 'sv_SE',
        org: user.org,
        loginURL: 'https://authprovider.com/login',
    })
)

window.location.assign(`https://static-files.infomaker.io/scenes/loginexpired.html?settings=${settingsQuery}`)

NodeJS Server Example

This code demonstrates how to get html/js/css for "Login expired" screen

const {getHTMLForLoginExpired} = require('@infomaker/imid-gui')

const settings = {
    locale: 'sv_SE',
    org: req.user.org,
    loginURL: 'https://authprovider.com/login',
}

const result = getHTMLForLoginExpired(settings)

res.type('html').status(200).send(result)

Supported languages

The gui can be rendered using the following language codes:

  • en_GB - English (Great Britain)
  • en_US - English (American)
  • sv_SE - Svenska

Install

To install this package simply run:

npm install --save @infomaker/imid-gui

Build

npm run build

Development

Start local develop environment

npm run start

Once the webpack devServer has started, you can access the following endpoints to see the results:

  • http://localhost:8081/unitswitcher.html
  • http://localhost:8081/unauthorized.html
  • http://localhost:8081/loginexpired.html

Test

To run project test once use:

npm run test

or to enable auto-reload of test on save use:

npm run test-watch

Publish a new release

Use GitFlow with master/develop/feature/release branches to handle new functionality and versions. When a new release-branch has been created run one of the following scripts to bump-version, create a tag and commit new changes.

    npm run release:major
    npm run release:minor
    npm run release:hotfix

Finish the release through GitFlow, this will merge the release-branch into develop and master branches. When a new release is pushed to remote master a Bitbucket pipeline script will be triggered and a new version will be published on NPM (if all tests are green).