@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).