@namshi.com/user-auth v1.2.6
Login iframe
This app is used as a universal login/register tool that gets loaded into an iframe and exposed to other apps through a JS api and HTML data attributes.
user-auth.js is where we handle the iframe interactions and exposure. It gets compiled to a userAuth.js file that gets uploaded to our CDN and that's the file that gets used in other apps.
Please make sure that you have the latest version of the userAuth.js file. You can check the latest version from the app version described in package.json (should be updated if you update the version accordingly).
How to use
HTML attributes
to enable the login iframe by clicking on an element, you can add data-user-auth html attribute to that
element, this will automatically handle showing the login iframe on click of that element.
Api
If you have specified data-user-auth on any html element, an nmUserAuthConfig instance will be exposed on the window
object, else, an nmUserAuth class will be exposed instead.
Use the nmUserAuth class to create an object instance that you can pass configs to, this instance works the same way as the
nmUserAuthConfig does, you can pass the following configs object:
let nmUserAuthConfig = new nmUserAuth({
attachTo = '', // Element to attach the login iframe to
heading = '', // Custom heading text
centered = true, // Text alignment
disableFadeIn = false // Enable/disable the fade in animation, in case you want to add your own
});Please note that to create an instance with nmUserAuth you cannot use data-user-auth because it created an iframe instance with default settings and the settings that you pass in the nmUserAuth config won't work, so make sure you use these two exclusively.
Use the nmUserAuthConfig object to handle the login iframe from your JS, you have the following functions:
on(event, elementClassName, callback): use to trigger callbacks for the following events:
ready, loginSuccess, loginFail, registerSuccess, registerFail, passwordResetSuccess, passwordResetFail.
You can add an element class name to apply the callback for those elements only, if omitted, callbacks will be applied in all cases.
Example:
nmUserAuthConfig.on('loginSuccess', () => console.log('logged in yo!'));
OR:
nmUserAuthConfig.on('ready', 'elementA', () => console.log('login iframe is ready!'));
off(event, element, callback): same syntax as the 'on' function, specify same parameters.
bashowUserAuthModal([elementClassName]): shows the modal, pass a class name to hook that modal to the callbacks with the
same class name
hideUserAuthModal(): hides the modal
setHeading(heading): pass a string to set the modal heading
setMandatory(isMandatory): pass a boolean to set whether the userAuth modal is mandatory or not, if mandatory, the close
button will not be visible, clicking on the overlay will not close the modal and in general the modal will be visible until
user is logged in
Package & Publish
We're using rollup to create npm package to be used in the other repos, to do so, update the app version in package.json, then run
npm run bundle on the command line.
The package name is @namshi.com/user-auth.
This will generate two files and their sourcemaps:
1- build/nmUserAuth.js:
A CommonJS bundle that can be used when you import userAuth package in your JS files.
Example:
import nmUserAuth from '@namshi.com/user-auth';
const nmUserAuthConfig = new nmUserAuth();
nmUserAuthConfig.on('loginSuccess', () => console.log('Logged in successfully'));2- build/browser/nmUserAuth.js:
An IIFE bundle to be used when you want to load userAuth in your html pages directly. To load this properly, we can use the unpkg link that gets
generated after you publish. Here's the format:
https://unpkg.com/@namshi.com/user-auth@{INSERT_VERSION_NUMBER}/build/browser/nmUserAuth.jsExample:
<html>
<body>
<h1>userAuth Example</h1>
<script src="https://unpkg.com/@namshi.com/user-auth@1.2.3/build/browser/nmUserAuth.js"></script>
</body>
</html>Finally, run npm publish and make sure you're npm user is a member under the namshi organization (verify with SRE).