Categories
Plugins

campsi-login

campsi/login
Client-side widget that implements campsi/api authentification and registration.
Features

User / Password login flow
Social and entreprise login flow
Custom and built-in themes
Follows jQuery plugins conventions

Named methods
Minimal $.fn footprint

Responsive

Demo themes

Modal.Transparent.Sunset
Modal.Flat.Carmin
Modal.Flat.Neonblue

Installation
Pre-requisites
campsi/login is a jQuery plugin, and therefore requires an instance of jQuery. You can either use an official jQuery CDN or download your own custom version, but do not use the slim version. This version strips out $.ajax(), which is required to call the authentification endpoint of the api.
Step 1 : Get the script
Using NPM
$ npm install –save campsi-login
Step 2 : Import the plugin

Like most jQuery plugins, campsi/login ships with a minified version. Just use jquery.campsi-login.min.js if you need to.
Step 3 : Configure
camspi/api returns the auth token in the query string, so we have to parse it to obtain the value. The campsi/login plugin can also use an invitation token and display the issuer and the message.
// here’s the URL to the campsi/api servervar apiUrl = ‘http://api.mysuperwebsite.com/’; $(‘#login’).CampsiLogin({    baseUrl: apiUrl + ‘/auth’}).on(‘login’, function(event, user){    console.info(‘user logged in’, user);});
Documentation
Methods

Method
Description

$div.CampsiLogin(options)
Constructor method

$div.CampsiLogin(‘show’)
Display the login widget by adding the class visible and removing the class closed to the container div

$div.CampsiLogin(‘hide’)
Display the login widget by adding the class closed and removing the class visible to the container div

$div.CampsiLogin(‘logout’)
Destroy the token in the browser’s localStorage

Constructor options

Name
Type
Required
Description

baseUrl
string
Yes
The URL of your campsi/api setup

token
string
No
force the authentification token

invitation
string
No
force the invitation token

state
string
No
which form to display by default (one of “signup”, “signin”, “reset”)

The parameters token and invitation have precedence over the query string and the local storage.
Events

Name
Description

ready
when the providers are loaded and the markup created

login
when a token is successfully decoded and the user has been authentificated

loginError
when an error happened while decoding the token or authentificating the user

The login event listener is called with an additional parameter: an object containing the user infos:
$(‘#login’).on(‘login’, function(event, user){    var whatAUserLooksLike =  {        _id: “58334d2a41015672d3b3f147”,        displayName: “Romain Bessuges-Meusy”,        picture: “https://”,        email: “romain@agilitation.fr”,        identities: {            local: {                id: “romain@agilitation.fr”,                username: “romain@agilitation.fr”            }        },        token: {            value: “9e7f91f5-9d47-403a-9604-dcb8b1d9e938”,            expiration: “2016-12-10T17:19:01.839Z”        },        isAdmin: false   };});

GitHub Repo