COINS Logon Widget
Injectable utility to manage browser authorization with COINS.
Use
var widget = new CoinsLogonWidget({
el: document.getElementById('logon-area'),
baseUrl: 'http://localhost:9000/api/v1',
authCookieName: 'COINS_Auth_User-production'
});
Authorization Check
Add a checkAuth
property with a value of true
to make the widget perform an initial authorization check against your API:
var widget = new CoinsLogonWidget({
el: document.getElementById('logon-area'),
baseUrl: 'http://localhost:9000/api/v1',
authCookieName: 'COINS_Auth_User-production',
checkAuth: true,
});
The widget will change to its logged-in state if the check is successful.
Redirect
To make the widget redirect upon successful log in, add a redirect
property with a value of true
and a redirectUrl
property with the URL to redirect to.
var widget = new CoinsLogonWidget({
el: document.getElementById('logon-area'),
baseUrl: 'http://localhost:9000/api/v1',
authCookieName: 'COINS_Auth_User-production',
redirect: true,
redirectUrl: 'http://localhost:9000/my-app/',
});
Methods
You may call these methods on an instance of the widget:
Destroy
Destroy the widget’s elements and remove all event handlers.
widget.destroy()
Events
The widget extends Olical’s EventEmitter: all of its methods are available on an instance of CoinsLogonWidget
. The widget has a few custom events for which you can attach handlers:
Invalid
Fired when one or more of the widget’s form fields aren’t valid.
widget.on('invalid', function(validations) {});
Login Init
Fired when the widget begins a login API call.
widget.on('login:init', function() {});
Login Error
Fired when the widget receives an error from the login API call.
widget.on('login:error', function(error) {});
Login Account Expired
Fired when the widget receives an “account expired” response from the login API call.
widget.on('login:accountExpired', function(apiResponse) {});
Login Account Will Expire
Fired when the widget receives an “account will expire” response from the login API call.
widget.on('login:accountWillExpire', function(apiResponse) {});
Login Password Expired
Fired when the widget receives a “password expired” response from the login API call.
widget.on('login:passwordExpired', function(apiResponse) {});
Login Password Will Expire
Fired when the widget receives a “password will expire” response from the login API call.
widget.on('login:passwordWillExpire', function(apiResponse) {});
Login Success
Fired when the widget receives a successful response from the login API call.
widget.on('login:success', function(apiResponse) {});
Logout Init
Fired when the widget begins a logout API call.
widget.on('logout:init', function() {});
Logout Error
Fired when the widget receives an error response from the logout API call.
widget.on('logout:error', function(error) {});
Logout Success
Fired when the widget receives a successful response from the logout API call.
widget.on( 'logout:success', function(apiResponse) {});
See examples/index.html for more examples of widget use.
Project Setup
- Make sure you have Node.js or io.js installed on your machine.
- Install libsass (
brew install libsass
on a Mac with Homebrew). - Make sure Grunt.js is installed globally:
npm install -g grunt-cli
- Clone the repo:
git clone git@github.com:MRN-Code/coins-logon-widget.git
- Install the project’s dependencies with NPM:
cd
into the repo’s directory- Run
npm install
Project Tasks
This project relies on Grunt to run tasks. (See its getting started guide for basic info.) Currently, three tasks exist:
grunt
: Build the project’s un-minified styles and scriptsgrunt build
: Build the project’s minified styles and scripts, suitable for production.grunt serve
: Spin up a connect server and rebuild the styles and scripts when they change. Useful for development on the project.grunt test
: Initializes a mock api server, and fires off in-browser testing in
multiple browsers in parallel.
Changelog
- 2.0.0 single arg config, mandatory
baseUrl
and authCookieName