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.jsandsrc/index.htmlis where the element is added to run locally. -
React:
src/fusion/Login/index.jsandsrc/fusion/index.htmlis 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.TWPLCis available, callnew window.TWPLC({ env: "dev", name: "acquistion" }).init()to render elements.
- Add dist/lib/login.min.js file into page's
-
React
- Add <Login {...props} /> component after importing (
import {Login} from 'twp-auth-component'). -
LoginStateis exported too, you can useimport {LoginState} from 'twp-login-component'to use its' functions.ex: new LoginState({ env: "dev", name: "fusion:navigationContext" })
- Add <Login {...props} /> component after importing (
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-textortext={}(React),{{displayName}}can be passed in the signedIn value. It will replaced withLoginState.getUsernamereturn value.
| Name | Values | Default | Description |
|---|---|---|---|
| display | ["button", "link"] |
"button" |
|
| 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" |
|
| 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 |
Props (React)
| Name | Values | Default | Description |
|---|---|---|---|
| buttonClasses | "" |
"" |
Can be used as override class properties |
| textClasses | "" |
"" |
Can be used as override class properties |
Deploying
Once pushed to master branch, Jenkins will run ./scripts/pkg.sh to test, build and publish to npm repository.