Twp-login-component NPM

Login Component (TWP LC)

A JS library & components that determine a user's state. It's goal is to replace TWP's login entries to house logic in a single location. This project is broken into two parts: react and vanilla components.

Entry Points

Vanilla: src/vanilla/Login/index.js and src/index.html is where the element is added to run locally.
React: src/fusion/Login/index.js and src/fusion/index.html is where the app root element is.

Running Locally

Url: http://localhost.digitalink.com:9000
Vanilla: start:vanilla:dev
React: start:fusion:dev

Integration

Vanilla
- Add dist/lib/login.min.js file into page's <head>...</head> using a script tag and add <div class="_twp_login-component"></div> to markup for component to be rendered.
- When window.TWPLC is available, call new window.TWPLC({ env: "dev", name: "acquistion" }).init() to render elements.
React
- Add <Login {...props} /> component after importing (import {Login} from 'twp-auth-component').
- LoginState is exported too, you can use import {LoginState} from 'twp-login-component' to use its' functions.
  - ex: new LoginState({ env: "dev", name: "fusion:navigationContext" })

Element options

If you are using vanilla component, use data-${option}=${value}. If use react component pass as props.

If overriding default text with data-text or text={} (React), {{displayName}} can be passed in the signedIn value. It will replaced with LoginState.getUsername return value.

Name	Values	Default	Description
display	`["button", "link"]`	`"button"`	none
text	`{ "signedIn": "Sign me out, now!", "signedOut": "Oh, let's sign you in!"}`	`{signedIn: 'Sign out', signedOut: 'Sign in'}`	This needs to be a valid JSON string if not using React, or it'll revert back to default
align	`["left", "center", "right"]`	`"left"`	none
styles	`{}`	`{}`	Override the button or a tag's default style (<button> or <a>)
nestedStyles	`{}`	`{}`	Override the innerHTML inside parent tag (<span>)
overlay	`[true, false]`	false	Display USW in overlay
callback	`Function`	undefined	Pass a callback, by default will redirect or pop-up modal